/* AmerikaNu — header-chrome (fase-4 Task 9). Waarden 1:1 uit design/mega-menu/README.md +
   Mega-menu Definitief.dc.html / __megapaneel.dc.html (open-punt-markers niet meegebouwd).
   Kadence levert alleen de rij/kolom-infrastructuur; deze regels stylen de eigen markup uit
   inc/chrome.php (amerikanu_hoofdmenu-/amerikanu_mobiel_paneel-shortcodes) volledig zelf. */

@keyframes panelIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes ddIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* -- topbalk-rij (Kadence header-builder main-row) ------------------------------------------ */
.site-header-row.site-main-header-row {
	background: var(--card);
}
/* Gate-2-fix (Davids-punt 2 — verhoudingen): README §1 vraagt `padding: 16px 48px` op de
   topbalk zelf + content-driven hoogte (géén vaste rijhoogte). Kadence se eigen
   header_main_height/header_main_padding-customizer-defaults zetten zonder theme_mod-override
   een vaste min-height (80px, geverifieerd op de dev) + een gecentreerde .site-container met
   ~99px gutter i.p.v. 48px padding — beide via Kadence se eigen inline customizer-<style>
   (zelfde specificiteit, ná onze stylesheet geladen), vandaar de !important's hieronder: de
   enige manier om zonder een fragiele Kadence-measure-control-theme_mod te forceren te winnen. */
/* Fase-4-gate-4-fix: de topbalk zelf blijft edge-to-edge (achtergrond wit, volle breedte —
   precies zoals in elk .dc.html-frame, de header staat daar vóór/buiten de eigen
   `width:1240px`-contentdoos van de pagina). De inhoud (logo/nav/telefoon/CTA) hing tot dusver
   aan een kale padding: 48px die met de viewport meegroeide — vanaf 1440px (het frame-canvas,
   er is geen designreferentie erboven) bevriest de gutter nu i.p.v. verder uit te rekken naar de
   schermranden (max() kiest bij ≤1440px viewport gewoon de bestaande 48px, dus geen regressie op
   1440px/mobiel). */
#masthead .site-header-row-container-inner > .site-container {
	max-width: none;
	padding: 16px max(48px, calc((100% - var(--frame-max)) / 2 + 48px)) !important;
}
#masthead .site-main-header-inner-wrap.site-header-row {
	min-height: 0 !important;
}
/* Gate-2-fix (Davids-punt 4 — menu-positie, vervolg): Kadence se "center-column"-grid
   (`grid-template-columns: 1fr auto 1fr`, header.min.css) centreert de nav-sectie altijd optisch
   in de rij. Overschreven naar flex: DOM-volgorde is al logo → nav → telefoon+CTA (header-row.php
   — 'main_center' komt vóór 'main_right' in de markup), dus flex zonder wrap plaatst de nav
   meteen ná het logo; de rechterkant wordt met margin-left (hieronder, op de sectie zelf)
   losgeduwd naar de rand. */
#masthead .site-main-header-inner-wrap.site-header-row.site-header-row-center-column {
	display: flex !important;
}
#masthead .site-header-main-section-right {
	margin-left: auto;
}
/* Logo-hoogte (Davids-punt 2): de oude selector (.main-navigation-logo/.site-logo) matcht niets
   in de daadwerkelijke Kadence-markup (.site-branding > a.brand > img.custom-logo) — de hoogte
   viel terug op Kadence se eigen logo-breedte-berekening (~46px i.p.v. de ontworpen 34px).
   Mobiel logo (README §4/§5): 26px, eigen #mobile-header-scope zodat dit niet via een
   breakpoint-duplicaat hoeft. */
#masthead .site-branding img {
	height: 34px;
	width: auto;
}
#mobile-header .site-branding img {
	/* 30px i.p.v. 26px (David, PDP-naloop 2026-08-12: "mag misschien 1 tikje groter"). */
	height: 30px;
	width: auto;
}
/* Mobiele header-marge (David, PDP-naloop 2026-08-12: "logo staat te ver naar rechts"): de
   .site-container droeg hier de desktop-padding van 48px; op mobiel hoort de header op dezelfde
   16px-contentmarge als de rest van de pagina.
   R2-herfix (David 2026-08-13, logo stond nog steeds op 48px): niet Kadence maar ónze eigen
   gate-2-desktopregel hierboven (#masthead .site-header-row-container-inner > .site-container,
   specificiteit 1-1-2 mét !important) bleek te winnen — #mobile-header zit bínnen #masthead,
   dus de 48px-gutter raakte ook de mobiele balk. Daarom hier dezelfde selectorketen mét
   #mobile-header (2-1-2), zodat mobiel op de 16px-contentmarge landt. */
#masthead #mobile-header .site-header-row-container-inner > .site-container,
#mobile-header .site-container {
	padding-left: 16px !important;
	padding-right: 16px !important;
}

