/*
Theme Name: Alpina Campagne
Theme URI: https://alpina.nl
Author: Social Brothers
Description: Block theme (FSE) voor de Alpina × KingPolis verzuim-campagnelandingspagina. Brand-tokens, de punten en de haakjes volgens de Alpina campagne-styleguide (jan. 2026).
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: alpina-campagne
*/

/*
 * Almost all styling lives in theme.json (tokens) and the section patterns.
 * This file holds only the few things theme.json cannot express:
 * the sticky header, "de punten" notch dividers and "de haakjes" focus brackets.
 */

/*
 * Header: volle witte balk, sticky bovenaan (Figma 141:201). Schuin aflopende
 * onderhoeken via clip-path ("schuine hoeken in de witte balk").
 */
header.wp-block-group.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: 120px;
	padding: 0;
}
/*
 * Wit gevormd vlak (Figma Subtract): hoog-links (logo) → schuine diagonaal →
 * dunne strip rechts. path() i.p.v. polygon zodat de hoeken een kleine
 * border-radius hebben (brand: geen scherpe punten). Strip loopt door tot 3000px
 * (full-bleed op brede schermen), de linker-features blijven vast.
 */
.alpina-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	/* Figma Subtract (141:203): hoog links (115px, onder logo) → punt-golf → 64px rechts → full-bleed */
	clip-path: path("M0 0 L3000 0 L3000 64 L480 64 L409 64 C402 64 398 68 395 70 L375 90 L356 109 C354 111 349 115 343 115 L0 115 Z");
	z-index: 0;
	pointer-events: none;
}
/*
 * Logo verticaal gecentreerd in de 120px-balk (Figma 141:205: logo y=32, h=56),
 * de CTA blijft in de bovenste 64px-strook (Figma 141:207, y=0).
 */
.alpina-header__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none !important; /* niet centreren als alignwide (overschrijft de WP-layout) */
	min-height: 120px;
	box-sizing: border-box;
	/* logo-inset gecapt op 96px zodat het op brede schermen in het witte vak
	   blijft (de witte vorm is viewport-verankerd); CTA blijft op container-rechts. */
	padding-left: clamp(24px, calc((100% - 1248px) / 2), 96px);
	padding-right: max(24px, calc((100% - 1248px) / 2));
}
header.wp-block-group.site-header > .alpina-header__inner,
.alpina-header { display: flex; align-items: center; }
.alpina-header__inner .wp-block-site-logo .custom-logo { width: 175px; max-width: none; height: auto; display: block; } /* Figma logo ≈175×56 */
.alpina-header__inner > .wp-block-buttons { align-self: flex-start; } /* CTA bovenaan (Figma y=0) */

/*
 * De header overlapt de bovenkant van de hero-foto (Figma: Header én Hero op y=0).
 * De hero schuift 120px omhoog onder de sticky header door; de witte subtract-vorm
 * (::before) onthult de foto via de diagonaal en de 64px-strook rechts.
 */
main.wp-block-group { margin-top: 0 !important; }
.wp-block-post-content > .ah-hero:first-child { margin-top: -120px !important; }

/* Hero (Figma 141:211) — foto full-bleed, petrol-paneel met schuine hoek linksonder */
.hero-v2 { position: relative; margin-top: -92px; } /* foto onder de witte header door (Figma: header overlapt fototop) */
.hero-v2 .wp-block-cover__image-background {
	object-position: center 38%; /* beeld is vooraf bijgesneden + gespiegeld (Figma KeyVisual 141:214) */
}
.hero-v2 .wp-block-cover__inner-container { width: 100%; }
.hero-inner { display: contents; }
/*
 * Petrol-paneel: bleedt links tot de viewport-rand en staat vast tegen de
 * onderkant van de hero (feedback). Tekst lijnt uit met de container-gutter.
 * Schuin aflopende top-rechter hoek.
 */
