/*
Theme Name: GAMTHEME
Description: GAMTHEME block theme — active WordPress block theme (theme.json + block templates) for this site, forked from this repo's "jotheme" theme.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: gamtheme
*/

/* Mobile-first overflow guard: with real page/menu content (long titles,
   emoji, a 15-item nav) it's easy for one element to force page-wide
   horizontal scroll on narrow viewports. Belt-and-suspenders regardless of
   the specific culprit. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
p {
	overflow-wrap: break-word;
}

/* Motion & hover polish */
a,
.wp-element-button,
.wp-block-button__link,
.btn,
.nav-link {
	transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 150ms ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.btn:hover,
.btn:focus-visible {
	transform: translateY(-1px);
}

/* Double-ring focus indicator: background colors across this palette range
   from very light (cloud/sand) to very dark (espresso), so no single ring
   color clears 3:1 (WCAG 1.4.11) everywhere — pairing a light and a dark
   ring means one of the two always contrasts against what's behind it. */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--espresso);
	border-radius: 4px;
}

/* Bootstrap button color variants, theme.json-driven (single source of
   truth stays theme.json — these read its generated CSS custom properties
   instead of hardcoding hex a second time). */
.btn-terracotta {
	background-color: var(--wp--preset--color--cocoa);
	border-color: var(--wp--preset--color--cocoa);
	color: var(--wp--preset--color--cloud);
}

.btn-terracotta:hover,
.btn-terracotta:focus-visible {
	background-color: var(--wp--preset--color--espresso);
	border-color: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--cloud);
	box-shadow: 0 4px 14px rgba(38, 25, 20, 0.35);
}

.btn-gold {
	background-color: var(--wp--preset--color--terracotta);
	border-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--espresso);
}

.btn-gold:hover,
.btn-gold:focus-visible {
	background-color: var(--wp--preset--color--cocoa);
	border-color: var(--wp--preset--color--cocoa);
	color: var(--wp--preset--color--cloud);
	box-shadow: 0 4px 14px rgba(115, 77, 63, 0.35);
}

.btn-outline-terracotta {
	background-color: transparent;
	border-color: var(--wp--preset--color--cocoa);
	color: var(--wp--preset--color--cocoa);
}

.btn-outline-terracotta:hover,
.btn-outline-terracotta:focus-visible {
	background-color: var(--wp--preset--color--cocoa);
	color: var(--wp--preset--color--cloud);
}

/* ==========================================================================
   Site navigation (patterns/bootstrap-nav.php, Gamtheme_Bootstrap_Nav_Walker
   in functions.php, assets/js/nav.js). Mobile-first, dependency-free (no
   Bootstrap JS). One DOM tree; MOBILE_BREAKPOINT below must match
   assets/js/nav.js's `MOBILE_BREAKPOINT`. All colors are
   `var(--wp--preset--color--*)` reads of theme.json's palette — change the
   look by editing the palette in Site Editor → Styles, not by editing hex
   values here.
   ========================================================================== */

.gam-nav {
	/* `z-index` here (not just `position: relative`) is deliberate: without
	   it, `.gam-nav` doesn't establish its own stacking context, so its
	   descendants' z-index values (e.g. `.gam-panel`'s 20) only compete
	   within whatever ancestor stacking context they end up promoted into —
	   in practice this let page content after the header (e.g. the hero
	   section) paint *over* an open dropdown despite its z-index, since
	   `.gam-nav` and that content were DOM-order-adjacent siblings in the
	   same implicit context rather than the nav being a self-contained
	   layer (confirmed with a real Chromium screenshot, not just
	   inspecting computed styles — real bug fixed 2026-07-28). Explicitly
	   scoping a stacking context to the whole header guarantees everything
	   inside it, including open panels, paints as one layer above the rest
	   of the page regardless of DOM order elsewhere. */
	position: relative;
	z-index: 100;
	background-color: var(--wp--preset--color--cloud);
	box-shadow: 0 2px 10px rgba(38, 25, 20, 0.08);
}

/* Deliberately its own gutter/max-width, not Bootstrap's `.container` (which
   this used to carry as a second class): `.container` caps out at 1320px
   from the 1400px breakpoint upward and never grows past that regardless of
   screen size, while also stepping down in fairly small increments below it
   (960px just under 1200px, e.g.) — on a header row with 5 nav items + a CTA
   button, that plateau reliably left ~75-180px too little room for them to
   fit on one line at EVERY real desktop width tested (1024-1920px), forcing
   the CTA to wrap onto its own row (real bug, confirmed with Playwright
   2026-07-28: reproduced at every width from 1024 to 1920px, not just a
   narrow-viewport edge case). `max-width` here is generous enough that it
   only kicks in on very wide monitors, well past where content needs it. */