/* -- hoofdnavigatie (desktop) --------------------------------------------------------------- */
/* Gate-2-fix (Davids-punt 4 — menu-positie): het hoofdmenu staat op het native Kadence
   'main_center'-header-item. Kadence se eigen "center-column"-rijlayout (aangezet zodra
   main_center gevuld is) is een CSS-grid `grid-template-columns: 1fr auto 1fr`
   (header.min.css) — dat centreert de nav-kolom altijd optisch in de volle rijbreedte, ongeacht
   logo-/rechterkant-breedte. De 'main_left_center'-zone (naast het logo, wél zoals het design
   het wil) rendert alléén als main_center leeg is (Kadence\Component::has_center_column() checkt
   letterlijk main_center, template-parts/header/header-row.php) — dus geen bruikbare route.
   Oplossing: de grid-rijlayout wordt hieronder (bij "topbalk-rij") overschreven naar flex, zodat
   de center-kolom direct ná de logo-kolom staat i.p.v. optisch gecentreerd; de 32px-marge hier is
   de README-§1-gap tussen logo en nav (design: één flex-rij met `gap: 32px` tussen alle
   topbalk-kinderen). */
.amerikanu-nav {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	/* 22px i.p.v. de "kale" 32px: de Kadence header-item-wrapper (.site-header-item/
	   .header-html-inner) draagt zelf al ~10px bij aan de afstand tot het logo (geverifieerd op
	   de dev: bounding-box-gap logo→nav was 42px bij margin-left:32px) — netto landt dit op de
	   ontworpen 32px tussen logo en nav. */
	margin: 0 0 0 22px;
	padding: 0;
	font-family: var(--font);
}
.amerikanu-nav > li {
	position: relative;
}
/* Gate-2-fix: het mega-paneel moet de volle headerbreedte beslaan (design: full-width paneel
   direct onder de topbalk), niet de breedte van het "Rondreizen"-label. Door dít li static te
   maken wordt de containing block van het absolute paneel het dichtstbijzijnde gepositioneerde
   voorouder-element: #masthead (Kadence core zet daar zelf position:relative + z-index:11 op,
   header.min.css) — er zit géén ander gepositioneerd element tussen (geverifieerd in
   header.min.css/global.min.css + de dynamische inline-CSS). left/right:0 + top:100% op
   .amerikanu-paneel spant het paneel dan onder de hele headerbalk. De Over ons-dropdown blijft
   bewust aan zijn eigen li hangen (position:relative hierboven): dat is een smal kaartje onder
   het item zelf. */
.amerikanu-nav > li.amerikanu-nav-rondreizen {
	position: static;
}
.amerikanu-nav > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--body);
	text-decoration: none;
	letter-spacing: -0.01em;
}
.amerikanu-nav > li.menu-item-has-children > a::after {
	content: '';
	width: 7px;
	height: 7px;
	margin-left: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--motion);
}
.amerikanu-nav > li[data-menu-paneel='rondreizen'] > a,
.amerikanu-nav > li[data-menu-paneel='over-ons'] > a[aria-expanded='true'] {
	color: var(--navy);
	font-weight: 700;
}
.amerikanu-nav > li[data-menu-paneel] > a[aria-expanded='true']::after {
	transform: rotate(225deg);
}
.amerikanu-nav > li[data-menu-paneel] > a[aria-expanded='true']::before {
	content: '';
	position: absolute;
	left: 0;
	right: 18px;
	bottom: -1px;
	height: 2px;
	background: var(--magenta);
	border-radius: 2px;
}

/* Z-index-regressie-fix (bug David, 2026-08-07): #masthead ís de stacking-context waarbinnen het
   mega-paneel leeft (Kadence core zet position:relative + z-index:11 op #masthead — zie de
   toelichting hierboven bij ".amerikanu-nav > li.amerikanu-nav-rondreizen"). z-index:55 op
   .amerikanu-paneel wint daardoor alléén intern, tegen andere kinderen van #masthead (zoals de
   overlay hieronder) — naar buiten toe concurreert #masthead als geheel op z-index 11. De sticky
   PLP/PDP-subnav (.amerikanu-submenu, z-index:40 — commit 829d70aa) leeft buiten #masthead in de
   root-stacking-context en won daardoor de stapelvolgorde zodra het menu openstond: het paneel
   verdween gedeeltelijk achter de navy balk. Fix: #masthead's eigen z-index optrekken tot boven
   de hoogste overige pagina-z-index (70, de PDP/mobiele sticky-balken in reis.css/overzicht.css),
   zodat het open mega-menu altijd vóór de rest van de pagina blijft liggen — puur stapelvolgorde,
   geen andere wijziging aan gedrag of opmaak. Kadence se eigen header.min.css laadt ná
   chrome.css en zet dezelfde selector (#masthead), gelijke specificiteit — vandaar !important,
   hetzelfde patroon als de topbalk-fix hierboven. */
#masthead {
	z-index: 80 !important;
}

/* -- Rondreizen mega-paneel ------------------------------------------------------------------ */
.amerikanu-paneel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 55;
	display: none;
	list-style: none;
	margin: 0;
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-top: none;
	border-radius: 0 0 20px 20px;
	box-shadow: 0 36px 64px -28px rgba(30, 46, 90, 0.4);
	padding: 30px 40px 34px;
}
/* Open-status: het echte interactiepad is aria-expanded op de trigger (menu.js) — de
   reduced-motion-override (ná de dropdown-sectie verderop, zodat hij in de cascade ook van de
   specifiekere ddIn-open-regel daar wint) gebruikt exact dezelfde open-selectors: geen
   fantoomklasse zoals .is-open die nergens gezet wordt. Het Rondreizen-paneel opent als grid
   (kolomplaatsing hieronder), de overige panelen als flex; de Over ons-dropdown krijgt zijn
   ddIn-animatie op zijn eigen, specifiekere open-selector in de dropdown-sectie. */
