/* Eigen aanvullingen op het uitgepakte design.
   style.css is gegenereerd - pas dus dit bestand aan, niet dat. */

/* ------------------------------------------------------------------
   FAQ-accordion
   - het plusje wordt een minteken zodra een vraag openstaat
   - het antwoord schuift zacht in beeld
   - er kan er maar een tegelijk open (via name="faq" op <details>)
   ------------------------------------------------------------------ */

/* Het icoon is met CSS getekend in plaats van als los teken gezet.
   Zo kan de verticale streep wegdraaien en wordt + vloeiend -. */
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 14px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: #C1006F;
}
.faq-icon::after {
  transform: rotate(90deg);
  transition: transform .25s ease;
}
.faq[open] .faq-icon::after {
  transform: rotate(0deg);
}

/* Openen is geanimeerd, sluiten gebeurt direct: een <details> dat
   dichtklapt verdwijnt meteen uit de layout, dat valt met CSS alleen
   niet uit te animeren. */
.faq[open] > p {
  animation: faq-in .26s ease both;
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* summary staat op list-style:none, dus een zichtbare focusring
   is hier nodig voor wie met het toetsenbord navigeert. */
.faq > summary:focus-visible {
  outline: 2px solid #C1006F;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-icon::after { transition: none; }
  .faq[open] > p { animation: none; }
}

/* ------------------------------------------------------------------
   Themaraster: vijf kaarten naast elkaar op ruime schermen.
   Zonder deze regel rekent auto-fit met minmax(300px) uit dat er vier
   passen, waardoor de vijfde kaart alleen op rij twee achterblijft.
   Onder 1080px valt het raster terug op de vloeiende inline-regel.
   !important omdat inline styles anders voorgaan.
   ------------------------------------------------------------------ */
@media (min-width: 1080px) {
  .thema-grid { grid-template-columns: repeat(5, 1fr) !important; }
}

/* ------------------------------------------------------------------
   Aanvraagformulieren
   De labels staan er voor schermlezers en autofill; ze zijn onzichtbaar
   zodat het ontwerp met alleen placeholders intact blijft.
   ------------------------------------------------------------------ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Spamval. Niet display:none - een deel van de bots slaat verborgen
   velden dan over, en juist dit veld moeten ze invullen. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Twee velden naast elkaar alleen als "Gewenste uitstraling (optioneel)"
   er dan nog in past (~252px incl. padding). Met de 150px uit de inline
   style kwamen ze op een iPhone 16 Pro Max (440px) al naast elkaar, op
   155px per veld, en viel "(optioneel)" eraf. !important vanwege de
   inline style. */
.veld-paar { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)) !important; }

.veld-invoer:focus-visible {
  outline: 2px solid #C1006F;
  outline-offset: 2px;
}

/* !important omdat de inline styles van de invoervelden anders voorgaan. */
.veld-invoer[aria-invalid="true"] {
  border-color: #B3261E !important;
  background: #FFF8F7 !important;
}

.veld-fout {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.35;
  color: #B3261E;
}

.form-status {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 2px;
  font-size: 16px;
  line-height: 1.45;
}
.form-status[data-soort="fout"] {
  color: #B3261E;
  background: #FDF1F0;
  border: 1px solid #F2C9C5;
}
.form-status[data-soort="ok"] {
  color: #1E6B2E;
  background: #F0F7F1;
  border: 1px solid #C3E0C8;
}

/* ------------------------------------------------------------------
   Bevestiging na het verzenden
   Het formulier maakt plaats voor een duidelijke melding. !important
   omdat het formulier inline display:grid heeft; zonder dat blijft het
   staan ondanks het hidden-attribuut.
   ------------------------------------------------------------------ */

.aanvraag[hidden] { display: none !important; }

.bevestiging {
  padding: 14px 4px 6px;
  text-align: center;
}
.bevestiging:focus { outline: none; }
.bevestiging:focus-visible {
  outline: 2px solid #C1006F;
  outline-offset: 4px;
}