.hero-panel {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	max-width: min(580px, 50%);
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--white);
	min-height: 360px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 36px 44px 36px clamp(24px, 4vw, 52px);
	clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%);
}
.hero-panel :where(h1,p){ color: var(--wp--preset--color--white); }
.hero-panel .wp-block-buttons { flex-wrap: nowrap; }
.hero-panel .wp-block-button__link { padding: 13px 20px; font-size: 14px; white-space: nowrap; }
.hero-review {
	position: absolute;
	right: max(16px, calc((100% - 1248px) / 2));
	bottom: 28px;
	z-index: 2;
}
@media (max-width: 781px){
	.hero-panel { position: static; max-width: none; clip-path: none; padding: 28px var(--wp--preset--spacing--40); }
	.hero-review { position: static; margin: 16px var(--wp--preset--spacing--40) 0; width: max-content; }
}

/* Google-review badge rechtsonder (Figma: G 4.3 ★ 834 Google beoordelingen) */
.hero-review {
	background: #fff;
	border-radius: 10px;
	padding: 9px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--petrol);
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(10,54,75,0.12);
}
.hero-review .g-icon { width: 22px; height: 22px; flex: none; }
.hero-review .r-rating { display: flex; flex-direction: column; line-height: 1.25; }
.hero-review .r-top { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.hero-review .r-top strong { color: var(--wp--preset--color--petrol); }
.hero-review .stars { color: #FBBC04; letter-spacing: 1px; font-size: 13px; }
.hero-review .r-sub { font-size: 11px; color: #5B6B79; }
@media (max-width: 781px){
	.hero-inner { flex-direction: column; align-items: stretch; }
	.hero-panel { max-width: none; }
	.hero-review { align-self: flex-start; }
}

/* Witte logo-balk met schuin aflopende hoek (feedback: "logo in witte balk, schuin aflopen") */
.logo-label { clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }

/* Knoppen: gelijke hoogte (transparante rand op gevulde knoppen) */
.wp-block-button__link { border: 2px solid transparent; }

/*
 * Header-CTA (Figma 141:208): hardroze parallellogram dat de volledige 64px-strook
 * vult (geen witte balk eronder). Beide zijranden schuin (Figma: twee Union-assets
 * cutten de hoeken → clip-path-parallellogram). Inter Medium 16/24, tekst recht.
 */
.ah-cta .wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 64px; /* vult de 64px-strook (Figma button h=66) */
	min-width: 259px; /* Figma button-breedte (141:208) → linkerrand/schuinte op juiste plek */
	box-sizing: border-box;
	background: var(--wp--preset--color--hardroze) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0;
	padding: 8px 22px 8px 16px; /* Figma pl-16 / pr-22 / py-8 */
	font-family: "Inter", system-ui, sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.3125px;
	line-height: 24px;
	/* Parallellogram (259×64) met lichte radius op linksboven + rechtsonder
	   (Figma: schuine hoeken afgerond, huisstijl "geen scherpe punten"). path()
	   i.p.v. polygon zodat die twee hoeken een curve krijgen. */
	clip-path: path("M22 0 L259 0 L244.5 58.2 Q243 64 237 64 L0 64 L14.5 5.8 Q16 0 22 0 Z");
	transition: transform 0.18s ease, filter 0.18s ease, background-color 0.18s ease;
}
/* subtiele hover (drop-shadow i.p.v. box-shadow: clip-path knipt box-shadow weg) */
.ah-cta .wp-block-button__link:hover {
	background: #c70047 !important;
	transform: translateY(-1px);
	filter: drop-shadow(0 4px 10px rgba(229, 0, 83, 0.32));
}
/* Dunne chevron (Figma: Material chevron_right 24px, lichte streek) */
.ah-cta .wp-block-button__link::after {
	content: "";
	width: 9px; height: 9px;
	margin-left: -2px;
	border-right: 1.5px solid #fff;
	border-top: 1.5px solid #fff;
	transform: rotate(45deg);
}

/* Toegankelijkheid: geen hover-beweging bij prefers-reduced-motion (geldt voor alle CTA's) */
@media (prefers-reduced-motion: reduce) {
	.ah-cta .wp-block-button__link, .ah-btn, .ak-btn, .at-btn, .aw-btn, .gform_button, .avc-submit {
		transition: none !important;
	}
	.ah-cta .wp-block-button__link:hover, .ah-btn:hover, .ak-btn:hover, .at-btn:hover, .aw-btn:hover, .gform_button:hover, .avc-submit:hover {
		transform: none !important;
	}
}

/* Mobiel: hero niet onder de header door (anders vallen de koppen achter de
   witte balk). De desktop-overlap (-120px) wordt teruggezet naar 0. */
@media (max-width: 781px) {
	.wp-block-post-content > .ah-hero:first-child { margin-top: 0 !important; }
}

/* Mobiel: header = schone, STICKY witte balk met logo + CTA (compact).
   - Sticky op de OUTER template-part (beslaat de hele pagina) i.p.v. de inner,
     anders plakt hij niet (sticky werkt binnen de ouder).
   - Geen diagonale subtract-vorm (::before) → volle witte balk.
   - Compacter (72px), logo + CTA verticaal gecentreerd.
   - De vaste path()-clip (259×64) wordt een schaalbaar parallellogram. */
@media (max-width: 781px) {
	header.site-header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 100;
	}
	header.wp-block-group.site-header {
		position: static;
		min-height: 72px;
		background: #fff;
		box-shadow: 0 2px 10px rgba(10, 54, 75, 0.10);
	}
	.alpina-header::before { display: none; }
	.alpina-header__inner {
		min-height: 72px;
		padding-left: 16px;
		padding-right: 16px;
		gap: 12px;
		align-items: center;
	}
	.alpina-header__inner > .wp-block-buttons { align-self: center; }
	.alpina-header__inner .wp-block-site-logo .custom-logo { width: 120px; }
	.ah-cta .wp-block-button__link {
		min-width: 0;
		min-height: 0;
		padding: 10px 16px 10px 14px;
		font-size: 13px;
		clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	}
}

/* Smooth scroll for on-page CTA anchors (decision #11) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/*
 * "De punten" — the signature white notch that points to the centre of a
 * colour block. Always white, 10% of the longest edge. Applied as a
 * top/bottom divider on a section group via the .has-punt-top / -bottom class.
 */
.has-punt-top,
.has-punt-bottom { position: relative; }
.has-punt-top::before,
.has-punt-bottom::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 10%;
	max-width: 134px;
	aspect-ratio: 134 / 52;
	background: url(assets/svg/punt.svg) no-repeat center top / contain;
	pointer-events: none;
}
.has-punt-top::before { top: 0; }
.has-punt-bottom::after { bottom: 0; transform: translateX(-50%) rotate(180deg); }