.amerikanu-nav > li[data-menu-paneel] > a[aria-expanded='true'] ~ .amerikanu-paneel {
	display: flex;
	flex-wrap: wrap;
	animation: panelIn 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.amerikanu-nav > li[data-menu-paneel] > a[aria-expanded='true'] ~ .amerikanu-paneel--rondreizen {
	display: grid;
}

/* Grid-plaatsing van het Rondreizen-paneel: class-gebaseerd (reviewer-fix — niet nth-child op
   de walker-emissievolgorde). De amerikanu-kolom--*-modifiers komen uit de seed (cli.php),
   de amerikanu-kicker-item--*-modifiers uit de walker (class-mega-menu-walker.php). */
.amerikanu-paneel--rondreizen {
	grid-template-columns: auto auto 210px auto;
	align-items: start;
	column-gap: 0;
	row-gap: 18px;
}
.amerikanu-paneel--rondreizen > li {
	list-style: none;
}
.amerikanu-paneel--rondreizen > li.amerikanu-kicker-item--bestemming {
	grid-column: 1 / 3;
	grid-row: 1;
}
.amerikanu-paneel--rondreizen > li.amerikanu-kolom--vs {
	grid-column: 1;
	grid-row: 2;
	padding-right: 40px;
}
.amerikanu-paneel--rondreizen > li.amerikanu-kolom--canada {
	grid-column: 2;
	grid-row: 2;
	border-left: 1px solid var(--rand-kaart);
	padding-left: 40px;
}
.amerikanu-paneel--rondreizen > li.amerikanu-kicker-item--reisvorm {
	grid-column: 3;
	grid-row: 1;
}
.amerikanu-paneel--rondreizen > li.amerikanu-kolom--reisvorm {
	grid-column: 3;
	grid-row: 2;
	border-left: 1px solid var(--rand-kaart);
	padding: 0 32px;
}
.amerikanu-uitgelicht-slot {
	grid-column: 4;
	grid-row: 1 / 3;
}
.amerikanu-kicker {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.amerikanu-paneel--over-ons > li.amerikanu-kicker-item {
	padding: 4px 12px 10px;
}
.amerikanu-paneel--rondreizen > li.amerikanu-kolomkop > a {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 800;
	color: var(--navy);
	letter-spacing: -0.01em;
	text-decoration: none;
}

.amerikanu-kolom-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
/* Verenigde Staten heeft 8 links → twee kolommen naast elkaar */
.amerikanu-paneel--rondreizen > li.amerikanu-kolom--vs .amerikanu-kolom-links {
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-auto-flow: column;
	grid-template-rows: repeat(4, auto);
	column-gap: 40px;
}
.amerikanu-kolom-links > li {
	list-style: none;
}
.amerikanu-kolom-links > li > a {
	display: block;
	padding: 6px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--body);
	text-decoration: none;
	transition: color var(--motion);
}
.amerikanu-kolom-links > li > a:hover,
.amerikanu-kolom-links > li > a:focus-visible {
	color: var(--magenta);
}
/* Costa Rica / Mexico / Jamaica: volwaardige bestemmingen, zelfde niveau als een landkop */
.amerikanu-kolom-links > li.amerikanu-land-bold {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--rand-kaart);
}
.amerikanu-kolom-links > li.amerikanu-land-bold:first-of-type {
	border-top: none;
	margin-top: 14px;
	padding-top: 0;
}
.amerikanu-kolom-links > li.amerikanu-land-bold > a {
	padding: 7px 0;
	font-size: 14px;
	font-weight: 800;
	color: var(--navy);
	letter-spacing: -0.01em;
}
.amerikanu-kolom-links > li.amerikanu-land-bold > a:hover {
	color: var(--magenta);
}
/* Alle rondreizen → */
.amerikanu-kolom-links > li.amerikanu-cta-alle {
	margin-top: 18px;
}
.amerikanu-kolom-links > li.amerikanu-cta-alle > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	font-size: 14px;
	font-weight: 800;
	color: var(--magenta);
}
.amerikanu-kolom-links > li.amerikanu-cta-alle > a::after {
	content: '→';
	font-size: 16px;
	transition: transform var(--motion);
}
.amerikanu-kolom-links > li.amerikanu-cta-alle > a:hover::after {
	transform: translateX(4px);
}

