/* Chrome: aftelstrip, kopbalk, merk, mobiel menu, footer, animaties */

/* Aftelstrip */
.aftelstrip {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  background: var(--kleur-goud); color: var(--kleur-op-goud);
  font-size: .875rem; font-weight: 700; letter-spacing: .06em;
  padding: .625rem var(--ruimte-rand); text-align: center;
}
@media (max-width: 780px) { .aftelstrip { font-size: .75rem; padding-right: 4.5rem; } }

/* Merk */
.merk { display: inline-flex; align-items: center; gap: .75rem; color: var(--kleur-goud); }
.merk__naam { display: flex; flex-direction: column; gap: 2px; }
.merk__de { font-size: .625rem; font-weight: 700; letter-spacing: .32em; color: var(--kleur-goud); }
.merk__woord { font-family: var(--font-kop); font-size: 1.75rem; line-height: 1; color: var(--kleur-creme); }
.merk.is-groot .merk__woord { font-size: 2rem; }
.merkschild { color: var(--kleur-goud); animation: sint-gloed 4s ease-in-out infinite alternate; }
@keyframes sint-gloed {
  from { filter: drop-shadow(0 0 5px rgba(217,179,106,.35)) drop-shadow(0 0 14px rgba(217,179,106,.18)); }
  to   { filter: drop-shadow(0 0 9px rgba(217,179,106,.6)) drop-shadow(0 0 22px rgba(217,179,106,.32)); }
}
/* Intro-animatie: schild klapt open, S schrijft zichzelf, strik stuitert */
.merkschild__schild, .merkschild__s, .merkschild__strik { transform-box: fill-box; }
.merkschild.speel .merkschild__schild { transform-origin: left center; animation: sint-schild 1s var(--soepel) both; }
.merkschild.speel .merkschild__s { stroke: #191231; stroke-width: 1.4; stroke-dasharray: 150; animation: sint-s 1.2s .6s ease both; }
.merkschild.speel .merkschild__strik { transform-origin: center bottom; animation: sint-strik .9s 1.5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes sint-schild { 0% { opacity: 0; transform: rotateY(88deg); } 55% { opacity: 1; transform: rotateY(-16deg); } 78% { transform: rotateY(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes sint-s { 0% { fill-opacity: 0; stroke-dashoffset: 150; } 60% { fill-opacity: 0; } 100% { fill-opacity: 1; stroke-dashoffset: 0; } }
@keyframes sint-strik { 0% { opacity: 0; transform: translateY(8px) scale(.2); } 45% { opacity: 1; transform: translateY(-7px) scale(1.32); } 70% { transform: translateY(2px) scale(.9); } 100% { opacity: 1; transform: none; } }

/* Kopbalk */
.kopbalk { background: var(--kleur-diep); border-bottom: 1px solid var(--kleur-rand-donker); position: relative; z-index: 40; }
/* Met een open menu moet de kopbalk boven het paneel en het waas uit, anders
   ligt de knop die inmiddels een kruis is eronder en kun je er niet op klikken.
   Het paneel heeft daarvoor al padding-top, dus het schuift er netjes onder. */
html.menu-open .kopbalk { z-index: 100; }
.kopbalk__binnen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.125rem; }
.hoofdmenu { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.hoofdmenu a {
  color: var(--kleur-tekst); font-size: .875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.hoofdmenu a:hover, .hoofdmenu .current-menu-item > a { color: var(--kleur-goud); }
.kopbalk__acties { display: flex; align-items: center; gap: .875rem; }
.kopbalk__wagen {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 44px; height: 44px; border-radius: var(--radius-pil);
  border: 1px solid var(--kleur-rand); color: var(--kleur-creme);
}
.kopbalk__wagen:hover { border-color: var(--kleur-goud); color: var(--kleur-goud); }
.kopbalk__aantal {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: var(--radius-pil);
  background: var(--kleur-goud); color: var(--kleur-op-goud);
  font-size: .6875rem; font-weight: 700; padding-inline: 5px;
}

/* Mobiel menu */
.menuknop {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0; border-radius: var(--radius-pil);
  background: var(--kleur-paneel); border: 1.5px solid var(--kleur-goud); cursor: pointer;
}
.menuknop span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--kleur-goud); transition: transform .3s ease, opacity .2s ease; }
html.menu-open .menuknop span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
html.menu-open .menuknop span:nth-child(2) { opacity: 0; }
html.menu-open .menuknop span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.menuscherm { position: fixed; inset: 0; z-index: 90; background: rgba(10,6,24,.6); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
html.menu-open .menuscherm { opacity: 1; pointer-events: auto; }
.mobielmenu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(272px, 78vw);
  background: var(--kleur-paneel); border-left: 1px solid var(--kleur-rand);
  transform: translateX(100%); transition: transform .32s var(--soepel), visibility .32s;
  display: flex; flex-direction: column; padding: 5.25rem 1.625rem 1.625rem; overflow-y: auto;
  /* De kopbalk staat met een open menu boven het paneel, dus het eerste
     menu-item moet daaronder beginnen. De hoogte komt uit site.js omdat de
     aftelstrip meetelt en de kopbalk meescrollt; de waarde hier is de terugval. */
  padding-top: calc(var(--kop-hoogte, 5.25rem) + 1.25rem);
  visibility: hidden;
}
html.menu-open .mobielmenu { transform: none; visibility: visible; }
.mobielmenu__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobielmenu__lijst a {
  display: block; font-family: var(--font-kop); font-size: 1.0625rem; color: #E4DCEE;
  padding: .5625rem 0; border-bottom: 1px solid rgba(62,49,99,.55);
}
.mobielmenu__lijst a:hover { color: var(--kleur-goud); }
.mobielmenu__cta { margin-top: 1.25rem; font-size: .875rem; padding: .75rem 1.125rem; }
.mobielmenu__contact { margin-top: auto; padding-top: 1.5rem; color: var(--kleur-placeholder); font-size: .75rem; line-height: 1.7; }
@media (max-width: 900px) {
  .kopbalk__nav { display: none; }
  .menuknop { display: flex; }
}

/* Footer */
.voet { border-top: 1px solid var(--kleur-rand); background: var(--kleur-diep); }
.voet__binnen { display: flex; flex-direction: column; align-items: center; gap: 1.375rem; padding-block: 3.5rem 2.5rem; text-align: center; }
.voet__lijst { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; list-style: none; margin: 0; padding: 0; }
.voet__lijst a { color: var(--kleur-tekst); font-size: .875rem; font-weight: 600; }
.voet__contact { color: var(--kleur-tekst); font-size: .875rem; margin: 0; }
.voet__contact a { color: var(--kleur-tekst); }
.voet__contact a:hover { color: var(--kleur-goud); }
.voet__afsluiter { margin-top: .5rem; color: var(--kleur-goud); }
/* Eigen tint voor de slotregel, niet de gedempte kleur van de rest. Op 13px
   haalde die maar 3,19 op 1 tegen de donkere voet, waar 4,5 de norm is.
   Deze tint haalt 4,72. Gemeten in de SEO-nulmeting van 3-9-2026. */
.voet__slot { color: #8a7ab5; font-size: .8125rem; margin: 0; border-top: 1px solid var(--kleur-rand); width: 100%; padding-top: 1.25rem; }
.voet__slot a { color: #8a7ab5; }

/* Reveal-animaties. Alleen actief als JavaScript draait: zonder JS is alles
   meteen zichtbaar, zodat een bezoeker nooit naar een lege pagina kijkt. */
html.js .rv,
html.js ul.products li.product,
html.js .feit,
html.js .middenkop,
html.js .kaart { opacity: 0; transform: translateY(72px) scale(1.015); transition: opacity 2.6s var(--soepel), transform 2.6s var(--soepel); will-change: opacity, transform; }
html.js .rv.zichtbaar,
html.js ul.products li.product.zichtbaar,
html.js .feit.zichtbaar,
html.js .middenkop.zichtbaar,
html.js .kaart.zichtbaar { opacity: 1; transform: none; }
html.js .rv-tekst { opacity: 0; transform: translateY(80px); transition: opacity 3s var(--soepel), transform 3s var(--soepel); }
html.js .rv-tekst.zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-tekst, ul.products li.product, .feit, .middenkop, .kaart { opacity: 1 !important; transform: none !important; transition: none !important; }
  .merkschild, .merkschild__schild, .merkschild__s, .merkschild__strik { animation: none !important; opacity: 1 !important; }
  .knop::after { animation: none !important; }
}

/* Standaard pagina's */
.pagina__kop { padding-top: clamp(2rem, 4vw, 3.25rem); }
.pagina__kop h1 { margin: .5rem 0 0; }
.pagina__inhoud { padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--ruimte-sectie); }
.rijketekst { max-width: 46rem; }
.rijketekst h1 { font-size: var(--tekst-sectie); margin-top: 0; }
.rijketekst h2 { font-size: var(--tekst-blok); margin-top: 2rem; }
.rijketekst h3 { font-size: var(--tekst-kaart); margin-top: 1.5rem; }
.rijketekst img { border-radius: var(--radius-klein); margin-block: 1.25rem; }
.rijketekst a { text-decoration: underline; text-underline-offset: 3px; }
.rijketekst ul, .rijketekst ol { color: var(--kleur-tekst); }
.rijketekst li { margin-bottom: .375rem; }
.rijketekst table { width: 100%; border-collapse: collapse; margin-block: 1.25rem; }
.rijketekst th, .rijketekst td { border: 1px solid var(--kleur-rand); padding: .625rem .875rem; text-align: left; }
.rijketekst th { color: var(--kleur-creme); background: var(--kleur-paneel); }
/* Beelden uit de oude builder hebben een lege src en een data-src; die tonen we niet als kapot icoon. */
.rijketekst img[src=""], .rijketekst img:not([src]) { display: none; }

/* Gecentreerde leeskolom voor lange teksten, zoals op de plaatspagina's */
.rijketekst--smal { max-width: 44rem; margin-inline: auto; }
.rijketekst--smal h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); margin-top: 2.5rem; }
.rijketekst--smal h3 { margin-top: 1.75rem; }
.rijketekst--smal p { color: var(--kleur-tekst); line-height: 1.75; }
.rijketekst--smal a { color: var(--kleur-goud); text-decoration: underline; text-underline-offset: 3px; }
.rijketekst--smal ul, .rijketekst--smal ol { color: var(--kleur-tekst); padding-left: 1.25rem; line-height: 1.7; }
.rijketekst--smal li { margin-bottom: .5rem; }

/* Regio- en onderwerplinks in de footer: navigatie, geen linkblok, dus rustig
   opgemaakt en duidelijk gescheiden van het hoofdmenu. */
.voet__regio { width: 100%; max-width: 60rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--kleur-rand); text-align: center; }
.voet__regiokop { color: var(--kleur-goud); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .75rem; }
.voet__regiokop + .voet__regiolijst + .voet__regiokop { margin-top: 1.75rem; }
.voet__regiolijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; }
.voet__regiolijst a { color: var(--kleur-tekst); font-size: .8125rem; }
.voet__regiolijst a:hover { color: var(--kleur-goud); }
@media (max-width: 620px) { .voet__regiolijst { gap: .5rem 1rem; } .voet__regiolijst a { font-size: .78125rem; } }

