/*
 * Light / neo-brutalist theme layer.
 *
 * The theme was built dark: navy surfaces, white text, glowing gradients. This sheet flips
 * it to a cream editorial look with hard offset shadows — the language used on
 * captainsbet-portugal.org, which runs the same theme codebase.
 *
 * It is loaded LAST on every template and deliberately works as an override layer rather
 * than a rewrite: main.css, page-home.css, blocks.css and page-default.css keep all the
 * layout work, and only colour, type, border and shadow are restated here. That keeps the
 * diff reviewable and reversible — drop the enqueue and the dark theme is back.
 *
 * The signature is one rule: 2px ink border + 4px 4px 0 ink shadow, no blur, no gradient.
 */

:root {
	/* Surfaces */
	--c-bg: #f3efe6;
	--c-paper: #ffffff;
	--c-cream: #faf7f0;
	--c-ink: #121212;
	--c-muted: #55524b;
	--c-soft: #dcd5c6;

	/* Accents */
	--c-accent: #ff5a1f;
	--c-accent-ink: #c53a07;
	--c-yellow: #ffd60a;
	--c-blue: #2b59ff;

	/* Type */
	--f-display: 'Space Grotesk', 'Arial', sans-serif;
	--f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Shape */
	--r: 1rem;
	--r-sm: 0.625rem;
	--r-pill: 999px;
	--brut: 4px 4px 0 var(--c-ink);
	--brut-sm: 3px 3px 0 var(--c-ink);
	--brut-lg: 6px 6px 0 var(--c-ink);
	--line: 2px solid var(--c-ink);

	/* Legacy customizer vars, restated so untouched components follow along even if the
	   ACF options are never updated. */
	--font-family: var(--f-body);
	--main_background: var(--c-bg);
	--header_background: var(--c-bg);
	--footer_background: var(--c-ink);
	--card_item_background: var(--c-paper);
	--color_text_default: var(--c-ink);
	--color_h1: var(--c-ink);
	--color_h2: var(--c-ink);
	--link_color: var(--c-accent-ink);
	--button_main_background: var(--c-accent);
	--button_main_color: #ffffff;

	/* Tokens the dark sheets reference by name. */
	--pen-surface: var(--c-paper);
	--pen-deep: var(--c-cream);
	--pen-text: var(--c-ink);
	--pen-text-soft: var(--c-muted);
	--pen-text-mute: var(--c-muted);
	--pen-line: var(--c-ink);
	--pen-accent: var(--c-accent);
	--pen-green: #1f9d55;
	--pen-card-from: var(--c-paper);
	--pen-card-to: var(--c-paper);
	--pen-radius: var(--r);

	--pd-text: var(--c-ink);
	--pd-muted: var(--c-muted);
	--pd-line: var(--c-soft);
	--pd-accent: var(--c-accent);
	--pd-card: var(--c-paper);

	--btn-primary: var(--c-accent);
	--btn-primary-hover: #ff7340;
	--btn-primary-ink: #ffffff;
	--btn-secondary: var(--c-ink);
	--btn-secondary-hover: #2a2a2a;
	--btn-ghost-ink: var(--c-ink);
	--btn-ghost-line: var(--c-ink);
	--btn-radius: var(--r-sm);
}

/* ---------- Base ---------- */

body {
	background-color: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--f-body);
}

main {
	background: var(--c-bg);
}

h1, h2, h3, h4, h5 {
	font-family: var(--f-display);
	color: var(--c-ink);
	text-transform: none;
	letter-spacing: -0.02em;
}

