/* ==========================================================================
   View From Here — Design System
   ==========================================================================
   One font (Open Sans). Four accent colours. One layout rhythm.

   LAYOUT PHILOSOPHY
   -----------------
   Every page composes from three section patterns. Pick one per section.

     .section              Default vertical rhythm. 110px top & bottom.
     .section--tight       Reduced rhythm. 80px top & bottom.
     .section--alt         White band with horizontal rules. Use to break
                           the cream-paper flow once per page.

   Inside a section, pick ONE content pattern:

     .section-split        Heading left (5fr) / body right (7fr), 80px gap.
                           For body copy, CTAs, descriptive sections.

     .section-center       Centered stack, max 720px, text-aligned center.
                           For heroes, feature intros, CTAs.

   Inside those, the content slots are always:

     .section-heading      Optional .eyebrow + h2 (with <em> italic accent).
     .section-body         Optional .lead paragraph, body paragraphs,
                           optional .btn. Prose capped at 620px.

   TYPE SCALE (one font, varied weight + italic + colour)
     --fs-eyebrow  11px / .28em / 600 upper
     --fs-body     17px / 400
     --fs-lead     20px / 400 ink
     --fs-h2       clamp(34, 4.6vw, 48) / 300 / -0.02em, <em> = italic purple
     --fs-h1       clamp(40, 6vw, 72)   / 300

   SPACING: 8pt rhythm. --s-1 … --s-9 (8 → 140).
   COLOUR ACCENTS: purple brand, gold/cyan/teal for the three services.
   ========================================================================== */