/* uitgelicht-slot (grid-plaatsing: zie .amerikanu-paneel--rondreizen hierboven) */
.amerikanu-uitgelicht-slot {
	width: 248px;
	border-left: 1px solid var(--rand-kaart);
	padding-left: 32px;
	margin-left: 32px;
	list-style: none;
}
.amerikanu-uitgelicht {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--rand-lijn);
	border-radius: 20px;
	overflow: hidden;
	background: var(--card);
}
.amerikanu-uitgelicht__beeld {
	position: relative;
	display: block;
	height: 150px;
	background: var(--navy);
}
.amerikanu-uitgelicht__beeld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.amerikanu-uitgelicht__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--magenta);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: var(--radius-pill);
}
.amerikanu-uitgelicht__body {
	display: block;
	padding: 14px 16px 16px;
}
.amerikanu-uitgelicht__titel {
	display: block;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.amerikanu-uitgelicht__meta {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
}
.amerikanu-uitgelicht__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 800;
	color: var(--magenta);
}
.amerikanu-uitgelicht--magazine {
	background: var(--forest);
	color: #fff;
}
.amerikanu-uitgelicht--magazine .amerikanu-uitgelicht__meta {
	color: rgba(255, 255, 255, 0.65);
}
.amerikanu-uitgelicht--magazine .amerikanu-uitgelicht__link {
	color: #ff7fa9;
}

/* -- Over ons-dropdown ------------------------------------------------------------------------ */
.amerikanu-paneel--over-ons {
	flex-direction: column;
	left: 0;
	width: 288px;
	border-radius: 18px;
	box-shadow: 0 30px 56px -26px rgba(30, 46, 90, 0.4);
	padding: 12px;
}
/* ddIn (200ms, design-spec) moet op de open-selector staan: het generieke open-pad hierboven
   (0,4,2) zet `animation: panelIn` en zou ddIn-longhands op de basisregel (0,1,0) altijd
   verslaan — deze selector (0,5,2) wint van het generieke pad. Reviewer-bevinding re-review. */
.amerikanu-nav > li[data-menu-paneel='over-ons'] > a[aria-expanded='true'] ~ .amerikanu-paneel--over-ons {
	display: flex;
	animation: ddIn 200ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Reduced-motion-override: bewust ná álle animatie-declaraties (panelIn op het generieke
   open-pad én ddIn op de over-ons-open-selector hierboven), met exact dezelfde selectors —
   bij gelijke specificiteit wint dan altijd deze latere regel. */
@media (prefers-reduced-motion: reduce) {
	.amerikanu-nav > li[data-menu-paneel] > a[aria-expanded='true'] ~ .amerikanu-paneel,
	.amerikanu-nav > li[data-menu-paneel='over-ons'] > a[aria-expanded='true'] ~ .amerikanu-paneel--over-ons {
		animation: none;
	}
}
.amerikanu-paneel--over-ons > li {
	list-style: none;
}
.amerikanu-paneel--over-ons > li > a {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
	transition: background var(--motion);
}
.amerikanu-paneel--over-ons > li > a:hover {
	background: var(--beige);
}

/* -- full-screen overlay + click-buiten-sluiter (menu.js) --------------------------------------
   Gate-4-fix (Davids-punt: menulinks klikten niet): het paneel (z-index 55) leeft binnen de
   stacking-context van #masthead (Kadence: z-index 11); een overlay op z-index 50 in de
   root-context lag daardoor ÓVER het paneel en ving elke link-klik af. De overlay moet onder
   de header blijven (10 < 11) — hij is transparant en vangt alleen klikken buiten het menu. */
.amerikanu-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 10;
	background: transparent;
}

/* -- telefoonblok + CTA (telefoonblok: eigen markup op 'html2'; CTA: native Kadence-'button') --- */
/* Gate-2-fix (Davids-punt 1 — telefoon-icoon): verving Kadence Pro se native 'contact'-item.
   Diens eigen kadence-svg-iconset-SVG (viewBox 0 0 12 28, een dichtgevuld mobiel-telefoon-
   silhouet) week af van het Lucide phone-icoon uit het design, en de "Bel ons"-kicker verscheen
   nooit — de oude CSS mikte op `.header-contact-label`, maar Kadence rendert de labelspan als
   `.contact-label` (geverifieerd in de gerenderde DOM op de dev). `amerikanu-telefoonblok` is nu
   volledig eigen markup (inc/chrome.php), dus geen Kadence-klassen/specificiteitsgok meer nodig. */
.amerikanu-telefoonblok {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--navy);
}
.amerikanu-telefoonblok:hover,
.amerikanu-telefoonblok:focus-visible {
	color: var(--navy);
}
.amerikanu-telefoonblok__icoon {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: var(--radius-pill);
	background: rgba(230, 44, 107, 0.1);
	color: var(--magenta);
}
/* Expliciete CSS-maat i.p.v. vertrouwen op de HTML width/height-attributen van amerikanu_icon():
   in een `display:grid;place-items:center`-doos (zelfde patroon als de mobiele sluitknop
   hieronder) resolvet een SVG zonder eigen CSS-breedte soms naar 0px breed (geverifieerd op de
   dev — computed width 17px i.p.v. de bedoelde maat bij de oude Kadence-svg, 0px bij de
   sluitknop-svg). */
