/*
Theme Name: misa
Theme URI: https://webright.nl/
Author: Webright
Description: Webright WP Starter — Blockstudio 7-thema. Designer-CSS hoort verbatim in assets/styles.css; dit bestand bevat ALLEEN additieve styling voor nieuwe componenten, gebouwd op de brand-tokens uit assets/brand.css.
Version: 1.0.0
Requires PHP: 8.2
Text Domain: misa
*/

/* ─── Galerij (misa/galerij) — voorbeeldcomponent uit het NVPG-project ─── */
.misa-galerij { margin: 0; }
.misa-galerij__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* auto-fit: lege tracks klappen in → altijd volle, gebalanceerde rijen (ook tablet) */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.misa-galerij__item figure { margin: 0; }
.misa-galerij__item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
}
.misa-galerij__caption { font-size: .875rem; opacity: .7; padding-top: 8px; }
.misa-galerij__buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.misa-galerij__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  transition: background-color .2s ease;
}
.misa-galerij__btn:hover { background: var(--brand-dark); }

/* ─── CookieYes: huisstijl + geen zwevende revisit-widget ─── */
.cky-btn-revisit-wrapper { display: none !important; } /* heropenen via de footer-knop */
.cky-btn { border-radius: 999px !important; font-weight: 700 !important; }
.cky-btn-accept { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }
.cky-btn-accept:hover { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }
.cky-btn-reject, .cky-btn-customize { color: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }

/* footer-knop die het CookieYes-voorkeurencentrum heropent (class is de API!) */
.misa-footer__cookie {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}
.misa-footer__cookie:hover { color: var(--brand-primary); }

/* ═══ Block-conventies (additief op de verbatim designer-CSS) ═══ */
/* home-hero achtergrond komt uit het block-attribuut (editbaar), niet hardcoded in styles.css */
.hero{background-image:none}
/* wysiwyg-body: laat <p>/<ul> van een wysiwyg-veld er als .lead-p uitzien binnen .rich.lead */
.rich > :first-child{margin-top:0}
.rich > :last-child{margin-bottom:0}
.rich.lead p{margin-top:18px;font-size:18px;line-height:1.65}
.rich.lead p:first-child{margin-top:0}
.rich.lead ul,.rich.lead ol{margin:18px 0;padding-left:1.2em}
.rich.lead li{margin:6px 0}
.pt0{padding-top:0!important}

