/*
 * WordPress bridge.
 *
 * assets/site.css is the approved design system and stays byte-identical to the
 * static build. This file is the only place WordPress-specific plumbing is
 * allowed to live: Gravity Forms' markup mapped onto the design system's class
 * names, and the handful of Elementor and Hello Elementor defaults that would
 * otherwise leak into the page.
 *
 * If a rule here is doing design work rather than plumbing, it belongs in
 * site.css and the static build instead.
 */

/* ── Elementor plumbing ──────────────────────────────────────────────────── */

/*
 * Make the sticky header actually stick.
 *
 * site.css gives .header `position: sticky; top: 0`, which works in the static
 * build because its parent is <body> — a sticky element can only travel within
 * its containing block. Elementor wraps the header in a box exactly as tall as
 * the header itself, so there was nowhere to travel and it scrolled straight out
 * of view. The wrapper Elementor puts directly in <body> becomes the sticky
 * element instead, which pins the header for the whole page as intended.
 *
 * Worth noting: a full-page screenshot renders sticky elements at rest, so no
 * amount of image diffing would have caught this. tools/functional-test.py
 * scrolls and asserts it.
 */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/*
 * Every Elementor container in this build carries .meadow-shell. Elementor gives
 * containers their own width, padding and gap through custom properties; the
 * design system owns all three, so they are handed back here. site.css loads
 * after Elementor's frontend CSS, so its .section / .container / .hero rules win
 * the remaining ties on their own.
 */
.e-con.meadow-shell {
  --width: 100%;
  --content-width: 100%;
  --max-width: none;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;

  /*
   * Elementor's containers default to flex-wrap: wrap. On a column container
   * that let Chrome add a phantom line box below the content — 25.6px of empty
   * space under the footer below 860px, attached to no element. Every section
   * here is a single stacked column, so wrapping has nothing to do.
   */
  --flex-wrap: nowrap;
  flex-wrap: nowrap;
}

/*
 * Take the widget wrapper out of the layout so the design system's markup sits
 * directly inside the section container, exactly as it sits inside <section> in
 * the static build.
 *
 * This also removes a real bug. Elementor indents widget output, leaving
 * whitespace text nodes either side of the markup inside a block wrapper, and
 * below 860px that produced a stray 25.6px line box under the footer — a
 * document 26px taller than the approved build with nothing visible in the gap.
 *
 * Scoped away from the editor, which needs the wrapper's box to draw handles.
 */
body:not(.elementor-editor-active) .elementor-widget-html,
body:not(.elementor-editor-active) .elementor-widget-shortcode {
  display: contents;
}

/*
 * .hero centres its one in-flow child and positions the rest absolutely. With
 * the wrapper gone, .hero__inner is a direct flex child just as it is in the
 * static build, so the container only needs the row direction Elementor
 * overrides.
 */
.e-con.hero {
  --flex-direction: row;
}

/*
 * Reveal-on-scroll starts at opacity 0 and site.js's IntersectionObserver does
 * not fire inside the editor preview, so half the page would be invisible while
 * editing it. Editor only — the frontend keeps the animation.
 */
body.elementor-editor-active .reveal {
  opacity: 1;
  transform: none;
}

/* .contactWrap is a two-column grid with a 72px gutter in the design system. */
.e-con.contactWrap {
  --display: grid;
  --gap: var(--s-7);
  --row-gap: var(--s-7);
  --column-gap: var(--s-7);
}

