/* =============================================================
   components.css — hogeplantenbak.nl
   Gedeelde UI-componenten voor de Eleventy-site.
   Vereist: tokens.css (CSS custom properties)
   Geschreven: 2026-05-17
   ============================================================= */


/* ─────────────────────────────────────────────
   1. MATERIAL SYMBOLS — icon font setup
   ───────────────────────────────────────────── */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* ─────────────────────────────────────────────
   2. CONTAINER — max-width wrapper
   ───────────────────────────────────────────── */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s6);
}

.container--narrow {
  max-width: var(--narrow);
  margin-inline: auto;
  padding-inline: var(--s6);
}

@media (min-width: 640px) {
  .container,
  .container--narrow {
    padding-inline: var(--s10);
  }
}


/* ─────────────────────────────────────────────
   3. GLASS NAVIGATION
   ───────────────────────────────────────────── */

/* Skip-link: bereikbaar met Tab, zichtbaar bij focus */
.skip-link {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 200;
  padding: var(--s2) var(--s4);
  background: var(--primary-bright);
  color: #fff;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  /* Standaard verborgen voor schermlezers zichtbaar, visueel weg */
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.skip-link:focus {
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
}

/* Nav wrapper */
#siteNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(251, 249, 246, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Scrolled-state: iets witter en schaduw */
#siteNav.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#siteNav.is-scrolled .nav-inner {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

/* Binnenste rij */
.nav-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s4) var(--s6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  transition: padding 200ms;
}

@media (min-width: 640px) {
  .nav-inner {
    padding-inline: var(--s10);
  }
}

/* Logo */
.nav-logo {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--primary);
  text-decoration: none;
}
.nav-logo:hover {
  color: var(--primary);
}

/* Hamburger-knop */
.nav-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--primary);
  transition: background 200ms;
}
.nav-menu-btn:hover {
  background: rgba(0, 53, 39, 0.05);
}
.nav-menu-btn .material-symbols-outlined {
  font-size: 28px;
}

/* ── Slide-out overlay ── */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  /* Standaard verborgen; JS voegt .is-open toe */
  display: none;
}
.nav-overlay.is-open {
  display: block;
}

/* Donkere scrim achter het paneel */
.nav-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 53, 39, 0.40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Het witte paneel rechts */
.nav-panel {
  position: absolute;
  right: var(--s4);
  top: var(--s4);
  width: 92%;
  max-width: 380px;
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hero);
  padding: var(--s8) 1.75rem;
}

@media (min-width: 1024px) {
  .nav-panel {
    padding: var(--s8);
  }
}

/* Paneel-header: logo + sluit-knop */
.nav-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s8);
}
.nav-panel-logo {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--primary);
}
.nav-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--primary);
  transition: background 200ms;
}
.nav-close-btn:hover {
  background: rgba(0, 53, 39, 0.05);
}
.nav-close-btn .material-symbols-outlined {
  font-size: 26px;
}

/* Navigatielijst */
.nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-bottom: var(--s8);
  padding: 0;
}
.nav-links a {
  display: block;
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-md);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
  text-decoration: none;
  transition: background 200ms;
}
.nav-links a:hover {
  background: var(--surface-warm-mid);
  color: var(--primary);
}

/* Contact-rij onderaan paneel */
.nav-contact {
  border-top: 1px solid rgba(0, 53, 39, 0.10);
  padding-top: var(--s5);
  font-size: 0.875rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--on-surface-secondary);
  line-height: 1.6;
}
.nav-contact a {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--primary);
  margin-bottom: var(--s1);
  text-decoration: none;
  transition: color 200ms;
}
.nav-contact a:hover {
  color: var(--primary-bright);
}


/* ─────────────────────────────────────────────
   4. BUTTONS
   ───────────────────────────────────────────── */