.amerikanu-telefoonblok__icoon svg {
	width: 15px;
	height: 15px;
}
.amerikanu-telefoonblok__tekst {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.amerikanu-telefoonblok__kicker {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.amerikanu-telefoonblok__nummer {
	font-size: 13px;
	font-weight: 800;
}
a.header-button,
.amerikanu-cta-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--magenta);
	color: #fff !important;
	border-radius: var(--radius-pill);
	padding: 11px 22px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: -0.01em;
	box-shadow: 0 8px 20px -8px rgba(230, 44, 107, 0.6);
}
/* Gate-2-fix (Davids-punt 3 — CTA-button): Kadence Pro se eigen 'button-style-filled'-hover-
   groei-schaduw (een box-shadow-transition met spread die in rust op `0 0 0 -Npx transparent`
   staat) overschreef de statische design-schaduw hierboven in rust — geverifieerd op de dev
   (computed box-shadow `0 0 0 -7px rgba(0,0,0,0)` i.p.v. de bedoelde waarde). Kadence se
   customizer-CSS heeft dezelfde bronorde-positie (ná deze stylesheet); deze selector mikt
   specifiek op Kadence se eigen gegenereerde klassencombinatie zodat hij zeker wint, zonder de
   hover-transition zelf te breken. */
#masthead a.button.header-button.button-style-filled {
	box-shadow: 0 8px 20px -8px rgba(230, 44, 107, 0.6) !important;
}
/* R2-fix (David 2026-08-13, "de knop is blauw"): Kadence se basis-`.button:hover` (blauwe
   achtergrond, specificiteit 0-2-0) won op hover van onze `a.header-button` (0-1-1) — de knop
   werd dus blauw zodra de muis erop stond. Zelfde specificiteits-truc als de box-shadow-fix
   hierboven: expliciete hover/focus-achtergrond in designkleur. */
#masthead a.button.header-button.button-style-filled:hover,
#masthead a.button.header-button.button-style-filled:focus-visible,
a.header-button:hover,
a.header-button:focus-visible {
	background: var(--magenta-hover);
	color: #fff !important;
}
/* R2-herfix (David 2026-08-13, dé oplossing van "de knop is blauw"): Kadence se
   `.button:visited { background: var(--global-palette-btn-bg) }` (= palette1, #2B6CB0 — exact
   het gemelde blauw) won met 0-2-0 van onze `a.header-button` (0-1-1) zodra de bezoeker de
   contactpagina ooit bezocht had. Daardoor zag David de knop structureel blauw terwijl elke
   verse testbrowser (zonder /contact in de historie) magenta toonde — en getComputedStyle
   rapporteert bij :visited om privacyredenen bewust de niet-bezochte kleur, dus metingen
   konden dit nooit vangen. */
#masthead a.button.header-button.button-style-filled:visited,
a.header-button:visited {
	background: var(--magenta);
	color: #fff !important;
}
#masthead a.button.header-button.button-style-filled:visited:hover,
a.header-button:visited:hover {
	background: var(--magenta-hover);
}
.amerikanu-cta-pill--block {
	display: block;
	width: 100%;
	padding: 14px;
	font-size: 15px;
	text-align: center;
}

/* -- mobiel: hamburger + full-paneel accordeon -------------------------------------------------- */
/* Underline-cascade (gate-2-bevinding 2): dit paneel rendert binnen Kadence's mobile-html-
   header-item, dat een `inner-link-style-{stand}`-wrapper meekrijgt. Op de default-stand
   'normal' wint Kadence's `.inner-link-style-normal a:not(.button){text-decoration:underline}`
   (global.min.css, specificiteit 0,2,1, geladen NÁ chrome.css) van onze
   `.amerikanu-mlink`/`.amerikanu-tel-link { text-decoration: none }` (0,1,0). Structurele fix
   op de hogere laag: de theme_mods `mobile_html_link_style` en `header_html_link_style` staan
   op 'plain' (fase4-kadence-config.md) — Kadence's eigen `.inner-link-style-plain a:not(.button)
   {text-decoration:none}` regelt het dan cascadezuiver, zonder !important of specificiteits-
   wedloop hier. */
/* Gate-2-fidelity-aanvulling (README §4 — mobiele topbalk gesloten): naast de hamburger hoort er
   ook een rond telefoon-icoon te staan (34px, zelfde rgba(230,44,107,.10)-badge als de desktop-
   telefoonblok); ontbrak in de bouw (alleen de hamburger stond er). */
.amerikanu-mobiel-topbalk-acties {
	display: none;
	align-items: center;
	gap: 14px;
}
.amerikanu-mobiel-belicoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-pill);
	background: rgba(230, 44, 107, 0.1);
	color: var(--magenta);
	text-decoration: none;
}
.amerikanu-mobiel-belicoon svg {
	width: 16px;
	height: 16px;
}
.amerikanu-hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 24px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}
.amerikanu-hamburger span {
	height: 2.5px;
	background: var(--navy);
	border-radius: 2px;
}
.amerikanu-mobiel-paneel {
	position: fixed;
	inset: 0;
	z-index: 100;
}
.amerikanu-mobiel-paneel[hidden] {
	display: none;
}
.amerikanu-mobiel-paneel__overlay {
	position: absolute;
	inset: 0;
	background: rgba(30, 46, 90, 0.45);
}
.amerikanu-mobiel-paneel__kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: 100%;
	height: 100%;
	background: var(--card);
	margin-left: auto;
	width: min(390px, 100%);
}
.amerikanu-mobiel-paneel__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--rand-kaart);
	flex: none;
}
/* Gate-2-fix (Davids-punt 7 — logo-beeldmerk): was platte tekst (bloginfo('name')); inc/chrome.php
   rendert hier nu get_custom_logo() (zelfde beeldmerk als de gesloten header), 26px net als het
   design (README §4/§5: "logo (26px)" — identiek aan de gesloten mobiele topbalk). */
