/* Lefebvre Haarden. Eén motief: het afwerkingskader, een strook zwart gelakt staal (8 px) rond de haardopening,
   die als linkerstijl langs de pagina loopt, bij elke halte haaks omslaat en onderaan weer een kader sluit. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("/assets/fonts/familjen-grotesk/familjen-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  src: url("/assets/fonts/red-hat-text/red-hat-text-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --staal: #1E2022;
  --kalk: #E8E5DF;
  --steen: #CFCBC3;
  --rook: #5E5C58;
  --gloed: #B4481A;
  --gloed-donker: #9A3C14;
  --wit: #FFFFFF;

  --strook: 8px;                                   /* de stalen strook */
  --rand: clamp(1rem, 4.5vw, 3.5rem);              /* buitenmarge van de pagina */
  --in: clamp(1.25rem, 4vw, 4.5rem);               /* afstand van de stijl tot de tekst */
  --breed: 82rem;                                  /* maximale breedte van de inhoud */
  --halte: clamp(3.5rem, 7vw, 6.5rem);             /* lucht tussen de haltes */

  --kop: "Familjen Grotesk", "Arial Narrow", Arial, sans-serif;
  --tekst: "Red Hat Text", "Segoe UI", Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--kalk);
  color: var(--staal);
  font: 400 clamp(1.0625rem, 0.98rem + 0.25vw, 1.1875rem)/1.6 var(--tekst);
  font-variant-numeric: lining-nums;
  hyphens: manual;
  overflow-wrap: break-word;
}

::selection { background: var(--staal); color: var(--kalk); }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--kop);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  hyphens: manual;
  text-wrap: balance;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.25rem, 1.35rem + 3.6vw, 4.6rem); letter-spacing: -0.025em; max-width: 17ch; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); line-height: 1.2; letter-spacing: -0.005em; }

p { margin: 0 0 1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gloed); outline-offset: 3px; }

.lead { font-size: clamp(1.15rem, 1.06rem + 0.3vw, 1.375rem); line-height: 1.5; }
.smal { max-width: 46ch; }
.zacht { color: var(--rook); }
.regel { display: block; }
.nw, .tel-lang { white-space: nowrap; }

/* ── knoppen ─────────────────────────────────────────────────────────── */
.knop {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.8rem 1.35rem;
  background: var(--gloed);
  color: var(--wit);
  border: 2px solid var(--gloed);
  font: 600 1.0625rem/1.2 var(--tekst);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(.2, .7, .2, 1), border-color 160ms cubic-bezier(.2, .7, .2, 1);
}
.knop:hover { background: var(--gloed-donker); border-color: var(--gloed-donker); }
.knop-lijn { background: transparent; color: var(--staal); border-color: var(--staal); }
.knop-lijn:hover { background: var(--staal); border-color: var(--staal); color: var(--kalk); }

.pijl { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; }
.pijl::after { content: " →"; }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }

/* ── sitekop ─────────────────────────────────────────────────────────── */
.skip {
  position: absolute;
  left: var(--rand);
  top: -10rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--staal);
  color: var(--kalk);
  font-weight: 600;
}
.skip:focus { top: 0.5rem; }

.kop { position: relative; z-index: 5; background: var(--kalk); }
.kop-rij {
  max-width: calc(var(--breed) + 2 * var(--rand));
  margin: 0 auto;
  padding: 1rem var(--rand);
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
}
.merk {
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem 1.75rem; }
.menu a { display: inline-block; padding: 0.5rem 0; font-weight: 500; text-decoration: none; white-space: nowrap; }
.menu a:hover, .menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.kop-acties { display: flex; align-items: center; gap: 0.75rem; }
.tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--staal);
  font-weight: 600;
  text-decoration: none;
}
.tel:hover { background: var(--staal); color: var(--kalk); }
.tel-ico { flex: none; }
.tel-kort { display: none; }
.taal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration: underline;
}
.menuknop {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: var(--staal);
  color: var(--kalk);
  font: 600 1rem/1 var(--tekst);
  cursor: pointer;
}
.menuknop-streep, .menuknop-streep::before {
  display: block;
  width: 1rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor;
}
.menuknop-streep { box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
.menuknop-streep::before { content: none; }

@media (max-width: 1099px) {
  .menuknop { display: inline-flex; }
  .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--kalk);
    border-top: 2px solid var(--staal);
    border-bottom: var(--strook) solid var(--staal);
    padding: 0.75rem var(--rand) 1.25rem;
  }
  .menu.open { display: block; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu a { display: block; padding: 0.8rem 0; font-size: 1.15rem; }
}
@media (max-width: 599px) {
  .kop-rij { gap: 0.5rem; padding-block: 0.75rem; }
  .merk { white-space: normal; font-size: 0.95rem; letter-spacing: 0.07em; line-height: 1.08; }
  .merk-1, .merk-2 { display: block; }
  .tel-lang { display: none; }
  .tel-kort { display: inline; }
  .tel { padding: 0.5rem 0.7rem; }
  .menuknop { padding: 0.5rem 0.65rem; }
  .kop-acties { gap: 0.4rem; }
}