/*
 * "De haakjes" — orange focus brackets framing a photo. Wrap an image in
 * .has-haakjes; brackets sit top-left and bottom-right by default.
 */
.has-haakjes { position: relative; }
.has-haakjes::before,
.has-haakjes::after {
	content: "";
	position: absolute;
	width: clamp(40px, 6vw, 84px);
	height: clamp(40px, 6vw, 84px);
	background: url(assets/svg/haakje.svg) no-repeat center / contain;
	pointer-events: none;
}
.has-haakjes::before { top: -12px; left: -12px; }
.has-haakjes::after { bottom: -12px; right: -12px; transform: rotate(180deg); }

/* Contrast-variant: witte haakjes binnen gekleurde kaarten (waarom-sectie) */
.has-haakjes-contrast { position: relative; }
.has-haakjes-contrast::before,
.has-haakjes-contrast::after {
	content: "";
	position: absolute;
	width: clamp(28px, 4vw, 44px);
	height: clamp(28px, 4vw, 44px);
	background: var(--wp--preset--color--petrol);
	-webkit-mask: url(assets/svg/haakje.svg) no-repeat center / contain;
	mask: url(assets/svg/haakje.svg) no-repeat center / contain;
	pointer-events: none;
}
/* Op de petrol-kaart (kaart 3) oranje haakjes i.p.v. petrol */
.has-petrol-background-color.has-haakjes-contrast::before,
.has-petrol-background-color.has-haakjes-contrast::after {
	background: var(--wp--preset--color--orange);
}
.has-haakjes-contrast::before { top: 16px; left: 16px; }
.has-haakjes-contrast::after { bottom: 16px; right: 16px; transform: rotate(180deg); }

