/*
Theme Name: walraven
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: walraven
*/

/* ─── Galerij (walraven/galerij) — voorbeeldcomponent uit het NVPG-project ─── */
.walraven-galerij { margin: 0; }
.walraven-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;
}
.walraven-galerij__item figure { margin: 0; }
.walraven-galerij__item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
}
.walraven-galerij__caption { font-size: .875rem; opacity: .7; padding-top: 8px; }
.walraven-galerij__buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.walraven-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;
}
.walraven-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!) */
.walraven-footer__cookie {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}
.walraven-footer__cookie:hover { color: var(--brand-primary); }

/* ─── Additief: advisor-blok variant A (kop + body), gemute alinea's ─── */
.advisor__body { margin-top: 14px; }
.advisor__body p { color: var(--muted); }
.advisor__body p + p { margin-top: 14px; }
.advisor__body strong { color: var(--ink); }

/* ─── Header: nav eerder inklappen naar de hamburger ───────────────────────────
 * De designer klapt de desktop-nav pas bij 900px in; met 5 nav-items + dropdown +
 * telefoon + offerte-knop werd de balk tussen ~900–1180px propvol (nav-items en de
 * "Vraag offerte aan"-knop braken over meerdere regels). We laten de nav + het
 * masthead-telefoonnummer al bij ≤1100px verdwijnen en tonen dan de hamburger.
 * De topbar volgt de designer (verdwijnt bij ≤900px). Additief — styles.css blijft ongemoeid. */
@media (max-width: 1100px) {
  .nav,
  .masthead__phone { display: none; }
  .burger { display: flex; }
  .masthead__inner { gap: 16px; }
  .masthead__right { margin-left: auto; }
}
/* De offerte-knop nooit over meerdere regels laten breken. */
.masthead__right .btn { white-space: nowrap; }

/* ─── Homepage-hero: stikstof-conversiekaart rechts ──────────────────────────
 * Stikstofonderzoek meteen zichtbaar bovenaan (rechts), clean en gericht op conversie.
 * De hero-body staat links, de kaart rechts (op desktop). Op tablet/mobiel stapelt de
 * kaart onder de body zodat 'ie zichtbaar blijft. Additief — styles.css blijft ongemoeid. */
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: end;
}
@media (min-width: 981px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
}
.hero__stikstof {
  background: #fff;
  color: var(--ink);
  border-radius: var(--r);
  border-top: 4px solid var(--green);
  padding: clamp(22px, 2.2vw, 30px);
  box-shadow: 0 44px 80px -42px rgba(0, 0, 0, .62);
  max-width: 440px;
}
.hero__stikstof-eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green);
}
.hero__stikstof-price {
  font-size: clamp(1.9rem, 2.6vw, 2.3rem); font-weight: 600; line-height: 1.05;
  margin-top: 6px; color: var(--ink);
}
.hero__stikstof-text { color: var(--muted); font-size: .95rem; line-height: 1.5; margin-top: 10px; }
.hero__stikstof-ticks { display: grid; gap: 8px; margin: 16px 0 18px; }
.hero__stikstof-ticks li { display: flex; gap: 9px; font-size: .9rem; font-weight: 500; color: var(--ink); }
.hero__stikstof-ticks svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.hero__stikstof .btn { width: 100%; }
.hero__stikstof-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: .9rem; font-weight: 600; color: var(--green);
}
.hero__stikstof-link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.hero__stikstof-link:hover svg { transform: translateX(4px); }
/* In de editor rendert de kaart-CTA als <span> (roadblock 27) → dezelfde 100%-breedte. */
.editor-styles-wrapper .hero__stikstof .btn { width: 100%; }

/* ─── Telefoon: uitgelichte stikstof-dienstkaart verbergen ───────────────────
 * Stikstofonderzoek staat op de homepage al prominent in de hero-conversiekaart
 * (die op smal scherm onder de hero stapelt). De uitgelichte dienstkaart
 * "Stikstofonderzoek en AERIUS-berekeningen" in "Wat wij voor u doen" herhaalt
 * dezelfde boodschap → op de telefoon dubbelop. Daar verbergen we alléén de
 * feature-kaart; de kop en de dienstenlijst blijven. De editor-canvas rendert op
 * desktopbreedte, dus deze max-width-regel raakt de editor niet. Additief. */
@media (max-width: 760px) {
  .diensten .dienst-feature { display: none; }
}