/* ==========================================================================
   pb-aanmelden.css
   Patty Bakker — pagina "Aanmelden voor een event" (pupflow v12 → Bricks)
   --------------------------------------------------------------------------
   Laad NA pb-common.css. Alles is gescoped onder .pb-main zodat het de Bricks
   default (display:flex op elk .brxe-*) verslaat via source-order.

   Bevat de pagina-eigen componenten (form-dark, event-line, prototype-list,
   simple-card) PLUS een klein blok "pb-common divergentie-fixes": een paar
   gedeelde primitives (eyebrow, section-head, .label) die pb-common ANDERS
   rendert dan het prototype. Die worden hier bewust overschreven zodat de
   pagina er 1:1 uitziet als het prototype (geverifieerd met een Bricks-DOM
   computed-style diff op 1280 én 390 — 0 echte verschillen).

   DESKTOP-FIRST: desktop = default (geen media query); mobiel/tablet-afwijkingen
   staan in @media (max-width:767px) onderaan.
   ========================================================================== */

/* ==========================================================================
   pb-common DIVERGENTIE-FIXES  (prototype = waarheid)
   ========================================================================== */

/* .eyebrow — prototype = CRÈME PILL (components.css main .eyebrow), pb-common
   geeft platte 12px/500 tekst. Herstel de pill (geldt voor beide eyebrows:
   "Stap 1" op het bruine blok én "Liever puppy-interesse?"). */
.pb-main .eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  border-radius:999px;
  background:var(--cream);
  color:var(--accent);
  padding-top:0;
  padding-right:12px;
  padding-bottom:0;
  padding-left:12px;
  font-size:10px;
  font-weight:900;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:14px;
}

/* .section-head — prototype centreert op 1180px en gebruikt 28px bodemmarge;
   pb-common geeft geen max-width en 14px. */
.pb-main .section-head{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:28px;
}

/* .label — desktop is een pill (responsive.css .app main .label pill);
   pb-common houdt 2px vast. Mobiel blijft 2px (zie media query onderaan). */
.pb-main .label{border-radius:var(--r-pill)}

/* ==========================================================================
   Donkere formuliersectie (bruin blok rond het Formidable-form)
   ========================================================================== */
.pb-main .form-dark{
  background:#7f5a44;
  color:#fff;
  padding-top:18px;
  padding-right:18px;
  padding-bottom:18px;
  padding-left:18px;
}
/* titel binnen het bruine blok wit; de eyebrow blijft de crème pill hierboven */
.pb-main .form-dark .h2{color:#fff}

/* Notitie onder het formulier — lichte pill op het bruine blok
   (reproduceert prototype: main .form-note{background:#f7f0e9;color:muted}) */
.pb-main .form-dark .form-note{
  background:#f7f0e9;
  color:var(--muted);
  border-radius:12px;
  padding-top:14px;
  padding-right:16px;
  padding-bottom:14px;
  padding-left:16px;
  line-height:1.55;
  font-size:13px;
  margin-top:10px;
  margin-right:2px;
  margin-bottom:0;
  margin-left:2px;
}

/* ==========================================================================
   Event-regel (SEP · 14 · Kennismaking voor gastgezinnen)
   NB: .event-line/.event-date staan óók al in de nieuwere new css/pb-common.css
   (r459-464), maar NIET in OUDE CSS/pb-common.css. Hier met identieke waarden,
   zodat de pagina klopt ongeacht welke pb-common geladen wordt.
   ========================================================================== */
.pb-main .event-line{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:11px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow2);
  padding-top:9px;
  padding-right:9px;
  padding-bottom:9px;
  padding-left:9px;
}
.pb-main .event-date{
  min-height:58px;
  background:var(--brown);
  color:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:var(--r);
  font-weight:850;
  line-height:1;
  padding-top:8px;
  padding-right:4px;
  padding-bottom:8px;
  padding-left:4px;
}
.pb-main .event-date b{display:block;font-size:18px}
.pb-main .event-date span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.pb-main .event-line h3{
  font-family:Manrope,system-ui,sans-serif;
  font-size:16px;
  line-height:1.15;
  letter-spacing:.01em;
  margin-top:3px;
  margin-right:0;
  margin-bottom:4px;
  margin-left:0;
  color:var(--brown);
  font-weight:850;
}
.pb-main .event-line p{font-size:12px;color:var(--muted);line-height:1.35;margin:0}

