/* ==========================================================================
   Phoneforce - eigen componenten
   --------------------------------------------------------------------------
   Aanvulling op style.css en patterns.css. Zelfde regels als daar:
   begint op 320px, twee breekpunten (48rem en 64rem), en geen enkele losse
   kleurwaarde: alles verwijst naar de tokens uit style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero met schermafbeelding
   -------------------------------------------------------------------------- */

.pf-hero__copy {
	position: relative;
	z-index: 2;
}

/* De kop van deze hero is een volle zin met lange samenstellingen erin.
   Op de displaygrootte uit theme.json past "telefoonwinkels" niet in de
   tekstkolom, dus die kop krijgt een eigen, iets kleinere schaal. */
.pf-hero__title {
	font-size: clamp(2.125rem, 1.35rem + 3.3vw, 3.5rem);
	letter-spacing: -0.015em;
}

.pf-hero__shot {
	position: relative;
	z-index: 2;
	margin: var(--sp-7) 0 0;
}

.pf-hero__shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--pf-line);
	border-radius: var(--radius);
	box-shadow: 0 18px 40px -24px rgba(11, 37, 69, 0.45);
	background-color: var(--pf-surface);
}

.pf-hero__shot figcaption {
	margin-block-start: var(--sp-3);
	color: var(--pf-text-subtle);
	font-size: var(--fs-micro);
}

/* --------------------------------------------------------------------------
   2. Truststrip
   -------------------------------------------------------------------------- */

.pf-trust {
	padding-block: var(--sp-6);
	border-bottom: 1px solid var(--pf-line);
	background-color: var(--pf-surface);
}

.pf-trust__list {
	display: grid;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-trust__item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon title"
		"icon text";
	align-items: start;
	column-gap: var(--sp-3);
}

.pf-trust__icon {
	grid-area: icon;
	width: 1.5rem;
	height: 1.5rem;
	margin-block-start: 0.125rem;
	color: var(--pf-accent-text);
}

.pf-trust__title {
	grid-area: title;
	font-family: var(--pf-font-display);
	font-weight: 600;
	line-height: 1.3;
}

.pf-trust__text {
	grid-area: text;
	color: var(--pf-text-muted);
	font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   3. Paneel: een omkaderd blok binnen een sectie
   -------------------------------------------------------------------------- */

.pf-panel {
	padding: var(--sp-5);
	border: 1px solid var(--pf-line);
	border-radius: var(--radius);
	background-color: var(--pf-surface);
}

.pf-panel > :first-child {
	margin-block-start: 0;
}

.pf-panel > :last-child {
	margin-block-end: 0;
}

/* De kolom "hoe het nu gaat" staat bewust vlak: geen vulling, geen accent.
   Het verschil tussen de twee kolommen moet uit de tekst komen, niet uit kleur. */
.pf-panel--before {
	border-style: dashed;
	background-color: transparent;
}

.pf-panel--after {
	border-color: var(--pf-accent);
	box-shadow: inset 0 0 0 1px var(--pf-accent);
}

/* Opsomming zonder vinkje, voor punten die geen voordeel beschrijven. */
.pf-list--plain > li::before {
	background-color: var(--pf-text-subtle);
	opacity: 0.5;
}

/* --------------------------------------------------------------------------
   4. Stappen met schermafbeelding
   -------------------------------------------------------------------------- */

.pf-stappen__list {
	display: grid;
	gap: var(--sp-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-stap {
	display: grid;
	gap: var(--sp-5);
}

.pf-stap__nr {
	display: block;
	margin-block-end: var(--sp-2);
	color: var(--pf-accent-text);
	font-family: var(--pf-font-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
}

.pf-stap__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--pf-font-display);
	font-size: var(--fs-h3);
	line-height: 1.25;
}

.pf-stap__text {
	margin: 0;
	max-width: var(--measure);
	color: var(--pf-text-muted);
}

.pf-stap__punten {
	margin-block-start: var(--sp-4);
}

.pf-stap__shot {
	margin: 0;
}

.pf-stap__shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--pf-line);
	border-radius: var(--radius);
	box-shadow: 0 14px 32px -22px rgba(11, 37, 69, 0.4);
	background-color: var(--pf-surface);
}

