/* AmerikaNu — basisstijlen (fase-4 Task 8). Licht reset + body + typografie-schaal +
   .container + knop-utilities. Detailwaarden 1:1 uit README §4 van design/website-compleet/. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	color: var(--body);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
}

/* D9-fix (controleronde 2026-08-10): Kadence's eigen inline-CSS (kadence-global-inline-css, zie
   inc/components/styles/component.php generate_base_css()) zet ná al onze CSS-bestanden óók een
   kale `body{background:var(--global-palette8)}`-regel (koel lichtgrijs #F7FAFC i.p.v. het
   bedoelde warme #FAFAF7). Zelfde specificiteit (element-selector `body`, 0-0-1) → wint puur op
   laadvolgorde. `html body` heeft specificiteit 0-0-2 en wint daarmee deterministisch, ongeacht
   laadvolgorde/toekomstige Kadence-updates — geen !important, geen DB-optiewijziging nodig. */
html body {
	background: var(--bg);
}

img,
picture,
svg {
	max-width: 100%;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--navy);
	font-family: var(--font);
	font-weight: 800;
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

/* H1 40–56/800/-0.02em, H2 26–32/800/-0.015em (README §4-schaal). */
h1 {
	font-size: clamp(40px, 3.2vw + 24px, 56px);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

h2 {
	font-size: clamp(26px, 1.6vw + 18px, 32px);
	line-height: 1.18;
	letter-spacing: -0.015em;
}

/* Kicker-klasse: 11/800/0.1em uppercase. */
.eyebrow {
	display: block;
	font-family: var(--font);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--magenta);
}

.container {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 16px;
}

/* Buttons: primair magenta vlak, secundair outline navy — beide pill (28px radius), 14/24
   padding, 700-gewicht. Hover: magenta → magenta-hover / roze-tint. Press: scale 0.98. */
.knop-magenta,
.knop-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: var(--radius-hero);
	font-family: var(--font);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--motion), color var(--motion), border-color var(--motion), transform var(--motion);
}

.knop-magenta {
	border: none;
	background: var(--magenta);
	color: #FFFFFF;
}

.knop-magenta:hover,
.knop-magenta:focus-visible {
	background: var(--magenta-hover);
	color: #FFFFFF;
}

.knop-magenta:active {
	transform: scale(0.98);
}

.knop-outline {
	background: transparent;
	color: var(--navy);
	border: 1.5px solid var(--navy);
}

.knop-outline:hover,
.knop-outline:focus-visible {
	background: var(--roze);
	border-color: var(--navy);
}

.knop-outline:active {
	transform: scale(0.98);
}

/* Knoppen-conventie (David 31-08, "zorg dat het voor altijd gefixt blijft"): Kadence's
   global.min.css geeft élke <button> bij :hover/:focus/:active palette-blauw (tekst palette9/
   wit, achtergrond palette2 #215387) plus een schaduw, met specificiteit 0-1-1. Onze CSS laadt
   sinds 31-08 ná Kadence (functions.php, prioriteit 20), dus voor <a>-knoppen wint onze
   klasse-kleur nu op volgorde. Voor <button>-elementen wint Kadence nog op specificiteit;
   daarom: ELKE knop zet zijn eigen :hover- en :focus-visible-kleur (tekst én achtergrond).
   De regel hieronder haalt alvast de Kadence-schaduw weg voor alle themaknoppen, en
   tests/e2e/095-knop-hover.py faalt zodra een knop bij hover toch Kadence-blauw wordt. */
button[class*="amerikanu-"]:hover,
button[class*="amerikanu-"]:focus,
button[class*="amerikanu-"]:active,
button[class*="knop-"]:hover,
button[class*="knop-"]:focus,
button[class*="knop-"]:active {
	box-shadow: none;
}

/* -- sluitknoppen van popups/panelen (R3-fix, David 2026-08-14) --------------------------------- */
/* Root cause (al vastgesteld bij de excursie-popup-fix van 2026-08-11, reis.css): Kadence se
   globale "button, .button, .wp-block-button__link, …"-regel (global.min.css) legt op élke kale
   <button> `padding: .4em 1em` + `font-size: 1.125rem`. Op een sluitknop van 36-38px met
   box-sizing:border-box eet die padding (~18px per kant) de hele content-box op: het svg-kruisje
   rendert op 0-2px breedte — onzichtbaar, terwijl de knop zelf klikbaar blijft. Dat werd toen per
   popup opgelost, waardoor elke nieuwe popup de bug opnieuw erfde (gemeten 2026-08-14: lightbox
   2px, adviesgesprek-popup 0px). Daarom hier één sitewide regel in basis.css i.p.v. per component.
   Nieuwe popups: geef de sluitknop .amerikanu-sluitknop mee, dan is dit automatisch gedekt. */
.amerikanu-sluitknop,
.amerikanu-lightbox__sluit,
.amerikanu-plan-popup__sluit,
.amerikanu-excursie-popup__sluit,
.amerikanu-reviews__popup-sluit,
.amerikanu-mobiel-paneel__sluit {
	padding: 0 !important;
	font-size: 0;
	line-height: 0;
}
.amerikanu-sluitknop svg,
.amerikanu-lightbox__sluit svg,
.amerikanu-plan-popup__sluit svg,
.amerikanu-excursie-popup__sluit svg,
.amerikanu-reviews__popup-sluit svg,
.amerikanu-mobiel-paneel__sluit svg {
	width: 16px;
	height: 16px;
	max-width: none;
	flex: none;
}