/* Custom CSS only where Tailwind can't reach.
   Colors = @theme tokens (var(--color-*)), never ad-hoc hex. */
html {
	scroll-behavior: smooth;
}

/* Global turquoise focus ring (design system §4.8) — targets "every
   interactive element" at once, not expressible as per-element utilities. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--color-secondary-400);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Tailwind (since v3.4) drops the default pointer cursor on <button>;
   global rule because classing cursor-pointer on every button/tab site-wide isn't practical. */
button:not(:disabled),
[role="tab"],
[role="menuitem"] {
	cursor: pointer;
}

/* Country map (Google Maps JS API) — same InfoWindow restyling technique as
   template4's Cotonou location map; no Tailwind utility reaches into the
   Maps-injected .gm-style-iw-* DOM. */
#insp-country-map {
	background: var(--color-neutral-100);
}
#insp-country-map .gm-style-iw-c {
	padding: 0;
	border-radius: 1rem;
	background: var(--color-neutral-900);
	box-shadow: 0 24px 48px rgba(29, 29, 29, 0.35);
}
#insp-country-map .gm-style-iw-d {
	overflow: hidden !important;
}
#insp-country-map .gm-style-iw-t::after {
	background: var(--color-neutral-900);
	box-shadow: none;
}
#insp-country-map .gm-style-iw-chr {
	display: none !important;
}
/* Close (X) button was unreliable (Maps sometimes swallows the click on a
   restyled/scaled button) — cards already close via openOnly()/the
   SECONDARY click handler when another pin is picked, so just drop it. */
#insp-country-map button.gm-ui-hover-effect {
	display: none !important;
}
/* Google also gives the InfoWindow content wrapper itself a tabindex for
   a11y — same native-outline issue the close button had, just on the
   whole card. Blanket-disable on every focusable descendant. */
#insp-country-map [tabindex]:focus,
#insp-country-map [tabindex]:focus-visible,
#insp-country-map .gm-style-iw-c:focus,
#insp-country-map .gm-style-iw-c:focus-visible,
#insp-country-map .gm-style-iw-d:focus,
#insp-country-map .gm-style-iw-d:focus-visible {
	outline: none !important;
}
.insp-map-card {
	width: 220px;
	color: var(--color-neutral-50);
}
.insp-map-card__photo {
	width: 100%;
	height: 110px;
	background-size: cover;
	background-position: 50% 50%;
}
.insp-map-card__body {
	padding: 14px 16px 16px;
}
.insp-map-card__cat {
	font-weight: 600;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--color-interactive-gold);
}
.insp-map-card__name {
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	margin-top: 2px;
}
.insp-map-card__desc {
	margin-top: 6px;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--color-neutral-50);
	opacity: 0.75;
}
/* Card pops in instantly otherwise (Maps has no built-in InfoWindow open
   transition). Google reuses the same .gm-style-iw-c DOM node across
   opens, so a plain `animation:` on the class only ever plays once —
   the JS "domready" handler (assets/js/insp-country-map.js) removes/re-adds
   .insp-card-anim on every open to force a real replay. */
@keyframes inspCardIn {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
#insp-country-map .gm-style-iw-c.insp-card-anim {
	animation: inspCardIn 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* single-wonder.php "chemin" serpentine line: alternate which stations the
   line passes behind vs. in front of (5 equal 20% bands, one per station -
   odd bands stay behind, even bands come to the front). Tailwind has no
   utility for a multi-stop mask-image gradient. */
.chemin-mask-back {
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%, #000 20%, transparent 20%, transparent 40%,
		#000 40%, #000 60%, transparent 60%, transparent 80%,
		#000 80%, #000 100%
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0%, #000 20%, transparent 20%, transparent 40%,
		#000 40%, #000 60%, transparent 60%, transparent 80%,
		#000 80%, #000 100%
	);
}
.chemin-mask-front {
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%, transparent 20%, #000 20%, #000 40%,
		transparent 40%, transparent 60%, #000 60%, #000 80%,
		transparent 80%, transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%, transparent 20%, #000 20%, #000 40%,
		transparent 40%, transparent 60%, #000 60%, #000 80%,
		transparent 80%, transparent 100%
	);
}
.chemin-parallax {
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
	.chemin-parallax {
		transition: none !important;
		transform: none !important;
	}
}

/* Discover carousel crossfade (GSAP transforms two stacked <img>, no
   Tailwind utility exposes "two absolutely-stacked layers swapped by JS"). */
.dc-slide-container {
	position: relative;
	overflow: hidden;
}
.dc-active-img,
.dc-incoming-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

/* No <html> tag in this fragment to hold a class, and this resets every element
   on the page — no utility/variant can target "all elements" like this. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* WP core accessibility convention: visually hidden until keyboard-focused.
   Not in app.build.css (Tailwind's sr-only utility was never scanned into
   the precompiled build since the static maquette never used it). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
	padding: 0.75rem 1.25rem;
	background: var(--color-neutral-900);
	color: var(--color-neutral-50);
	border-radius: 0.5rem;
	white-space: normal;
}

/* Mobile nav links are dividers between items, not under the last one —
   robust against the wp_nav_menu() walker not knowing an item's position. */
#mobile-menu .mobile-nav-link:last-child {
	border-bottom: none;
}

/* #nav is position:fixed at top:0 — when the WP admin toolbar is showing
   (.admin-bar on <body>) it sits at the very top of the viewport too,
   so the site nav needs to drop below it or the two overlap. */
.admin-bar #nav {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar #nav {
		top: 46px;
	}
}