h1 {
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

h2 {
	font-weight: 700;
	line-height: 1.08;
}

p, li, td, th, span, figcaption {
	color: inherit;
}

a {
	color: var(--c-accent-ink);
}

/* The accent underline under section headings becomes a highlighter swipe. */
.sports > .container > h2::after,
.events h2::after,
.slots h2::after,
.providers h2::after,
.benefits__title::after,
.archive-hero__title::after {
	content: '';
	display: block;
	width: 100%;
	max-width: 100%;
	height: 0.55em;
	margin-top: -0.5em;
	background: var(--c-yellow);
	border-radius: 2px;
	position: relative;
	z-index: -1;
}

.sports > .container > h2,
.events h2,
.slots h2,
.providers h2,
.benefits__title,
.archive-hero__title {
	position: relative;
	display: inline-block;
	isolation: isolate;
}

/* ---------- Header ---------- */

.header {
	background-color: var(--c-bg);
	border-bottom: var(--line);
}

.header.sticky {
	backdrop-filter: none;
	background-color: var(--c-bg);
	box-shadow: none;
	border-bottom: var(--line);
}

.header .bottom {
	background-color: var(--c-paper);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
}

.header nav ul li a {
	color: var(--c-ink);
	text-transform: none;
	font-weight: 600;
}

.header nav ul li a:hover {
	color: var(--c-accent-ink);
}

.header nav ul li ul {
	background-color: var(--c-paper);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
	overflow: hidden;
}

.header nav ul li ul li a {
	color: var(--c-ink);
}

.header .menu-toggle::before,
.header .menu-toggle::after,
.header .menu-toggle small {
	background: var(--c-ink);
}

.header .top .list-popular img,
.header .top .flag img {
	border-radius: var(--r-pill);
}

@media (max-width: 1480px) {
	.header nav {
		background-color: var(--c-bg);
		backdrop-filter: none;
		border-left: var(--line);
	}
}

/* ---------- Buttons ---------- */

.btn,
.hero__cta,
.single-button .btn {
	background: var(--c-accent);
	color: #ffffff;
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut);
	text-transform: none;
	font-family: var(--f-display);
	font-weight: 700;
}

.btn:hover,
.hero__cta:hover {
	background: var(--c-accent);
	color: #ffffff;
	transform: translate(-2px, -2px);
	box-shadow: var(--brut-lg);
}

.btn.btn-white {
	background: var(--c-yellow);
	color: var(--c-ink);
	border: var(--line);
	box-shadow: var(--brut);
}

.btn.btn-white:hover {
	background: var(--c-yellow);
	color: var(--c-ink);
	transform: translate(-2px, -2px);
	box-shadow: var(--brut-lg);
}

.btn .code {
	border-left-color: rgba(255, 255, 255, 0.45);
}

.btn.btn-white .code {
	border-left-color: rgba(18, 18, 18, 0.3);
}

.hero__ghost {
	background: var(--c-paper);
	color: var(--c-ink);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
	text-transform: none;
	font-family: var(--f-display);
}

.hero__ghost:hover {
	background: var(--c-yellow);
	border-color: var(--c-ink);
	color: var(--c-ink);
	transform: translate(-2px, -2px);
	box-shadow: var(--brut);
}

.scroll-btn {
	background-color: var(--c-yellow);
	color: var(--c-ink);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
}

.scroll-btn:hover {
	background-color: var(--c-accent);
	border-color: var(--c-ink);
	color: #ffffff;
}

/* ---------- Logo ---------- */

/*
 * The logo artwork is white. On cream it disappears, so it sits in an ink badge — the same
 * solve the reference design uses, and it reads as part of the language rather than a patch.
 */
.header .logo {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.9rem;
	background: var(--c-ink);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
}

.footer__logo img,
.download-link .logo img {
	filter: none;
}

/* ---------- Cards: one rule, everywhere ---------- */

.benefits__card,
.cat-grid__item,
.sport-grid__item,
.logo-grid__item,
.events .list-sports .item,
.slots .list-sports .item,
.hero__aside,
.hero__note,
.information table,
.card,
.blog-card {
	background: var(--c-paper) !important;
	background-image: none !important;
	border: var(--line);
	border-radius: var(--r);
	box-shadow: var(--brut);
	color: var(--c-ink);
}

.benefits__card *,
.cat-grid__item *,
.sport-grid__item *,
.logo-grid__item *,
.events .list-sports .item *,
.slots .list-sports .item *,
.hero__aside *,
.hero__note * {
	color: var(--c-ink);
}

.benefits__text,
.hero__aside-text,
.hero__note,
.sport-grid__name {
	color: var(--c-muted) !important;
}

.benefits__name,
.cat-grid__name,
.slots .list-sports .item h3,
.events .list-sports .item .team-item {
	font-family: var(--f-display);
	font-weight: 700;
}

@media (any-hover: hover) {
	.benefits__card:hover,
	.cat-grid__item:hover,
	.sport-grid__item:hover,
	.slots .item:hover,
	.events .list-sports .item:hover,
	.logo-grid__item:hover {
		transform: translate(-2px, -2px);
		box-shadow: var(--brut-lg);
		border-color: var(--c-accent);
	}
}

