/*
Theme Name: stadstuin
Theme URI: https://stadstuin.test.bluect.nl
Author: BlueCT
Description: Bespoke block theme for Stadstuin, stadstuinen en kamerplanten in Utrecht, Amsterdam en Den Haag. Fris stedelijk botanisch, diep groen op gebroken wit met warme neutralen, Bricolage Grotesque en Hanken Grotesk.
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: stadstuin
*/

/* ============================================================
   TOKENS (mirror theme.json; used by bespoke CSS below)
   ============================================================ */
:root {
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-dur: 0.8s;
  --radius: 10px;
  --maxw: 1280px;
  --hairline: rgba(20, 36, 27, 0.14);
  --hairline-light: rgba(244, 243, 236, 0.16);
}

/* ============================================================
   ATMOSPHERE
   ============================================================ */
html {
  scroll-behavior: smooth;
}
body {
  background-color: var(--wp--preset--color--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Soft botanical wash behind everything. Lives on body::before so it never
   creates a stacking context on content. No z-index on .wp-site-blocks > *
   (that would trap the mobile nav overlay). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 600px at 88% -8%, rgba(47, 107, 67, 0.07), transparent 60%),
    radial-gradient(900px 520px at -10% 108%, rgba(20, 36, 27, 0.06), transparent 58%);
}
.wp-site-blocks > * {
  position: relative;
}

/* Belt-and-braces against horizontal overflow on small screens. */
.wp-site-blocks {
  overflow-x: clip;
}

/* ============================================================
   GLOBAL WIDTH MODEL
   theme.json owns the root gutter (styles.spacing.padding) and
   useRootPaddingAwareAlignments lets .alignfull escape it. We only need to
   stop the wrapper double-padding and de-nest compounding gutters (see MOBILE).
   ============================================================ */
.wp-site-blocks {
  padding-inline: 0 !important;
}

/* Readable measure for running prose, regardless of section width. */
:where(.entry-content, .wp-block-post-content) p,
:where(.entry-content, .wp-block-post-content) li {
  max-width: 70ch;
}
.meta-list li,
.hours-list li,
.card p,
.cards p,
.section-dark p,
.cta-band p,
.hero p {
  max-width: none;
}

/* ============================================================
   TYPE DETAILS
   ============================================================ */
h1, h2, h3 {
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--wp--preset--color--accent-text);
}
.lede {
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Thin accent rule for intro/manifesto sections. */
.rule.wp-block-separator,
hr.rule {
  width: 64px;
  max-width: 64px;
  height: 2px;
  margin-inline: 0;
  background: var(--wp--preset--color--accent);
  border: 0 !important;
  opacity: 1;
}

/* Definition-style meta list. */
.meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.meta-list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hairline);
}
.meta-list li span {
  color: var(--wp--preset--color--accent-text);
  font-weight: 600;
  text-align: right;
}

/* ============================================================
   SKIP LINK & FOCUS
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100001;
  background: var(--wp--preset--color--ink-deep);
  color: var(--wp--preset--color--paper);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
  font-family: var(--wp--preset--font-family--body);
}
.skip-link:focus {
  left: 0;
}
:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Width utility for header/footer parts (they sit outside post-content). */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ============================================================
   HEADER / NAV CHROME
   ============================================================ */
.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(--hairline);
}
.nav .wp-block-site-title,
.nav .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--wp--preset--color--ink-deep);
}
.nav .wp-block-navigation a,
.nav .wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  text-decoration: none;
  color: var(--wp--preset--color--ink-deep);
}

/* Animated underline on desktop nav links. */
@media (min-width: 600px) {
  .nav .wp-block-navigation .wp-block-navigation-item__content {
    position: relative;
  }
  .nav .wp-block-navigation .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: var(--wp--preset--color--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-soft);
  }
  .nav .wp-block-navigation .wp-block-navigation-item__content:hover::after {
    transform: scaleX(1);
  }
}
.nav .wp-block-button__link {
  transition: transform 0.25s var(--ease-soft), background 0.25s ease;
}
.nav .wp-block-button__link:hover {
  transform: translateY(-2px);
}