/* ==========================================================================
   "Op zoek naar een pup?" — twee eenvoudige kaarten
   ========================================================================== */
.pb-main .prototype-list{display:grid;gap:10px}

.pb-main .simple-card{
  position:relative;              /* anker voor de gestretchte .card-link */
  background:#fff8f1;
  border:1px solid var(--line);
  box-shadow:var(--shadow2);
  border-radius:var(--r-lg);      /* desktop: 10px (responsive.css .app main .simple-card) */
  padding-top:14px;
  padding-right:14px;
  padding-bottom:14px;
  padding-left:14px;
}
.pb-main .simple-card h3{font-size:17px;color:var(--brown);font-weight:800;margin:0 0 6px}
.pb-main .simple-card p{font-size:13px;line-height:1.45;color:var(--muted);margin:0 0 10px}
/* leeg <a> dat de hele kaart klikbaar maakt (kaart-<a> met kinderen wordt
   door Bricks gestript → plain div + gestretchte leaf-link, zie memory) */
.pb-main .simple-card .card-link{position:absolute;inset:0;z-index:1}

/* Desktop hover-lift op de kaarten (responsive.css .app main .simple-card:hover) */
@media (hover:hover) and (min-width:768px){
  .pb-main .simple-card{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease}
  .pb-main .simple-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(77,51,34,.16)}
}

/* ========================= MOBIEL (max 767) ========================= */
@media (max-width:767px){
  /* section-head stapelt op mobiel (prototype = display:block; pb-common houdt flex) */
  .pb-main .section-head{display:block}
  /* label terug naar 2px op mobiel (prototype base) */
  .pb-main .label{border-radius:10px}
  /* kaarten iets minder rond op mobiel (prototype base = var(--r) 4px) */
  .pb-main .simple-card{border-radius:var(--r)}
}

/* ==========================================================================
   Tweekoloms aanmeldpagina
   --------------------------------------------------------------------------
   Het bruine formulierblok liep over de volle contentbreedte. Bij een
   tweekoloms formulier betekende dat invoervelden van bijna 500px voor een
   naam, met een groot leeg vlak eronder - en de eventgegevens stonden erboven
   in een dun streepje dat je bij het invullen niet meer zag.

   De secties staan als broers en zussen in .pb-main; de indeling zit in
   Bricks en daar kan deze stylesheet niet bij. Daarom wordt .pb-main hier
   zelf het raster en worden de twee middelste secties op hun plek gezet:
   het formulier links, de eventkaart rechts. De andere secties lopen over
   beide kolommen door.

   De eventsectie wordt aangewezen met :has() in plaats van met nth-child,
   zodat het niet stukgaat als er ooit een sectie tussen komt. Er staan twee
   varianten in: .event-line is de dunne balk die er nu staat, .pb-ev-info de
   volledige kaart van [pb_event_info knop="0"]. Zo werkt de opmaak voor en
   na het omwisselen van dat ene element in Bricks.
   ========================================================================== */

.pb-aanmelden-pagina .pb-main{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
  column-gap:clamp(24px, 3.5vw, 44px);
  align-items:start;
  /* De sectiepadding hieronder gaat eraf, dus de zijmarge komt van hier.
     calc(100% - 36px) houdt links en rechts 18px vrij, dezelfde marge als
     .section had. Op 1280px geeft dit 1140px, gelijk aan de detailpagina. */
  width:min(1140px, calc(100% - 36px));
  margin-inline:auto;
  /* Het bruine formulierblok is nu het laatste element van de pagina en botste
     tot op de pixel tegen de footer - die ook bruin is, dus het werd een
     doorlopend bruin vlak. Elders eindigt een pagina op een .section met 22px
     eronder, maar dat is te weinig als twee blokken dezelfde kleur hebben. */
  padding-bottom:clamp(40px, 5vw, 64px);
}

