/* ==========================================================================
   Hero section — full-bleed, headline, expanding Register pill,
   fixed WhatsApp contact button
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&display=swap');

/* ---------- Scrollbar-gap fix ----------
   100vw in CSS includes the width of the vertical scrollbar, but the
   page's actual visible area doesn't — it's narrower by however wide
   that scrollbar is (~15-17px). So width:100vw on the hero makes it
   slightly WIDER than the page can show without a horizontal scroll,
   and that small overflow shows up as a gap on one side (which side
   depends on the exact margin math used, which is why it kept
   flipping between left and right across different fix attempts).
   This was in your original CSS and is the standard, reliable fix
   for this exact well-known issue — contain the overflow instead of
   trying to calculate the scrollbar's exact width, which varies by
   OS/browser/zoom anyway. */
body {
    overflow-x: hidden;
}

/* ---------- Home page content wrapper fix ----------
   Every previous attempt at the hero's full-width gap tried to make
   the HERO escape its parent container — first with CSS math, then
   JS math, back and forth, none of it fully held. That's because the
   real constraint lives on the PARENT, and only on the Home page
   specifically (it uses WordPress's actual Front Page template,
   which wraps content differently than the plain Page template every
   other hero page uses — that's why this exact problem is unique to
   this page).

   Different approach this time: instead of fighting the parent from
   the child, neutralize the constraint at the parent directly.
   WordPress automatically adds the class "home" to <body> on the
   site's front page — no PHP/JS needed for that, it's built in. This
   targets the actual theme wrapper elements that are constraining
   width, ONLY on the home page, and removes their max-width/padding
   outright. !important is deliberate and safe here — this isn't
   fighting our own JS (that was the problem before), it's overriding
   the theme/block-editor's own default container styles, which is
   exactly what !important is for. */
body.home .wp-site-blocks,
body.home .entry-content,
body.home .wp-block-post-content,
body.home .is-layout-constrained,
body.home .wp-block-group,
body.home main {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* The Home page is built from four separate [shortcode] blocks
   stacked directly in the editor (hero, family, stats, get-involved)
   - none wrapped in their own Group block. WordPress auto-generates
   a rule targeting the DIRECT CHILDREN of the constrained content
   area (something like ".is-layout-constrained > :where(...)"),
   capping each child's width and pushing it left with
   margin-right:auto - this is the same root cause already fixed
   for .smrs-hero specifically, but that fix never covered the other
   three shortcode blocks, since it only targeted .wp-block-group and
   a few named containers, not .wp-block-shortcode itself. This is
   what was cutting off Family/Stats/Get Involved content on mobile
   (each section still doing its own internal 100vw breakout, but
   starting from a shifted, narrowed parent instead of a full-width
   one). Neutralizing it on every direct child fixes all four at
   once, not just the hero. */
body.home .is-layout-constrained > *,
body.home .wp-block-shortcode {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.smrs-hero {
    /* CONFIRMED root cause, found directly in the page's real HTML:
       your partner built the Home page content inside a Group block
       in the editor, and WordPress auto-generates a rule for that
       exact block —
         .wp-container-core-group-is-layout-f308c68d > :where(...) {
             max-width: 1200px;
             margin-left: 0 !important;
             margin-right: auto !important;
         }
       — which applies to any plain child that isn't marked
       "alignfull", including our hero. That's what was capping it at
       1200px wide, flush left, with the leftover space on the right
       on any screen wider than that. This isn't a guess anymore —
       it's the actual rule, copied verbatim from your page source.

       Fix: match its !important (our stylesheet loads AFTER
       WordPress's inline styles in the page, so with equal
       specificity, ours wins) and explicitly remove the 1200px cap. */
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;

    height: 100vh;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background: url('images/hero-photo.jpg') center center / cover no-repeat;
}

/* Overlay for text contrast — a flat tint plus an extra vignette
   concentrated behind the centered content, since this particular
   photo has bright whites right where the headline sits */
.smrs-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 55%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 70%),
        rgba(0, 0, 0, 0.32);
    z-index: 1;
}

.smrs-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}

.smrs-hero-headline {
    color: #fff;
    font-family: 'Fraunces', serif;
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin: 0 0 40px;
}

/* ---------- Register pill + expanding sub-menu ---------- */

