/*
Theme Name: noodle
Theme URI: https://noodleinvest.com
Author: noodle
Description: Custom block theme for the noodle marketing site — a hand-drawn, pencil-sketch brand for an employee benefit scheme that invests £1,000 into a pension for each employee's newborn child.
Version: 1.0.5
Requires at least: 6.6
Tested up to: 6.8
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: noodle
*/

/* ============================================================
   Design tokens
   Colours, font sizes and the spacing scale are defined in
   theme.json (so they appear in the editor UI) and aliased here
   to the original variable names the rest of this file uses.
   ============================================================ */
:root {
  /* ---------- Brand colours (aliases of theme.json palette) ---------- */
  --color-green: var(--wp--preset--color--green);
  --color-green-dark: var(--wp--preset--color--green-dark);
  --color-green-darker: var(--wp--preset--color--green-darker);

  --color-ink: var(--wp--preset--color--ink);
  --color-ink-soft: var(--wp--preset--color--ink-soft);
  --color-white: var(--wp--preset--color--white);
  --color-bg: var(--wp--preset--color--white);

  /* ---------- UI greys ---------- */
  --color-field: var(--wp--preset--color--field);
  --color-field-border: var(--wp--preset--color--field-border);
  --color-muted: var(--wp--preset--color--muted);

  /* ---------- Typography ---------- */
  --font-head: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --weight-body: 300;
  --weight-strong: 600;
  --weight-head: 500;
  --weight-logo: 600;

  --fs-hero:  var(--wp--preset--font-size--hero);
  --fs-h2:    var(--wp--preset--font-size--heading);
  --fs-h3:    var(--wp--preset--font-size--subheading);
  --fs-lead:  var(--wp--preset--font-size--lead);
  --fs-body:  var(--wp--preset--font-size--body);
  --fs-small: var(--wp--preset--font-size--small);
  --fs-nav:   var(--wp--preset--font-size--nav);

  --lh-head: 1.14;
  --lh-body: 1.62;

  /* ---------- Spacing scale (aliases of theme.json presets) ---------- */
  --space-2xs: var(--wp--preset--spacing--xxs);
  --space-xs:  var(--wp--preset--spacing--xs);
  --space-sm:  var(--wp--preset--spacing--sm);
  --space-md:  var(--wp--preset--spacing--md);
  --space-lg:  var(--wp--preset--spacing--lg);
  --space-xl:  var(--wp--preset--spacing--xl);
  --space-2xl: var(--wp--preset--spacing--xxl);
  --space-3xl: var(--wp--preset--spacing--xxxl);

  --section-pad: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --gutter: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);

  /* ---------- Radius & shadow ---------- */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 30px;
  --radius-pill: 999px;
  --shadow-img:  0 18px 40px rgba(0, 0, 0, 0.16);
  --shadow-card: 0 20px 55px rgba(0, 0, 0, 0.10);

  --shadow-img-lift: 0 40px 110px rgba(0, 0, 0, 0.20);

  /* ---------- Pencil marks ---------- */
  --color-pencil: var(--wp--preset--color--pencil);
}

/* ============================================================
   Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  line-height: var(--lh-head);
  color: var(--color-ink);
  margin: 0;
}

p { margin: 0; }
p + p { margin-block-start: var(--space-md); }
strong, b { font-weight: var(--weight-strong); color: var(--color-ink); }
a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--color-green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Layout
   ============================================================ */
.section { padding-block: var(--section-pad); }

main {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  margin-bottom: var(--footer-h, 35vh);
}

/* Anchor offset — accounts for the admin bar when logged in. */
[id] { scroll-margin-top: calc(2rem + var(--wp-admin--admin-bar--height, 0px)); }

.section__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-2xl);
}

/* ============================================================
   Buttons
   Core buttons are styled by theme.json (elements.button).
   .btn remains for the WPForms submit button.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1;
  padding: 0.85em 1.6em;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn--primary { background: var(--color-green); color: var(--color-white); }
.btn--primary:hover { background: var(--color-green-dark); }

.wp-block-button__link { transition: background-color 0.2s ease; }

/* ============================================================
   Pencil marks
   ============================================================ */
.scribble {
  position: relative;
  display: inline-block;
  white-space: nowrap;

  z-index: 0;
}

.scribble::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  background-color: var(--color-pencil);
  -webkit-mask: var(--pencil-src) center / 100% 100% no-repeat;
          mask: var(--pencil-src) center / 100% 100% no-repeat;
}

/* Green pencil variant (replaces the old inline style="--color-pencil:…"). */
.scribble--green { --color-pencil: var(--color-green); }

.scribble--underline { --pencil-src: url('assets/img/pencil-underline.svg'); }
.scribble--underline::before {
  left: -4%;
  right: -4%;
  bottom: -0.32em;
  height: 0.5em;
}