.pb-aanmelden-pagina .pb-main > *{
  grid-column:1 / -1;
  padding-left:0;
  padding-right:0;
}

/* Het bruine blok is nu een kaart in de linkerkolom in plaats van een balk
   over de hele breedte: afgeronde hoeken en wat meer lucht binnenin. */
.pb-aanmelden-pagina .pb-main > .form-dark{
  grid-column:1;
  grid-row:2;
  border-radius:var(--img-radius-lg, 18px);
  padding:clamp(20px, 2.6vw, 30px);
}

/* De eventsectie staat in de DOM voor het formulier, maar hoort rechts
   ernaast - vandaar dezelfde rij. Sticky, zodat je tijdens het invullen
   blijft zien waar je je voor aanmeldt. */
.pb-aanmelden-pagina .pb-main > .section:has(.event-line),
.pb-aanmelden-pagina .pb-main > .section:has(.pb-ev-info){
  grid-column:2;
  grid-row:2;
  position:sticky;
  top:96px;
  padding-top:0;
}

/* De kaart vult zijn kolom; de 1140px-breedte uit pb-event-kaart.css geldt
   voor de detailpagina, hier niet. */
.pb-aanmelden-pagina .pb-main > .section .pb-ev-info{
  width:100%;
  max-width:none;
  margin:0;
}
.pb-aanmelden-pagina .pb-main > .section .pb-ev-feiten{
  grid-template-columns:minmax(0, 1fr);
  gap:14px;
}

/* ---- De eventkaart in de rechterkolom ---- */

/* Naast een formulier van 700px hoog is een streepje van 76px te mager. In
   een eigen kolom wordt het een kaart: datum boven, titel eronder. */
.pb-aanmelden-pagina .pb-main > .section:has(.event-line) .event-line{
  grid-template-columns:minmax(0, 1fr);
  gap:14px;
  padding:clamp(18px, 2.2vw, 24px);
  border-radius:var(--img-radius-lg, 18px);
  background:#f6eee7;
  box-shadow:none;
}

.pb-aanmelden-pagina .pb-main > .section:has(.event-line) .event-date{
  justify-self:start;
  min-width:64px;
  min-height:64px;
}

.pb-aanmelden-pagina .pb-main > .section:has(.event-line) .event-line h3{
  font-family:Fraunces, Georgia, serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
}

/* ---- Geen dagdelen op dit event ----
   De kop "Stap 1 / Kies je dagdeel" staat in Bricks en kan niet per event
   verschillen. Heeft een event geen dagdelen, dan valt er niets te kiezen
   en zet inc/pb-aanmelden-event-query.php de class pb-zonder-dagdelen op de
   body; dan begint het formulier gewoon bij de naam. */
.pb-zonder-dagdelen .pb-main .form-dark .section-head{display:none}
/* Let op: NIET :has(input[type="radio"]). Juist bij een event zonder dagdelen
   zijn er geen radio's, dus die selector matchte precies dan niet en bleef het
   label "Kies je dagdeel" boven een leeg vak staan. We pakken het keuzeveld
   zelf: op deze pagina is het enige veld met een .frm_opt_container het
   dagdeelveld, en de body-class garandeert al dat er niets te kiezen valt. */
.pb-zonder-dagdelen .pb-main .form-dark .frm_form_field:has(.frm_opt_container){display:none}

@media (max-width:900px){
  .pb-aanmelden-pagina .pb-main{
    grid-template-columns:minmax(0, 1fr);
    row-gap:18px;
    padding-bottom:40px;
  }
  .pb-aanmelden-pagina .pb-main > .form-dark{grid-column:1;grid-row:auto}
  /* Onder elkaar hoort de eventkaart boven het formulier: eerst weten waar
     je je voor aanmeldt, dan pas invullen. Dat is ook de DOM-volgorde, dus
     de expliciete plaatsing kan hier gewoon los. */
  .pb-aanmelden-pagina .pb-main > .section:has(.event-line),
  .pb-aanmelden-pagina .pb-main > .section:has(.pb-ev-info){
    grid-column:1;
    grid-row:auto;
    position:static;
    top:auto;
  }
  .pb-aanmelden-pagina .pb-main > .section .pb-ev-feiten{
    grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap:18px 28px;
  }
}