/* ═══ Fluent Forms in MiSa-stijl (contact / aanmelden / sollicitatie) ═══ */
.contact-form .fluentform .ff-el-group,.contact-split .fluentform .ff-el-group{margin-bottom:16px}
.fluentform .ff-el-input--label label{display:block;font-weight:600;margin-bottom:6px;font-size:14.5px;color:var(--ink)}
.fluentform .ff-el-input--content input[type=text],.fluentform .ff-el-input--content input[type=email],.fluentform .ff-el-input--content input[type=tel],.fluentform .ff-el-input--content textarea,.fluentform select{width:100%;padding:13px 16px;border:1px solid #dadada;border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.fluentform textarea{min-height:130px;resize:vertical}
.fluentform .ff-el-input--content input:focus,.fluentform textarea:focus{outline:none;border-color:var(--green)}
.fluentform .ff-t-container{display:flex;gap:16px;flex-wrap:wrap}
.fluentform .ff-t-cell{flex:1 1 220px}
.fluentform .ff-btn-submit{background:var(--green);color:#fff;border:0;font-weight:700;padding:14px 28px;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;transition:background .2s}
.fluentform .ff-btn-submit:hover{background:var(--green-dark)}

/* ═══ Fixes na klant-vergelijking met de Vercel-referentie ═══ */
/* Vacatures-archief: de rij-kaart (article.vac-card in .hero-card) moet WIT zijn.
   Conflict: de home-overlay-.vac-card + ::before-gradient bleedt door de merge. Neutraliseren. */
.hero-card .vac-card{background:#fff!important;color:var(--ink);display:grid;grid-template-columns:1fr;border:1.5px solid var(--green);min-height:0;padding:0;align-items:stretch;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.hero-card .vac-card::before,.hero-card .vac-card::after{content:none!important;display:none!important;background:none!important}
.hero-card .vac-card h3{color:var(--blue)}
@media(min-width:768px){.hero-card .vac-card{grid-template-columns:1.15fr .85fr}}
.hero-card .vac-card .vc-media{overflow:hidden}
.hero-card .vac-card .vc-media img{width:100%;height:100%;object-fit:cover;display:block;min-height:220px}

/* Contactformulier: groene full-width pill-knop (i.p.v. FF-blauw) */
.fluentform .ff-btn-submit,.fluentform .ff_submit_btn_wrapper button{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important;width:100%;border-radius:999px!important;padding:16px 28px!important;font-weight:700!important;font-size:16px!important;transition:background .2s}
.fluentform .ff-btn-submit:hover{background:var(--green-dark)!important;border-color:var(--green-dark)!important}
/* Naam + Telefoonnummer naast elkaar (rij 1), rest volle breedte */
@media(min-width:600px){
  .fluentform .ff-step-body{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .fluentform .ff-step-body > .ff-el-group{grid-column:1 / -1}
  .fluentform .ff-step-body > .ff-el-group:nth-child(1),
  .fluentform .ff-step-body > .ff-el-group:nth-child(2){grid-column:auto}
}

/* Vacatures-hero: de gedeelde .hero-card-flex-variant (over-ons e.d.) bleedt via de CSS-merge
   display:flex op deze hero-card → .hero-content krimpt als flex-item en lijnt links uit.
   Forceer block zodat hero-content vol-breed is en .hero-head (margin:0 auto;text-align:center) centreert. */
.hero-card--vac{display:block!important}
.hero-card--vac .hero-content{width:100%}

/* ═══ Header-chrome consistent op ALLE pagina's ═══
   academy.css (vol paginastylesheet, alleen op cursus-/academy-pagina's) sty_lede de gedeelde
   header anders dan de gemergede styles.css → de mega-footer-CTA was een groene pill met een
   .w-cirkelicoon-stijl die niet bij onze markup (platte pijl) past. Academy-versie = correct
   (subtiele translucent pill, groen op hover). Forceer die overal, zodat de header identiek is. */
.mega-foot .fa{gap:7px;font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);padding:8px 14px;border-radius:999px;flex:0 1 auto;transition:background-color .18s}
.mega-foot .fa:hover{background:var(--green);color:#fff}
.mega-foot .fa svg{width:13px;height:13px}
.mega-foot .ft{font-size:14px}
/* drawer 'open' moet altijd zichtbaar zijn (academy.css mist visibility:visible → mobiel menu kapot op academy-pagina's) */
.drawer.open{visibility:visible}

/* Mobiel/tablet: in tekst+beeld-splits ALTIJD tekst boven, beeld eronder.
   .split is <1024px één kolom en stapelt op DOM-volgorde; links-beeld-blokken hebben .media
   als eerste child → zonder dit stond het beeld bovenaan. order:2 duwt elk beeld onder de tekst. */
@media(max-width:1023px){
  .split > .media,
  .split > .media-lg-left{order:2}
}

/* ═══ Fixes 3 juli (klant-vergelijking vs. vercel-referentie) ═══ */

/* Homepage logo-marquee: bij de CSS-merge is relaties.html's .marquee-track-variant
   (55s / gap 64px / img height:64px + max-width:170px) NA index.html's variant
   (120s / gap 80px / per-logo hoogte, geen cap) in styles.css beland → laatste wint globaal,
   dus de HOMEPAGE erfde de snelle+kleine sub-pagina-marquee. style.css laadt ná styles.css →
   herstel de index.html-bronwaarden, uitsluitend op de homepage (body.home). Sub-pagina's
   houden bewust hun eigen 55s/64px-variant, die mét hun bron overeenkomt. */
body.home .marquee-track{gap:80px;animation:marquee 120s linear infinite}
body.home .marquee-track img{max-width:none} /* per-logo hoogte wordt inline door het blok gezet op de homepage */

/* Hero-card merge-conflict: de vacatures-archief .hero-card-variant (styles.css, background:#102b40,
   als LAATSTE gemerged) reset via de background-shorthand background-size→auto en
   background-repeat→repeat voor ELKE .hero-card. Hero-cards met een inline achtergrondfoto
   (vacature-detail, kam-management, over-ons, academy) tilen/dupliceren daardoor. Herstel de
   bron-waarde center/cover no-repeat, alléén voor kaarten die zelf een achtergrondfoto dragen. */
.hero-card[style*="background-image"]{
  background-color:#1c3a52;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}