/* FAAM Zaak: neemt lettertype en kleuren van het thema over. Aanpasbaar via de --fz-variabelen. */
.fz {
	--fz-lijn: color-mix(in srgb, currentColor 18%, transparent);
	--fz-zacht: color-mix(in srgb, currentColor 65%, transparent);
	--fz-open: #1f7a3a;
	--fz-dicht: #b3261e;
}

/* Openingsuren */
.fz-uren-tabel { width: 100%; max-width: 32rem; border-collapse: collapse; margin: 0 0 .75em; }
.fz-uren-tabel th, .fz-uren-tabel td { text-align: left; padding: .45em .75em .45em 0; border-bottom: 1px solid var(--fz-lijn); font-weight: normal; vertical-align: top; }
.fz-uren-tabel td { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.fz-uren-tabel tr.is-vandaag th, .fz-uren-tabel tr.is-vandaag td { font-weight: 700; }
.fz-noot, .fz-afspraak { margin: .5em 0; }
.fz-noot { color: var(--fz-zacht); font-size: .95em; }
.fz-sluitingen { list-style: none; padding: 0; margin: .75em 0 0; }
.fz-sluitingen li { padding: .5em .75em; margin: 0 0 .4em; border-left: 3px solid var(--fz-dicht); background: color-mix(in srgb, var(--fz-dicht) 7%, transparent); }

/* Nu open of gesloten */
.fz-status { display: flex; align-items: center; gap: .5em; margin: 0; font-variant-numeric: tabular-nums; }
.fz-stip { width: .6em; height: .6em; border-radius: 50%; background: var(--fz-zacht); flex: none; }
.fz-status.is-open .fz-stip { background: var(--fz-open); }
.fz-status.is-gesloten .fz-stip { background: var(--fz-dicht); }

/* Prijzen */
.fz-prijzen { width: 100%; border-collapse: collapse; }
.fz-prijzen th, .fz-prijzen td { text-align: left; padding: .6em .75em .6em 0; border-bottom: 1px solid var(--fz-lijn); vertical-align: top; font-weight: normal; }
.fz-prijzen td { text-align: right; white-space: nowrap; padding-right: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fz-toelichting { display: block; font-size: .9em; color: var(--fz-zacht); margin-top: .15em; }

/* Diensten */
.fz-diensten { list-style: none; padding: 0; margin: 0; display: grid; gap: .9em; }
.fz-diensten li strong { display: block; }
.fz-diensten li span { display: block; color: var(--fz-zacht); }

/* Veelgestelde vragen */
.fz-vragen details { border-bottom: 1px solid var(--fz-lijn); }
.fz-vragen summary { cursor: pointer; padding: .8em 2em .8em 0; font-weight: 600; list-style: none; position: relative; }
.fz-vragen summary::-webkit-details-marker { display: none; }
.fz-vragen summary::after { content: "+"; position: absolute; right: .25em; top: .65em; font-weight: 400; font-size: 1.2em; line-height: 1; }
.fz-vragen details[open] summary::after { content: "–"; }
.fz-antwoord { padding: 0 0 .8em; }
.fz-antwoord > :first-child { margin-top: 0; }
.fz-antwoord > :last-child { margin-bottom: 0; }

/* Contact */
.fz-contact { font-style: normal; line-height: 1.6; }

/* Hint in de editor */
.fz-leeg { padding: .75em 1em; border: 1px dashed currentColor; opacity: .7; font-size: .9em; }

/* Melding bovenaan */
.fz-banier { position: relative; z-index: 50; }
.fz-melding {
	display: flex; align-items: center; justify-content: center; gap: 1em;
	padding: .65em 3em .65em 1em; position: relative;
	background: var(--fz-banier-achtergrond, var(--wp--preset--color--contrast, #1d1d1b));
	color: var(--fz-banier-tekst, var(--wp--preset--color--base, #fff));
	font-size: .95em; line-height: 1.4; text-align: center;
}
.fz-melding + .fz-melding { border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.fz-melding[hidden], .fz-melding [hidden] { display: none; }
.fz-melding p { margin: 0; max-width: 60rem; }
.fz-sluit {
	position: absolute; right: .5em; top: 50%; transform: translateY(-50%);
	background: none; border: 0; color: inherit; font-size: 1.4em; line-height: 1; cursor: pointer; padding: .2em .4em;
}
.fz-sluit:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Aanvraagformulier */
.fz-aanvraag { max-width: 40rem; }
.fz-a-vorm { display: grid; gap: 1.1em; }
.fz-a-veld { margin: 0; border: 0; padding: 0; min-width: 0; }
.fz-a-veld > label, .fz-a-keuzes legend { display: block; font-weight: 600; margin: 0 0 .35em; padding: 0; }
.fz-a-optie { font-weight: 400; color: var(--fz-zacht); font-size: .9em; }
.fz-a-hint { margin: -.15em 0 .45em; color: var(--fz-zacht); font-size: .92em; }
.fz-aanvraag input[type="text"], .fz-aanvraag input[type="email"], .fz-aanvraag input[type="tel"], .fz-aanvraag select, .fz-aanvraag textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .7em .8em; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 8px; background: #fff; color: #1d1d1b; }
.fz-aanvraag textarea { resize: vertical; min-height: 6em; }
.fz-aanvraag :is(input, select, textarea, button):focus-visible { outline: 3px solid color-mix(in srgb, currentColor 45%, transparent); outline-offset: 2px; }
.fz-a-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.1em; }
.fz-a-opties { display: flex; flex-wrap: wrap; gap: .5em; }
.fz-a-optieknop { position: relative; cursor: pointer; }
.fz-a-optieknop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fz-a-optieknop span { display: inline-block; padding: .5em .9em; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; }
.fz-a-optieknop input:checked + span { background: #1d1d1b; color: #fff; border-color: #1d1d1b; }
.fz-a-optieknop input:focus-visible + span { outline: 3px solid color-mix(in srgb, currentColor 45%, transparent); outline-offset: 2px; }
.fz-a-richtprijs { margin: -.4em 0 0; padding: .7em .9em; border-left: 3px solid var(--fz-open); background: color-mix(in srgb, var(--fz-open) 8%, transparent); }
.fz-a-voorbeelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5em; margin-top: .6em; }
.fz-a-foto { position: relative; }
.fz-a-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.fz-a-foto button { position: absolute; top: .25em; right: .25em; width: 1.8em; height: 1.8em; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; line-height: 1; }
.fz-a-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.fz-a-verstuur { margin: .2em 0 0; }
.fz-a-verstuur button { font: inherit; font-weight: 700; padding: .8em 1.4em; border-radius: 8px; border: 2px solid #1d1d1b; background: #1d1d1b; color: #fff; cursor: pointer; }
.fz-a-verstuur button[disabled] { opacity: .5; cursor: wait; }
.fz-a-klein { margin: 0; font-size: .9em; color: var(--fz-zacht); }
.fz-a-status { margin: 0; font-weight: 600; min-height: 1px; }
.fz-a-status.is-fout { color: var(--fz-dicht); }
.fz-a-klaar { padding: 1.2em 1.3em; border-radius: 10px; background: color-mix(in srgb, var(--fz-open) 9%, transparent); border-left: 4px solid var(--fz-open); }
.fz-a-klaar-titel { font-weight: 700; font-size: 1.15em; margin: 0 0 .3em; }
.fz-a-klaar p:last-child { margin-bottom: 0; }
.fz-a-agenda { margin: 1em 0 0; }

/* Realisaties */
.fz-realisaties { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.2em; }
.fz-r-kaart { display: block; text-decoration: none; color: inherit; }
.fz-r-beeld { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin: 0 0 .6em; }
.fz-r-titel { display: block; font-weight: 700; line-height: 1.3; }
.fz-r-kaart:hover .fz-r-titel { text-decoration: underline; }
.fz-r-meta { display: block; color: var(--fz-zacht); font-size: .92em; margin-top: .2em; }
.fz-r-feiten { color: var(--fz-zacht); font-size: .95em; }
.fz-r-cta { margin: 2em 0 1em; padding: 1.2em 1.3em; border-radius: 10px; background: color-mix(in srgb, currentColor 6%, transparent); }
.fz-r-cta p { margin: 0 0 .7em; font-weight: 600; }
.fz-r-cta p:last-child { margin: 0; }

/* Nieuws en vacatures (0.4) */
.fz-nieuws{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.fz-n-kaart{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.fz-n-beeld{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
.fz-n-datum{font-size:.85em;opacity:.7}
.fz-n-titel{font-weight:700;font-size:1.1em;line-height:1.3}
.fz-n-kaart:hover .fz-n-titel{text-decoration:underline}
.fz-n-tekst{font-size:.95em}
.fz-vacatures{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fz-vacatures li{margin:0}
.fz-vacatures a{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1px solid rgba(0,0,0,.15);border-radius:10px;text-decoration:none;color:inherit}
.fz-vacatures a:hover{border-color:currentColor}
.fz-v-titel{font-weight:700}
.fz-v-meta,.fz-v-feiten{font-size:.92em;opacity:.8}