@media (prefers-reduced-motion:reduce){
  .pb-aanmelden-pagina .pb-main > .section:has(.event-line),
  .pb-aanmelden-pagina .pb-main > .section:has(.pb-ev-info){position:static}
}

/* ==========================================================================
   Het aanmeldformulier — opmaak vanuit het thema
   --------------------------------------------------------------------------
   Dit formulier leunde volledig op de stijlinstellingen van Formidable zelf.
   Die staan inmiddels op fabriekswaarden - te zien aan --submit-bg-color:
   #4199FD, het standaardblauw van de plugin, en --weight:normal - waardoor
   het formulier er ineens uitzag als een kaal pluginformulier midden in een
   verder afgewerkte pagina.

   Erop vertrouwen was sowieso fragiel: iedereen die in Formidable een stijl
   opslaat of de plugin bijwerkt, kan het uiterlijk van deze pagina veranderen
   zonder het door te hebben. /inschrijven/ doet dit daarom al vanuit het
   thema (pb-inschrijven.css); deze pagina volgt nu hetzelfde patroon, alleen
   dan voor een donkere achtergrond: lichte labels, witte velden.

   De !important is nodig omdat Formidable zijn eigen regels via
   CSS-variabelen op .with_frm_style zet en die later in de cascade staan.
   ========================================================================== */

.pb-main .form-dark .frm_forms fieldset{border:0;margin:0;padding:0;min-width:0}
.pb-main .form-dark .frm_forms legend{display:none}
.pb-main .form-dark .frm_form_field{margin-bottom:16px}

/* Het formulier zet zijn eigen titel erboven; die staat al als h2 in Bricks. */
.pb-main .form-dark .frm_form_title{display:none}

