/*
Theme Name: meidoorn
Theme URI: https://meidoorn.nl
Author: BlueCT
Description: Bespoke warm-editorial block theme for Meidoorn, bloemist en plantenkwekerij in Utrecht, Nieuwegein en Houten. Fraunces display op warm papier met donkergroen en een terracotta accent.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meidoorn
*/

/* ============================================================
   TOKENS (theme.json generates --wp--preset--*; these are the
   bespoke look/motion tokens layered on top)
   ============================================================ */
:root {
  --radius: var(--wp--custom--radius, 6px);
  --line: var(--wp--custom--line, rgba(46, 64, 52, 0.14));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-y: 18px;
  --maxw: 1180px;
}

/* ============================================================
   ATMOSPHERE
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Soft warm vignette behind the page. Lives on body::before so it never
   creates a stacking context on .wp-site-blocks > * (would trap the nav). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 85% -5%, rgba(217, 140, 95, 0.10), transparent 60%),
    radial-gradient(50vw 45vh at -5% 105%, rgba(46, 64, 52, 0.07), transparent 60%);
}
.wp-site-blocks > * { position: relative; }

/* ============================================================
   FULL-WIDTH / SIDE PADDING (section 13)
   Full-width sections reach the edges. Padding lives only on
   constrained inner content, never on the wrapper.
   ============================================================ */
.wp-site-blocks { padding-inline: 0 !important; }
.wrap { max-width: var(--maxw); margin-inline: auto; width: 100%; padding-inline: clamp(1rem, 4vw, 2rem); }

/* ============================================================
   SKIP LINK + FOCUS
   ============================================================ */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100001;
  background: var(--wp--preset--color--ink-deep);
  color: var(--wp--preset--color--paper);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.5rem; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
:where(a, button, input, textarea, select, .wp-block-navigation-item__content):focus-visible {
  outline: 3px solid var(--wp--preset--color--accent-text);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: var(--wp--preset--spacing--40);
}
.site-header .wp-block-site-title a { color: var(--wp--preset--color--ink-deep); text-decoration: none; }
.site-header .wp-block-navigation { --wp--style--block-gap: 1.75rem; }
.site-header .wp-block-navigation a {
  color: var(--wp--preset--color--ink-deep);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.01em;
  position: relative;
  padding-block: 0.25rem;
}
.site-header .wp-block-navigation a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.site-header .wp-block-navigation a:hover::after,
.site-header .wp-block-navigation .current-menu-item a::after { transform: scaleX(1); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; }
.hero-figure { position: relative; border-radius: var(--radius); overflow: hidden; }
.hero-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-fullbleed { position: relative; }
.hero-fullbleed img { width: 100%; height: clamp(60vh, 70vh, 80vh); object-fit: cover; display: block; }
/* dark overlay so paper text passes contrast on full-bleed imagery */
.hero-fullbleed::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46,64,52,0.30) 0%, rgba(46,64,52,0.66) 100%);
  pointer-events: none;
}
.eyebrow {
  font-family: var(--wp--preset--font-family--body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent-text);
}
.eyebrow.on-dark { color: var(--wp--preset--color--accent); }
.lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--ink-soft); }

/* ============================================================
   THIN RULE / EDITORIAL DETAILS
   ============================================================ */
.rule { border: 0; height: 1px; background: var(--line); margin-block: var(--wp--preset--spacing--40); }
.meta-list { list-style: none; margin: 0; padding: 0; }
.meta-list li { padding-block: 0.75rem; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; }
.meta-list li strong { font-family: var(--wp--preset--font-family--display); min-width: 9rem; }
/* Editor-visible marker for flagged content gaps (human fills these). */
.content-gap { color: var(--wp--preset--color--accent-text); border-left: 3px solid var(--wp--preset--color--accent); padding-left: 1rem; }