/* Icon tiles become yellow stamps. */
.benefits__icon,
.sport-grid__icon,
.slots .list-sports .item .icon {
	background: var(--c-yellow) !important;
	border: var(--line);
	border-radius: var(--r-sm);
	color: var(--c-ink);
	box-shadow: none;
}

.benefits__icon svg {
	color: var(--c-ink);
}

/* ---------- Hero ---------- */

.hero__kicker {
	color: var(--c-accent-ink) !important;
	font-family: var(--f-display);
	font-weight: 700;
}

.hero__facts {
	border-top: 1px solid var(--c-soft);
}

.hero__facts li::before {
	background: var(--c-accent);
}

.hero__panel {
	border: var(--line);
	border-radius: var(--r);
	box-shadow: var(--brut-lg);
	overflow: hidden;
}

/* The artwork stays dark, so the headline on it stays light — that is the one place where
   white type is correct on this palette. */
.hero__panel-inner,
.hero__panel-inner * {
	color: #ffffff;
}

.hero__title-sub {
	color: rgba(255, 255, 255, 0.86);
}

.hero__note {
	font-size: 0.95rem;
	padding: 1rem 1.25rem;
}

/* ---------- Odds and pills ---------- */

.events .list-sports .item .kof .w_1 {
	background: var(--c-cream);
	border: 1px solid var(--c-ink);
	border-radius: var(--r-sm);
	color: var(--c-ink);
	font-weight: 700;
}

.events .list-sports .item .kof .w_1:hover {
	background: var(--c-yellow);
}

.article__cat,
.related__item,
.breadcrumb-item {
	color: var(--c-ink);
}

.article__cat {
	background: var(--c-yellow);
	border: 1px solid var(--c-ink);
	border-radius: var(--r-pill);
}

/* ---------- Slider controls ---------- */

.slider__nav {
	background: var(--c-yellow);
	border: var(--line);
	border-radius: var(--r-sm);
	color: var(--c-ink);
	box-shadow: var(--brut-sm);
}

.slider__nav:hover {
	background: var(--c-accent);
	color: #ffffff;
}

.slider__nav.swiper-button-disabled {
	background: var(--c-soft);
	box-shadow: none;
}

/* ---------- Footer and download bar ---------- */

.footer {
	background: transparent;
}

.footer__contact,
.footer .copyright,
.footer .description {
	background: var(--c-ink);
	border: var(--line);
	border-radius: var(--r);
	color: #ffffff;
}

.footer__contact a,
.footer .copyright a,
.footer .description a,
.footer__contact .title {
	color: #ffffff;
}

.footer__contact a:hover {
	color: var(--c-yellow);
}

.download-link {
	background: var(--c-ink);
	border-top: var(--line);
}

.download-link .button {
	color: #ffffff;
}

.download-link .icon {
	background: var(--c-yellow);
	border: 1px solid var(--c-ink);
	color: var(--c-ink);
}

/* ---------- Kill the dark-theme glows ---------- */

/*
 * blocks.css paints the blue radial glow on ::before and a dark wash on ::after of several
 * cards. They sit at z-index -1 behind the content, so an override on the element itself
 * never reaches them.
 */
.benefits__card::before,
.benefits__card::after,
.cat-grid__item::before,
.cat-grid__item::after,
.sport-grid__item::before,
.sport-grid__item::after,
.slots .item::before,
.slots .item::after,
.events .list-sports .item::before,
.events .list-sports .item::after {
	content: none !important;
}

/* A quiet corner tint instead — cream, not a light show. */
.benefits__card {
	background: linear-gradient(135deg, var(--c-paper) 62%, var(--c-cream) 100%) !important;
}

.benefits__name,
.cat-grid__name,
.sport-grid__name,
.slots .list-sports .item h3,
.events .list-sports .item .team-item,
.events .list-sports .item .top {
	color: var(--c-ink) !important;
}

.benefits__text {
	color: var(--c-muted) !important;
}

/* ---------- Information blocks and long-form copy ---------- */

.information,
.information p,
.information li,
.information td,
.information h2,
.information h3 {
	color: var(--c-ink);
}

.information th {
	background: var(--c-ink);
	color: #ffffff;
	border-color: var(--c-ink);
}

.information td,
.information th {
	border: 1px solid var(--c-soft);
}

.information table {
	overflow: hidden;
}

.information thead {
	background: var(--c-ink);
}