.amerikanu-mobiel-paneel__logo img {
	height: 26px;
	width: auto;
}
/* Gate-2-fix (Davids-punt 6 — X-sluitknop, root cause): Kadence global.min.css se generieke
   reset `button, .button, ... { padding: 0.4em 1em; ... }` (geen scope-uitzondering voor eigen
   knoppen) gaf dit <button> ~16-18px padding links/rechts terwijl de knop zelf een vaste
   `width: 34px` heeft — het overblijvende content-vak voor het svg-icoon kwam daardoor op 0px
   uit (geverifieerd op de dev via een CSSOM-matched-rules-dump: geen grid-/flex-bug, gewoon een
   ontbrekende padding-override). `.amerikanu-hamburger` en `.amerikanu-macc__toggle` hierboven/
   -onder declareren om dezelfde reden allebei al hun eigen `padding` — dit was de ene knop die
   dat miste. */
.amerikanu-mobiel-paneel__sluit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: var(--radius-pill);
	background: var(--beige);
	color: var(--navy);
	border: none;
	cursor: pointer;
}
.amerikanu-mobiel-paneel__sluit svg {
	width: 16px;
	height: 16px;
}
.amerikanu-mobiel-paneel__body {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}
.amerikanu-mobiel-paneel__voet {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 18px;
	border-top: 1px solid var(--rand-kaart);
	background: var(--card);
}
.amerikanu-tel-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	color: var(--navy);
	font-size: 14px;
	font-weight: 700;
}
.amerikanu-tel-link em {
	font-style: normal;
	font-weight: 600;
	color: var(--muted);
	margin-left: 4px;
}

.amerikanu-mlink {
	display: block;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--body);
	text-decoration: none;
}
.amerikanu-mlink.amerikanu-land-bold {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
}
.amerikanu-mlink.amerikanu-cta-alle {
	font-weight: 800;
	color: var(--magenta);
}
/* top-level bladeren zonder kinderen (Nieuws/Contact) — zelfde gewicht als de accordeon-triggers */
.amerikanu-mlink--top {
	font-size: 17px;
	font-weight: 800;
	color: var(--navy);
	padding: 15px 20px;
	border-top: 1px solid var(--rand-kaart);
}

.amerikanu-macc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 20px;
	background: none;
	border: none;
	border-top: 1px solid var(--rand-kaart);
	cursor: pointer;
	font-family: var(--font);
	font-size: 17px;
	font-weight: 800;
	color: var(--navy);
	text-align: left;
}
.amerikanu-macc__toggle svg {
	transition: transform var(--motion);
}
.amerikanu-macc__toggle[aria-expanded='true'] svg {
	transform: rotate(180deg);
}
.amerikanu-macc__paneel {
	background: var(--bg);
	padding: 6px 0 14px;
}
.amerikanu-macc__paneel[hidden] {
	display: none;
}
.amerikanu-macc .amerikanu-macc__toggle {
	padding-left: 40px;
	font-size: 15px;
	font-weight: 700;
	border-top: 1px solid var(--rand-kaart);
}
.amerikanu-macc .amerikanu-mlink {
	padding: 9px 20px 9px 54px;
	font-size: 14px;
	font-weight: 600;
	border-left: 2px solid rgba(230, 44, 107, 0.35);
	margin-left: 40px;
}
/* Eigen land op het niveau van Verenigde Staten/Canada (Costa Rica, Mexico, Jamaica; David 11-09):
   geen kolomlink-inspringing met magenta rail, maar dezelfde regel als de accordeonkoppen ernaast. */
.amerikanu-macc .amerikanu-mlink.amerikanu-mlink--land {
	padding: 15px 20px 15px 40px;
	margin-left: 0;
	border-left: none;
	border-top: 1px solid var(--rand-kaart);
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
}

.amerikanu-uitgelicht-slot--mobiel {
	/* Reset van de desktop-slotregels (breedte/kolom-border/marges gelden alleen in het grid-paneel). */
	width: auto;
	border-left: none;
	margin-left: 0;
	padding: 4px 20px 16px;
}
.amerikanu-uitgelicht-slot--mobiel .amerikanu-uitgelicht {
	display: flex;
	border-radius: 16px;
}
.amerikanu-uitgelicht-slot--mobiel .amerikanu-uitgelicht__beeld {
	width: 110px;
	height: auto;
	flex: none;
}
.amerikanu-uitgelicht-slot--mobiel .amerikanu-uitgelicht__body {
	padding: 12px 14px 12px 2px;
}

@media (max-width: 899px) {
	.amerikanu-nav,
	.amerikanu-telefoonblok,
	a.header-button {
		display: none !important;
	}
	.amerikanu-mobiel-topbalk-acties {
		display: flex;
	}
	.amerikanu-hamburger {
		display: flex;
	}
}
@media (min-width: 900px) {
	.amerikanu-mobiel-paneel,
	.amerikanu-mobiel-topbalk-acties,
	.amerikanu-hamburger {
		display: none !important;
	}
}