/* Stacked service list with rules (Diensten) */
.offer-item { padding-block: var(--wp--preset--spacing--40); border-top: 1px solid var(--line); }
.offer-item:last-child { border-bottom: 1px solid var(--line); }
.offer-item h3 { margin-bottom: 0.4rem; }

/* ============================================================
   CARDS (services) - numbered 3-card row
   ============================================================ */
.cards { display: flex; gap: var(--wp--preset--spacing--40); }
.card {
  flex: 1;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--wp--preset--spacing--40);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -28px rgba(46,64,52,0.5); }
.card .num {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.1rem;
  color: var(--wp--preset--color--accent-text);
  letter-spacing: 0.05em;
}

/* ============================================================
   STEPS (process) - banded grid
   ============================================================ */
.steps { display: flex; gap: var(--wp--preset--spacing--40); }
.steps .step { flex: 1; }
.steps .step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 999px;
  background: var(--wp--preset--color--ink-deep);
  color: var(--wp--preset--color--paper);
  font-family: var(--wp--preset--font-family--display);
}

/* ============================================================
   STATS
   ============================================================ */
.stat .figure {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--wp--preset--color--accent-text);
}

/* ============================================================
   CTA BAND (ink-deep block, paper text)
   ============================================================ */
.cta-band { background: var(--wp--preset--color--ink-deep); color: var(--wp--preset--color--paper); }
.cta-band :where(h1,h2,h3,p) { color: var(--wp--preset--color--paper); }
.cta-band a:not(.wp-element-button) { color: var(--wp--preset--color--accent); }

/* ============================================================
   FORMS (contact)
   ============================================================ */
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select,
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%;
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--ink-deep);
}
label { font-size: var(--wp--preset--font-size--small); font-weight: 500; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--wp--preset--color--ink-deep); color: var(--wp--preset--color--paper); }
.site-footer :where(h1,h2,h3,h4,p,li,a) { color: var(--wp--preset--color--paper); }
.site-footer .brand-xl {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1;
}
.site-footer a { text-decoration: none; opacity: 0.85; }
.site-footer a:hover { opacity: 1; color: var(--wp--preset--color--accent); }
.site-footer .footer-cols { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--60); }

/* ============================================================
   MOTION - staggered hero load + scroll reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

@keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-load > * { animation: heroRise 0.8s var(--ease) both; }
.hero-load > *:nth-child(2) { animation-delay: 0.1s; }
.hero-load > *:nth-child(3) { animation-delay: 0.2s; }
.hero-load > *:nth-child(4) { animation-delay: 0.3s; }

.wp-element-button, .wp-block-button__link { transition: background-color 0.25s var(--ease), transform 0.2s var(--ease); }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-image img { transition: transform 0.5s var(--ease); }
.wp-block-image.zoom { overflow: hidden; border-radius: var(--radius); }
.wp-block-image.zoom:hover img { transform: scale(1.04); }

/* ============================================================
   MOBILE (section 13) - mandatory
   ============================================================ */
@media (max-width: 599px) {
  .cards { display: flex; flex-direction: column; }
  .steps { flex-direction: column; }
  .steps .step { flex-direction: column; gap: 0.5rem; }
  .hero-fullbleed img { height: 62vh; }
}
@media (max-width: 480px) {
  .nav .wp-block-buttons { display: none; }
}

/* --- Hamburger & close button: 44px tap target, visible on mobile --- */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--ink-deep) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
}
.wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--paper) !important; }
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 28px !important; height: 28px !important; }