/* ── de stalen stijl (het motief) ────────────────────────────────────── */
main {
  max-width: calc(var(--breed) + 2 * var(--rand));
  margin: 0 auto;
  padding: 0 var(--rand) var(--halte);
}
.stijl {
  position: relative;
  padding-left: calc(var(--strook) + var(--in));
}
.stijl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--strook);
  background: var(--staal);
}
/* de haakse hoek boven de kop van een halte: de strook buigt om, zoals de hoek van een haardkader */
.hoek { position: relative; display: inline-block; padding-top: calc(var(--strook) + 1.1rem); }
.hoek::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--in));
  width: calc(100% + var(--in));
  height: var(--strook);
  background: var(--staal);
}

/* een volledig kader: de strook sluit zich rond een blok */
.kader {
  border: var(--strook) solid var(--staal);
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

/* ── home: de haardopening ───────────────────────────────────────────── */
.opening {
  position: relative;
  margin: clamp(0.5rem, 2vw, 1.5rem) 0 0;
  border: var(--strook) solid var(--staal);
  background: var(--staal);
}
.opening img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 700px) { .opening img { aspect-ratio: auto; height: clamp(15rem, 36vh, 30rem); } }

.label {
  font: 600 0.8125rem/1.3 var(--tekst);
  letter-spacing: 0.04em;
  color: var(--rook);
}
.label-op {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0.35rem 0.7rem;
  background: var(--staal);
  color: var(--kalk);
}

.intro { padding: clamp(1.5rem, 3vw, 2.5rem) 0 var(--halte); }
.intro h1 { max-width: 21ch; margin-bottom: 0.45em; }
.intro-bij .lead { max-width: 58ch; margin-bottom: 1.25rem; }

