/* Publieke site van Scarabee. Wit, veel ruimte, twee lettertypes.
   Het uploadformulier en het beheerscherm gebruiken upload.css en blijven
   bewust sober; die twee stijlen raken elkaar niet.

   Beeldtaal: mensen en werkplaats krijgen ronde hoeken (.beeld-mens),
   carrosserieen en voertuigen blijven strak rechthoekig (.beeld-product). */

:root {
  --inkt:    #132A4A;   /* koppen, knoppen, links */
  --tekst:   #3E4C61;   /* lopende tekst */
  --gedempt: #5B6879;   /* bijschriften en meta */
  --lijn:    #E4E7EC;
  --goud:    #8A6410;   /* bovenregels en accenten, donker genoeg voor tekst */
  --mosterd: #AC931A;   /* Scarabee-accent; deze tint haalt net de contrastnorm met donkerblauw */
  --mosterd-tekst: #2E2405;  /* bovenregels op mosterd, donker genoeg voor kleine letters */
  --zand:    #F1EFEA;   /* alleen voor lege plekken en tijdelijke vlakken */
  --wit:     #FFFFFF;

  --kantlijn: clamp(1.25rem, 6.6vw, 6rem);
  --breedte:  1440px;
}

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

body {
  margin: 0;
  background: var(--wit);
  color: var(--inkt);
  font-family: 'Public Sans Variable', system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Source Serif 4 Variable', Georgia, serif;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

h1 { font-size: clamp(2.25rem, 4.4vw, 3.875rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6875rem); }

p { margin: 0 0 1.25rem; color: var(--tekst); }
p:last-child { margin-bottom: 0; }

a { color: var(--inkt); text-decoration: none; }
a:hover { color: var(--goud); }

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

/* ── Bouwstenen ── */

.omhulsel {
  max-width: var(--breedte);
  margin: 0 auto;
  padding-left: var(--kantlijn);
  padding-right: var(--kantlijn);
}

.sectie { margin-top: clamp(4rem, 8vw, 8.5rem); }
.sectie--kort { margin-top: clamp(2.5rem, 5vw, 5rem); }

.smal   { max-width: 44rem; }
.smaller{ max-width: 38rem; }

.bovenregel {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--goud);
  margin-bottom: 1.5rem;
}

.leidend {
  font-family: 'Source Serif 4 Variable', Georgia, serif;
  font-size: clamp(1.375rem, 2.4vw, 2.125rem);
  line-height: 1.45;
  color: var(--inkt);
  max-width: 62rem;
}

.meer {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 500;
  border-bottom: 1px solid #C9CFD8;
  padding-bottom: 3px;
}

.knop, .knop--rand {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 1.875rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}
.knop { background: var(--inkt); color: var(--wit); }
.knop:hover { background: #0C1D35; color: var(--wit); }
.knop--rand { border-color: #C9CFD8; color: var(--inkt); }
.knop--rand:hover { border-color: var(--inkt); color: var(--inkt); }

.knoppen { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Beeld: zacht voor mensen, strak voor het product */
.beeld-mens   { border-radius: 28px; display: block; width: 100%; object-fit: cover; }
.beeld-product{ display: block; width: 100%; object-fit: cover; }

figure { margin: 0; }
figcaption { font-size: 1rem; color: var(--gedempt); padding-top: 0.875rem; }

/* ── Kop en voet ── */

/* De kop loopt mee bij het scrollen, met een haarlijn als enige scheiding */
.kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--lijn);
}
.kop-binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0.875rem var(--kantlijn);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.merk {
  font-family: 'Source Serif 4 Variable', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hoofdmenu {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 2vw, 2rem);
  font-size: 0.9375rem;
  flex-wrap: wrap;
}
.hoofdmenu > a { padding: 0.375rem 0; border-bottom: 2px solid transparent; }
.hoofdmenu > a:hover { border-bottom-color: var(--lijn); }
.hoofdmenu a[aria-current="page"] { border-bottom-color: #E8B33C; }
.menuknop {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 1.125rem;
  border: 1px solid var(--inkt);
  font-size: 0.9375rem;
}

/* De voettekst toont de hele site in vier kolommen */
.voet {
  margin-top: clamp(4rem, 8vw, 7.5rem);
  border-top: 1px solid var(--lijn);
  background: #FBFAF8;
}
.voet-binnen {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--kantlijn) 2rem;
}
.voet-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
}
.voet-kop {
  font-family: 'Public Sans Variable', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin: 0 0 1rem;
}
.voet-kolommen ul { list-style: none; margin: 0; padding: 0; }
.voet-kolommen li { margin-bottom: 0.5rem; }
.voet-kolommen a { font-size: 0.9375rem; color: var(--tekst); }
.voet-kolommen a:hover { color: var(--goud); }
.voet-plaats { color: #9AA3AF; }
.voet-adres { font-style: normal; font-size: 0.9375rem; line-height: 1.9; color: var(--tekst); }

.voet-onder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn);
}
.voet-klein { font-size: 0.8125rem; color: var(--gedempt); margin: 0; }
.voet-logo { width: 130px; height: auto; display: block; }