/* Gedeeld fundament: min-height 44px (touch-target), inline-flex */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-pill);
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  min-height: 44px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary .material-symbols-outlined,
.btn-secondary .material-symbols-outlined {
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* Primaire knop: emerald pill met CTA-schaduw */
.btn-primary {
  background: var(--primary-bright);
  color: #ffffff;
  box-shadow: var(--shadow-cta);
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover {
  background: var(--primary-hover);
  color: #ffffff;
}

/* Secundaire knop: wit, subtiele border, card-schaduw */
.btn-secondary {
  background: #ffffff;
  color: var(--primary);
  border: 1px solid rgba(0, 53, 39, 0.10);
  box-shadow: var(--shadow-card);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-secondary:hover {
  box-shadow: var(--shadow-card-hover);
  color: var(--primary);
}
.btn-secondary .material-symbols-outlined {
  color: var(--primary-bright);
}

/* Klein formaat — voor compacte contexten */
.btn-primary.btn-sm,
.btn-secondary.btn-sm {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}
.btn-primary.btn-sm .material-symbols-outlined,
.btn-secondary.btn-sm .material-symbols-outlined {
  font-size: 1rem;
}


/* ─────────────────────────────────────────────
   5. CARDS
   ───────────────────────────────────────────── */

.card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Klikbare kaart: geen underline, kleur behouden */
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Glass-kaart: frosted-glass effect voor hero-overlay contexten */
.card-glass {
  background: rgba(251, 249, 246, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 50px -36px rgba(0, 53, 39, 0.18);
}


/* ─────────────────────────────────────────────
   6. EYEBROWS — uppercase sectielabels
   ───────────────────────────────────────────── */

/* Standaard: emerald */
.eyebrow {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--primary-bright);
}

/* Warm-variant: oranje accent (voor Persoonlijk-sectie) */
.eyebrow-warm {
  color: var(--tertiary);
}

/* Gedempte variant: op gekleurde of donkere achtergronden */
.eyebrow-muted {
  color: var(--on-surface-muted);
}

/* Eyebrow op het product-blok: neutraal grijs */
#product .eyebrow {
  color: var(--on-surface-muted);
}

/* Iets zwaarder en groter getraceerd label */
.eyebrow-tracked {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}


/* ─────────────────────────────────────────────
   7. FOOTER (.ftr)
   ───────────────────────────────────────────── */

.ftr {
  background: var(--footer-bg);
  color: #ffffff;
  width: 100%;
  font-family: var(--font-body);
}

/* Binnenste wrapper: ruimhartige padding boven */
.ftr .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 104px 40px 36px;
}

/* ── Topbar: logo-rij bovenaan de footer ── */
.ftr .topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 72px;
}
.ftr .topbar .logo {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
}

/* ── Manifest: centerd statement-blok ── */
.ftr .manifest {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 96px;
}

.ftr .mft-kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 32px;
}

.ftr .mft-h {
  font-family: var(--font-headline);
  font-weight: 700;
  color: #ffffff;
  font-size: clamp(1.875rem, 2.6vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 auto;
  max-width: 32ch;
  text-wrap: balance;
}
.ftr .mft-h .light {
  color: rgba(255, 255, 255, 0.70);
  font-weight: 500;
}

.ftr .mft-prose {
  font-family: var(--font-headline);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.125rem;
  line-height: 1.75;
  margin: 40px auto 0;
  max-width: 56ch;
}

/* ── Feedback Company trust-pill ── */
.ftr .fbc-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 48px auto 0;
  padding: 10px 18px 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  text-decoration: none;
  color: #ffffff;
  transition: background 200ms;
}
.ftr .fbc-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.ftr .fbc-pill .score {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--tertiary);
  line-height: 1;
}
.ftr .fbc-pill .stars {
  display: inline-flex;
  gap: 1px;
  color: var(--tertiary);
}
.ftr .fbc-pill .stars .material-symbols-outlined {
  font-size: 14px;
  font-variation-settings: 'FILL' 1;
}
.ftr .fbc-pill .source {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.04em;
}
.ftr .fbc-pill .source .small {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.50);
  margin-left: 4px;
}

/* ── Triptych: 3-koloms grid ── */
.ftr .triptych {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 56px;
  align-items: start;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-bottom: 56px;
}

/* Kolom-label */
.ftr .label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 22px;
  display: block;
}

/* ── USP-ladder (kolom 1) ── */
.ftr .usp-ladder {
  display: flex;
  flex-direction: column;
}
.ftr .usp-ladder .usp {
  display: grid;
  grid-template-columns: 4ch 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  align-items: center;
}
.ftr .usp-ladder .usp:first-child {
  padding-top: 0;
}
.ftr .usp-ladder .usp:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
/* Groene stip als visuele marker */
.ftr .usp-ladder .usp .ix {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  justify-self: center;
}
.ftr .usp-ladder .usp .text {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
  margin: 0;
}
.ftr .usp-ladder .usp .text strong {
  font-weight: 700;
  color: #ffffff;
}