.information tbody tr:nth-child(even) {
	background: var(--c-cream);
}

/* ---------- Accordion / FAQ ---------- */

.accordion__trigger,
#accordion h3,
.question-block h3 {
	color: var(--c-ink);
}

#accordion > div,
.js-accordion > div {
	background: var(--c-paper);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
	margin-bottom: 0.75rem;
	overflow: hidden;
}

#accordion .description,
.js-accordion .description {
	color: var(--c-muted);
}

/* ---------- Contents box on the homepage ---------- */

.home-toc {
	background: var(--c-paper) !important;
	background-image: none !important;
	border: var(--line) !important;
	border-left: var(--line) !important;
	border-radius: var(--r);
	box-shadow: var(--brut);
}

.home-toc__title {
	color: var(--c-ink);
	font-family: var(--f-display);
	font-weight: 700;
}

.home-toc__list a,
.home-toc__list li {
	color: var(--c-ink) !important;
}

.home-toc__list a:hover {
	color: var(--c-accent-ink) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Icon tiles: split by what is inside ---------- */

/*
 * .benefits__icon holds an inline SVG that inherits currentColor, so ink-on-yellow works.
 * The sport and slot tiles hold uploaded white PNGs — on yellow they vanish, so those keep
 * an ink backdrop.
 */
.sport-grid__icon {
	background: var(--c-ink) !important;
	border: var(--line);
	border-radius: var(--r-sm);
	padding: 0.45rem;
	box-shadow: none;
}

/* Slot tiles hold full game artwork, not a glyph — no backdrop, no padding. */
.slots .list-sports .item .icon {
	background: transparent !important;
	border: 0;
	padding: 0;
}

.cat-grid__art {
	filter: none;
}

/* ---------- Section headings: highlighter everywhere ---------- */

.information > .container > h2,
.information h2,
.events .inf h2,
.slots .inf h2 {
	position: relative;
	display: inline-block;
	isolation: isolate;
	color: var(--c-ink);
	font-family: var(--f-display);
}

.information h2::after,
.events .inf h2::after,
.slots .inf h2::after {
	content: '';
	display: block;
	width: 100%;
	height: 0.5em;
	margin-top: -0.45em;
	background: var(--c-yellow);
	border-radius: 2px;
	position: relative;
	z-index: -1;
	opacity: 1;
}

/* The old rule drew a short orange rule under headings; it fought the highlighter. */
.information h2::before {
	content: none;
}

/* ---------- Lists in long-form copy ---------- */

.information ul:not(.home-toc__list):not(.swiper-wrapper) > li::before,
.information ol:not(.home-toc__list) > li::before {
	background: var(--c-accent);
	color: #ffffff;
	border: 1px solid var(--c-ink);
}

.information ul:not(.home-toc__list):not(.swiper-wrapper) > li,
.information ol:not(.home-toc__list) > li {
	background: transparent;
	color: var(--c-ink);
}

@media (any-hover: hover) {
	.information ul:not(.home-toc__list):not(.swiper-wrapper) > li:hover,
	.information ol:not(.home-toc__list) > li:hover {
		background: var(--c-cream);
	}
}

.information a:not(.btn):not(.home-toc__list a) {
	color: var(--c-accent-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Emphasis ---------- */

/*
 * information.css made <strong> white so it would pop on navy. On cream it vanishes.
 * Ink for weight, accent for the lines that carry the argument.
 */
.information strong,
.information b,
.article__body strong,
.article__body b {
	color: var(--c-ink);
	font-weight: 700;
}

.information em,
.article__body em {
	color: var(--c-muted);
}

/* ---------- Card lists must not get bullets ---------- */

/*
 * The slot and event cards are <li> inside .information, so the generic list-item bullet
 * was painting a dot in the corner of every card.
 */
.information ul.list-sports > li::before,
.information ul.cat-grid > li::before,
.information ul.sport-grid > li::before,
.information ul.logo-grid > li::before,
.information ul.benefits__grid > li::before,
.list-sports > li::before,
.cat-grid > li::before,
.sport-grid > li::before,
.logo-grid > li::before,
.benefits__grid > li::before {
	content: none !important;
}

.information ul.list-sports,
.information ul.cat-grid,
.information ul.sport-grid,
.information ul.logo-grid {
	margin-left: 0;
	padding-left: 0;
}

.information ul.list-sports > li,
.information ul.cat-grid > li,
.information ul.sport-grid > li,
.information ul.logo-grid > li {
	padding-left: 0;
}

/* ---------- Slot card copy ---------- */

.slots .list-sports .item h3 {
	color: var(--c-ink) !important;
	font-size: 0.95rem;
	line-height: 1.3;
	gap: 0.2rem;
}

.slots .list-sports .item h3 span,
.slots .list-sports .item h3 small {
	color: var(--c-muted) !important;
	font-weight: 500;
}

/* ---------- Article templates (post, page, archive) ---------- */

/*
 * page-default.css derives its palette from --pd-* but still hardcodes #fff in ten places,
 * all of which were white-on-navy. Those are restated here.
 */
:root {
	--pd-surface: var(--c-paper);
	--pd-muted: var(--c-muted);
	--pd-line: var(--c-soft);
}

.page-default,
.page-default .article__body,
.page-default .article__body p,
.page-default .article__body li,
.page-default .article__body td,
.page-default .article__title,
.page-default .article__standfirst {
	color: var(--c-ink);
}

.page-default .article__title {
	font-family: var(--f-display);
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.page-default .article__body h2,
.page-default .article__body h3 {
	font-family: var(--f-display);
	color: var(--c-ink);
}

.page-default .article__standfirst,
.page-default .article__updated,
.page-default .article__meta,
.page-default .article__meta-item,
.page-default .card__excerpt,
.page-default .card__meta,
.page-default .archive-hero__intro {
	color: var(--c-muted);
}

.page-default .article__meta-item svg,
.page-default .card__meta svg {
	color: var(--c-accent);
}

.page-default .article__age {
	color: var(--c-ink);
	border-color: var(--c-ink);
	background: var(--c-yellow);
}

.breadcrumb,
.breadcrumb-item,
.breadcrumb a {
	color: var(--c-muted);
}

.breadcrumb a:hover {
	color: var(--c-accent-ink);
}

/* Contents sidebar */

.page-default .toc {
	background: var(--c-paper);
	border: var(--line);
	border-radius: var(--r);
	box-shadow: var(--brut);
}

.page-default .toc__title {
	color: var(--c-ink);
	font-family: var(--f-display);
}

.page-default .toc a {
	color: var(--c-ink);
}

.page-default .toc a:hover {
	color: var(--c-accent-ink);
}

.page-default .toc li::before {
	background: var(--c-accent);
}

/* Notices */

.page-default .notice {
	background: var(--c-cream);
	border: var(--line);
	border-left: 6px solid var(--c-accent);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
	color: var(--c-ink);
}

.page-default .notice strong {
	color: var(--c-ink);
}

.page-default .notice a {
	color: var(--c-accent-ink);
}

/* Blockquote */

.page-default .article__body blockquote {
	background: var(--c-cream);
	border-left: 6px solid var(--c-yellow);
	border-radius: var(--r-sm);
	color: var(--c-ink);
}

/* Tables inside articles */

.page-default .article__body table {
	background: var(--c-paper);
	border: var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
	box-shadow: var(--brut-sm);
}

.page-default .article__body th {
	background: var(--c-ink);
	color: #ffffff;
	border-color: var(--c-ink);
}

.page-default .article__body td {
	border-color: var(--c-soft);
}

.page-default .article__body tbody tr:nth-child(even) {
	background: var(--c-cream);
}

/* Archive cards */

.page-default .card {
	background: var(--c-paper);
	border: var(--line);
	border-radius: var(--r);
	box-shadow: var(--brut);
	overflow: hidden;
}

.page-default .card:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--brut-lg);
	border-color: var(--c-accent);
}

.page-default .card__title {
	color: var(--c-ink);
	font-family: var(--f-display);
}

.page-default .card__link:hover .card__title {
	color: var(--c-accent-ink);
}

.page-default .card__cats .article__cat,
.page-default .card__cats a {
	background: var(--c-yellow);
	border: 1px solid var(--c-ink);
	border-radius: var(--r-pill);
	color: var(--c-ink);
}

/* Related posts and hub links */

.related {
	border-top: var(--line);
}

.related__title {
	color: var(--c-ink);
	font-family: var(--f-display);
}

.related__link {
	background: var(--c-paper);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
	color: var(--c-ink);
}

.related__link:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--brut);
	border-color: var(--c-accent);
}