/* ── Roosters ── */

.drieluik {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.tweeluik {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.tweeluik--boven { align-items: start; }

/* Kaartloze verwijzing naar een project of categorie */
.verwijzing { display: block; }
.verwijzing img { margin-bottom: 1.375rem; }
.verwijzing h3 { margin-bottom: 0.5rem; }
.verwijzing p  { font-size: 1.0625rem; line-height: 1.6; }
.verwijzing .bouwer { font-size: 1rem; color: var(--gedempt); }

/* Lijst met haarlijnen, voor locaties en kenmerken */
.lijst { border-top: 1px solid var(--lijn); }
.lijst > * {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--lijn);
}
.lijst .naam { font-family: 'Source Serif 4 Variable', Georgia, serif; font-size: 1.5rem; font-weight: 500; }
.lijst .plaats { font-size: 1.0625rem; color: var(--gedempt); white-space: nowrap; }

.kolommen-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 0 clamp(2rem, 5vw, 6rem); }

/* Feitenkolom op de projectpagina: elk veld verdwijnt als het leeg is */
.feiten { border-top: 1px solid var(--lijn); font-size: 1.0625rem; }
.feiten > div { padding: 1.125rem 0; border-bottom: 1px solid var(--lijn); }
.feiten dt {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A8F99;
  margin-bottom: 0.375rem;
}
.feiten dd { margin: 0; color: var(--tekst); }

/* Gegevens over de volle breedte als er geen tekst naast staat */
.feiten--breed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
  border-top: none;
}
.feiten--breed > div { border-top: 1px solid var(--lijn); border-bottom: none; }