.gam-nav-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
	position: relative;
}

.gam-nav-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	text-decoration: none;
}

.gam-nav-brand img {
	height: 40px;
	width: auto;
}

/* Wordmark next to the logo mark (patterns/bootstrap-nav.php: wp:site-title
   + wp:site-tagline) — two-line layout echoing the old combined logo+
   wordmark SVG's look (bold name, smaller accent-colored location line
   underneath), now as real backend-editable text instead of pixels baked
   into the image. */
.gam-nav-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.gam-nav-brand-text .wp-block-site-title,
.gam-nav-brand-text .wp-block-site-title a {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--espresso);
	text-decoration: none;
}

.gam-nav-brand-text .wp-block-site-tagline {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cocoa);
}

/* Hamburger — 44px touch target, animates into an X while the mobile panel
   is open (aria-expanded is the single source of truth for that state). */
.gam-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	cursor: pointer;
	flex: none;
}

.gam-nav-toggle-bars {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.gam-nav-toggle-bars span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--espresso);
	transition: transform 200ms ease, opacity 200ms ease;
}

.gam-nav-toggle[aria-expanded="true"] .gam-nav-toggle-bars span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.gam-nav-toggle[aria-expanded="true"] .gam-nav-toggle-bars span:nth-child(2) {
	opacity: 0;
}

.gam-nav-toggle[aria-expanded="true"] .gam-nav-toggle-bars span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Backdrop behind the mobile off-canvas panel. */
.gam-nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background-color: rgba(38, 25, 20, 0.45);
}

body.gam-nav-open {
	overflow: hidden;
}

/* ---- Mobile off-canvas panel + drill-down (default / < 1024px) -------- */

.gam-nav-list-wrap {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 1001;
	width: min(92vw, 420px);
	background-color: var(--wp--preset--color--cloud);
	transform: translateX(100%);
	transition: transform 280ms ease;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}

.gam-nav-list-wrap.is-open {
	transform: translateX(0);
}

.gam-nav-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(38, 25, 20, 0.1);
	flex: none;
}

.gam-nav-list-title {
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--wp--preset--color--espresso);
}

.gam-nav-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--espresso);
	cursor: pointer;
}

.gam-nav-close svg {
	width: 22px;
	height: 22px;
}

.gam-nav-items {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

/* Deliberately NOT `position: relative` here (or on .gam-mega-column below):
   each row is a flex container so its own label + chevron lay out
   side-by-side without needing absolute positioning — which leaves both
   free of `position`, so their `.gam-panel` child's `position: absolute`
   bubbles up past them to the nearest actual positioned ancestor instead
   (`.gam-nav-list-wrap` for a top-level panel, or the parent `.gam-panel`
   itself for a nested one — see the `.gam-panel` rule below). If either row
   were positioned, its panel would be sized/placed relative to that small
   row instead of filling the full off-canvas sheet (a real bug hit and
   fixed 2026-07-28: the desktop mega-menu opened in the wrong place for
   the same underlying reason). Desktop restores `position: relative` on
   just the top-level item, where a small anchored dropdown — not a
   full-sheet panel — is actually what's wanted; see the `@media` block. */
.gam-nav-item,
.gam-mega-column {
	display: flex;
	align-items: center;
}

.gam-nav-link,
.gam-mega-column-title {
	display: block;
	flex: 1 1 auto;
	padding: 14px 20px;
	min-height: 44px;
	box-sizing: border-box;
	color: var(--wp--preset--color--espresso);
	font-weight: 500;
	text-decoration: none;
}

span.gam-mega-column-title {
	color: var(--wp--preset--color--cocoa);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding-bottom: 6px;
}

/* Linked (clickable) column titles, e.g. "Suchttherapie"/"Therapieformen" —
   the `span` variant above already reads as a heading (uppercase, small,
   accent-colored); this gives the `<a>` variant the same weight so it's
   still visually set apart from its own `.gam-mega-item` list below it,
   which stays at the regular font-weight (400). */
a.gam-mega-column-title {
	font-weight: 700;
}

.gam-nav-link:hover,
.gam-nav-link.gam-active,
a.gam-mega-column-title:hover {
	color: var(--wp--preset--color--cocoa);
}

/* A nav trigger/column-title and its chevron are one visual control (label
   + arrow), but were only ever siblings with independent `:hover` — hovering
   the chevron itself left the label uncolored. Highlight both together
   regardless of which part the pointer is actually over. */
.gam-nav-item:hover .gam-nav-link,
.gam-nav-item:hover .gam-chevron,
.gam-mega-column:hover .gam-mega-column-title,
.gam-mega-column:hover .gam-chevron {
	color: var(--wp--preset--color--cocoa);
}

/* Chevron trigger — a plain flex sibling of the label now (not absolutely
   positioned over it), so it doesn't need its row to be a positioning
   context. 44px-tall touch target. */
.gam-chevron {
	flex: none;
	width: 52px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--espresso);
	cursor: pointer;
}