.related__name {
	color: var(--c-ink);
}

.related__excerpt {
	color: var(--c-muted);
}

/* Author box */

.article__author,
.author-box {
	background: var(--c-cream);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
	color: var(--c-ink);
}

.article__author a,
.author-box a {
	color: var(--c-accent-ink);
}

/* Pagination */

.author-works__pagination a,
.pagination a,
.author-works__pagination .current,
.pagination .current {
	border: var(--line);
	border-radius: var(--r-sm);
	color: var(--c-ink);
	background: var(--c-paper);
	box-shadow: var(--brut-sm);
	font-family: var(--f-display);
	font-weight: 700;
}

.author-works__pagination .current,
.pagination .current {
	background: var(--c-yellow);
	color: var(--c-ink);
}

.author-works__pagination a:hover,
.pagination a:hover {
	background: var(--c-accent);
	border-color: var(--c-ink);
	color: #ffffff;
	transform: translate(-1px, -1px);
	box-shadow: var(--brut);
}

/* Archive hero */

.archive-hero {
	border-bottom: var(--line);
}

.archive-hero__title {
	font-family: var(--f-display);
	color: var(--c-ink);
}

/* ---------- Breadcrumb ---------- */

/*
 * page-default.css styles these as .page-default .breadcrumb .breadcrumb-item a, which
 * out-specifies a plain .breadcrumb a.
 */