/* Specialismen op de bedrijfspagina */
.specialismen { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.specialismen li { font-size: 0.9375rem; padding: 0.3rem 0.75rem; border: 1px solid var(--lijn); color: var(--gedempt); }

/* Archiefgalerij onder een categorie */
.galerij { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.galerij img { aspect-ratio: 3 / 2; }
.galerij .bouwer { display: block; font-size: 0.9375rem; color: var(--gedempt); padding-top: 0.5rem; }
.galerij-open { display: block; cursor: zoom-in; }

/* Archieffoto groot over de pagina */
.fotovenster {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: #0A1424; color: var(--wit);
}
.fotovenster::backdrop { background: rgba(10, 20, 36, 0.94); }
.fotovenster[open] { display: flex; flex-direction: column; }
.fotovenster-balk {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem var(--kantlijn); font-size: 0.9375rem;
}
.fotovenster-knop, .fotovenster-pijl {
  font: inherit; color: var(--wit); background: none; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.4); padding: 0.4rem 0.9rem;
}
.fotovenster-knop:hover, .fotovenster-pijl:hover,
.fotovenster-knop:focus-visible, .fotovenster-pijl:focus-visible { border-color: var(--wit); outline: none; }
.fotovenster-figuur {
  flex: 1; min-height: 0; margin: 0; padding: 0 var(--kantlijn) 1.25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
}
.fotovenster-beeld { max-width: 100%; min-height: 0; flex: 1 1 auto; object-fit: contain; }
.fotovenster-tekst { text-align: center; max-width: 44rem; display: flex; flex-direction: column; gap: 0.35rem; }
.fotovenster-bijschrift { font-size: 1rem; color: rgba(255, 255, 255, 0.85); }
.fotovenster-tekst .fotovenster-bouwer { color: var(--wit); align-self: center; border-bottom-color: rgba(255, 255, 255, 0.5); }
.fotovenster-pijl {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; line-height: 1; padding: 0.6rem 0.9rem; background: rgba(10, 20, 36, 0.5);
}
.fotovenster-pijl--vorige  { left: 0.75rem; }
.fotovenster-pijl--volgende { right: 0.75rem; }
.fotovenster [hidden] { display: none; }

.archief-merk {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6A4A12;
  background: #F3EAD8;
  padding: 0.375rem 0.75rem;
  margin-bottom: 1.125rem;
}

.kruimels { font-size: 0.9375rem; color: var(--gedempt); margin-bottom: 1.625rem; }
.kruimels a { color: var(--gedempt); }

.ontbreekt {
  background: var(--zand);
  border: 1px dashed #C9CFD8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--gedempt);
  padding: 1.5rem;
  aspect-ratio: 3 / 2;
}

.video { width: 100%; max-width: 46rem; aspect-ratio: 16 / 9; border: 0; display: block; }
.video--post { aspect-ratio: auto; min-height: 600px; max-width: 34rem; }

.melding { border-left: 3px solid var(--inkt); background: #F7F8FA; padding: 1rem 1.25rem; margin-bottom: 2rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Lopende tekst van een categorie, uit de database */
.uitleg h3 {
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
  margin: 2.5rem 0 0.75rem;
}
.uitleg h3:first-child { margin-top: 0; }
.uitleg p { margin-bottom: 1.125rem; }

/* Uitklapje met contactgegevens, werkt zonder JavaScript */
.vraag { position: relative; }
.vraag summary { list-style: none; cursor: pointer; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag[open] summary { background: var(--inkt); color: var(--wit); }
.vraag-blok {
  position: absolute;
  right: 0;
  top: calc(100% + 0.625rem);
  z-index: 10;
  width: 20rem;
  background: var(--wit);
  border: 1px solid var(--lijn);
  box-shadow: 0 12px 32px rgba(19, 42, 74, 0.12);
  padding: 1.5rem;
}
.vraag-blok p { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; }
.vraag-blok a {
  display: block;
  font-family: 'Source Serif 4 Variable', Georgia, serif;
  font-size: 1.375rem;
  padding: 0.375rem 0;
}
@media (max-width: 720px) {
  .vraag-blok { position: static; width: 100%; box-shadow: none; margin-top: 0.75rem; }
}

/* Melding bij een overgenomen bedrijf */
.overname {
  border-left: 3px solid var(--inkt);
  padding: 0 0 0 1.5rem;
  margin: 2rem 0 0;
  max-width: 44rem;
}
.overname p { font-size: 1.1875rem; }
.overname a { border-bottom: 1px solid #C9CFD8; }
.overname .knop { border-bottom: 0; margin-top: 0.5rem; }

.voet-logo { width: 180px; height: auto; display: block; margin-bottom: 1rem; }

.merk--logo img { width: 170px; height: auto; display: block; }
@media (max-width: 720px) { .merk--logo img { width: 130px; } }

/* Logo van een lid: klein en rustig, het gaat om het werk eronder */
.bedrijf-logo {
  height: 56px;
  width: auto;
  max-width: 260px;
  display: block;
  margin-bottom: 1.75rem;
}
.bedrijf-logo--klein { height: 34px; margin-bottom: 0.625rem; }
@media (min-width: 60rem) {
  .bedrijf-logo { float: right; margin: 0 0 1.5rem 2.5rem; height: 68px; max-width: 300px; }
  .bedrijf-logo--klein { float: none; height: 34px; margin: 0 0 0.625rem; }
}

/* -- Menuknop voor smalle schermen -- */

.hamburger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--inkt);
  cursor: pointer;
}
.hamburger-streepjes,
.hamburger-streepjes::before,
.hamburger-streepjes::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--inkt);
  content: '';
}
.hamburger-streepjes { position: relative; }
.hamburger-streepjes::before { position: absolute; top: -6px; }
.hamburger-streepjes::after  { position: absolute; top: 6px; }
.hamburger[aria-expanded="true"] .hamburger-streepjes { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger-streepjes::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-streepjes::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 62rem) {
  .kop-binnen { flex-wrap: nowrap; }
  .hamburger { display: inline-flex; order: 3; }
  .vraag { order: 2; margin-left: auto; }
  .hoofdmenu {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1rem;
  }
  .hoofdmenu--open { display: flex; }
  .hoofdmenu > a {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--lijn);
    font-size: 1.0625rem;
  }
  .hoofdmenu > a:last-child { border-bottom: 0; }
  .hoofdmenu a[aria-current="page"] { border-bottom-color: var(--lijn); color: var(--goud); }
  .menuknop { min-height: 38px; padding: 0 0.875rem; font-size: 0.875rem; }
}

/* De contactknop blijft op een regel staan, ook op een telefoon */
.menuknop { white-space: nowrap; }
@media (max-width: 62rem) {
  .menuknop { padding: 0 0.75rem; font-size: 0.875rem; }
  .hamburger-woord { font-size: 0.875rem; }
}
@media (max-width: 30rem) {
  .kop-binnen { gap: 0.625rem; padding-left: 1rem; padding-right: 1rem; }
  .merk--logo img { width: 104px; }
  .menuknop { padding: 0 0.625rem; font-size: 0.8125rem; min-height: 36px; }
  .hamburger-woord { display: none; }
}

