/**
 * FAQ / Helpcenter — mytheme
 *
 * Alle kleuren, spacing en maten staan als custom properties bovenaan,
 * zodat ze eenvoudig op de eigen huisstijl gemapt kunnen worden.
 *
 * Let op: CSS custom properties werken niet in media queries. Het
 * breekpunt tussen mobiel en desktop is daarom een vaste waarde (900px)
 * en staat als commentaar bij elke media query.
 */

:root {
	/* Layout */
	--faq-max-width: 1140px;
	--faq-sidebar-width: 280px;
	--faq-layout-gap: 56px;
	/* Scroll-offset voor deep links, uit de echte (gescrolde) headerhoogte
	   in plaats van een losse 80px die niet meebewoog met de header. */
	--header-offset: var(--dg-onder-header, calc(var(--dg-header-vol, 81px) + var(--dg-space-4, 16px)));

	/* Kleuren */
	/* Terugval = de oorspronkelijke pakketwaarde, zodat dit blad
	   losstaand blijft werken; met het thema erbij lopen ze mee met de
	   merktokens. Zonder die koppeling stond deze pagina op een ander
	   zwart (#1d1d1f) dan het shoparchief (#1d1d1d) en de rest van de
	   site. */
	--faq-color-text: var(--ink, #1d1d1f);
	--faq-color-text-muted: var(--metadata, #6d6d72);
	--faq-color-heading: var(--ink, #111112);
	--faq-color-accent: var(--ink, #1d1d1f);
	--faq-color-link: var(--ink, #1d1d1f);
	--faq-color-line: var(--line, #e4e4e7);
	--faq-color-surface: var(--paper, #ffffff);
	--faq-color-surface-alt: var(--surface, #f6f6f4);
	--faq-color-focus: var(--moss, #B64444); /* focus in het merkaccent i.p.v. systeemblauw */

	/* Typografie */
	--faq-font-size-base: 1rem;
	--faq-font-size-small: 0.875rem;
	--faq-font-size-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.375rem);
	--faq-font-size-h2: 1.125rem;
	--faq-line-height: 1.6;

	/* De --faq-space-schaal en --faq-gutter staan niet meer hier:
	   style.css (sectie 34a) definieert ze op :root en laadt altijd
	   later — een kopie hier is dood gewicht dat edits opslokt. */

	/* Vormen & overgangen */
	--faq-radius: 8px;
	--faq-transition: 160ms ease;
}

/* -------------------------------------------------------------------------
 * Basis & layout
 * ---------------------------------------------------------------------- */

.faq {
	color: var(--faq-color-text);
	font-size: var(--faq-font-size-base);
	line-height: var(--faq-line-height);
	background: var(--faq-color-surface);
}

.faq__inner {
	max-width: var(--faq-max-width);
	margin: 0 auto;
	padding: var(--faq-space-6) var(--faq-gutter) var(--faq-space-8);
}

.faq__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--faq-space-6);
}

/* Desktop: tweekolomslayout. (Breekpunt: 900px) */
@media (min-width: 900px) {
	.faq__layout {
		grid-template-columns: var(--faq-sidebar-width) minmax(0, 1fr);
		gap: var(--faq-layout-gap);
		align-items: start;
	}
}

.faq__title {
	margin: 0 0 var(--faq-space-4);
	color: var(--faq-color-heading);
	font-size: var(--faq-font-size-h1);
	line-height: 1.2;
}

.faq__intro {
	max-width: 65ch;
	margin: 0 0 var(--faq-space-6);
	color: var(--faq-color-text-muted);
}

.faq__intro p {
	margin: 0 0 var(--faq-space-3);
}

.faq__intro p:last-child {
	margin-bottom: 0;
}

/* Zichtbare focus voor alle interactieve FAQ-elementen. */
.faq a:focus-visible,
.faq button:focus-visible,
.faq summary:focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--faq-color-focus));
	outline-offset: 2px;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Breadcrumb
 *
 * .faq-breadcrumb en zijn __list/__item/__link zijn hier weg. Het eigen
 * kruimelpad van dit pakket is uit taxonomy-faq_topic.php gehaald:
 * dreamglow-nav plaatst er al een onder de header, inclusief JSON-LD, en
 * twee onder elkaar zag er dubbel uit. Geen van deze klassen komt dus
 * nog in de HTML voor.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Sidebar: onderwerpen
 * ---------------------------------------------------------------------- */

.faq-topics__heading,
.faq-self__heading {
	margin: 0 0 var(--faq-space-3);
	color: var(--faq-color-heading);
	font-size: var(--faq-font-size-h2);
	line-height: 1.3;
}

.faq-topics__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.faq-topics__item {
	border-bottom: 1px solid var(--faq-color-line);
}

.faq-topics__link {
	display: block;
	padding: var(--faq-space-3) var(--faq-space-2);
	color: var(--faq-color-text-muted);
	text-decoration: none;
	transition: color var(--faq-transition), background-color var(--faq-transition);
}

.faq-topics__link:hover {
	color: var(--faq-color-text);
	background: var(--faq-color-surface-alt);
}

.faq-topics__item--active .faq-topics__link {
	color: var(--faq-color-heading);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--faq-color-accent);
	background: var(--faq-color-surface-alt);
}

/* Mobiel: lijst inklappen achter een <details>-dropdown. (Breekpunt: 900px) */
.faq-topics__heading {
	display: none;
}

.faq-topics__list--desktop {
	display: none;
}

.faq-topics__dropdown {
	border: 1px solid var(--faq-color-line);
	border-radius: var(--faq-radius);
	background: var(--faq-color-surface);
}

.faq-topics__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--faq-space-3);
	padding: var(--faq-space-3) var(--faq-space-4);
	cursor: pointer;
	font-weight: 600;
	color: var(--faq-color-heading);
	list-style: none;
}

.faq-topics__toggle::-webkit-details-marker {
	display: none;
}

.faq-topics__toggle-marker {
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--faq-transition);
}