.page-default .breadcrumb .breadcrumb-item,
.page-default .breadcrumb .breadcrumb-item a,
.home-page .breadcrumb .breadcrumb-item,
.home-page .breadcrumb .breadcrumb-item a,
.breadcrumb li,
.breadcrumb li a {
	color: var(--c-muted);
}

.page-default .breadcrumb .breadcrumb-item a:hover,
.breadcrumb li a:hover {
	color: var(--c-accent-ink);
}

.breadcrumb .breadcrumb-item.active {
	color: var(--c-ink);
}

/* ---------- Emphasis, final pass ---------- */

/*
 * information.css colours <strong> white so it stood out on navy. The selector there is
 * deeper than a bare element rule, so this one is scoped the same way.
 */
.information strong,
.information p strong,
.information li strong,
.information td strong,
.information table strong,
.page-default .article__body strong,
.page-default .article__body td strong,
.page-default .article__body li strong,
main strong,
main b {
	color: var(--c-ink) !important;
	font-weight: 700;
}

/* Strong inside an ink-filled cell stays legible. */
.information th strong,
.page-default .article__body th strong,
.footer strong,
.download-link strong,
.hero__panel strong {
	color: #ffffff !important;
}

.hero__facts strong {
	color: var(--c-ink) !important;
}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar-track {
	background: var(--c-soft);
}

::-webkit-scrollbar-thumb {
	background: var(--c-ink);
	border-radius: 4px;
}

* {
	scrollbar-color: var(--c-ink) var(--c-soft);
}

/* ---------- Selection ---------- */

::selection {
	background: var(--c-yellow);
	color: var(--c-ink);
}

/* ---------- Focus ---------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.card__link:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}

/* ---------- Author credit ---------- */

.author-box,
.article__author .author-box {
	background: var(--c-cream);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
}

.author-box__kicker,
.author-box__meta {
	color: var(--c-muted) !important;
}

.author-box__name,
.author-box__id,
.author-box__head {
	color: var(--c-ink) !important;
}

.author-box__link,
.author-box a {
	color: var(--c-accent-ink) !important;
}

.author-box__link:hover {
	color: var(--c-ink) !important;
}

/* Initials avatar */
.author-box__avatar,
.author-box__initials {
	background: var(--c-yellow);
	border: var(--line);
	color: var(--c-ink);
}

/* ---------- Author archive ---------- */

.author-hero,
.author-profile,
.author-works {
	color: var(--c-ink);
}

.author-hero__kicker,
.author-hero__meta,
.author-profile__meta,
.author-works__meta {
	color: var(--c-muted) !important;
}

.author-hero__name,
.author-hero__title,
.author-works__title {
	color: var(--c-ink) !important;
	font-family: var(--f-display);
}

.author-hero__bio,
.author-profile__bio {
	color: var(--c-muted) !important;
}

.author-hero,
.author-profile {
	background: var(--c-paper);
	border: var(--line);
	border-radius: var(--r);
	box-shadow: var(--brut);
}