.scribble--circle {
  --pencil-src: url('assets/img/pencil-circle.svg');
  padding-inline: 0.18em;
}
.scribble--circle::before {
  left: -20%;
  right: -20%;
  top: -40%;
  bottom: -40%;
  transform: rotate(-5deg);
}
.scribble--circle.scribble--dark::before { transform: rotate(7deg); }

.scribble.is-drawn::before { display: none; }

/* .js-draw is set by an inline script printed in <head> (front end only), so
   the static masks are hidden before the first paint — a mark can't flash
   fully-drawn while its artwork is still being fetched. scribble-draw.js
   drops .js-draw if it bails, and tags a mark .draw-failed if its artwork
   won't load, which brings the mask back. In the editor .js-draw is never
   set, so the static marks always show there. */
.js-draw .scribble:not(.draw-failed)::before,
.js-draw .step__num:not(.draw-failed)::before { display: none; }
.js-draw .feature__icon:not(.draw-failed) {
  -webkit-mask: none;
          mask: none;
  background: none;
}

.scribble__svg {
  position: absolute;
  display: block;
  pointer-events: none;
  overflow: visible;
}
.scribble > .scribble__svg { z-index: -1; }
.scribble__svg path { stroke: var(--color-pencil); }

.scribble--underline .scribble__svg {
  left: -4%;
  width: 108%;
  bottom: -0.32em;
  height: 0.5em;
}
.scribble--circle .scribble__svg {
  left: -20%;
  width: 140%;
  top: -40%;
  height: 180%;
  transform: rotate(-5deg);
}
.scribble--circle.scribble--dark .scribble__svg { transform: rotate(7deg); }

.scribble-arrow {
  position: relative;
  display: inline-block;
  width: clamp(72px, 12vw, 132px);
  height: 52px;
  vertical-align: middle;
  margin-left: 0.4em;
  background-color: var(--color-pencil);
  -webkit-mask: url('assets/img/pencil-arrow.svg') center / contain no-repeat;
          mask: url('assets/img/pencil-arrow.svg') center / contain no-repeat;
}

/* ============================================================
   Header / navigation
   ============================================================ */
.site-header { padding-block: var(--space-lg); }
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.logo { display: inline-flex; align-items: center; }
.logo__img,
.logo__img img {
  height: 1.9rem;
  width: auto;
  display: block;
}
.logo__img { margin: 0; }
.logo__img--footer,
.logo__img--footer img { height: 3.5rem; }

.noodle-text {
  display: inline-block;
  height: 0.82em;
  width: auto;
  vertical-align: baseline;
  position: relative;
  top: 0.04em;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

/* ----- Core navigation block, styled to match the original nav ----- */
.nav.wp-block-navigation {
  font-size: var(--fs-nav);
}
.nav .wp-block-navigation__container {
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.nav .wp-block-navigation-item__content {
  color: var(--color-ink);
  transition: color 0.2s ease;
}
.nav .wp-block-navigation-item__content:hover { color: var(--color-green); }

/* Hamburger / close buttons */
.nav .wp-block-navigation__responsive-container-open,
.nav .wp-block-navigation__responsive-container-close {
  color: var(--color-ink);
}

/* Mobile overlay → the white rounded dropdown card from the original design */
.nav .wp-block-navigation__responsive-container.is-menu-open {
  position: absolute;
  inset: calc(100% + 0.5rem) 0 auto 0;
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  z-index: 20;
}
.nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
}
.nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}
.nav .wp-block-navigation__responsive-container-close {
  padding: 0;
}

/* The core nav collapses to a hamburger below 600px; the original design
   collapses at 860px. Extend the hamburger up to 859px. The doubled class
   matches the specificity of the core rules being overridden. */
@media (min-width: 600px) and (max-width: 859.98px) {
  .nav .wp-block-navigation__responsive-container.wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
    display: none;
  }
  .nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
    display: flex;
  }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__frame {
  max-width: 460px;
  margin: 0 auto;
  padding: 14px;
  background: var(--color-white);
  border-radius: 22px;
  box-shadow: var(--shadow-img);
  transform: rotate(-4deg);
}
.hero__frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  object-fit: cover;
  object-position: bottom;
}

.hero__title { font-size: var(--fs-hero); }
.hero__lead {
  font-size: var(--fs-lead);
  margin-top: var(--space-lg);
  max-width: 46ch;
}

.check-list {
  list-style: none;
  margin: var(--space-xl) 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}
.check-list li {
  position: relative;
  padding-left: 2.25rem;
  font-size: var(--fs-small);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-green);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 0.275rem;
  top: calc(0.05em + 0.275rem);
  width: 0.95rem;
  height: 0.95rem;
  background: var(--color-white);
  -webkit-mask: url('assets/img/check.svg') center / contain no-repeat;
          mask: url('assets/img/check.svg') center / contain no-repeat;
}