/* --- Bidirectional open/close animation (closing fades, no instant disappear) --- */
.wp-block-navigation__responsive-container:not(.is-menu-open) {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.wp-block-navigation__responsive-container.is-menu-open {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, visibility 0s linear 0s;
  background: var(--wp--preset--color--ink-deep) !important;
  padding: 5rem 1.75rem 2.5rem !important;
  z-index: 100000 !important;
  overflow-y: auto !important;
}
/* Force both inner wrappers to fill the overlay height → full-height panel */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.is-responsive {
  width: 100% !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100% !important; }

/* Overlay links - large editorial */
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: clamp(2rem, 7vw, 3rem) !important;
  font-weight: 500 !important;
  color: var(--wp--preset--color--paper) !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
  padding: 0.6rem 0 !important;
  display: block;
  border-bottom: 1px solid rgba(246, 242, 233, 0.14);
  transition: color 0.2s ease, padding-left 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.wp-block-navigation__responsive-container.is-menu-open a::after { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open a:hover {
  color: var(--wp--preset--color--accent) !important;
  padding-left: 0.5rem !important;
}

/* ============================================================
   REDUCED MOTION - show a complete, static site
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-load > * { animation: none !important; }
  .wp-block-navigation__responsive-container,
  .wp-block-navigation__responsive-container.is-menu-open { transition: none !important; }
}

/* === FACTORY MOBILE OVERRIDES v2 === */
/* FIX 1 — compounding side padding.
   WP applies .has-global-padding (root gutter) to EVERY constrained container.
   Its native de-nest rule only catches direct children, so nesting like
   site-main > entry-content > group makes the gutter stack 2-3x.
   Force the gutter to apply ONLY at the top level: any has-global-padding that
   is itself inside another has-global-padding gets zero inline padding. */
/* De-nest the gutter, but ONLY for plain nested constrained wrappers — NOT for
   alignwide/alignfull, which are layout boundaries that legitimately own a gutter
   (alignwide spans ~full width on mobile and needs it; alignfull escapes via its
   negative margin and FIX A re-adds padding to colored bands). Zeroing those was
   the bug that made text touch the edges. */
.has-global-padding .has-global-padding:not(.alignwide):not(.alignfull):not(.card):not(.step) {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* FIX 2 — mobile menu links overflowing the right edge.
   The fixed overlay has its own 1.75rem gutter. WP-core gives the close/dialog
   wrappers their own padding and the items are width:100% without border-box,
   so content pushes past the right edge. Normalize the box model and zero the
   inner wrappers' own padding so only the overlay gutter applies. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open * {
  box-sizing: border-box !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* === FACTORY OVERRIDES v3 === */
/* FIX A — full-bleed colored bands had no side padding.
   An alignfull element gets a negative margin (useRootPaddingAwareAlignments)
   that cancels the root gutter, AND our de-nest rule zeroes its has-global-padding.
   Result: text in a colored full-bleed band touches the screen edge.
   Give any full-bleed band that carries a background its own inner gutter.
   The inner content still respects the constrained content-width via the layout,
   so this only restores the missing horizontal breathing room. */
.alignfull.has-background,
.alignfull.cta-band,
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
}

/* FIX B — the menu close (x) must sit in the top-right corner, not in the link flow.
   The close button is a flex sibling of the menu content inside the column-flex
   dialog, so it was stacking inline above the links. Pull it out of flow. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 1.25rem !important;
  right: 1.25rem !important;
  margin: 0 !important;
  z-index: 1 !important;
}
/* The dialog is the positioning context for the absolute close button. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog {
  position: relative !important;
}

/* === FACTORY OVERRIDES v4 === */
/* FIX B (revised) — close (x) overlapped the Home link.
   Root cause: the close button was anchored to .__responsive-dialog, which begins
   BELOW the panel's 5rem top padding (inside the content box). So top:1.25rem landed
   right on the first link. Anchor the button to the FIXED panel instead, so it sits
   in the empty 5rem reserved space above the links.
   1. Remove the dialog as a positioning context so the button bubbles up to the
      nearest positioned ancestor = the fixed .is-menu-open panel.
   2. Reserve the corner: the panel's 5rem top padding already clears room. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog {
  position: static !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-close {
  position: static !important;
}
/* The button anchors to the fixed .is-menu-open panel (its containing block).
   top/right are measured from the panel's padding edge, so 1.25rem sits well
   above the first link inside the 5rem top padding. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 1.25rem !important;
  right: 1.25rem !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
}