/* --------------------------------------------------------------------------
   5. Donkere sectie
   -------------------------------------------------------------------------- */

.pf-section--navy {
	background-color: var(--pf-navy);
	color: var(--pf-navy-text);
}

.pf-section--navy .pf-eyebrow,
.pf-section--navy .pf-stap__nr {
	color: var(--pf-accent);
}

.pf-section--navy p,
.pf-section--navy .pf-lead,
.pf-section--navy li {
	color: var(--pf-navy-muted);
}

.pf-section--navy h2,
.pf-section--navy h3 {
	color: var(--pf-navy-text);
}

.pf-section--navy .pf-card {
	border-color: var(--pf-navy-line);
	background-color: var(--pf-navy-deep);
}

.pf-section--navy .pf-card__icon {
	color: var(--pf-accent);
}

.pf-section--navy .pf-list > li::before {
	background-color: var(--pf-accent);
}

.pf-section--navy a {
	color: var(--pf-navy-text);
}

.pf-section--navy a:hover {
	color: var(--pf-accent);
}

.pf-section--navy :focus-visible {
	outline-color: var(--pf-accent);
}

/* De secundaire knop erft --pf-text (donkere inkt) en zou op marineblauw
   onleesbaar zijn. Op een donkere sectie draait hij dus om. */
.pf-section--navy .pf-btn--secondary,
.pf-cta .pf-btn--secondary {
	border-color: var(--pf-navy-muted);
	color: var(--pf-navy-text);
	background-color: transparent;
}

.pf-section--navy .pf-btn--secondary:hover,
.pf-cta .pf-btn--secondary:hover {
	border-color: var(--pf-accent);
	color: var(--pf-navy-text);
	background-color: rgba(234, 241, 251, 0.08);
}

/* --------------------------------------------------------------------------
   6. Voorbeeldzoekopdrachten
   -------------------------------------------------------------------------- */

.pf-searchlist {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-searchlist li {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--pf-line);
	border-radius: var(--radius-pill);
	background-color: var(--pf-bg);
	color: var(--pf-text-muted);
	font-size: var(--fs-small);
}

.pf-searchlist__icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--pf-text-subtle);
}

/* --------------------------------------------------------------------------
   7. Telefoonschermen naast elkaar
   -------------------------------------------------------------------------- */

.pf-phones {
	display: flex;
	gap: var(--sp-4);
	justify-content: center;
}

.pf-phone {
	flex: 1 1 0;
	max-width: 12rem;
	margin: 0;
}

.pf-phone img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--pf-line);
	border-radius: var(--radius-lg);
	box-shadow: 0 14px 32px -22px rgba(11, 37, 69, 0.4);
	background-color: var(--pf-surface);
}

/* --------------------------------------------------------------------------
   8. Contactroutes
   -------------------------------------------------------------------------- */

.pf-routes {
	display: grid;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-route {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-5);
	border: 1px solid var(--pf-line);
	border-radius: var(--radius);
	background-color: var(--pf-surface);
}

/* De eerste route is de aanbevolen route en krijgt als enige een accentrand.
   De rand is niet het enige signaal: er staat ook een reactietijd bij. */
.pf-route--primary {
	border-color: var(--pf-accent);
	box-shadow: inset 0 0 0 1px var(--pf-accent);
}

.pf-route__icon {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--pf-accent-text);
}

.pf-route__title {
	margin: 0;
	font-family: var(--pf-font-display);
	font-size: var(--fs-h3);
}

.pf-route__text {
	flex: 1 1 auto;
	margin: 0;
	color: var(--pf-text-muted);
}

.pf-route .pf-btn {
	width: 100%;
}

.pf-route__meta {
	margin: 0;
	color: var(--pf-text-subtle);
	font-size: var(--fs-micro);
}

/* --------------------------------------------------------------------------
   9. Afsluitende oproep
   -------------------------------------------------------------------------- */