/* ============================================================
   Backed by (logo strip)
   ============================================================ */
.backed {
  padding-top: 0;
  padding-bottom: var(--section-pad);
  text-align: center;
}
.backed__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  margin-bottom: var(--space-xl);
}
.backed__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
}
.backed__logos .wp-block-image { margin: 0; }
.backed__logos img {
  height: clamp(30px, 3.6vw, 42px);
  width: auto;
}

/* ============================================================
   How noodle works
   ============================================================ */

/* The steps/features rows are core Grid blocks. Left to WordPress they
   render `repeat(auto-fill, …)` with no gap, which keeps empty column
   tracks on wide screens and reflows 3 → 2 → 1. Drive the layout from
   the theme instead: a fixed three-column grid with a gap on desktop
   that collapses straight to one column (stacked rows) below 860px —
   no intermediate two-column state. The doubled class outranks
   WordPress's single-class generated rules for both columns and gap. */
.steps.is-layout-grid,
.features.is-layout-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.25rem);
}

.step__num {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-md);
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  font-size: 1.15rem;
  color: var(--color-ink);
}

.step__num::before {
  content: "";
  position: absolute;
  inset: -3px;
  background-color: var(--color-pencil);
  -webkit-mask: url('assets/img/pencil-ring.svg') center / 100% 100% no-repeat;
          mask: url('assets/img/pencil-ring.svg') center / 100% 100% no-repeat;
}

.steps .step:nth-of-type(1) .step__num::before { transform: rotate(-16deg); }
.steps .step:nth-of-type(2) .step__num::before { transform: rotate(28deg); }
.steps .step:nth-of-type(3) .step__num::before { transform: rotate(-42deg); }

.step__num.is-drawn::before { display: none; }
.step__num .scribble__svg {
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  pointer-events: none;
  overflow: visible;
}
.steps .step:nth-of-type(1) .step__num .scribble__svg { transform: rotate(-16deg); }
.steps .step:nth-of-type(2) .step__num .scribble__svg { transform: rotate(28deg); }
.steps .step:nth-of-type(3) .step__num .scribble__svg { transform: rotate(-42deg); }
.step__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-sm);
}
.step p { font-size: var(--fs-small); }

/* ============================================================
   Why noodle
   ============================================================ */
.why__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}
.why__head .section__title { margin-bottom: 0; }
.why__media {
  flex: 0 1 360px;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.why__media .wp-block-image { margin: 0; }
.why__media__img img {
  display: block;
  height: auto;
}
.why__media__img--sharpener {
  width: 30%;
  transform: rotate(-6deg);
}
.why__media__img--shavings { width: 64%; }

.feature__icon {
  position: relative;
  display: inline-block;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--space-md);
  background-color: var(--color-green);
  -webkit-mask: var(--feat) center / contain no-repeat;
          mask: var(--feat) center / contain no-repeat;
}
.feature__icon--pound { --feat: url('assets/img/pencil-pound.svg'); }
.feature__icon--graph { --feat: url('assets/img/pencil-graph.svg'); }
.feature__icon--scale { --feat: url('assets/img/pencil-scale.svg'); }

.feature__icon.is-drawn {
  -webkit-mask: none;
          mask: none;
  background: none;
}
.feature__icon .scribble__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.feature__icon .scribble__svg path { stroke: var(--color-green); }
.feature__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-sm);
}
.feature p { font-size: var(--fs-small); }

/* ============================================================
   Compounding card
   ============================================================ */
.compound__card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  margin-top: var(--space-xl);
}
.compound__crayon {
  position: absolute;
  margin: 0;

  top: -20px;
  left: clamp(-1.5rem, -2vw, -3rem);
  width: clamp(500px, 22vw, 260px);
  transform: rotate(-8deg);
}
.compound__crayon img {
  display: block;
  width: 100%;
  height: auto;
}

.compound__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.compound__title {
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
  margin-bottom: var(--space-lg);
}
.compound__text p {
  font-size: var(--fs-lead);
  max-width: 34ch;
}

.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; }
.chart__pencil { stroke: var(--color-pencil); }

.legend {
  margin: var(--space-md) 0 0;
  font-size: var(--fs-small);
}
.legend::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--color-ink);
  vertical-align: baseline;
}

/* ============================================================
   Quote (CEO)
   ============================================================ */
.quote__inner {
  display: grid;
  grid-template-columns: clamp(220px, 28vw, 300px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin: 0;
}
.quote__photo {
  max-width: 300px;
  margin: 0 auto;
  padding: 12px;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: var(--shadow-img);
  transform: rotate(-2deg);
}
.quote__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  object-fit: cover;
}