.halte { padding-bottom: var(--halte); }
.halte-rij { display: grid; gap: 1.25rem 3rem; }
.halte-zij { align-self: start; color: var(--staal); padding-top: 0.2rem; }
@media (min-width: 700px) {
  .halte-rij { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

/* kiezen: vier soorten haard naast het staal van de materialen */
.kiezen-rij { display: grid; gap: 2rem 3.5rem; align-items: start; }
@media (min-width: 700px) { .kiezen-rij { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
@media (min-width: 700px) and (max-width: 999px) { .kiezen-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kiezen-tekst .lead { max-width: 46ch; }
.kiezen-beeld { margin: 0; }
.kiezen-beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--steen); }
.kiezen-beeld figcaption, .wie-beeld figcaption { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--rook); }
.kiezen-beeld .label, .wie-beeld .label { margin-right: 0.35rem; }
.soorten {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.75rem 2.5rem;
}
.soorten h3 { margin-bottom: 0.35rem; }
.soorten h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.soorten h3 a::after { content: " →"; font-family: var(--tekst); font-weight: 500; }
.soorten p { max-width: 40ch; }
@media (min-width: 700px) { .soorten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 999px) {
  .kiezen-tekst { display: contents; }
  .kiezen-rij .lead { grid-column: 1; grid-row: 1; }
  .kiezen-beeld { grid-column: 2; grid-row: 1; }
  .soorten { grid-column: 1 / -1; margin-top: 0; }
}

.groot {
  font-family: var(--kop);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 50ch;
  margin: 0;
  text-wrap: pretty;
}

/* team: de zin over de plaatsing met de doorkijk ernaast */
.team-rij { display: grid; gap: 1.25rem; }
.team-link { margin: 0; }

/* langskomen: de strook sluit zich tot een kader */
.langskomen h2 { margin-bottom: 1.25rem; }
.kader-rij { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 700px) {
  .kader-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .langskomen .kader-rij { grid-template-columns: max-content minmax(0, 1fr); gap: 1.5rem 4rem; }
}
.adres, .kanalen { font-size: 1.3rem; line-height: 1.45; font-weight: 500; }
.kanalen a { font-weight: 600; }

/* ── subpagina's ─────────────────────────────────────────────────────── */
.stijl-sub { margin-top: clamp(0.5rem, 2vw, 1.5rem); }
.paginatitel { padding: clamp(1.75rem, 4vw, 3.5rem) 0 var(--halte); }
.paginatitel h1 { margin-bottom: 0.4em; }
.paginatitel .lead { max-width: 52ch; }
.afspraakblok { display: grid; gap: 0.75rem 3rem; align-items: center; }
.afspraakblok h2, .afspraakblok p { margin: 0; }
@media (min-width: 900px) {
  .afspraakblok { grid-template-columns: max-content minmax(0, 1fr); }
  .afspraakblok h2 { grid-row: span 2; }
}

/* diensten */
.dienst { display: grid; gap: 1.5rem 3rem; padding-bottom: var(--halte); align-items: start; }
.dienst-beeld { margin: 0; }
.dienst-beeld img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--steen); }
.dienst-beeld figcaption { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--rook); }
.dienst-beeld .label { margin-right: 0.35rem; }
.dienst-tekst { align-self: start; }
@media (min-width: 700px) {
  .dienst-wand { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .dienst-dnv { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

.soortenrij { padding-bottom: var(--halte); }
.etiketten { display: grid; gap: 2rem 3rem; margin-top: 2.25rem; }
.etiket h3 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem); margin-bottom: 0.5rem; }
.etiket p { max-width: 40ch; }
.merkzin { padding-top: 0.25rem; }
.merkzin strong { font-family: var(--kop); font-weight: 700; font-size: 1.1em; }
@media (min-width: 1000px) {
  .etiketten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .etiket { display: flex; flex-direction: column; }
  .etiket .merkzin { margin-top: auto; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .etiket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; }
  .etiket h3 { grid-column: 1 / -1; }
  .etiket p:not(.merkzin) { margin-bottom: 0; }
  .etiket .merkzin { padding-top: 0; }
  .dienst-wand, .dienst-dnv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dienst-beeld img { aspect-ratio: 4 / 5; }
}
.etiket p:not(.merkzin) { margin-bottom: 1.25rem; }

/* inspiratie */
.galerij {
  display: grid;
  gap: 1.75rem 2rem;
  padding-bottom: var(--halte);
}
.label-raster { margin: 0; font-size: 0.9375rem; }
.gal { margin: 0; }
.gal img { width: 100%; object-fit: cover; background: var(--steen); }
.gal figcaption { margin-top: 0.7rem; font: 600 1.125rem/1.3 var(--kop); }
.gal-kader { border: var(--strook) solid var(--staal); background: var(--staal); }
.gal-breed img { aspect-ratio: 16 / 8; }
.gal-steen img, .gal-staal img { aspect-ratio: 4 / 3; }
@media (min-width: 700px) {
  .galerij { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .label-raster, .gal-breed { grid-column: 1 / -1; }
  .gal-staal img { aspect-ratio: 1 / 1; }
}

/* uw werven: alleen in de aanpasmodus; een bezoeker ziet nooit een leeg kader */
.werven { display: none; }
.rt-editing .werven { display: block; padding-bottom: var(--halte); }
.werven-rij { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.foto { margin: 0; }
.foto:has(img[src$="leeg.svg"]) { display: none; }
.rt-editing .foto:has(img[src$="leeg.svg"]) { display: block; }

/* over ons */
.wie { padding-bottom: var(--halte); }
.wie-rij { display: grid; gap: 2rem 3.5rem; align-items: start; }
.wie-beeld { margin: 0; }
.wie-beeld img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--steen); }
@media (min-width: 700px) { .wie-rij { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); } }
.denken { padding-bottom: var(--halte); }
.denken-rij { display: grid; gap: 1.75rem 3rem; margin-top: 0.75rem; }
.gedachte h3 { margin-bottom: 0.35rem; }
@media (min-width: 700px) {
  .denken-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.zaal { padding-bottom: var(--halte); }
.vacatures h2 { margin-bottom: 1rem; }

/* contact: de uren als een latei in het stalen kader, de dagen naast elkaar */
.toonzaal { padding-bottom: var(--halte); }
.urenband { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 2.25rem); }
.urenband h3 { margin-bottom: 1rem; }
.urenrij {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  font-variant-numeric: lining-nums tabular-nums;
}
.urenrij li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--steen); }
.urenrij .dag { font-weight: 600; }
.urenband-noten { margin-top: 1.25rem; display: grid; gap: 0.25rem 3rem; font-size: 0.9375rem; }
.urenband-noten p { margin: 0; }
@media (min-width: 900px) {
  .urenrij { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .urenrij li { flex-direction: column; justify-content: flex-start; gap: 0.3rem; padding: 0 1rem 0 0; border-bottom: 0; }
  .urenrij li + li { padding-left: 1rem; border-left: 1px solid var(--steen); }
  .urenrij .uur { font: 600 1.15rem/1.25 var(--kop); }
}
[data-page="contact"] .voet-uren { display: none; }
[data-page="contact"] .voet-in { grid-template-columns: minmax(0, 1fr); }
[data-page="contact"] .voet-zaak { display: flex; flex-wrap: wrap; gap: 0 4rem; }

.aanvraag { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 900px) { .aanvraag { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.verplicht { font-size: 0.9375rem; color: var(--rook); }
.veld-rij { display: grid; gap: 0 1.5rem; }
@media (min-width: 700px) { .veld-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.veld, .veld:last-child { margin: 0 0 1.1rem; max-width: none; }
.veld label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.veld abbr { text-decoration: none; color: var(--gloed-donker); font-weight: 700; }
.veld input, .veld select, .veld textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--rook);
  border-radius: 0;
  background: var(--wit);
  color: var(--staal);
  font: 400 1rem/1.4 var(--tekst);
}
.veld textarea { resize: vertical; min-height: 8rem; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: 3px solid var(--gloed); outline-offset: 1px; border-color: var(--staal); }
.hulp { display: block; margin-top: 0.35rem; font-size: 0.9375rem; color: var(--rook); }
.bedankt { border: var(--strook) solid var(--staal); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; font-weight: 600; }
.aanvraag-kol { align-self: start; padding: clamp(1.25rem, 2.5vw, 2rem); }
.aanvraag-form > h2 { margin-bottom: 0.6em; }
@media (min-width: 900px) { .aanvraag-kol { position: sticky; top: 2rem; } }
.aanvraag-kol .kanalen { margin-top: 1rem; }
.groot-link { font: 700 clamp(1.4rem, 1.2rem + 1vw, 1.9rem)/1.2 var(--kop); }

/* juridisch */
.tekstblok { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.gegevens { margin: 0; display: grid; gap: 0.6rem; }
.gegevens div { display: grid; gap: 0 1.5rem; }
.gegevens dt { font-weight: 600; font-size: 0.9375rem; color: var(--rook); }
.gegevens dd { margin: 0; }

/* ── voet ────────────────────────────────────────────────────────────── */
.voet { background: var(--steen); color: var(--staal); }
.voet-in {
  max-width: calc(var(--breed) + 2 * var(--rand));
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--rand) clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 2rem 4rem;
}
.voet-zaak p { margin: 0 0 1rem; }
.voet-adres, .voet-kanalen { font-size: 1.15rem; line-height: 1.5; }
.voet-kanalen a { font-weight: 600; }
.voet-uren-kop { font: 700 1.15rem/1.2 var(--kop); margin: 0 0 0.75rem; letter-spacing: 0; }
.voet-urenlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2.5rem; font-variant-numeric: lining-nums tabular-nums; }
.voet-urenlijst li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(30, 32, 34, 0.18);
}
.voet-urenlijst .dag { font-weight: 500; }
.voet-urenlijst .uur { text-align: right; }
.uren-noot { margin: 0.9rem 0 0; font-size: 0.9375rem; max-width: none; }
.voet-onder {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(30, 32, 34, 0.25);
  font-size: 0.9375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  align-items: baseline;
}
.voet-onder p { margin: 0; max-width: none; }
.voet-kbo { white-space: nowrap; }
.voet-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
@media (min-width: 700px) {
  .voet-urenlijst { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; }
  .voet-onder { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .voet-in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}