/* products.html sets this one section's tighter padding inline. */
.e-con.meadow-tight {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* ── Elementor element resets ─────────────────────────────────────────────── */

/*
 * Elementor resets `height`, `border`, `border-radius` and `box-shadow` on every
 * image inside .elementor, and `.elementor img` outranks a single class, so the
 * two images the design system sizes directly are restated here — reusing
 * site.css's own custom properties so the values cannot drift numerically.
 */
.elementor .brand__logo {
  height: 56px;
  width: auto;
  object-fit: contain;
}

/* Restating a height means restating its responsive step too, or this rule beats
   site.css's media query and the logo never shrinks on mobile. */
@media (max-width: 860px) {
  .elementor .brand__logo {
    height: 48px;
  }
}

.elementor .split__img {
  height: 440px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

/*
 * `.elementor a { box-shadow: none }` outranks `.btn--green`, so every button that
 * is an anchor loses its resting shadow in WordPress while keeping it in the static
 * build. The hover state was unaffected, which is what made it easy to miss: the
 * shadow simply appeared on hover instead of deepening.
 */
.elementor .btn--green {
  box-shadow: var(--shadow-soft);
}

.elementor .btn--green:hover {
  box-shadow: var(--shadow);
}

/*
 * `.elementor hr { margin: 0 }` zeroes the footer rule's clearance. Restating a
 * value means restating its responsive override too, or this rule beats site.css's
 * media query as well as Elementor's reset.
 */
.elementor .footer__hr {
  margin: 0 0 var(--s-5);
}

@media (max-width: 860px) {
  .elementor .footer__hr {
    margin-bottom: var(--s-3);
  }
}

/* ── Gravity Forms mapped onto the design system ──────────────────────────── */

/*
 * Gravity Forms' own stylesheets are dequeued in inc/gravity-forms.php, so
 * everything below replaces them rather than fighting them. The <form> itself
 * carries .form and each input field wrapper carries .form__field, which means
 * site.css already styles the card, the labels and every control. What is left
 * is the grid Gravity Forms lays fields out on, and hiding its scaffolding.
 */

/* Lift .gform_fields to be a direct grid child of .form, as in the static build. */
.form .gform-body,
.form .gform_body {
  display: contents;
}

.form .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Full width is the default; the half rule has to follow it to win the tie. */
.form .gfield {
  grid-column: span 12;
  min-width: 0;
}

.form .gfield--width-half {
  grid-column: span 6;
}

/* site.css collapses .form__row to a single column at this width. */
@media (max-width: 640px) {
  .form .gfield--width-half {
    grid-column: span 12;
  }
}

/* Scaffolding with no counterpart in the approved design. */
.form .gform_validation_container,
.form .gfield--type-honeypot,
.form .gfield--type-hidden,
.form .gfield_required,
.form .gform_hidden {
  display: none;
}

/* Gravity Forms nests label text in a span; site.css styles the label itself. */
.form .gfield_label {
  display: block;
}

/*
 * Gravity Forms wraps each control in .ginput_container. Taking it out of the
 * layout makes the control a direct flex child of the field, exactly as in the
 * static build — which also blockifies it, so it stops sitting on a text
 * baseline and picking up descender space.
 */
.form .ginput_container {
  display: contents;
}

/*
 * The static build keeps a grid row under the button for the form status line —
 * an empty <p class="micro"> that fills in on submit. Gravity Forms surfaces its
 * messages elsewhere, so that row is reserved here instead, which keeps the
 * card's height and the button's clearance as approved: one grid gap plus the
 * status line's own top margin.
 */
.form .gform_footer {
  display: block;
  margin: 0 0 calc(var(--s-3) + 10px);
  padding: 0;
}

/*
 * Gravity Forms 3 renders a <button>; older versions render <input type=submit>.
 * Only the native control appearance is reset here. Deliberately no font-family:
 * the element already carries .btn, which sets its own, and pinning a family here
 * once left this the only button on the site still rendering in the old serif
 * after the nav and buttons moved to the geometric face.
 */
.form .gform_footer button[type="submit"],
.form .gform_footer input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
}

/* Validation, in the design system's own palette. */
.form .gfield_error input,
.form .gfield_error textarea,
.form .gfield_error select {
  border-color: #b3452f;
}

.form .gfield_validation_message,
.form .validation_message {
  font-size: 12px;
  line-height: 1.6;
  color: #b3452f;
  margin: 2px 0 0;
  padding: 0;
  background: none;
  border: none;
}

.form .gform_submission_error {
  font-family: var(--serif);
  font-size: 15px;
  color: #b3452f;
  margin: 0;
}

/* Confirmation reuses the card, so the success line sits where the form was. */
.gform_confirmation_wrapper .form {
  display: block;
}

.meadow-sent {
  color: var(--sage);
  font-size: 14px;
}

.form .gform_ajax_spinner {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────
   PLAIN WORDPRESS PAGES (privacy policy, and anything else not built in
   Elementor).

   Hello Elementor renders these through `.site-main > .page-header/.page-content`
   with no container of its own, and we dequeue Hello's stylesheet, so without
   this the text runs edge to edge with no padding. Everything below borrows the
   site's own tokens rather than inventing a second look.
   ───────────────────────────────────────────────────────────────────────── */
.site-main {
  background: linear-gradient(180deg, var(--cream), var(--cream2, var(--bg)));
  padding: var(--s-7, 64px) 0 var(--s-8, 88px);
}
.site-main > .page-header,
.site-main > .page-content {
  width: min(820px, calc(100% - 40px));
  margin-inline: auto;
}
.site-main > .page-header {
  margin-bottom: var(--s-5, 32px);
  padding-bottom: var(--s-4, 24px);
  border-bottom: 1px solid rgba(var(--brand-rgb, 77 93 0) / .18);
}
.site-main .entry-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.site-main .page-content {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.75;
}
.site-main .page-content > * + * { margin-top: 1.1em; }
.site-main .page-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + .8vw, 1.65rem);
  line-height: 1.25;
  color: var(--ink);
  margin-top: 2.2em;
}
.site-main .page-content h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--brand);
  margin-top: 1.8em;
}
.site-main .page-content ul { padding-left: 1.25em; }
.site-main .page-content li + li { margin-top: .5em; }
.site-main .page-content li::marker { color: var(--brand); }
.site-main .page-content a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-main .page-content a:hover { color: var(--dark); }
.site-main .page-content strong { color: var(--ink); }

/* The "Last updated" line reads as metadata, not body copy. */
.site-main .page-content > p:first-child {
  font-size: .92rem;
  color: var(--muted);
  padding: 10px 14px;
  background: rgba(var(--brand-rgb, 77 93 0) / .06);
  border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0;
}