/* Het vinkje is met CSS getekend, net als het FAQ-icoon: geen extra bestand. */
.bevestiging-vink {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #C1006F;
}
.bevestiging-vink::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 13px;
  width: 12px;
  height: 22px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.bevestiging-titel {
  font-size: 23px;
  line-height: 1.25;
  font-weight: 500;
}
.bevestiging-tekst {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: #4A5563;
  /* Een lang e-mailadres mag de kaart niet oprekken. */
  overflow-wrap: break-word;
}
.bevestiging-extra {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #6B7583;
}
.bevestiging-extra a { color: #C1006F; }

/* ------------------------------------------------------------------
   Mobiel menu
   De zeven navigatielinks vullen onder ~860px twee of drie regels en
   duwen de kop uit elkaar. Daaronder gaat de navigatie achter een
   hamburgerknop en klapt ze open als een schermvullend paneel in het
   Time Out-roze: beeldmerk bovenin, grote links, een knop naar het
   aanvraagformulier, de contactgegevens en onderaan de socials.
   Boven het breekpunt verandert er niets aan de desktopkop.
   !important omdat de inline styles anders voorgaan.
   ------------------------------------------------------------------ */

.kop {
  /* Ankerpunt voor de knop, en boven de rest van de pagina. */
  position: relative;
  z-index: 60;
  background: #fff;
}

.nav-knop {
  display: none;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-knop:focus-visible {
  outline: 2px solid #C1006F;
  outline-offset: 2px;
}

/* Net als het FAQ-icoon met CSS getekend: de middelste streep verdwijnt
   en de buitenste twee draaien naar een kruis. */
.nav-knop-streep,
.nav-knop-streep::before,
.nav-knop-streep::after {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: #2B3542;
  transition: transform .22s ease, background-color .22s ease;
}
.nav-knop-streep { position: relative; }
.nav-knop-streep::before,
.nav-knop-streep::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-knop-streep::before { transform: translateY(-7px); }
.nav-knop-streep::after  { transform: translateY(7px); }

.nav-knop[aria-expanded="true"] .nav-knop-streep { background: transparent; }
.nav-knop[aria-expanded="true"] .nav-knop-streep::before { transform: rotate(45deg); }
.nav-knop[aria-expanded="true"] .nav-knop-streep::after  { transform: rotate(-45deg); }

/* De onderdelen van het paneel horen niet in de desktopnavigatie. */
.nav-merk,
.nav-cta,
.nav-contact,
.nav-social { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-knop-streep,
  .nav-knop-streep::before,
  .nav-knop-streep::after { transition: none; }
}

@media (max-width: 859px) {
  .kop-balk {
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  .nav-knop { display: flex; margin-left: auto; }

  /* Het paneel staat vast aan het scherm, dus de wrapper krimpt tot niets.
     De knop wordt daardoor met margin-left:auto naar rechts geduwd. */
  .kop-nav { flex: 0 0 auto !important; width: 0 !important; }

  /* Zodra het paneel eroverheen ligt blijft de knop op dezelfde plek
     zweven, nu als wit kruis. De pagina eronder staat toch stil. */
  .nav-knop[aria-expanded="true"] {
    position: fixed;
    top: calc(26px + env(safe-area-inset-top, 0px));
    right: 20px;
    z-index: 80;
  }
  .nav-knop[aria-expanded="true"] .nav-knop-streep::before,
  .nav-knop[aria-expanded="true"] .nav-knop-streep::after { background: #fff; }

  .hoofdnav {
    position: fixed;
    inset: 0;
    /* Safari op de iPhone rekent de volle hoogte zonder zijn eigen balk
       onderin, waardoor de onderkant van het paneel daarachter verdwijnt.
       dvh is wel de zichtbare hoogte. Browsers die dvh niet kennen laten
       deze regel vallen en houden de hoogte uit inset. */
    height: 100dvh;
    z-index: 70;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 18px 20px calc(44px + env(safe-area-inset-bottom, 0px));
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    background: #C1006F;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .3s ease, visibility .3s;
  }
  .hoofdnav.is-open {
    visibility: visible;
    transform: none;
  }

  /* Achtergrond vastzetten zolang het paneel open staat. */
  .menu-open, .menu-open body { overflow: hidden; }

  .nav-merk { display: block; margin-bottom: 30px; }

  .hoofdnav > a {
    width: fit-content;
    max-width: 100%;
    padding: 9px 0;
    color: #fff !important;
    font-size: 26px;
    line-height: 1.2;
    text-decoration: none !important;
  }

  .hoofdnav .nav-cta {
    display: block;
    width: auto;
    margin: 28px 0 0;
    padding: 15px 18px;
    border-radius: 2px;
    background: #fff;
    color: #C1006F !important;
    font-size: 18px;
    text-align: center;
  }

  .nav-contact {
    display: grid;
    gap: 9px;
    margin-top: 28px;
    font-size: 18px;
  }
  .nav-contact a { color: #fff; text-decoration: none; width: fit-content; }

  .nav-social {
    display: flex;
    gap: 22px;
    margin-top: auto;
    padding-top: 40px;
  }
  .nav-social a { display: flex; color: #fff; }
  .nav-social svg { width: 24px; height: 24px; }

  .hoofdnav a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
}

/* Op een korter scherm (iPhone SE, of een telefoon in liggende stand) past
   het paneel niet in één beeld en zakken de socials eronder. Daarom daar
   alles een maatje kleiner; op de grote toestellen blijft het ruim. */
@media (max-width: 859px) and (max-height: 740px) {
  .nav-merk { margin-bottom: 18px; }
  .nav-merk img { height: 44px !important; }

  .hoofdnav {
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
  .hoofdnav > a { font-size: 22px; padding: 7px 0; }
  .hoofdnav .nav-cta { margin-top: 20px; padding: 13px 18px; }

  .nav-contact { margin-top: 20px; font-size: 17px; }
  .nav-social { padding-top: 26px; }
}

@media (max-width: 859px) and (prefers-reduced-motion: reduce) {
  .hoofdnav { transition: none; }
}

/* ------------------------------------------------------------------
   Het lookbook-blok

   Zo staat het ook op timeout.nl: het roze vlak beslaat alleen de
   linkerhelft en wordt met ::before doorgetrokken over de rechterhelft.
   Het boek vult die rechterhelft op volle kolombreedte en is hoger dan
   het roze, dus het steekt er boven en onder uit. Dat uitsteken is het
   effect - vandaar geen kader, geen max-width en geen padding rond de
   afbeelding.

   Het roze hangt aan de tekstkolom en niet aan .lookbook zelf, want dan
   zou het meegroeien met de hogere afbeelding en was het uitsteken weg.

   Onder 1024px (hetzelfde omslagpunt als het origineel) staan ze onder
   elkaar en loopt het roze naar beneden door, achter het boek.
   ------------------------------------------------------------------ */
.lookbook {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-top: 70px;
}

.lookbook-tekst {
  position: relative;
  padding: 64px 24px;
  text-align: center;
}

/* Het roze vlak. Twee keer de breedte van de tekstkolom = de hele band. */
.lookbook-tekst::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  background: #C1006F;
}

/* De kop en de link staan erbovenop; zonder dit verdwijnen ze achter
   het vlak hierboven. */
.lookbook-tekst > * {
  position: relative;
}

/* Komt na de tekst in de bron en dus over het roze heen. */
.lookbook-beeld {
  position: relative;
  display: block;
}

.lookbook-beeld img {
  display: block;
  width: 100%;
  height: auto;
}

/* Het pijltje schuift bij aanwijzen op, net als op timeout.nl. */
.lookbook-pijl {
  display: inline-block;
  padding-left: 7px;
  transition: padding-left 0.5s;
}

.lookbook-link:hover .lookbook-pijl,
.lookbook-link:focus-visible .lookbook-pijl {
  padding-left: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .lookbook-pijl { transition: none; }
}

@media (max-width: 1023px) {
  .lookbook { grid-template-columns: 1fr; }
  .lookbook-tekst { padding: 48px 20px; }
  /* Onder elkaar: het roze loopt één blokhoogte door naar beneden. */
  .lookbook-tekst::before {
    width: 100%;
    bottom: -100%;
  }
}

/* ------------------------------------------------------------------
   Social-iconen in de voettekst
   De witte vlakjes en hun vorm blijven zoals ze waren; alleen de letter
   is vervangen door het icoon uit de set die timeout.nl zelf gebruikt.
   ------------------------------------------------------------------ */
.sociaal svg {
  width: 17px;
  height: 17px;
}

/* ------------------------------------------------------------------
   Hero-foto
   Het blok houdt zijn eigen hoogte; de foto wordt kleiner geschaald tot
   hij er helemaal in past (contain) in plaats van bijgesneden (cover).
   De ruimte ernaast vult de donkerblauwe achtergrondkleur op.
   ------------------------------------------------------------------ */
#aanvraag { background-size: contain !important; }

/* ------------------------------------------------------------------
   Smalle schermen
   Een aantal rasters heeft een minimumkolom die breder is dan de
   inhoudsbreedte op 320-414px; die duwen de pagina opzij. Ze krijgen
   hier een enkele kolom. Verder wat ruimere marges terug naar normaal.
   ------------------------------------------------------------------ */

@media (max-width: 719px) {
  /* minmax(320px) / minmax(300px) / minmax(290px) passen niet meer. */
  #aanvraag,
  .duo,
  .thema-grid { grid-template-columns: 1fr !important; }

  .hero-tekst { padding: 28px 16px 24px !important; }  .hero-kader { padding: 16px 16px 18px !important; }
  /* Laatste redmiddel: liever een afgebroken woord dan een scrollbalk. */
  .hero-titel { overflow-wrap: break-word; }
  .hero-formulier { padding: 0 16px 20px !important; }
}

@media (max-width: 379px) {
  /* "Bel 0186-660695" past bij 18px net niet naast de tweede knop. */
  .actiebalk a { font-size: 16px !important; padding: 15px 6px !important; }
}

/* ------------------------------------------------------------------
   Cookiebanner en voorkeurenmodal (assets/consent.js)

   De banner is een strook onderaan. De actiebalk zit daar al vastgeplakt,
   dus de banner komt erboven: --cc-balk is de gemeten hoogte van die balk
   en wordt door consent.js gezet (met 56px als terugval zolang dat nog
   niet gebeurd is).

   "Alles accepteren" en "Alles weigeren" hebben bewust dezelfde maat,
   dezelfde letter en evenveel nadruk. Een weigerknop wegmoffelen in een
   grijs lijntje maakt de keuze misleidend en daarmee de toestemming
   waardeloos.
   ------------------------------------------------------------------ */

/* Het hidden-attribuut verliest van elke display-regel in deze stylesheet:
   de standaardstijl van de browser weegt lichter dan author-CSS. Zonder
   deze regel blijft de banner staan nadat de bezoeker gekozen heeft, terwijl
   het attribuut er netjes op staat. Zelfde verhaal als .aanvraag[hidden]
   hierboven. */
.cc-banner[hidden] { display: none !important; }

.cc-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--cc-balk, 56px) + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 20px 24px;
  background: #fff;
  border-top: 1px solid #E6E1DB;
  box-shadow: 0 -8px 34px rgba(43, 53, 66, 0.16);
}

.cc-banner-tekst {
  flex: 1 1 380px;
  min-width: 0;
}

.cc-titel {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
}

.cc-banner-tekst p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #4A5563;
  max-width: 72ch;
}

.cc-knoppen {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cc-knop {
  flex: 0 1 auto;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 17px;
  line-height: 1.2;
  cursor: pointer;
  background: none;
}
.cc-knop:focus-visible {
  outline: 2px solid #C1006F;
  outline-offset: 2px;
}

.cc-knop-ja {
  background: #C1006F;
  color: #fff;
}
.cc-knop-ja:hover { background: #8E0052; }

/* Even groot en even duidelijk als de ja-knop; alleen niet gevuld, zodat
   de bezoeker ziet wat de voorkeur van de site is zonder dat weigeren
   moeilijker wordt. */
.cc-knop-nee {
  background: #fff;
  border-color: #2B3542;
  color: #2B3542;
}
.cc-knop-nee:hover { background: #F4F2F1; }

.cc-knop-tekst {
  color: #2B3542;
  border-color: #DCD6CF;
  background: #FCFBFA;
}
.cc-knop-tekst:hover { background: #F4F2F1; }

/* ---- Voorkeurenmodal --------------------------------------------- */

.cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(43, 53, 66, 0.55);
  overflow-y: auto;
}
.cc-overlay[hidden] { display: none; }

.cc-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 26px 26px;
  background: #fff;
  border: 1px solid #E6E1DB;
  box-shadow: 0 18px 60px rgba(43, 53, 66, 0.3);
}

.cc-sluit {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #6B7583;
  cursor: pointer;
}
.cc-sluit:hover { color: #2B3542; }
.cc-sluit:focus-visible {
  outline: 2px solid #C1006F;
  outline-offset: 2px;
}

.cc-modal-tekst {
  margin: 0 0 20px;
  padding-right: 34px;
  font-size: 16px;
  line-height: 1.5;
  color: #4A5563;
}

.cc-cat {
  padding: 16px 0;
  border-top: 1px solid #EFECE8;
}
.cc-cat:last-child { border-bottom: 1px solid #EFECE8; }

.cc-cat-kop {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cc-cat-titel {
  flex: 1 1 auto;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.cc-vast {
  flex: 0 0 auto;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #827365;
}

/* Groot genoeg om op een telefoon met een duim te raken. */
.cc-schakel {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #C1006F;
  cursor: pointer;
}
.cc-schakel:disabled { cursor: default; }
.cc-schakel:focus-visible {
  outline: 2px solid #C1006F;
  outline-offset: 3px;
}

.cc-cat-tekst {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #5B6572;
}

.cc-knoppen-modal {
  margin-top: 22px;
}

/* De achtergrond mag niet meescrollen zolang de modal openstaat. */
.cc-modal-open, .cc-modal-open body { overflow: hidden; }

/* ---- Smalle schermen --------------------------------------------- */

@media (max-width: 719px) {
  .cc-banner {
    padding: 16px 16px 18px;
    gap: 14px;
    /* Een lange banner mag de halve telefoon niet vullen. */
    max-height: 62dvh;
    overflow-y: auto;
  }
  .cc-banner-tekst { flex: 1 1 100%; }
  .cc-knoppen { width: 100%; }
  /* Onder elkaar, allemaal even breed: geen knop die opvalt doordat hij
     groter is. */
  .cc-knop { flex: 1 1 100%; }

  .cc-modal { padding: 24px 18px 20px; }
  .cc-modal-tekst { padding-right: 30px; }
}

/* Zodra de voorkeurenmodal of het mobiele menu de achtergrond vastzet met
   overflow:hidden verdwijnt de schuifbalk, en springt de hele pagina een
   schuifbalkbreedte opzij. Met een vaste goot is die ruimte er altijd al,
   dus blijft alles staan. Browsers die dit niet kennen laten de regel
   vallen; dan is het weer zoals het was. */
html { scrollbar-gutter: stable; }

/* Het dichte mobiele menu ligt met translateX(100%) rechts naast het
   scherm. Chrome telt dat niet mee, maar Safari op de grotere iPhones wel:
   dan kun je de pagina opzij schuiven. clip (niet hidden) knipt alleen af
   en maakt geen scrollcontainer, zodat position:sticky blijft werken. */
html, body { overflow-x: clip; }

/* Het mobiele menu is een schermvullend paneel; de banner is een strook
   onderaan met een hogere z-index. Zonder deze regel legt de banner zich
   over de onderste helft van het menu en zijn de laatste links, de knop
   naar het formulier en de contactgegevens niet meer aan te tikken.
   nav.js zet .menu-open op <html>, dus dit gaat automatisch mee open en
   dicht; zodra het menu sluit staat de banner er weer. */
.menu-open .cc-banner { display: none !important; }