/* Op smalle schermen staat de contactknop in het midden, zodat de menuknop
   rechts duidelijk apart blijft staan */
@media (max-width: 62rem) {
  .vraag { margin-left: auto; margin-right: auto; }
  .vraag-blok { right: auto; left: 50%; transform: translateX(-50%); width: min(20rem, calc(100vw - 2rem)); }
}
@media (max-width: 30rem) {
  .vraag-blok { position: absolute; }
}


/* ── Banden: een sectie met een kleurvlak over de volle breedte ── */

.band { padding-block: clamp(3rem, 6vw, 5.5rem); }
.band--mosterd { background: var(--mosterd); color: var(--inkt); }
.band--mosterd h1,
.band--mosterd h2,
.band--mosterd h3 { color: var(--inkt); }
.band--mosterd p { color: #1B2C46; }
.band--mosterd .bovenregel { color: var(--mosterd-tekst); }
.band--mosterd .meer { border-bottom-color: rgba(19,42,74,0.35); }
.band--mosterd .knop { background: var(--inkt); color: #FFFFFF; }
.band--mosterd .knop--rand { background: #FFFFFF; border-color: #FFFFFF; color: var(--inkt); }
.band + .sectie { margin-top: clamp(3rem, 6vw, 5.5rem); }

/* Mensen en werkplaats houden ronde hoeken, ook in een gekleurd vlak */

/* Koppen met het streepje ervoor */
.kop-streep { position: relative; padding-left: 1.25rem; }
.kop-streep::before {
  content: '';
  position: absolute;
  left: 0; top: 0.15em; bottom: 0.15em;
  width: 3px;
  background: var(--mosterd);
}

/* Voettekst in dezelfde kleur als de banden */
.voet { background: var(--mosterd); border-top: 0; }
.voet-kop { color: var(--mosterd-tekst); }
.voet-kolommen a, .voet-adres, .voet-adres a { color: var(--inkt); }
.voet-kolommen a:hover, .voet-adres a:hover { color: #FFFFFF; }
.voet-plaats { color: #3B3A18; }
.voet-onder { border-top-color: rgba(19,42,74,0.2); }
.voet-klein { color: var(--mosterd-tekst); }

/* ── Kopband: tekst links, beeld vult de band tot aan de rand ── */

.kopband {
  background: var(--mosterd);
  color: var(--inkt);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 26rem;
}
.kopband-tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 4rem)
           clamp(2.5rem, 5vw, 4.5rem) max(var(--kantlijn), calc((100vw - var(--breedte)) / 2 + var(--kantlijn)));
}
.kopband-tekst .kruimels { color: #3E3A14; }
.kopband-tekst .kruimels a { color: #3E3A14; }
.kopband-tekst .bovenregel { color: var(--mosterd-tekst); }
.kopband-tekst p { color: #1B2C46; max-width: 34rem; }
.kopband-beeld { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 52rem) {
  .kopband { grid-template-columns: 1fr; min-height: 0; }
  .kopband-tekst { padding: 2.5rem var(--kantlijn); }
  .kopband-beeld { height: 15rem; }
}

/* ── Submenu met de categorieën ── */

.submenu { position: relative; }
.submenu > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.375rem 0;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.submenu > summary::-webkit-details-marker { display: none; }
.submenu > summary::after {
  content: '';
  width: 0.4rem; height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.submenu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.submenu--hier > summary { border-bottom-color: #E8B33C; }
.submenu-blok {
  position: absolute;
  left: 0;
  top: calc(100% + 0.75rem);
  z-index: 40;
  width: 20rem;
  background: #FFFFFF;
  border: 1px solid var(--lijn);
  box-shadow: 0 12px 32px rgba(19, 42, 74, 0.12);
  padding: 0.5rem;
}
.submenu-blok a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
}
.submenu-blok a:hover { background: #F6F4EF; }
.submenu-blok .alle { border-top: 1px solid var(--lijn); margin-top: 0.375rem; padding-top: 0.625rem; font-weight: 600; }

@media (max-width: 62rem) {
  .submenu { width: 100%; }
  .submenu > summary { padding: 0.875rem 0; border-bottom: 1px solid var(--lijn); width: 100%; justify-content: space-between; font-size: 1.0625rem; }
  .submenu-blok { position: static; width: 100%; box-shadow: none; border: 0; padding: 0 0 0.5rem 0.75rem; }
  .submenu-blok a { padding: 0.625rem 0; }
}