/* ---- Labels ---- */
.pb-main .form-dark .frm_primary_label{
  display:block!important;
  color:#e7d9cd!important;
  font-family:Manrope, system-ui, sans-serif!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  font-weight:800!important;
  padding:0 0 6px!important;
  margin:0!important;
  line-height:1.2!important;
}
.pb-main .form-dark .frm_required{color:#f0b49a!important}
.pb-main .form-dark .frm_description{color:#cbb6a6!important;font-size:12px}
.pb-main .form-dark .frm_error_style,
.pb-main .form-dark .frm_error{font-size:12px;color:#ffd2c4!important;background:none!important;border:0!important}

/* ---- Velden ---- */
.pb-main .form-dark .frm_forms input[type="text"],
.pb-main .form-dark .frm_forms input[type="email"],
.pb-main .form-dark .frm_forms input[type="tel"],
.pb-main .form-dark .frm_forms input[type="number"],
.pb-main .form-dark .frm_forms select,
.pb-main .form-dark .frm_forms textarea{
  width:100%!important;
  border:1px solid transparent!important;
  background:#fff!important;
  color:var(--dark)!important;
  border-radius:var(--r-md, 10px)!important;
  min-height:44px!important;
  height:auto!important;
  padding:0 12px!important;
  font-family:Manrope, system-ui, sans-serif!important;
  font-size:14px!important;
  line-height:1.3!important;
  box-shadow:none!important;
}
.pb-main .form-dark .frm_forms textarea{
  min-height:110px!important;
  padding-top:11px!important;
  padding-bottom:11px!important;
  resize:vertical;
}
.pb-main .form-dark .frm_forms input::placeholder,
.pb-main .form-dark .frm_forms textarea::placeholder{color:#9a8778;font-size:13px}
.pb-main .form-dark .frm_forms input:focus,
.pb-main .form-dark .frm_forms select:focus,
.pb-main .form-dark .frm_forms textarea:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(201,122,85,.35)!important;
  outline:0;
}

/* ---- Twee kolommen, zoals het formulier al bedoelde ---- */
.pb-main .form-dark .frm_form_fields > fieldset > .frm_fields_container{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:22px;
}
.pb-main .form-dark .frm_form_fields .frm_form_field{grid-column:1 / -1}
.pb-main .form-dark .frm_form_fields .frm_half{grid-column:span 1}

/* ---- Dagdeelkeuze ---- */
.pb-main .form-dark .frm_opt_container{display:grid;gap:10px}
.pb-main .form-dark .frm_radio{margin:0}
.pb-main .form-dark .frm_radio label{
  display:flex!important;
  align-items:center;
  gap:10px;
  margin:0!important;
  padding:12px 14px;
  background:#fff;
  border:1px solid transparent;
  border-radius:var(--r-md, 10px);
  color:var(--dark);
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  cursor:pointer;
}
.pb-main .form-dark .frm_radio input[type="radio"]{
  width:18px!important;
  height:18px!important;
  min-height:0!important;
  margin:0!important;
  accent-color:var(--accent);
  cursor:pointer;
}

/* ---- Verstuurknop ---- */
.pb-main .form-dark .frm_submit{margin-top:6px;display:flex;flex-wrap:wrap;gap:12px}
.pb-main .form-dark .frm_button_submit,
.pb-main .form-dark .frm_submit button,
.pb-main .form-dark .frm_submit input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--accent)!important;
  color:#fff!important;
  font:800 14px/1 Manrope, system-ui, sans-serif!important;
  padding:0 20px!important;
  min-height:44px!important;
  border:0!important;
  border-radius:var(--r-md, 10px)!important;
  box-shadow:0 8px 16px rgba(0,0,0,.18);
  cursor:pointer;
  transition:background .2s ease;
  text-shadow:none;
  width:auto!important;
}
.pb-main .form-dark .frm_button_submit:hover,
.pb-main .form-dark .frm_submit button:hover{background:#b96a47!important}

@media (max-width:600px){
  .pb-main .form-dark .frm_form_fields > fieldset > .frm_fields_container{
    grid-template-columns:minmax(0, 1fr);
  }
  .pb-main .form-dark .frm_form_fields .frm_half{grid-column:1 / -1}
  .pb-main .form-dark .frm_button_submit{width:100%!important}
}

/* Het dagdeel-keuzeveld verbergen bij een event zonder dagdelen.
   Zie pb_ev_dagdeel_veld() in inc/pb-events.php: bij een wandeling of BBQ
   valt er niets te kiezen, en dan zetten we deze klasse op het veld. Zonder
   deze regel bleef er een leeg uitklapmenu met een label staan. */
.frm_form_field.pb-geen-dagdeel,
.pb-geen-dagdeel.frm_form_field{ display: none !important }

/* De vaste notitie van Bricks op /aanmelden/ verbergen — maar alleen zolang hij
   nog de oude tekst is.

   In Bricks staat daar "Je ontvangt een bevestiging per mail. Plekken zijn
   beperkt: per dagdeel zijn er 2 plaatsen beschikbaar." als vaste tekst. Bij
   een meeting of wandeling is er geen dagdeel en geen maximum, dus is dat
   onwaar; bij een workshop met een ander maximum ook.

   [pb_event_aanmeldnote] in inc/pb-events.php geeft de juiste tekst, en zet
   daar een <span class="pb-ev-note"> om. Deze regel verbergt het element
   alléén als die markering ontbreekt. Gevolg: de onjuiste tekst is nu weg, en
   zodra de shortcode in dat element staat verschijnt de goede automatisch —
   er hoeft dan geen CSS-regel meer weg.

   :has() wordt door alle huidige browsers ondersteund. Een hele oude browser
   kent het niet en laat de vaste tekst dan staan; dat is de veilige kant, want
   dan verdwijnt er niets. */
.pb-aanmelden-pagina .pb-main .form-note:not(:has(.pb-ev-note)){ display: none }