/* Korte vragenlijst onderaan elke pagina. Staat bewust in dit bestand en niet
   in pagina.css, want dit blok verschijnt ook in de winkel, waar pagina.css en
   landing.css niet geladen worden. */
.kortevragen { border-top: 1px solid var(--kleur-rand); }
.kortevragen__binnen { max-width: 52rem; }
.kortevragen__kicker { text-align: center; }
.kortevragen__kop {
  margin: .5rem 0 1.75rem; text-align: center;
  font-family: var(--font-kop); font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2; color: var(--kleur-creme);
}
.kortevragen__lijst { display: flex; flex-direction: column; gap: .875rem; }

.kortevraag { background: var(--kleur-paneel); border: 1px solid var(--kleur-rand); border-radius: 14px; overflow: hidden; }
.kortevraag[open] { border-color: var(--kleur-goud); }
.kortevraag__kop {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.375rem 1.75rem; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.0625rem; color: var(--kleur-creme);
}
.kortevraag__kop::-webkit-details-marker { display: none; }
.kortevraag__kop:hover { color: var(--kleur-goud); }
.kortevraag__pijl { color: var(--kleur-goud); flex-shrink: 0; transition: transform .3s ease; }
.kortevraag[open] .kortevraag__pijl { transform: rotate(180deg); }
.kortevraag__antwoord { padding: 0 1.75rem 1.5rem; color: var(--kleur-tekst); font-size: .9375rem; line-height: 1.7; }
.kortevraag__antwoord p:last-child { margin-bottom: 0; }
.kortevraag__antwoord a { color: var(--kleur-goud); text-decoration: underline; text-underline-offset: 3px; }

.kortevragen__slot { margin: 1.5rem 0 0; text-align: center; }
.kortevragen__link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .875rem 1.75rem; border: 1.5px solid var(--kleur-goud); border-radius: 999px;
  color: var(--kleur-goud); font-weight: 700; font-size: .9375rem; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.kortevragen__link:hover { background: var(--kleur-goud); color: var(--kleur-op-goud, #2A1B3E); }

@media (max-width: 520px) {
  .kortevraag__kop { padding: 1.125rem 1.25rem; font-size: 1rem; gap: 1rem; }
  .kortevraag__antwoord { padding: 0 1.25rem 1.25rem; }
}