.gam-chevron-icon {
	width: 18px;
	height: 18px;
	transition: transform 200ms ease;
}

.gam-chevron[aria-expanded="true"] .gam-chevron-icon {
	transform: rotate(-90deg);
}

/* Panels — both the top-level (.gam-panel) and nested mega-column
   (.gam-panel--sub) ones share this: a full-width slide-in sheet on mobile,
   hidden until its chevron opens it. */
.gam-panel {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--wp--preset--color--cloud);
	transform: translateX(100%);
	transition: transform 280ms ease;
	overflow-y: auto;
}

.gam-panel.gam-panel-active {
	transform: translateX(0);
}

/* Belt-and-suspenders for the mobile drill-down: an active depth-2 panel
   already visually covers its parent depth-1 panel's own content (opaque
   background, same full-size box), but explicitly disabling pointer-events
   on that covered content — then re-enabling them on the active sub-panel
   itself, since `pointer-events: none` is inherited unless a descendant
   resets it — guarantees clicks can't reach through to it even if some
   other stacking quirk ever put it back on top (measured with Playwright:
   its own hit-testing intermittently disagreed with a plain
   `document.elementFromPoint` check at the same coordinates, root cause
   not fully pinned down — this makes the outcome correct regardless). */
.gam-panel:has(> .gam-mega-columns .gam-panel--sub.gam-panel-active) {
	pointer-events: none;
}

.gam-panel--sub.gam-panel-active {
	pointer-events: auto;
}

.gam-panel-back {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 16px 20px;
	min-height: 44px;
	box-sizing: border-box;
	border: none;
	border-bottom: 1px solid rgba(38, 25, 20, 0.1);
	background: transparent;
	color: var(--wp--preset--color--cocoa);
	font-weight: 600;
	cursor: pointer;
}

.gam-back-icon {
	width: 18px;
	height: 18px;
}

.gam-panel-intro {
	margin: 0;
	padding: 16px 20px;
	max-width: 46ch;
	color: var(--wp--preset--color--espresso);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Mirrors .gam-nav-bar's own max-width/padding exactly (not Bootstrap's
   `.container`, which this used to carry — see the comment at
   Gamtheme_Bootstrap_Nav_Walker::start_el() in functions.php for why),
   so the desktop mega-menu's content lines up with the nav bar/trigger
   items above it instead of an unrelated, narrower Bootstrap breakpoint
   width. Real bug, reported 2026-07-30 on the live site: at wide desktop
   viewports the gap between `.gam-nav-bar`'s 1600px cap and `.container`'s
   1320px cap (from the 1400px breakpoint up) made the open panel's
   content visibly shifted right relative to the nav items that open it. */
.gam-panel-inner {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: 24px;
}

.gam-mega-columns {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.gam-mega-column {
	padding: 6px 20px 14px;
	flex-wrap: wrap;
}

.gam-mega-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gam-mega-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 12px 32px;
	min-height: 44px;
	box-sizing: border-box;
	color: var(--wp--preset--color--espresso);
	text-decoration: none;
}

.gam-mega-item:hover,
.gam-mega-item.gam-active {
	color: var(--wp--preset--color--cocoa);
}

.gam-dropdown-icon {
	flex: none;
	display: inline-flex;
	color: var(--wp--preset--color--cocoa);
}

.gam-dropdown-icon svg {
	width: 18px;
	height: 18px;
}