/* ============================================================
   HERO (full-bleed cover)
   ============================================================ */
.hero {
  position: relative;
  overflow: clip;
}
/* Richer dim than a flat overlay so the heading stays legible while the photo
   keeps showing through. */
.hero .wp-block-cover__background {
  background: linear-gradient(
    180deg,
    rgba(20, 36, 27, 0.30) 0%,
    rgba(20, 36, 27, 0.52) 55%,
    rgba(20, 36, 27, 0.74) 100%
  ) !important;
}
.hero h1 {
  letter-spacing: -0.02em;
}

/* Hero entrance: animate ONLY the inner content, never the cover bg/dim layers
   (fill:both on those would lock the dim opaque and hide the photo). */
.hero .hero-inner > * {
  opacity: 0;
  transform: translateY(22px);
  animation: heroRise 0.85s var(--ease-soft) both;
}
.hero .hero-inner > *:nth-child(1) { animation-delay: 0.08s; }
.hero .hero-inner > *:nth-child(2) { animation-delay: 0.18s; }
.hero .hero-inner > *:nth-child(3) { animation-delay: 0.28s; }
.hero .hero-inner > *:nth-child(4) { animation-delay: 0.38s; }
.hero > .wp-block-cover__background,
.hero > .wp-block-cover__image-background {
  animation: none !important;
}
@keyframes heroRise {
  to { opacity: 1; transform: none; }
}

/* ============================================================
   CARDS / SERVICES (numbered row)
   ============================================================ */
.card {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px -30px rgba(20, 36, 27, 0.5);
}
.card-num {
  font-family: var(--wp--preset--font-family--display);
  font-size: 2.3rem;
  line-height: 1;
  font-weight: 600;
  color: var(--wp--preset--color--accent);
}
.card h3 {
  margin-top: 0.4rem;
}

/* ============================================================
   STEPS / PROCESS
   ============================================================ */
.steps .step {
  display: flex;
  gap: var(--wp--preset--spacing--40);
  align-items: baseline;
  padding-block: var(--wp--preset--spacing--20);
  border-top: 1px solid var(--hairline-light);
}
.steps .step .step-num {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--wp--preset--color--accent);
  min-width: 2.5rem;
}

/* ============================================================
   ALTERNATING FEATURE ROWS
   ============================================================ */
.feature-row img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ============================================================
   TONAL & DARK SECTIONS
   ============================================================ */
.section-tonal {
  background: var(--wp--preset--color--sand);
  border-radius: var(--radius);
}
.section-dark {
  background: var(--wp--preset--color--forest);
  color: var(--wp--preset--color--paper);
  border-radius: var(--radius);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: var(--wp--preset--color--paper);
}
.section-dark .eyebrow {
  color: #A9CDB2;
}
.section-dark a {
  color: #A9CDB2;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--paper);
  border-radius: var(--radius);
}
.cta-band h2 {
  color: var(--wp--preset--color--paper);
}
.cta-band .wp-block-button__link {
  background: var(--wp--preset--color--ink-deep);
  color: var(--wp--preset--color--paper);
}
.cta-band .wp-block-button__link:hover {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink-deep);
}

/* ============================================================
   IMAGES
   ============================================================ */
.wp-block-image img {
  border-radius: var(--radius);
}
.wp-block-image.alignfull img {
  border-radius: 0;
}
.hover-zoom {
  overflow: hidden;
  border-radius: var(--radius);
}
.hover-zoom img {
  transition: transform 0.6s var(--ease-soft);
}
.hover-zoom:hover img {
  transform: scale(1.04);
}

/* ============================================================
   FORM (contact)
   ============================================================ */