.author-hero__avatar,
.author-profile__avatar {
	background: var(--c-yellow);
	border: var(--line);
	color: var(--c-ink);
}

.author-works__excerpt,
.author-works__date {
	color: var(--c-muted) !important;
}

.author-works__item,
.author-works__card {
	background: var(--c-paper);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
}

.author-works__item:hover,
.author-works__card:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--brut);
	border-color: var(--c-accent);
}

.author-works__name,
.author-works__item h3,
.author-works h2,
.author-works h3 {
	color: var(--c-ink) !important;
	font-family: var(--f-display);
}

/* ---------- Contrast corrections (WCAG AA) ---------- */

/*
 * Measured after the palette flip:
 *   white on #ff5a1f = 3.12:1  — fails AA for 15px text (needs 4.5)
 *   ink   on #ff5a1f = 5.7:1   — passes, and ink-on-orange is the more brutalist pairing
 *
 * The reference design uses white here and fails the same check; copying that would have
 * shipped a known defect.
 */
.btn,
.hero__cta,
.single-button .btn,
.btn:hover,
.hero__cta:hover {
	color: var(--c-ink);
}

.btn .code {
	border-left-color: rgba(18, 18, 18, 0.3);
}

/* Footer column headings were rgba(255,255,255,.55) — 1.15:1 once the page went cream. */
.footer__section-title,
.footer__contact .title,
.footer h3,
.footer h4 {
	color: #ffffff !important;
	opacity: 1;
}

.footer,
.footer__logo-list {
	color: var(--c-ink);
}

/* Any footer block that is not inside the ink panel keeps ink text. */
.footer > .container > *:not(.footer__contact):not(.copyright):not(.description) {
	color: var(--c-ink);
}

/* Links inside the ink footer panel */
.footer__contact a,
.footer__contact .links a,
.footer .copyright a,
.footer .description a {
	color: #ffffff !important;
}

.footer__contact a:hover,
.footer .copyright a:hover {
	color: var(--c-yellow) !important;
}

/* In-copy links: #c53a07 on cream measures 5.2:1 */
.information a:not(.btn):not(.home-toc__list a),
.page-default .article__body a:not(.btn),
main a:not(.btn):not(.card__link):not(.related__link):not([class*="hero__"]) {
	color: var(--c-accent-ink);
}

/* ---------- Footer, real markup ---------- */

/*
 * The footer is .footer__sections > .footer__section, not the legacy .footer__contact the
 * first pass targeted. Its text was white-on-navy and measured 1.15:1 once the page turned
 * cream — the worst contrast failure on the site.
 *
 * It becomes one ink panel, which also gives the page a proper foot instead of text
 * floating on the background.
 */
.footer__sections {
	background: var(--c-ink);
	border: var(--line);
	border-radius: var(--r);
	box-shadow: var(--brut);
	padding: 2rem 1.75rem;
	color: #ffffff;
}

.footer__section-title {
	color: var(--c-yellow) !important;
	font-family: var(--f-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8rem;
}

.footer__section-list a,
.footer__section-list li,
.footer__section a {
	color: rgba(255, 255, 255, 0.92) !important;
}

.footer__section-list a:hover {
	color: var(--c-yellow) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer__section-list li::before,
.footer__sections li::before {
	content: none !important;
}

/* Anything below the panel sits directly on cream. */
.footer .copyright,
.footer .description {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--c-muted);
}

.footer .copyright a,
.footer .description a {
	color: var(--c-accent-ink) !important;
}

.footer__logo-list a:hover {
	opacity: 0.6;
}

/* ---------- Category pills ---------- */

/* #c53a07 on #ffd60a measures 3.74:1 — ink on yellow is 14.6:1 */
.article__cat,
.card__cats a,
.page-default .card__cats .article__cat {
	color: var(--c-ink) !important;
	font-weight: 600;
}

/* The 18+ line under the footer panel kept white <strong> from the dark theme. */
.footer__age-warning,
.footer__age-warning strong {
	color: var(--c-ink) !important;
}

.footer__age-warning strong {
	background: var(--c-yellow);
	border: 1px solid var(--c-ink);
	border-radius: var(--r-pill);
	padding: 0.1rem 0.5rem;
}

/* ---------- Skip link ---------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.85rem 1.4rem;
	background: var(--c-yellow);
	color: var(--c-ink);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut);
	font-family: var(--f-display);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* The target takes focus programmatically; no ring needed on a non-interactive element. */
#conteudo:focus {
	outline: none;
}