:root {
  /* Brand */
  --vfh-purple:         #8B7CB6;
  --vfh-purple-deep:    #6B5B96;
  --vfh-purple-soft:    #EFEAF6;
  --vfh-purple-on-dark: #C2B4E5;   /* lighter purple that reads as purple on dark backgrounds (em accents) */
  --vfh-gold:        #E0A82E;
  --vfh-gold-soft:   #F6E8C6;
  --vfh-gold-on-dark:#F0C46E;
  --vfh-cyan:        #1FA3C2;
  --vfh-cyan-soft:   #CCEAF0;
  --vfh-cyan-on-dark:#6DD0E5;
  --vfh-teal:        #3E9B8A;
  --vfh-teal-soft:   #D0E7E1;
  --vfh-teal-on-dark:#7ED4C3;
  --vfh-navy:        #0E2340;
  --vfh-charcoal:    #3D4644;   /* brand dark — primary button colour */

  /* Neutrals */
  --vfh-ink:    #1A1A1A;
  --vfh-body:   #3B3B3B;
  --vfh-muted:  #7A7A7A;
  --vfh-rule:   #E4DFD4;
  --vfh-cream:  #F3ECDE;
  --vfh-paper:  #F8F5EE;
  --vfh-white:  #FFFFFF;

  /* Section background palette — exposed via .bg-* utilities below.
     Used by ACF page-builder modules that offer a background-colour choice. */
  --vfh-bg-white:             #FFFFFF;
  --vfh-bg-light:             #F8F5EE;   /* the paper default */
  --vfh-bg-pale-yellow:       #FBF1D9;
  --vfh-bg-pale-yellow-green: #F2F4DC;
  --vfh-bg-pale-green:        #F1F6F3;
  --vfh-bg-pale-blue:         #ECF4F7;
  --vfh-bg-pale-teal-tint:    #E9F4F2;   /* Coaching page tint (brand spec) */
  --vfh-bg-pale-purple-tint:  #EDEAF1;   /* Facilitation page tint (brand spec) */
  --vfh-bg-blue:              #D6E8F0;
  /* CTA-band gradient. Class name is historically 'bg-navy-gradient' but the
     colours are now charcoal shades to match the brand-spec dark. */
  --vfh-bg-navy-gradient:     linear-gradient(135deg, #3D4644 0%, #4B5551 65%, #5A6560 100%);

  /* Type */
  --ff: 'Open Sans', system-ui, -apple-system, sans-serif;

  --fs-eyebrow: 11px;
  --fs-body:    17px;
  --fs-lead:    20px;
  --fs-h3:      22px;
  --fs-h2:      clamp(34px, 4.6vw, 48px);
  --fs-h1:      clamp(40px, 6vw, 72px);

  /* Spacing (8pt) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 80px; --s-8: 110px; --s-9: 140px;

  /* Uniform grid gaps — used by every multi-item grid on the site so
     card-to-card / row-to-row spacing reads consistently everywhere. */
  --gap:        30px;   /* default card-grid gap (services, card sections, blog, approach strips) */
  --gap-tight:  14px;   /* dense vertical stacks (ladder steps) */
  --gap-loose:  60px;   /* between large modules (alternating image+text rows) */

  /* Uniform inner padding — used by every card / framed container so the
     interior breathing room reads consistently. Mobile values are auto-
     applied below via the global mobile padding override. */
  --pad-card:        28px;   /* default card padding (most cards on every page) */
  --pad-card-tight:  20px;   /* dense / small cards (ladder steps) */
  --pad-card-loose:  36px;   /* generous featured cards (approach cards, options) */
  --pad-frame:       44px;   /* big white frame wrapping a card group (homepage services) */
  --pad-frame-top:   50px;   /* extra breathing space at top of a frame (heading sits here) */

  /* Widths */
  --w-container:        1320px;   /* main page-builder container */
  --w-container-narrow: 1080px;   /* opt-in narrower content (e.g. ladder) */
  --w-prose:            620px;
  --w-center:           720px;
  --gutter:             40px;
  --gutter-mobile:      20px;

  /* Radii */
  --r-sm: 10px; --r: 16px; --r-lg: 20px;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: var(--w-container-narrow); }
@media (max-width: 768px) {
  .wrap { padding: 0 var(--gutter-mobile); }

  /* Universal mobile padding overrides — every card / frame using a
     padding token shrinks at the same breakpoint. */
  :root {
    --pad-card:       20px;
    --pad-card-tight: 16px;
    --pad-card-loose: 24px;
    --pad-frame:      22px;
    --pad-frame-top:  26px;
  }
}

.section        { padding: var(--s-8) 0; }
.section--tight { padding: var(--s-7) 0; }
.section--alt   {
  background: var(--vfh-white);
  border-top: 1px solid var(--vfh-rule);
  border-bottom: 1px solid var(--vfh-rule);
}

/* === Padding-scale modifiers ==============================================
   Page-builder modules expose top + bottom padding as small / medium / large.
   Defaults to medium (matches the existing rhythm).
   ========================================================================== */
.pt-sm { padding-top: var(--s-5) !important; }   /* 48 */
.pt-md { padding-top: var(--s-7) !important; }   /* 80 */
.pt-lg { padding-top: var(--s-9) !important; }   /* 140 */
.pb-sm { padding-bottom: var(--s-5) !important; }
.pb-md { padding-bottom: var(--s-7) !important; }
.pb-lg { padding-bottom: var(--s-9) !important; }

/* Negative-top overlap — pulls a section UP into the previous one.
   Implemented as margin-top so padding stays clean. */
.overlap-sm { margin-top: -40px;  position: relative; z-index: 2; }
.overlap-md { margin-top: -80px;  position: relative; z-index: 2; }
.overlap-lg { margin-top: -120px; position: relative; z-index: 2; }

/* === Background palette utilities ========================================= */
/* Background utilities — authoritative. Use !important so they always win
   over any block-specific rule (e.g. .vfh-card sets its own #fff, .section--alt
   sets its own white). Editors expect "pick a colour → get that colour" on
   any element that accepts a bg_color or card_bg_color choice. */
.bg-white            { background: var(--vfh-bg-white) !important; }
.bg-light            { background: var(--vfh-bg-light) !important; }
.bg-pale-yellow      { background: var(--vfh-bg-pale-yellow) !important; }
.bg-pale-yellow-green{ background: var(--vfh-bg-pale-yellow-green) !important; }
.bg-pale-green       { background: var(--vfh-bg-pale-green) !important; }
.bg-pale-blue        { background: var(--vfh-bg-pale-blue) !important; }
.bg-pale-teal-tint   { background: var(--vfh-bg-pale-teal-tint) !important; }
.bg-pale-purple-tint { background: var(--vfh-bg-pale-purple-tint) !important; }
.bg-blue             { background: var(--vfh-bg-blue) !important; }
.bg-navy-gradient    { background: var(--vfh-bg-navy-gradient) !important; color: #fff; }

/* Dark-background text overrides — high enough specificity (element +
   class = 0,1,2) to beat per-block colour declarations on every text
   element our blocks render. Add new bg-* dark surfaces here when needed. */
section.bg-navy-gradient,
section.bg-navy-gradient h1,
section.bg-navy-gradient h2,
section.bg-navy-gradient h3,
section.bg-navy-gradient h4 { color: #fff; }
/* Bare <em> on a dark section: pick up the page-accent-on-dark colour
   (light-enough version of the page accent to read against the dark bg).
   Classed <em class="purple|gold|teal|cyan|green|blue|yellow"> keeps its
   explicit colour — the higher-specificity rules below win. */
section.bg-navy-gradient h1 em:not([class]),
section.bg-navy-gradient h2 em:not([class]),
section.bg-navy-gradient h3 em:not([class]),
section.bg-navy-gradient h4 em:not([class]) { color: var(--vfh-page-accent-on-dark); }
section.bg-navy-gradient p,
section.bg-navy-gradient .section-body p { color: rgba(255,255,255,.85); }
section.bg-navy-gradient .section-body p.lead { color: #fff; }
section.bg-navy-gradient .eyebrow { color: rgba(255,255,255,.7); }
section.bg-navy-gradient a:not(.btn) { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
section.bg-navy-gradient a:not(.btn):hover { color: var(--vfh-purple-soft); }

/* === Highlight word spans + <em> italics inside headings ==================
   Two-tier system:

   1. Bare <em> inside a heading auto-picks up the current page's accent
      colour via the CSS custom property `--vfh-page-accent`. Defaults to
      brand purple; per-page overrides live in the block-scoped section
      below (body.tpl-360 -> gold, body.tpl-sender -> cyan, etc.).

      <h2>Arrange <em>a call.</em></h2>          ← page-accent colour
      <h2>Three ways we might <em>meet.</em></h2> ← page-accent colour

   2. Adding an explicit class overrides the page accent. Any of
      purple / gold / yellow / teal / green / cyan / blue works.

      <h2>Arrange <em class="purple">a call.</em></h2> ← always purple
      <h2>Three ways we might <em class="gold">meet.</em></h2> ← always gold
   ========================================================================== */
:root {
  --vfh-page-accent:         var(--vfh-purple);
  --vfh-page-accent-on-dark: var(--vfh-purple-on-dark);
}

body.tpl-360 {
  --vfh-page-accent:         var(--vfh-gold);
  --vfh-page-accent-on-dark: var(--vfh-gold-on-dark);
}
body.tpl-sender {
  --vfh-page-accent:         var(--vfh-cyan);
  --vfh-page-accent-on-dark: var(--vfh-cyan-on-dark);
}
body.page-id-1271 {
  --vfh-page-accent:         #60B9AF;              /* Coaching brand teal per spec */
  --vfh-page-accent-on-dark: #85D0C6;
}
body.page-id-1278 {
  --vfh-page-accent:         #7E6B92;              /* Facilitation brand purple per spec */
  --vfh-page-accent-on-dark: #B5A6C6;
}

/* Bare <em> = italic + page-accent colour. Italic is already applied
   by the browser default; we just tint. */
h1 em, h2 em, h3 em, h4 em,
.section-heading h2 em,
.entry-content em                                      { color: var(--vfh-page-accent); font-style: italic; font-weight: 400; }

/* Explicit-class overrides. Ordering (later in the file) + class-specificity
   both ensure these win over the bare-em rule above. */
span.yellow, span.gold,
h1 em.yellow, h1 em.gold,
h2 em.yellow, h2 em.gold,
h3 em.yellow, h3 em.gold,
h4 em.yellow, h4 em.gold,
.section-heading h2 em.yellow, .section-heading h2 em.gold,
.entry-content em.yellow, .entry-content em.gold       { color: var(--vfh-gold);   }

span.green, span.teal,
h1 em.green, h1 em.teal,
h2 em.green, h2 em.teal,
h3 em.green, h3 em.teal,
h4 em.green, h4 em.teal,
.section-heading h2 em.green, .section-heading h2 em.teal,
.entry-content em.green, .entry-content em.teal        { color: var(--vfh-teal);   }

span.blue, span.cyan,
h1 em.blue, h1 em.cyan,
h2 em.blue, h2 em.cyan,
h3 em.blue, h3 em.cyan,
h4 em.blue, h4 em.cyan,
.section-heading h2 em.blue, .section-heading h2 em.cyan,
.entry-content em.blue, .entry-content em.cyan         { color: var(--vfh-cyan);   }

span.purple,
h1 em.purple, h2 em.purple, h3 em.purple, h4 em.purple,
.section-heading h2 em.purple,
.entry-content em.purple                               { color: var(--vfh-purple); }

/* === Card grid — count-driven layout for Services / Card section ==========
   Used by ACF page-builder modules that render a card repeater. The number
   of cards drives the grid template. Same rules in both Services + Card
   section blocks so editors get consistent behaviour.
   ========================================================================== */
.vfh-cards { display: grid; gap: var(--gap); align-items: stretch; }
.vfh-cards[data-count="1"] { grid-template-columns: minmax(0, 55%); justify-content: center; }
.vfh-cards[data-count="2"] { grid-template-columns: 1fr 1fr; }
.vfh-cards[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.vfh-cards[data-count="4"] { grid-template-columns: 1fr 1fr; }   /* 2 rows of 2 */
.vfh-cards[data-count="5"] { grid-template-columns: repeat(6, 1fr); }
.vfh-cards[data-count="5"] > :nth-child(-n+3) { grid-column: span 2; }   /* row 1: thirds */
.vfh-cards[data-count="5"] > :nth-child(n+4)  { grid-column: span 3; }   /* row 2: halves */
.vfh-cards[data-count="6"] { grid-template-columns: repeat(3, 1fr); }    /* 2 rows of 3 */

@media (max-width: 880px) {
  .vfh-cards,
  .vfh-cards[data-count="1"],
  .vfh-cards[data-count="2"],
  .vfh-cards[data-count="3"],
  .vfh-cards[data-count="4"],
  .vfh-cards[data-count="5"],
  .vfh-cards[data-count="6"] {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .vfh-cards[data-count="5"] > :nth-child(n) { grid-column: auto; }
}

/* === Staggered layout ====================================================
   2 columns at 50% width; even cards offset down by --stagger-offset to
   create a zigzag flow. Negative margin-bottom on the offset cards
   cancels out their visual row-height contribution so subsequent rows
   sit tight against the previous one — no oversized vertical gaps.
   ========================================================================== */
.vfh-cards[data-style="staggered"] {
  --stagger-offset: 80px;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--gap) calc( var(--gap) * 1.6 );   /* row gap matches the rest of the site */
  align-items: start;
  justify-content: stretch;
}
.vfh-cards[data-style="staggered"] > :nth-child(even) {
  margin-top: var(--stagger-offset);
  margin-bottom: calc( var(--stagger-offset) * -1 );
}
.vfh-cards[data-style="staggered"] > :nth-child(n) {
  grid-column: auto !important;   /* undo count-5 spans if any */
}

@media (max-width: 880px) {
  .vfh-cards[data-style="staggered"] {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  .vfh-cards[data-style="staggered"] > :nth-child(even) {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}
.section-split > :first-child { padding-right: 48px; }
.section-split > :last-child  { padding-left: 0; }

.section-center {
  max-width: var(--w-center);
  margin: 0 auto;
  text-align: center;
}

/* ==========================================================================
   Section heading + body
   ========================================================================== */

.section-heading .eyebrow {
  display: inline-block;
  font-family: var(--ff);
  font-size: var(--fs-eyebrow);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--vfh-muted);
  margin-bottom: 18px;
}

.section-heading h2 {
  font-family: var(--ff);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--vfh-ink);
  margin: 0;
}
.section-heading h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--vfh-purple);
}

.section-body {
  max-width: 100%;
}
.section-center .section-body { max-width: var(--w-prose); margin-left: auto; margin-right: auto; }
.section-body > * + * { margin-top: 18px; }
.section-body p {
  font-family: var(--ff);
  font-size: var(--fs-body);
  color: var(--vfh-body);
  line-height: 1.65;
}
.section-body p.lead {
  font-size: var(--fs-lead);
  color: var(--vfh-ink);
  font-weight: 400;
  line-height: 1.5;
}
.section-body .btn { margin-top: 32px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 880px) {
  .section,
  .section--tight { padding: var(--s-7) 0; }
  .section-split  { grid-template-columns: 1fr; gap: 28px; }
  .section-split > :first-child { padding-right: 0; }
}

/* ==========================================================================
   Shared module — alternating image + text rows
   Used on Workshops and What We Do. .row-alt:nth-child(even) reverses the
   image to the right; the colour accent matches the service the row covers.
   ========================================================================== */

.alt-rows {
  display: flex;
  flex-direction: column;
  gap: var(--gap-loose);
}
.row-alt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-loose);
  align-items: center;
}
.row-alt:nth-child(even) .row-alt__media { order: 2; }

.row-alt__media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--vfh-cream);
  border: 1px solid var(--vfh-rule);
  border-radius: 14px;
}
.row-alt__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.row-alt__body .kicker {
  font-size: var(--fs-eyebrow);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vfh-muted);
  margin-bottom: 14px;
}
.row-alt__body h3 {
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--vfh-ink);
  margin-bottom: 18px;
}
.row-alt__body h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--vfh-purple);
}
.row-alt__body p {
  font-size: var(--fs-body);
  color: var(--vfh-body);
  margin-bottom: 16px;
  max-width: 560px;
}
.row-alt__body .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--vfh-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: .2s;
}
.row-alt__body .more:hover { color: var(--vfh-purple); }

/* Accent colour by service */
.row-alt.gold   .row-alt__body .kicker { color: var(--vfh-gold); }
.row-alt.cyan   .row-alt__body .kicker { color: var(--vfh-cyan); }
.row-alt.teal   .row-alt__body .kicker { color: var(--vfh-teal); }
.row-alt.purple .row-alt__body .kicker { color: var(--vfh-purple); }

@media (max-width: 880px) {
  .row-alt { grid-template-columns: 1fr; gap: 24px; }
  .row-alt:nth-child(even) .row-alt__media { order: 0; }
  .row-alt__media { aspect-ratio: 16 / 10; }
}