/* -- navy regio-submenu (fase-4 Task 10, PLP-spec §2) ------------------------------------------ */
/* Fase-4-gate-4-fix: zelfde bevries-patroon als de headertopbalk hierboven — de navy balk blijft
   edge-to-edge, de inhoud (pills/links/CTA) bevriest de gutter op var(--frame-max) i.p.v. verder
   uit te rekken op 2560px+. */
.amerikanu-submenu {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 0 max(48px, calc((100% - var(--frame-max)) / 2 + 48px));
	background: var(--navy);
}
.amerikanu-submenu__pill {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.75);
	border-radius: var(--radius-pill);
	padding: 8px 18px;
	text-decoration: none;
}
.amerikanu-submenu__pill:hover,
.amerikanu-submenu__pill:focus-visible {
	color: #fff;
}
.amerikanu-submenu__link {
	font-size: 13px;
	font-weight: 600;
	color: var(--lichtblauw);
	padding: 8px 14px;
	text-decoration: none;
	transition: color var(--motion);
}
.amerikanu-submenu__link:hover,
.amerikanu-submenu__link:focus-visible {
	color: #fff;
}
.amerikanu-submenu__cta {
	margin-left: auto;
	flex: none;
	background: var(--magenta);
	color: #fff;
	border-radius: var(--radius-pill);
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background var(--motion);
}
.amerikanu-submenu__cta:hover,
.amerikanu-submenu__cta:focus-visible {
	background: var(--magenta-hover);
}
/* Task-24-dekkings-fix (SPEC-plp.md §2: "Zodra de hero uit beeld is gescrold schuift rechts een
   magenta CTA in", animatie 250ms ease, translateX 14px→0 + fade) — desktop-only, menu.js zet
   is-actief via IntersectionObserver op de pagina-hero (zelfde patroon als reis.js se
   .amerikanu-sticky__desktop). Reduced-motion en het mobiele scrollbare submenu (hieronder,
   flex:none) blijven buiten deze regel -> daar staat de CTA gewoon altijd zichtbaar, geen
   scroll-afhankelijke state nodig. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	.amerikanu-submenu__cta {
		opacity: 0;
		transform: translateX(14px);
		pointer-events: none;
		transition: opacity 250ms ease, transform 250ms ease;
	}
	.amerikanu-submenu__cta.is-actief {
		opacity: 1;
		transform: translateX(0);
		pointer-events: auto;
	}
}
@media (max-width: 899px) {
	/* R3-fix (David 2026-08-14): de balk stond met height:44px strak om pills/knop heen ("0 padding
	   boven en onder"). 56px geeft ±11px lucht boven en onder de knoppen; de balk blíjft sticky —
	   hij is op mobiel de enige plek waar je tussen rondreizen/over-de-regio/reisinformatie/
	   ervaringen wisselt. Bij wijziging: overzicht.css se .amerikanu-filterbalk-mobiel{top:56px}
	   plakt hieronder en moet dezelfde waarde houden. */
	.amerikanu-submenu {
		height: 56px;
		padding: 0 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.amerikanu-submenu__pill,
	.amerikanu-submenu__link,
	.amerikanu-submenu__cta {
		flex: none;
	}
}

/* -- sitebrede footer (fase-4 Task 10, design/footer/README.md + Sitefooter.dc.html) ----------- */
.amerikanu-footer {
	background: var(--navy-donker);
	color: var(--lichtblauw-2);
	font-family: var(--font);
}
.amerikanu-footer__binnen {
	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 60px 0;
}
.amerikanu-footer__band {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	padding-bottom: 44px;
	border-bottom: 1px solid var(--rand-navy);
}
.amerikanu-footer__merk {
	max-width: 380px;
}
/* Logo-beeldmerk op navy: het kleurenlogo (navy/blauwe tekst) is hier onleesbaar en er
   bestaat geen witte bron-variant (live-assets verkend, footer-README) — brightness(0)
   invert(1) maakt het volledige transparante-PNG-lockup wit als nette tussenoplossing.
   Definitieve witte logo-SVG blijft een David-actie (gate-2). */
.amerikanu-footer__logo {
	display: block;
	width: 220px;
	height: auto;
	filter: brightness(0) invert(1);
}
.amerikanu-footer__zin {
	margin: 20px 0 0;
	max-width: 380px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--lichtblauw);
}
.amerikanu-footer__socials {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}
.amerikanu-footer__social {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-pill);
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(147, 169, 206, 0.22);
	transition: background var(--motion), border-color var(--motion);
}
.amerikanu-footer__social:hover,
.amerikanu-footer__social:focus-visible {
	background: var(--magenta);
	border-color: var(--magenta);
	color: #fff;
}
.amerikanu-footer__trust {
	flex: none;
}
.amerikanu-footer__trust-kicker {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lichtblauw);
	text-align: right;
}
.amerikanu-footer__trust-rij {
	display: flex;
	gap: 12px;
}
.amerikanu-footer__badge {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 92px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px dashed rgba(147, 169, 206, 0.5);
	border-radius: var(--radius-klein);
	padding: 14px 18px;
}
/* Echte keurmerk-beeldmerken (ANVR/GGTO/Calamiteitenfonds): witte kaart — de logo's dragen
   donkerblauwe/zwarte tekst (gecheckt bij het downloaden) en zijn rechtstreeks op navy niet
   leesbaar. De dashed border was placeholder-styling en geldt alleen nog voor de tekst-fallback. */