/* ── Contact-lijst (kolom 2) ── */
.ftr .contact-list {
  display: flex;
  flex-direction: column;
}
.ftr .contact-list .cc {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: inherit;
  transition: padding-left 200ms;
}
.ftr .contact-list .cc:first-child {
  padding-top: 0;
}
.ftr .contact-list .cc:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ftr .contact-list .cc:hover {
  padding-left: 4px;
}
.ftr .contact-list .cc .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #34d399;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ftr .contact-list .cc .icon .material-symbols-outlined {
  font-size: 22px;
}
.ftr .contact-list .cc .body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ftr .contact-list .cc .body .what {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1rem;
  color: #ffffff;
  letter-spacing: -0.005em;
}
.ftr .contact-list .cc .body .sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.60);
}

/* Openingstijden-blok */
.ftr .contact-list .hours {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ftr .contact-list .hours .ht {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.ftr .contact-list .hours .hs {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 4px 0 0;
}

/* ── Potgrond-calculator kaart (kolom 3) ── */
.ftr .calc-card {
  border-radius: 22px;
  padding: 28px;
  width: 100%;
}
.ftr .calc-card .head {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.ftr .calc-card .sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  margin: 0 0 20px;
}
.ftr .calc-card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.ftr .calc-card .row:last-of-type {
  padding-bottom: 18px;
}
.ftr .calc-card .row label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
}
.ftr .calc-card .stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  padding: 4px;
}
.ftr .calc-card .stepper button {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background 200ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ftr .calc-card .stepper button .material-symbols-outlined {
  font-size: 18px;
}
.ftr .calc-card .stepper .num {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1rem;
  min-width: 1.5ch;
  text-align: center;
}
.ftr .calc-card .result {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.ftr .calc-card .result .num {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ftr .calc-card .result .lbl {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
}
.ftr .calc-card .more-wrap {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
/* "Uitgebreide calculator" link */
.ftr .calc-card .more {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: border-color 200ms, color 200ms;
}
.ftr .calc-card .more .material-symbols-outlined {
  font-size: 14px;
}

/* Witte variant (gebruikt in de footer — frosted glass op donkere achtergrond) */
.ftr .calc-card.white {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 22px 60px -18px rgba(0, 0, 0, 0.32);
  color: var(--on-surface);
}
.ftr .calc-card.white .head {
  color: var(--footer-bg);
}
.ftr .calc-card.white .sub {
  color: var(--on-surface-muted);
}
.ftr .calc-card.white .row {
  border-bottom: 1px solid rgba(45, 94, 75, 0.10);
}
.ftr .calc-card.white .row:last-of-type {
  border-bottom: 0;
}
.ftr .calc-card.white .row label {
  color: var(--on-surface-secondary);
}
.ftr .calc-card.white .stepper {
  background: var(--surface-warm-mid);
}
.ftr .calc-card.white .stepper button {
  color: var(--footer-bg);
}
.ftr .calc-card.white .stepper button:hover {
  background: #ffffff;
}
.ftr .calc-card.white .stepper .num {
  color: var(--footer-bg);
}
.ftr .calc-card.white .result {
  background: var(--primary-wash-lightest);
}
.ftr .calc-card.white .result .num {
  color: var(--footer-bg);
}
.ftr .calc-card.white .result .lbl {
  color: var(--primary-bright);
}
.ftr .calc-card.white .more {
  color: var(--primary-bright);
  border-bottom-color: rgba(4, 120, 87, 0.30);
}
.ftr .calc-card.white .more:hover {
  border-color: var(--primary-bright);
}

/* ── Legal strip ── */
.ftr .legal-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-body);
}
.ftr .legal-strip .links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  font-size: 0.8125rem;
}
.ftr .legal-strip .links a {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
  text-decoration: none;
  transition: color 200ms;
}
.ftr .legal-strip .links a:hover {
  color: #ffffff;
}
.ftr .legal-strip .links a[aria-current="page"] {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ftr .legal-strip .copy {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .ftr .triptych {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
@media (max-width: 640px) {
  .ftr .container {
    padding: 72px 24px 28px;
  }
  .ftr .legal-strip {
    flex-direction: column;
    align-items: flex-start;
  }
}