.smrs-register-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Positioning while pinned (fixed, top/left in px) is handled
   entirely via inline styles set by hero.js — that's what makes the
   glide animation possible. This class just bumps stacking order
   while pinned.

   NOTE: this is intentionally 8200, not 7500 like the Facilitators
   page's Apply button — this page ALSO has the fixed WhatsApp button
   at z-index 8000, which Facilitators doesn't have. At 7500 the
   Register button would sit BELOW WhatsApp once pinned, and since
   both end up fixed near the bottom of the screen, WhatsApp would
   silently block clicks/hovers wherever they overlap. Keep this
   above 8000 specifically because of that. */
.smrs-register-wrap.is-pinned {
    z-index: 8200;
}

.smrs-register-btn {
    background: var(--smrs-cream, #F3EEE3);
    color: var(--smrs-dark-green, #0C4143);
    border: none;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 36px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease;
}

.smrs-register-btn:hover {
    transform: translateY(-2px);
    background: #fff;
}

/* Sub-links pill — sits above the Register button, hidden by default */
.smrs-register-sub {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--smrs-cream, #F3EEE3);
    border-radius: 999px;
    padding: 8px;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

/* Invisible strip filling the gap between the sub-pill and the button
   below it, so moving the mouse between them doesn't briefly leave
   the hoverable area and cause a flicker */
.smrs-register-sub::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 14px;
}

/* Reveals on hover — no click needed on desktop. The .is-open class
   (toggled via JS) is kept as a fallback for touch screens and
   keyboard users, where :hover doesn't apply or doesn't stick. */
.smrs-register-wrap:hover .smrs-register-sub,
.smrs-register-wrap.is-open .smrs-register-sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.smrs-register-sub a {
    display: inline-block;
    color: var(--smrs-dark-green, #0C4143);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}

.smrs-register-sub a:hover {
    background: var(--smrs-dark-green, #0C4143);
    color: #fff;
}

/* ---------- WhatsApp button (fixed, bottom right) ----------
   Icon-only by default — a round button. On hover, it expands to
   also show the "WhatsApp" label. */

.smrs-whatsapp-btn {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 8000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--smrs-dark-green, #0C4143);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: transform 0.25s ease, background 0.25s ease, width 0.35s ease, padding 0.35s ease;
}

.smrs-whatsapp-btn:hover {
    transform: translateY(-2px);
    background: #14595c;
    width: 168px;
    padding: 0 20px;
}

.smrs-whatsapp-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-left: 16px;
}

.smrs-whatsapp-btn:hover svg {
    margin-left: 0;
}

.smrs-whatsapp-label {
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-width 0.35s ease;
}

.smrs-whatsapp-btn:hover .smrs-whatsapp-label {
    opacity: 1;
    max-width: 100px;
}

/* ==========================================================================
   Scroll / paragraph section — simple static image + text.
   Previously a JS-driven pinned/scroll-scrubbed section (background
   pinned via position:fixed while scrolling, paragraph opacity tied
   to scroll progress). Per client request this is now just a normal,
   fixed-height section: the image sits in place, and the paragraph
   fades in once when it scrolls into view (same one-time reveal
   pattern used on the About page), instead of continuously animating
   with scroll position.
   ========================================================================== */

.smrs-scroll-section {
    /* Same confirmed cause and fix as .smrs-hero above — same
       container, same WordPress-generated constraint. */
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;

    min-height: 80vh;
}

.smrs-scroll-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.smrs-scroll-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.smrs-scroll-text {
    position: relative;
    z-index: 1;
    max-width: 760px;
    text-align: center;
    color: #fff;
    /* Body copy - inherits the site's Manrope base font. Was a
       serif at font-weight:600, which read as elegant in a serif
       but heavy for Manrope's sans letterforms at paragraph size -
       dropped to 400 (regular) to suit the sans-serif instead. */
    font-family: inherit;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 400;
    line-height: 1.55;
    padding: 0 24px;

    /* One-time fade-in-on-scroll-into-view, same easing/duration as
       the About page's .smrs-reveal pattern, kept local to this file
       instead of depending on about.css. */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.smrs-scroll-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
    .smrs-hero-headline {
        margin-bottom: 28px;
    }
    .smrs-register-sub {
        flex-wrap: wrap;
        max-width: 260px;
        justify-content: center;
    }
    .smrs-whatsapp-btn {
        right: 18px;
        bottom: 18px;
    }
}