.faq-topics__dropdown[open] .faq-topics__toggle-marker {
	transform: rotate(-135deg);
}

.faq-topics__list--dropdown {
	border-top: 1px solid var(--faq-color-line);
	padding: var(--faq-space-2);
}

.faq-topics__list--dropdown .faq-topics__item:last-child {
	border-bottom: 0;
}

@media (min-width: 900px) {
	.faq-topics__heading {
		display: block;
	}

	.faq-topics__list--desktop {
		display: block;
	}

	.faq-topics__dropdown {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Sidebar: "Doe het zelf"
 * ---------------------------------------------------------------------- */

.faq-self {
	margin-top: var(--faq-space-6);
	padding: var(--faq-space-4);
	border: 1px solid var(--faq-color-line);
	border-radius: var(--faq-radius);
	background: var(--faq-color-surface-alt);
}

.faq-self__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.faq-self__item + .faq-self__item {
	border-top: 1px solid var(--faq-color-line);
}

.faq-self__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--faq-space-3);
	padding: var(--faq-space-3) 0;
	color: var(--faq-color-link);
	text-decoration: none;
}

.faq-self__link:hover .faq-self__label {
	text-decoration: underline;
}

.faq-self__arrow {
	flex: none;
	transition: transform var(--faq-transition);
}

.faq-self__link:hover .faq-self__arrow {
	transform: translateX(3px);
}

/* -------------------------------------------------------------------------
 * Accordeons (vragen)
 * ---------------------------------------------------------------------- */

.faq-list {
	border-top: 1px solid var(--faq-color-line);
}

.faq-item {
	border-bottom: 1px solid var(--faq-color-line);
	/* Zorgt dat native anker-navigatie (zonder JS) onder de vaste header uitkomt. */
	scroll-margin-top: var(--header-offset);
}

.faq-item__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--faq-space-4);
	padding: var(--faq-space-4) var(--faq-space-2);
	cursor: pointer;
	list-style: none;
}

.faq-item__summary::-webkit-details-marker {
	display: none;
}

.faq-item__summary:hover {
	background: var(--faq-color-surface-alt);
}

.faq-item__question {
	margin: 0;
	font-size: var(--faq-font-size-h2);
	font-weight: 600;
	line-height: 1.4;
	color: var(--faq-color-heading);
}

.faq-item__marker {
	flex: none;
	width: 10px;
	height: 10px;
	margin-right: var(--faq-space-2);
	border-right: 2px solid var(--faq-color-text-muted);
	border-bottom: 2px solid var(--faq-color-text-muted);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--faq-transition);
}

.faq-item[open] > .faq-item__summary .faq-item__marker {
	transform: rotate(-135deg) translateY(-2px);
}

.faq-item__body {
	padding: 0 var(--faq-space-2) var(--faq-space-5);
}

.faq-item__answer {
	max-width: 70ch;
}

.faq-item__answer > *:first-child {
	margin-top: 0;
}

.faq-item__answer > *:last-child {
	margin-bottom: 0;
}

.faq-item__answer a {
	color: var(--faq-color-link);
}

/* Kopieer-link-knop */
.faq-item__actions {
	display: flex;
	align-items: center;
	gap: var(--faq-space-3);
	margin-top: var(--faq-space-4);
}

.faq-item__copy {
	display: inline-flex;
	align-items: center;
	gap: var(--faq-space-2);
	padding: var(--faq-space-1) var(--faq-space-3);
	border: 1px solid var(--faq-color-line);
	border-radius: 999px;
	background: var(--faq-color-surface);
	color: var(--faq-color-text-muted);
	font: inherit;
	font-size: var(--faq-font-size-small);
	cursor: pointer;
	transition: color var(--faq-transition), border-color var(--faq-transition);
}