.amerikanu-footer__badge--beeld {
	background: #fff;
	border: none;
	padding: 10px 16px;
}
/* PLP-fixbatch-2A punt 6 (David-feedback bij de doorloop, gecorrigeerd: een eerdere --beige-
   achtergrond-poging op ALLE beeldmerken loste niets op): ggto.png bevat een groot half-
   transparant WÍT "ggto"-beeldmerk, ontworpen voor het eigen merkblauw (#005DA8, gemeten uit de
   opake pixels van het icoon in het bestand) — op zowel wit als beige blijft die wordmark
   onleesbaar ("witte letters op bijna-wit"). Alleen deze badge krijgt daarom het merkblauw i.p.v.
   de witte kaart hierboven; ANVR/Calamiteitenfonds blijven wit (die hebben geen ingebakken
   transparante wordmark en zijn daar al leesbaar op). */
.amerikanu-footer__badge--ggto {
	background: #005da8;
}
.amerikanu-footer__badge-beeld {
	display: block;
	max-height: 44px;
	width: auto;
	max-width: 110px;
	object-fit: contain;
}
.amerikanu-footer__badge svg {
	color: var(--lichtblauw);
}
.amerikanu-footer__badge-label {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--lichtblauw-2);
}
.amerikanu-footer__trust-note {
	margin: 12px 0 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--placeholder-oranje);
	text-align: right;
}

.amerikanu-footer__kolommen {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px;
	padding: 44px 0;
}
.amerikanu-footer-kolom__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 0 18px;
	background: none;
	border: none;
	cursor: default;
	font-family: var(--font);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}
.amerikanu-footer-kolom__kop:hover,
.amerikanu-footer-kolom__kop:focus-visible {
	background: none;
	color: #fff;
}
.amerikanu-footer-kolom__teken {
	display: none;
}
.amerikanu-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.amerikanu-footer-link {
	font-size: 14.5px;
	color: var(--lichtblauw);
	text-decoration: none;
	transition: color var(--motion);
}
.amerikanu-footer-link:hover,
.amerikanu-footer-link:focus-visible {
	color: #fff;
}
.amerikanu-footer-cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--magenta);
	text-decoration: none;
	transition: color var(--motion);
}
.amerikanu-footer-cta::after {
	content: '→';
}
.amerikanu-footer-cta:hover,
.amerikanu-footer-cta:focus-visible {
	color: #fff;
}
/* Desktop: alle kolommen staan altijd volledig open, ongeacht het hidden-attribuut dat de
   mobiele-accordeon-default is (menu.js se generieke initAccordeons() zet dat attribuut niet
   zelf op init — het staat al zo in deze markup, hergebruik van hetzelfde contract als de
   mobiele hoofdmenu-accordeon in inc/chrome.php). */
@media (min-width: 900px) {
	.amerikanu-footer-links[hidden] {
		display: flex !important;
	}
}

.amerikanu-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding: 24px 0 40px;
	border-top: 1px solid var(--rand-navy);
}
.amerikanu-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}
.amerikanu-footer__legal-link {
	font-size: 13px;
	color: var(--lichtblauw);
	text-decoration: none;
	transition: color var(--motion);
}
.amerikanu-footer__legal-link:hover,
.amerikanu-footer__legal-link:focus-visible {
	color: var(--lichtblauw-2);
}
.amerikanu-footer__copyright {
	margin: 0;
	font-size: 13px;
	color: var(--muted-navy);
}

@media (max-width: 899px) {
	.amerikanu-footer__binnen {
		padding: 32px 22px 22px;
	}
	.amerikanu-footer__band {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding-bottom: 0;
		border-bottom: none;
	}
	.amerikanu-footer__merk {
		max-width: none;
	}
	.amerikanu-footer__trust-kicker,
	.amerikanu-footer__trust-note {
		text-align: left;
	}
	.amerikanu-footer__trust-rij {
		gap: 9px;
	}
	.amerikanu-footer__badge {
		flex: 1;
		min-width: 0;
		padding: 11px 6px;
		border-radius: var(--radius-klein);
	}
	.amerikanu-footer__badge-beeld {
		max-height: 36px;
		max-width: 100%;
	}
	.amerikanu-footer__kolommen {
		display: block;
		margin-top: 8px;
		padding: 0;
		border-top: 1px solid var(--rand-navy);
	}
	.amerikanu-footer-kolom {
		border-bottom: 1px solid var(--rand-navy);
	}
	.amerikanu-footer-kolom__kop {
		padding: 18px 0;
		cursor: pointer;
	}
	.amerikanu-footer-kolom__teken {
		display: block;
		font-size: 20px;
		line-height: 1;
		color: var(--lichtblauw);
	}
	.amerikanu-footer-kolom__teken::before {
		content: '+';
	}
	.amerikanu-footer-kolom__kop[aria-expanded='true'] .amerikanu-footer-kolom__teken::before {
		content: '\2212';
	}
	.amerikanu-footer-links {
		padding: 0 0 20px;
		font-size: 15px;
	}
	.amerikanu-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 24px 0 34px;
	}
}