.pf-cta {
	background-color: var(--pf-navy);
	color: var(--pf-navy-text);
}

.pf-cta__inner {
	max-width: 46rem;
}

.pf-cta .pf-eyebrow {
	color: var(--pf-accent);
}

.pf-cta__title {
	margin-block: var(--sp-3) var(--sp-4);
	color: var(--pf-navy-text);
}

.pf-cta .pf-lead {
	color: var(--pf-navy-muted);
}

.pf-cta__actions {
	margin-block-start: var(--sp-6);
}

.pf-cta__aside {
	margin-block-start: var(--sp-5);
	color: var(--pf-navy-muted);
	font-size: var(--fs-small);
}

.pf-cta__aside a {
	color: var(--pf-navy-text);
}

.pf-cta__aside a:hover {
	color: var(--pf-accent);
}

.pf-cta :focus-visible {
	outline-color: var(--pf-accent);
}

/* --------------------------------------------------------------------------
   10. Icoon in een knop
   -------------------------------------------------------------------------- */

.pf-btn__icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

/* --------------------------------------------------------------------------
   11. Lange woorden in koppen
   --------------------------------------------------------------------------
   Nederlands maakt lange samenstellingen. "Privacyverklaring" in displaygrootte
   is op 320px breder dan de kolom en duwde de hele pagina 3px opzij. De standaard
   eist dat er vanaf 320px niet horizontaal gescrold hoeft te worden, dus breken
   die woorden af. Afbreekstreepjes alleen op smalle schermen: op desktop is er
   ruimte genoeg en leest een streepje alleen maar rommelig.
   -------------------------------------------------------------------------- */

/* Alleen op smalle schermen breken. Op desktop is er ruimte zat en zou een
   afgebroken woord midden in een kop juist een fout lijken. */
@media (max-width: 47.99rem) {
	h1,
	h2,
	h3,
	.pf-hero__title,
	.pf-pagehead__title,
	.pf-cta__title,
	.pf-stap__title {
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* --------------------------------------------------------------------------
   12. Lopende tekst
   -------------------------------------------------------------------------- */

.pf-prose {
	max-width: var(--measure);
}

.pf-prose h2 {
	margin-block-start: var(--sp-7);
}

.pf-prose h2:first-child {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   13. Vanaf 48rem
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
	.pf-trust__list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-5) var(--sp-6);
	}

	.pf-routes {
		grid-template-columns: repeat(3, 1fr);
	}

	.pf-route .pf-btn {
		width: auto;
	}

	.pf-searchlist {
		gap: var(--sp-2);
	}

	.pf-stap {
		gap: var(--sp-6);
	}
}

/* --------------------------------------------------------------------------
   14. Vanaf 64rem
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
	/* patterns.css knijpt .pf-hero__inner op deze breedte tot 52rem. Dat hoorde bij
	   een hero van één kolom tekst. Deze hero heeft een tweede kolom met een
	   schermafbeelding en heeft de volle containerbreedte nodig. */
	.pf-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--sp-8);
		max-width: var(--container);
	}

	.pf-hero__shot {
		margin-block-start: 0;
	}

	.pf-trust__list {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Om en om: tekst links, scherm rechts, dan andersom. Dat houdt een lange
	   reeks stappen leesbaar en voorkomt dat het oog in één kolom blijft hangen. */
	.pf-stap {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: center;
		gap: var(--sp-8);
	}

	.pf-stap:nth-child(even) .pf-stap__copy {
		order: 2;
	}

	.pf-stappen__list {
		gap: var(--sp-9);
	}

	.pf-grid--wide-first {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		align-items: start;
	}

	.pf-phones {
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   15. Header: knop en menu op één regel
   --------------------------------------------------------------------------
   De knop in de header is kort genoeg om nooit te hoeven afbreken. Zonder
   nowrap viel "App ons" over twee regels en werd de header onnodig hoog,
   waarna het menu-item Contact naar een tweede regel sprong.
   -------------------------------------------------------------------------- */

.pf-site-header__cta {
	white-space: nowrap;
}