.faq-item__copy:hover {
	color: var(--faq-color-text);
	border-color: var(--faq-color-text-muted);
}

.faq-item__copy--copied {
	color: var(--faq-color-heading);
	border-color: var(--faq-color-heading);
}

.faq-item__copy-status {
	font-size: var(--faq-font-size-small);
	color: var(--faq-color-text-muted);
}

/* Lege staat */
.faq__empty {
	padding: var(--faq-space-6);
	border: 1px dashed var(--faq-color-line);
	border-radius: var(--faq-radius);
	background: var(--faq-color-surface-alt);
}

.faq__empty p {
	margin: 0 0 var(--faq-space-3);
}

.faq__empty p:last-child {
	margin-bottom: 0;
}

.faq__empty-link {
	color: var(--faq-color-link);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Hubpagina: tegels
 *
 * .faq-hub__header/__grid/__tile* zijn hier weg. Ze horen bij de tegels
 * van de eigen hubpagina van dit pakket (page-templates/faq-hub.php),
 * maar die gebruiken wij niet: page-faq.php is het oorspronkelijke,
 * oudere overzicht en laadt assets/css/faq-hub.css (waar deze tegels
 * wél leven), niet dit bestand. Dit bestand laadt alleen op de
 * onderwerppagina's (is_tax('faq_topic')) — zie de enqueue-conditie in
 * mytheme_faq_enqueue_assets() in inc/faq.php — en die renderen geen
 * hub-tegels.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Contactblok (volle breedte)
 * ---------------------------------------------------------------------- */

.faq-contact {
	border-top: 1px solid var(--faq-color-line);
	background: var(--faq-color-surface-alt);
}

/* Geen eigen max-width meer naast de gutter.
   Sinds sectie 34a van style.css --faq-gutter naar --dg-gutter wijst,
   zit de centreerterm (100% - 1280px)/2 al ín die padding. Samen met de
   max-width hier werd het blok dus twee keer ingesnoerd en stond het
   ruim 150px verder naar binnen dan alle andere secties. */
.faq-contact__inner {
	padding: var(--faq-space-7) var(--faq-gutter);
}

.faq-contact__header {
	max-width: 65ch;
	margin-bottom: var(--faq-space-6);
}

.faq-contact__title {
	margin: 0 0 var(--faq-space-3);
	color: var(--faq-color-heading);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	line-height: 1.25;
}

.faq-contact__intro {
	color: var(--faq-color-text-muted);
}

.faq-contact__intro p {
	margin: 0 0 var(--faq-space-3);
}

.faq-contact__intro p:last-child {
	margin-bottom: 0;
}

.faq-contact__hours {
	margin: var(--faq-space-3) 0 0;
	font-size: var(--faq-font-size-small);
	color: var(--faq-color-text-muted);
}

.faq-contact__hours-label {
	font-weight: 600;
	color: var(--faq-color-text);
}

.faq-contact__channels {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--faq-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* (Breekpunten: 600px en 900px) */
@media (min-width: 600px) {
	.faq-contact__channels {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	/* auto-fit in plaats van vier vaste kolommen: het aantal kanalen is
	   variabel (de Customizer verbergt lege vanzelf), en bij drie stond
	   er een gat waar het vierde had moeten staan. */
	.faq-contact__channels {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}
}

.faq-contact__card {
	display: flex;
	flex-direction: column;
	gap: var(--faq-space-2);
	height: 100%;
	padding: var(--faq-space-5);
	border: 1px solid var(--faq-color-line);
	border-radius: var(--faq-radius);
	background: var(--faq-color-surface);
	color: var(--faq-color-text);
	text-decoration: none;
	transition: border-color var(--faq-transition);
}

.faq-contact__card:hover {
	border-color: var(--faq-color-text-muted);
}

.faq-contact__icon {
	display: inline-flex;
	color: var(--faq-color-accent);
}

.faq-contact__card-title {
	font-weight: 600;
	color: var(--faq-color-heading);
}

.faq-contact__card-sub {
	font-size: var(--faq-font-size-small);
	color: var(--faq-color-text-muted);
}

/* -------------------------------------------------------------------------
 * Bewegingsvoorkeuren
 * ---------------------------------------------------------------------- */

/* Geen eigen prefers-reduced-motion-blok meer: style.css sectie 2 zet
   `*, *::before, *::after { animation: none !important; transition: none
   !important }` en dekt alles hier al. De kopieën liepen bovendien uit
   elkaar — sommige zetten `none`, andere 0.01ms — en omdat een gescopede
   selector met !important van de universele wint, vuurde transitionend
   binnen het ene pakket wél en binnen het andere niet. Scripts die op
   dat event wachten gedroegen zich daardoor per pagina anders. */