.quote__text {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.1rem);
  line-height: 1.32;
  color: var(--color-ink);
}
.quote__text::before {
  content: "\201C";
  display: block;
  font-family: var(--font-head);
  font-size: 4rem;
  line-height: 0.7;
  color: var(--color-ink);
  opacity: 0.22;
}
.quote__cite {
  margin-top: var(--space-lg);
  display: grid;
  gap: 0.1rem;
}
.quote__name {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--weight-logo);
  font-size: 1.1rem;
  color: var(--color-ink);
}
.quote__role {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq__groups {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.faq__group {
  display: grid;
  grid-template-columns: clamp(160px, 22vw, 240px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
}
.faq__group-title {
  font-size: var(--fs-h3);
  color: var(--color-ink);
}
.faq__list { display: grid; }

.faq__item { border-top: 1px solid var(--color-field-border); }
.faq__list .faq__item:last-child { border-bottom: 1px solid var(--color-field-border); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  list-style: none;
  cursor: pointer;
  padding: var(--space-md) 0;
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  font-size: var(--fs-lead);
  color: var(--color-ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }

.faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-green);
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item summary:hover { color: var(--color-green); }

.faq__item > :not(summary) {
  margin-block-start: 0;
  margin-block-end: var(--space-md);
  max-width: 64ch;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

/* ============================================================
   Join our journey
   ============================================================ */
.join__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.join__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-lg);
}
.join__intro p { font-size: var(--fs-lead); max-width: 42ch; }
.join__small { margin-top: var(--space-md); color: var(--color-muted); }

/* ----- WPForms, restyled to match the original signup form -----
   WPForms' "modern markup" mode styles fields with deep, high-specificity
   selectors (e.g. `div.wpforms-container .wpforms-form .wpforms-field
   input.wpforms-field-medium`) and forces a transparent background and no
   border. To reliably match the noodle design regardless of WPForms mode or
   version, the field/button appearance is set with `!important` — the
   correct tool for deliberately overriding a plugin's own field styling.
   Works for both the modern and classic WPForms markup. */
.join .wpforms-container { padding-top: var(--space-xs); }

.join .wpforms-container .wpforms-field {
  padding: 0 0 var(--space-md);
}
.join .wpforms-container .wpforms-field-label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}
.join .wpforms-container .wpforms-field-label .wpforms-required-label {
  color: var(--color-green-darker);
}

.join .wpforms-container input[type="text"],
.join .wpforms-container input[type="email"],
.join .wpforms-container select,
.join .wpforms-container textarea {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-body) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  color: var(--color-ink) !important;
  background-color: var(--color-field) !important;
  border: 1px solid var(--color-field-border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.85em 1.25em !important;
  box-shadow: none !important;
}
.join .wpforms-container input:focus,
.join .wpforms-container select:focus,
.join .wpforms-container textarea:focus {
  outline: 3px solid var(--color-green) !important;
  outline-offset: 1px;
  border-color: var(--color-field-border) !important;
  box-shadow: none !important;
}

.join .wpforms-container .wpforms-submit-container {
  padding: var(--space-xs) 0 0;
}
.join .wpforms-container button[type="submit"],
.join .wpforms-container button.wpforms-submit {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: var(--fs-body) !important;
  line-height: 1 !important;
  color: var(--color-white) !important;
  background-color: var(--color-green) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.85em 1.6em !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.join .wpforms-container button[type="submit"]:hover,
.join .wpforms-container button.wpforms-submit:hover {
  background-color: var(--color-green-dark) !important;
  border: 0 !important;
}

/* ============================================================
   Family band image
   ============================================================ */
.band-image { margin-top: var(--section-pad); padding: 0; }
.band-image .wp-block-image { margin: 0; }
.band-image img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 320px;
  object-fit: cover;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 0;
  min-height: 35vh;
  align-content: center;
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  display: flex;
  align-items: flex-end;
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
  width: 100%;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.footer__desc {
  max-width: 52ch;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

.footer__social.wp-block-social-links {
  gap: var(--space-md);
}
.footer__social .wp-block-social-link a {
  transition: opacity 0.2s ease;
}
.footer__social .wp-block-social-link a:hover { opacity: 0.6; }

.footer__aside {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
}
.footer__email a {
  font-size: var(--fs-small);
  color: var(--color-ink);
  border-bottom: 1px solid rgba(29, 29, 27, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.footer__email a:hover { border-bottom-color: var(--color-ink); }
.footer__legal {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
}
.footer__legal a {
  color: var(--color-ink-soft);
  transition: color 0.2s ease;
}
.footer__legal a:hover { color: var(--color-ink); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .compound__grid { grid-template-columns: 1fr; }
  .join__inner { grid-template-columns: 1fr; }
  .quote__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .faq__group { grid-template-columns: 1fr; gap: var(--space-md); }

  /* Steps/features go straight from three columns to one — no 2-up step. */
  .steps.is-layout-grid,
  .features.is-layout-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .band-image img { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}