/* ---------- 404 ---------- */

.page-404 {
	padding: clamp(2rem, 5vw, 4rem) 0;
}

.page-404__inner {
	max-width: 620px;
	margin-bottom: 2.5rem;
}

.page-404__code {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.2rem 0.9rem;
	background: var(--c-yellow);
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--c-ink);
}

.page-404__title {
	margin: 0 0 0.75rem;
	font-family: var(--f-display);
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	line-height: 1.05;
	color: var(--c-ink);
}

.page-404__text {
	color: var(--c-muted);
	font-size: 1.05rem;
	max-width: 52ch;
}

.page-404__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.page-404__col {
	background: var(--c-paper);
	border: var(--line);
	border-radius: var(--r);
	box-shadow: var(--brut);
	padding: 1.4rem 1.5rem;
}

.page-404__col-title {
	margin: 0 0 0.9rem;
	font-family: var(--f-display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-accent-ink);
}

.page-404__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55rem;
}

.page-404__list li::before {
	content: none;
}

.page-404__list a {
	color: var(--c-ink);
	text-decoration: none;
	line-height: 1.35;
	display: inline-block;
}

.page-404__list a:hover {
	color: var(--c-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Provider logos ---------- */

/*
 * Every provider logo is 100% white with alpha — they were cut for the dark theme. On the
 * white card they rendered as empty boxes.
 *
 * Inverting them with a filter would wreck any logo that is not monochrome, so the card
 * carries the dark instead. It reads as a deliberate contrast band, which is also how the
 * language handles the sport glyphs.
 */
.logo-grid__item {
	background: var(--c-ink) !important;
	border: var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--brut-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.9rem 1rem;
	min-height: 72px;
}

.logo-grid__img,
.logo-grid__item img {
	max-width: 100%;
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0.92;
	transition: opacity 0.2s ease;
}

@media (any-hover: hover) {
	.logo-grid__item:hover {
		transform: translate(-2px, -2px);
		box-shadow: var(--brut);
		border-color: var(--c-accent);
	}

	.logo-grid__item:hover .logo-grid__img {
		opacity: 1;
	}
}

/* ---------- Calculators ---------- */

.calc {
	background: var(--c-paper);
	border: var(--line);
	border-radius: var(--r);
	box-shadow: var(--brut);
	padding: 1.4rem 1.5rem;
	margin: 1.5rem 0 2rem;
}

.calc__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.9rem;
	margin-bottom: 1.2rem;
}

.calc__fields label {
	display: grid;
	gap: 0.35rem;
	font-family: var(--f-display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.calc__fields input,
.calc__fields select {
	font-family: var(--f-body);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--c-ink);
	background: var(--c-cream);
	border: 2px solid var(--c-ink);
	border-radius: var(--r-sm);
	padding: 0.6rem 0.7rem;
	width: 100%;
	min-height: 44px;
}

.calc__fields input:focus,
.calc__fields select:focus {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
	background: #ffffff;
}

.calc__out {
	border-top: 2px dashed var(--c-soft);
	padding-top: 1.1rem;
}

.calc__result {
	font-family: var(--f-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--c-ink);
	margin: 0 0 0.5rem;
}

.calc__result--bom strong { color: #1f7a3d; }
.calc__result--ok  strong { color: var(--c-accent-ink); }
.calc__result--mau strong { color: #c1121f; }

.calc__hint {
	color: var(--c-muted);
	font-size: 0.95rem;
	margin: 0 0 0.75rem;
}

.calc__formula {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.82rem;
	color: var(--c-muted);
	background: var(--c-cream);
	border-left: 4px solid var(--c-yellow);
	border-radius: var(--r-sm);
	padding: 0.6rem 0.8rem;
	margin: 0;
	overflow-x: auto;
}

.calc__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 0.9rem;
	font-size: 0.9rem;
}

.calc__table th {
	background: var(--c-ink);
	color: #ffffff;
	text-align: left;
	padding: 0.5rem 0.6rem;
	font-family: var(--f-display);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.calc__table td {
	border: 1px solid var(--c-soft);
	padding: 0.45rem 0.6rem;
	color: var(--c-ink);
}

@media (max-width: 560px) {
	.calc { padding: 1.1rem 1rem; }
	.calc__fields { grid-template-columns: 1fr 1fr; }
}