/* Witte punt-notch boven- en onderaan kaarten (waarom-sectie, Figma) */
.has-card-punt {
	background-image: url(assets/svg/punt.svg), url(assets/svg/punt-up.svg);
	background-position: top center, bottom center;
	background-repeat: no-repeat, no-repeat;
	background-size: 46px auto, 46px auto;
}

/* Grote sier-aanhalingstekens (quote-sectie) */
.alpina-quote-mark {
	font-family: var(--wp--preset--font-family--prompt);
	font-size: clamp(4rem, 8vw, 7rem);
	line-height: 0.6;
	color: var(--wp--preset--color--orange);
}
.alpina-quote-mark--close { margin-top: -8px; }

/* Quote-foto vult dezelfde hoogte als de cream-card */
.quote-photo, .quote-photo .wp-block-image, .quote-photo figure { height: 100%; margin: 0; }
.quote-photo img { height: 100%; width: 100%; object-fit: cover; }
.quote-card { height: 100%; box-sizing: border-box; }

/* Form-sectie: ruimte rond de content + mock-formulier (Figma 141:380) */
#formulier.wp-block-media-text { min-height: 480px; align-items: center; }
.wp-block-media-text__content { padding: var(--wp--preset--spacing--60) clamp(24px, 5vw, 80px); }
.alpina-mockform { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.alpina-mockform input {
	width: 100%;
	padding: 13px 16px;
	border-radius: 8px;
	border: none;
	background: #fff;
	color: var(--wp--preset--color--petrol);
	font-size: 15px;
}
.alpina-mockform input::placeholder { color: #5B6B79; }
.alpina-mockform button {
	margin-top: 4px;
	padding: 14px 22px;
	border: none;
	border-radius: 10px;
	background: var(--wp--preset--color--hardroze);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

/* Checklist list style (Voordelen section) — orange check marker */
.wp-block-list.is-style-checklist {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
.wp-block-list.is-style-checklist > li {
	position: relative;
	padding-left: 2.25rem;
	margin-bottom: 0.75rem;
}
.wp-block-list.is-style-checklist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--orange);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.75 8.25-8.25 1.4 1.4z'/%3E%3C/svg%3E") center / 70% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.75 8.25-8.25 1.4 1.4z'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* FAQ-accordion: witte kaart-items met chevron (Figma 141:400) */
.faq-section .wp-block-details.faq-item {
	background: #fff;
	border-radius: 12px;
	margin-bottom: 12px;
	padding: 0;
	border: none;
	box-shadow: 0 1px 6px rgba(10,54,75,0.05);
}
.faq-section .faq-item > summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-family: var(--wp--preset--font-family--prompt);
	font-weight: 500;
	color: var(--wp--preset--color--petrol);
}
.faq-section .faq-item > summary::-webkit-details-marker { display: none; }
.faq-section .faq-item > summary::after {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	border-right: 2px solid var(--wp--preset--color--petrol);
	border-bottom: 2px solid var(--wp--preset--color--petrol);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.faq-section .faq-item[open] > summary::after { transform: rotate(-135deg); }
.faq-section .faq-item > :not(summary) { padding: 0 24px 20px; margin: 0; color: var(--wp--preset--color--tertiary, #5B6B79); }

/* Outline buttons (hero secondary) sit on dark photo → white border */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: currentColor;
}

/* Full-bleed campagne-secties sluiten tegen elkaar — geen block-gap witruimte */
.entry-content.wp-block-post-content > * + * { margin-block-start: 0 !important; }
.wp-block-group > main.wp-block-group, main.wp-block-group { row-gap: 0 !important; }

/* Geen witruimte tussen de laatste content-sectie (FAQ) en de footer */
.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:last-child { margin-block-start: 0 !important; }