/* Prominent CTA button (e.g. "Termin vereinbaren") — same warm accent as
   .btn-terracotta, just a more generous corner radius to read as a distinct,
   deliberately-emphasized call to action rather than a regular button. */
.gam-nav-cta {
	display: inline-block;
	border-radius: 16px;
	padding: 12px 22px;
	margin: 8px 20px;
	background-color: var(--wp--preset--color--cocoa);
	color: var(--wp--preset--color--cloud);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(38, 25, 20, 0.2);
}

.gam-nav-cta:hover,
.gam-nav-cta:focus-visible {
	background-color: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--cloud);
}

/* Inline Lucide icons swapped into page-content headings for the s.w.org
   emoji-CDN <img> icons that migrated content used (see cleanup-content.php,
   ROADMAP.md 2026-07-25) — self-hosted, no external emoji request per
   heading. Sized to sit on the text baseline next to a heading. */
.gam-content-icon {
	display: inline-flex;
	vertical-align: -0.2em;
	color: var(--wp--preset--color--cocoa);
}

.gam-content-icon svg {
	width: 1.1em;
	height: 1.1em;
}

/* ---- Desktop (>= 1024px): inline bar + mega-menu, no drill-down -------- */
@media (min-width: 1024px) {
	.gam-nav-toggle,
	.gam-nav-scrim,
	.gam-nav-list-header {
		display: none;
	}

	/* Un-anchors .gam-nav-bar (see the .gam-panel comment further down for why:
	   the full-bleed mega-menu needs to position against `.gam-nav` itself,
	   not this width-capped bar). */
	.gam-nav-bar {
		position: static;
	}

	.gam-nav-list-wrap {
		position: static;
		inset: auto;
		z-index: auto;
		width: auto;
		transform: none;
		transition: none;
		overflow: visible;
		flex: 1 1 auto;
	}

	.gam-nav-items {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-end;
		padding: 0;
		gap: 2px;
	}

	.gam-nav-link {
		padding: 10px 10px;
	}

	/* Matches `.gam-mega-item`'s desktop horizontal inset below (both 12px)
	   so the column heading and its list align on the same left edge —
	   previously 10px vs. the item's 0px, so items were flush against the
	   column edge while the heading sat slightly right of them (real bug,
	   found by measuring computed padding). Extra bottom padding (14px,
	   stacking with `.gam-mega-list`'s own 8px top padding) gives the
	   heading a bit more room from its list than list items have from each
	   other (8px), a deliberate "leicht abheben" (slightly set apart) —
	   paired with the 700 font-weight on `a.gam-mega-column-title` above. */
	.gam-mega-column-title {
		padding: 10px 12px 14px;
	}

	/* Full-bleed mega-menu (like stripe.com's), not a small dropdown box
	   anchored to the trigger — so the panel's positioning context needs to
	   be `.gam-nav` (the full-width header bar), not the individual
	   `.gam-nav-item` or the width-capped `.gam-nav-bar` between them. Neither
	   gets `position` set here for that reason — the panel's
	   `position: absolute` bubbles past both, up to `.gam-nav`. */
	.gam-nav-items > .gam-nav-item > .gam-chevron {
		width: 20px;
		height: 20px;
		margin-left: 2px;
	}

	.gam-nav-items > .gam-nav-item > .gam-panel {
		position: absolute;
		inset: 100% 0 auto 0;
		z-index: 20;
		width: auto;
		min-width: 0;
		max-width: none;
		transform: translateY(-8px);
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
		border-radius: 0;
		/* The panel's own background (Cloud, #F2F2F2) sits only 13/255
		   apart from the page's white body background — too close to read
		   as a distinct edge on its own (confirmed with a real screenshot
		   comparison against stripe.com's dropdown, which has a crisp,
		   clearly visible boundary). A hairline border does what the
		   box-shadow alone couldn't. */
		border-bottom: 1px solid rgba(38, 25, 20, 0.12);
		box-shadow: 0 20px 40px rgba(38, 25, 20, 0.16);
		padding: 32px 0;
	}

	/* Deliberately no `:hover` or `:focus-within` here — only the JS-managed
	   `.gam-panel-active` class. Two real bugs, both from letting a raw CSS
	   pseudo-class independently force the panel open/closed alongside the
	   JS state:
	   - `:focus-within` kept the panel visible purely because DOM focus sat
	     inside `.gam-nav-item` (e.g. still on the chevron) even after JS had
	     explicitly closed it via Escape — `.gam-panel-active` alone already
	     covers "stays open while tabbing through its own content", since
	     it's only added on explicit activation and removed on explicit
	     close.
	   - `:hover` closed the panel the instant the cursor left `.gam-nav-item`
	     — but since this panel opens full-width below the *entire* header
	     (not right under the trigger), there's a gap of dead space the
	     mouse has to cross to reach it, and `:hover` gave zero tolerance for
	     that, closing the panel before the user could reach it. The JS
	     mouseenter/mouseleave handlers below use a short close-delay instead
	     (cancelled if the pointer re-enters in time), which needs
	     `.gam-panel-active` to be the *only* thing CSS reacts to — otherwise
	     `:hover` would still snap it shut instantly regardless of the delay. */
	.gam-nav-items > .gam-nav-item > .gam-panel.gam-panel-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}


	.gam-nav-items .gam-panel-back {
		display: none;
	}

	.gam-panel-intro {
		padding: 0 0 20px;
	}

	/* Grid, not flex: with `flex: 1 1 <basis>`, flex-grow greedily lets 2
	   columns saturate the row's full width before a 3rd ever gets a
	   chance, wrapping it onto its own row even though the panel is wide
	   enough for all 3 (measured with Playwright/Chromium, real bug fixed
	   2026-07-28). auto-fit/minmax sizes columns predictably instead. */
	.gam-mega-columns {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
		gap: 28px;
		padding: 0;
	}

	.gam-mega-column {
		/* Overrides the base row layout (title + chevron side by side,
		   needed for mobile) with a vertical stack: title above its list,
		   per the design brief. Its .gam-panel is forced `position: static`
		   below, so — unlike on mobile, where it's absolutely positioned
		   and excluded from flex flow — it participates in this layout as a
		   normal flex item and needs to land below the title, not beside it. */
		flex-direction: column;
		align-items: stretch;
		min-width: 0;
		padding: 0;
	}

	.gam-mega-column-title {
		flex: none;
	}

	/* Depth-1 sub-panels (a mega-menu column's own children, e.g.
	   "Suchttherapie" → Kokain/Heroin/…) are always expanded on desktop —
	   no drill-down step, per the design brief ("Ebene 3 als Liste unter
	   der jeweiligen Ebene-2-Überschrift"). Their chevrons have nothing to
	   toggle here, so they're hidden. */
	.gam-mega-column .gam-chevron {
		display: none;
	}

	.gam-mega-column .gam-panel {
		/* `display: block` is the important part here: the element still
		   carries the `hidden` HTML attribute on desktop (nav.js only ever
		   clears it in response to a chevron click, and this column's
		   chevron is hidden/unused at this breakpoint — see above), and the
		   browser's `[hidden] { display: none }` default beats opacity/
		   visibility overrides. nav.js also clears the attribute outright on
		   desktop (belt-and-suspenders — real bug hit and fixed 2026-07-28:
		   without either fix every mega-menu column showed its title but no
		   links at all). */
		display: block;
		position: static;
		inset: auto;
		z-index: auto;
		width: auto;
		max-width: none;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		box-shadow: none;
		border-radius: 0;
		padding: 0;
		overflow: visible;
	}

	.gam-mega-list {
		padding-top: 8px;
	}

	/* Was `8px 8px 8px 0` — 0 left padding put item text flush against the
	   column's own left edge, with no breathing room ("Rand") from the
	   column boundary; box-sizing: border-box (inherited from the base
	   rule) keeps the item — and its full-width `:hover` background below —
	   spanning the whole column regardless of this padding, so this only
	   insets the text/icon, not the hover target. 12px now matches
	   `.gam-mega-column-title`'s own left inset above so items align with
	   their heading. */
	.gam-mega-item {
		padding: 8px 12px;
		border-radius: 6px;
	}

	.gam-mega-item:hover,
	.gam-mega-item.gam-active {
		background-color: rgba(115, 77, 63, 0.08);
	}

	.gam-nav-cta {
		margin: 0 0 0 8px;
		padding: 10px 18px;
	}
}

/* Footer nav (legal links) */
.gam-footer-nav .nav-link {
	color: var(--wp--preset--color--cocoa);
}

.gam-footer-nav .nav-link:hover,
.gam-footer-nav .nav-link:focus-visible {
	color: var(--wp--preset--color--cocoa);
}

/* !important is the standard a11y pattern here: it must win over any
   component-level transition/animation rule, regardless of specificity. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}