.wp-block-form .wp-block-form-input__label-content {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small);
  display: block;
  margin-bottom: 0.35rem;
}
.wp-block-form input,
.wp-block-form textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--medium);
  background: #fff;
  color: var(--wp--preset--color--ink-deep);
}
.wp-block-form textarea {
  min-height: 150px;
  resize: vertical;
}
.wp-block-form input:focus,
.wp-block-form textarea:focus {
  border-color: var(--wp--preset--color--accent);
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 1px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--wp--preset--color--ink-deep);
  color: var(--wp--preset--color--paper);
}
.site-footer h2,
.site-footer h3,
.site-footer .footer-brand {
  font-family: var(--wp--preset--font-family--display);
  color: var(--wp--preset--color--paper);
}
.site-footer .footer-brand {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.site-footer .footer-heading {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: #A9CDB2;
}
.site-footer a {
  color: #D6D9CC;
  text-decoration: none;
}
.site-footer a:hover {
  color: #A9CDB2;
  text-decoration: underline;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--reveal-dur) var(--ease-soft),
    transform var(--reveal-dur) var(--ease-soft);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-soft), transform 0.6s var(--ease-soft);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal-stagger > *,
  .hero .hero-inner > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .card,
  .hover-zoom img { transition: none !important; }
}

/* ============================================================
   MOBILE  (mandatory section)
   ============================================================ */

/* De-nest compounding global padding: WP applies .has-global-padding (the root
   gutter) to every constrained container, and real seed content nests them, so
   the gutter stacks 2-3x and margins look huge. Zero it on nested constrained
   wrappers, but NOT on layout boundaries (alignwide/alignfull) or on boxed
   components that own their inner padding (.card, .section-dark, .section-tonal,
   .cta-band). Flow rows with no own h-padding (.steps) are de-nested, not
   excluded. */
.has-global-padding
  .has-global-padding:not(.alignwide):not(.alignfull):not(.card):not(.section-dark):not(.section-tonal):not(.cta-band) {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Full-bleed colored bands and covers keep an inner gutter so text never
   touches the screen edge. */
.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;
}

/* Hamburger & close button: 44px tap target, always 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-open svg,
.wp-block-navigation__responsive-container-close svg {
  width: 28px !important;
  height: 28px !important;
}

/* Close (x) floats top-right of the fixed panel, not in the link flow.
   Keep dialog/close STATIC so the absolute button is measured from the fixed
   panel's padding box. */
.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-close {
  position: static !important;
}
.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;
  color: var(--wp--preset--color--paper) !important;
  z-index: 2 !important;
}

/* Bidirectional open/close animation. Never style the container without
   .is-menu-open, or the overlay stays visible permanently. */
.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;
}

/* Stretch every inner wrapper to full height and kill WP-core's own padding so
   links never overflow the right edge. */
.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 {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !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;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 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 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Overlay nav 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: 600 !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(244, 243, 236, 0.12);
  transition: color 0.2s ease, padding-left 0.22s var(--ease-soft);
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content::after {
  display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover {
  color: #A9CDB2 !important;
  padding-left: 0.5rem !important;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container,
  .wp-block-navigation__responsive-container.is-menu-open {
    transition: none !important;
  }
}

/* Stack card and step rows on mobile. Force align-items:stretch so WP core's
   .is-layout-flex{align-items:center} cannot indent narrower items. */
@media (max-width: 599px) {
  .cards,
  .steps {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
  }
  .cards .card,
  .steps .step {
    align-self: stretch !important;
  }
  .steps .step {
    flex-direction: column;
    gap: 0.5rem;
  }
  .steps .step .step-num {
    min-width: 0;
  }
  .meta-list li,
  .hours-list li {
    flex-direction: column;
    gap: 0.25rem;
  }
  .meta-list li span,
  .hours-list li span {
    text-align: left;
  }
  .site-footer .footer-brand {
    font-size: clamp(2.2rem, 12vw, 3rem);
  }
}

/* Hide the nav CTA button on very small screens. */
@media (max-width: 480px) {
  .nav .wp-block-buttons {
    display: none;
  }
}

/* ============================================================
   HOURS / DETAIL LIST (contact)
   ============================================================ */
.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}