/* ==========================================================================
   Site Nav — centered logo, GIVE pill, pill-shaped menu toggle,
   logo shrinks into a circular badge on scroll
   ========================================================================== */

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

:root {
    --smrs-dark-green: #0C4143;
    --smrs-cream: #F3EEE3;
    --smrs-nav-font: 'Fraunces', serif;
}

/* ==========================================================================
   SITE-WIDE typography rule: the site uses exactly 2 fonts - Fraunces
   for every heading (h1-h6, all pages) and Manrope (the parent
   theme's default) for everything else, which every non-heading
   element already gets for free via inheritance. Lives here because
   nav.css is already the site's shared design-token file, loaded on
   every page. font-weight:500 is a default for any heading that
   doesn't set its own weight - headings that already declare a
   weight (e.g. .smrs-family-heading at 700) keep that value, since a
   class selector's own font-weight/font-family beats this tag-level
   rule regardless of source order.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
}

/* THE ACTUAL ROOT CAUSE of the mobile cut-off, found by direct
   comparison against the one section that was never broken
   (Get Involved). Every full-width section on the site sets
   padding, but almost none of them set box-sizing:border-box.
   Without it, a browser adds padding ON TOP of the declared width
   instead of counting it inside - so width:100% + padding:100px 32px
   physically renders 64px WIDER than its container, every time, on
   every device. That overflow is what was getting clipped on the
   right. Get Involved, Global Footprint, and one About page section
   already had this line and were never affected.
   This is the standard, universally-recommended CSS reset - applying
   it once, globally, fixes every section at once instead of needing
   it added file by file. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Global safety net - nav.css loads on every page, so this applies
   site-wide, not just where it was previously set (hero.css, Home
   page only). Every full-bleed section on the site now uses
   width:100% instead of width:100vw (see the site-wide rewrite
   below), which removes the mobile-scrollbar mismatch that used to
   cause stray gaps. This overflow-x:hidden stays on purely as a
   backstop for anything unrelated that might still overflow by a
   pixel or two - it should have nothing real left to hide now. */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Site-wide parent-unconstrain, safely scoped.
   Every full-bleed section now uses width:100% instead of a vw
   trick - that only reaches the true edge of the screen if its
   PARENT containers aren't themselves capped. WordPress's block
   editor caps the width of the page's main content wrapper by
   default. This removes that cap on the wrapper elements
   themselves (main, entry-content, etc.) site-wide.

   Deliberately NOT touching .wp-block-group or
   .is-layout-constrained's children here - an earlier, broader
   version of this rule did, and it narrowed/shifted an unrelated
   section that was fine before. This version only reaches the
   outer layout wrappers, not every block inside them, which is
   enough for width:100% sections to reach the real edges without
   affecting normal content blocks elsewhere on the page. */
.wp-site-blocks,
.entry-content,
.wp-block-post-content,
main {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* THE ACTUAL LIKELY FIX: removing max-width alone isn't enough.
       The negative-margin/100vw "escape to full width" trick only
       works if EVERY wrapper between the element and <body> allows
       overflow - if even one of these has overflow:hidden (common
       in block themes for layout containment), it silently clips
       the escape regardless of how correct the child's own CSS is.
       This never got added before now - html/body staying
       overflow-x:hidden is fine and doesn't conflict, since they
       already span the true viewport and nothing needs to escape
       past them specifically; this is about the wrappers in between. */
    overflow: visible !important;
}

/* THE ACTUAL ROOT CAUSE, confirmed directly from your page's real
   HTML (view-source), not guessed: WordPress wraps content in a
   .wp-block-group that sits BETWEEN <main> and .entry-content -
   generic enough that the fix above never touched it. That wrapper
   carries WordPress core's own "is-layout-constrained" and
   "has-global-padding" classes, which cap its width via a CSS
   custom property regardless of anything set on <main> or
   .entry-content around it - so even with those two correctly
   unconstrained, everything inside was still boxed in by this one
   layer in between.

   Scoped narrowly on purpose: only elements that are BOTH
   "alignfull" AND constrained get freed here. "alignfull" is
   WordPress's own signal that a block should ignore the width
   constraint in the first place - "is-layout-constrained" was just
   overriding that intent. This does NOT touch plain .wp-block-group
   elsewhere (narrow content blocks are supposed to stay narrow) -
   that broader, unscoped version is what caused the earlier
   regression; this one only affects blocks already marked
   full-width that a layout class was still capping. */
.alignfull.is-layout-constrained,
.alignfull.has-global-padding {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
}

/* THE PIECE THAT WAS ACTUALLY MISSING: is-layout-constrained doesn't
   necessarily cap its OWN width - modern WordPress/Gutenberg applies
   the width limit to its DIRECT CHILDREN instead, via a selector
   along the lines of ".is-layout-constrained > *" - specifically
   excluding children marked alignleft/alignright/alignfull. Every
   fix so far targeted the CONTAINER; none of them touched this
   child-selector rule, which is what was directly capping
   .smrs-contact itself regardless of what the container around it
   was doing.

   Scoped to our own known page-wrapper classes specifically, NOT a
   blanket ".is-layout-constrained > *" - that broader version is
   exactly what caused the earlier regression (it also un-capped
   normal WordPress content blocks that were relying on this same
   mechanism to stay a readable width, which isn't something to
   touch). This only frees the elements we actually built. */
.is-layout-constrained > .smrs-about,
.is-layout-constrained > .smrs-contact,
.is-layout-constrained > .smrs-prog,
.is-layout-constrained > .smrs-sons,
.is-layout-constrained > .smrs-men,
.is-layout-constrained > .smrs-church,
.is-layout-constrained > .smrs-facil,
.is-layout-constrained > .smrs-hero,
.is-layout-constrained > .smrs-family-section,
.is-layout-constrained > .smrs-stats-section,
.is-layout-constrained > .smrs-gi-section,
.is-layout-constrained > .smrs-newsletter-outer {
    max-width: none !important;
}


.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: padding 0.4s ease;
}

.nav-inner {
    width: 100%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    min-height: 56px;
}

/* ---------- Logo — pinned to true center, independent of the
   actions on the right or the width change on scroll ---------- */

.nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
}

.nav-logo-icon {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1),
                height 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav-logo-mark,
.nav-logo-circle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.4s ease;
}

.nav-logo-mark {
    opacity: 1;
    /* the isolated figure — used only in the expanded state */
}

.nav-logo-circle {
    opacity: 0;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    /* the full circular badge logo — used only in the scrolled state */
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-family: var(--smrs-nav-font);
    font-size: 19px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.35s ease, max-width 0.45s ease, margin 0.45s ease;
    max-width: 220px;
}

.nav-logo-text span {
    font-weight: 600;
}

/* ---------- Scrolled state ---------- */

.site-nav.is-scrolled {
    padding: 14px 32px;
}

.site-nav.is-scrolled .nav-logo-icon {
    width: 56px;
    height: 56px;
}

.site-nav.is-scrolled .nav-logo-mark {
    opacity: 0;
}

.site-nav.is-scrolled .nav-logo-circle {
    opacity: 1;
}

.site-nav.is-scrolled .nav-logo-text {
    opacity: 0;
    max-width: 0;
    margin-left: -12px;
}

/* ---------- Right-side actions ---------- */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-give-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1.5px solid #fff;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 11px 20px;
    border-radius: 999px;
    transition: transform 0.25s ease, background 0.3s ease,
                color 0.3s ease, border-color 0.3s ease;
}

.nav-give-btn:hover {
    transform: translateY(-2px);
}

.nav-give-btn .heart-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.nav-give-btn .heart-icon path {
    fill: #fff;
    transition: fill 0.3s ease;
}

/* Scrolled: pill turns white, text and heart turn brand green */
.site-nav.is-scrolled .nav-give-btn {
    background: #fff;
    border-color: #fff;
    color: var(--smrs-dark-green);
}

.site-nav.is-scrolled .nav-give-btn .heart-icon path {
    fill: var(--smrs-dark-green);
}

.nav-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, transform 0.25s ease;
}

.nav-menu-btn:hover {
    transform: translateY(-2px);
}

.menu-btn-icon {
    width: 18px;
    height: 13px;
    position: relative;
}

.menu-btn-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.25s ease,
                top 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.menu-btn-icon span:nth-child(1) { top: 0; }
.menu-btn-icon span:nth-child(2) { top: 50%; margin-top: -1px; }
.menu-btn-icon span:nth-child(3) { top: 100%; margin-top: -2px; }

/* Hamburger -> X, once menu is open */
.nav-menu-btn.is-open .menu-btn-icon span:nth-child(1) {
    top: 50%;
    margin-top: -1px;
    transform: rotate(45deg);
}
.nav-menu-btn.is-open .menu-btn-icon span:nth-child(2) {
    opacity: 0;
}
.nav-menu-btn.is-open .menu-btn-icon span:nth-child(3) {
    top: 50%;
    margin-top: -1px;
    transform: rotate(-45deg);
}

/* Scrolled: same white-pill/green-text treatment as the Give button,
   for consistency and legibility once the transparent-over-hero look
   no longer applies */
.site-nav.is-scrolled .nav-menu-btn {
    background: #fff;
    border-color: #fff;
    color: var(--smrs-dark-green);
}

/* While the menu overlay is open, its background is white/cream —
   force BOTH buttons into the same white-pill/green-text state
   regardless of actual scroll position, since a white-on-transparent
   button is unreadable against that light background otherwise */
body.nav-menu-active .nav-give-btn,
body.nav-menu-active .nav-menu-btn {
    background: #fff;
    border-color: #fff;
    color: var(--smrs-dark-green);
}

body.nav-menu-active .nav-give-btn .heart-icon path {
    fill: var(--smrs-dark-green);
}

/* ---------- Full-screen nav overlay ---------- */

.smrs-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 8500;

    /* Slightly transparent white — lets whatever's behind it show
       through faintly during the transition, rather than an instant
       solid cutover, matching the reference's glassy veil effect.
       (Deliberately no backdrop-filter here — it's a known source of
       click/rendering quirks on some browser/GPU combinations, and
       the transparency alone gets most of the same effect safely.) */
    background: rgba(255, 255, 255, 0.94);

    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: min(10%, 140px);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.5s ease, visibility 0.5s, transform 0.5s ease;
}

/* Shown when the menu button is toggled open — see nav.js, which
   adds this class to <body> */
body.nav-menu-active .smrs-nav-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.smrs-nav-overlay-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.smrs-nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 6px 0;
    transition: opacity 0.2s ease;
}

.smrs-nav-link:hover {
    opacity: 0.65;
}

.smrs-nav-link-text {
    color: var(--smrs-dark-green, #0C4143);
    font-family: var(--smrs-nav-font);
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 600;
    line-height: 1;
}

/* The small circular button that sits beside each tab — this is the
   actual "button," separate from the text itself, matching the
   reference video */
.smrs-nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--smrs-cream, #F3EEE3);
    color: var(--smrs-dark-green, #0C4143);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.smrs-nav-link:hover .smrs-nav-arrow {
    background: var(--smrs-dark-green, #0C4143);
    color: #fff;
    transform: translateX(4px);
}

.smrs-nav-arrow svg {
    width: 18px;
    height: 18px;
}

.smrs-nav-caret svg {
    transition: transform 0.35s ease;
}

.smrs-nav-programs-toggle[aria-expanded="true"] .smrs-nav-caret svg {
    transform: rotate(90deg);
}

.smrs-nav-expandable {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Sub-links reveal inline, right under "Programs", instead of a
   separate overlay/page — collapsed by default via max-height */
.smrs-nav-programs-sub {
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    transition: max-height 0.45s ease;
}

.smrs-nav-programs-toggle[aria-expanded="true"] + .smrs-nav-programs-sub {
    max-height: 260px;
    margin-top: 8px;
}

.smrs-nav-sublink {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--smrs-cream, #F3EEE3);
    color: var(--smrs-dark-green, #0C4143);
    text-decoration: none;
    font-family: var(--smrs-nav-font);
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 999px;
    min-width: 180px;
    transition: background 0.2s ease, transform 0.2s ease;
}

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

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

@media (max-width: 640px) {
    .site-nav {
        padding: 18px 18px;
    }
    .nav-logo-text {
        display: none;
    }
    .nav-give-btn span.give-label {
        display: none;
    }
    .nav-give-btn {
        padding: 12px;
    }
    .nav-menu-btn span.menu-label {
        display: none;
    }
    .nav-menu-btn {
        padding: 12px;
    }
    .smrs-nav-overlay {
        padding-right: 24px;
        justify-content: center;
    }
    .smrs-nav-overlay-links,
    .smrs-nav-expandable,
    .smrs-nav-programs-sub {
        align-items: center;
    }
    .smrs-nav-link {
        justify-content: center;
    }
    .smrs-nav-sublink {
        min-width: 0;
        width: 82vw;
    }
}

/* ==========================================================================
   Shared hand-coded form helpers - used by every native (non-plugin)
   form on the site: Sons, Men, Church, Facilitators. One definition
   here instead of repeating it in every page's CSS file.
   ========================================================================== */

/* Honeypot field - real visitors never see this (moved off-screen,
   not just hidden with display:none, since some bots specifically
   skip display:none fields - off-screen positioning catches those
   too), but bots that auto-fill every input on a page will fill it
   in, which is how the PHP handler knows to reject it as spam. */
.smrs-form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Success/error banner shown after a form redirect - shared look
   across every hand-coded form on the site. Sits above the <form>
   itself (not inside its grid), so this is a plain block, not a
   grid item. */
.smrs-form-banner {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}

.smrs-form-banner--success {
    background: rgba(61, 220, 132, 0.15);
    color: #3DDC84;
    border: 1px solid rgba(61, 220, 132, 0.35);
}

.smrs-form-banner--error {
    background: rgba(255, 122, 51, 0.15);
    color: #FF7A33;
    border: 1px solid rgba(255, 122, 51, 0.35);
}

/* "Register your interest" form (Moms / Sons / Facilitators pages) -
   see smrs_interest_form() in functions.php. Lives here rather than in
   a page stylesheet because the same markup is reused on all three;
   all three sit on a dark-green section, same dark pill-input look as
   the other forms on those pages. */
.smrs-interest-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

.smrs-sons-form-closed + .smrs-interest-form,
.smrs-facil-form-closed + .smrs-interest-form {
    margin-top: 28px;
}

.smrs-interest-form .full-width {
    grid-column: 1 / -1;
}

.smrs-interest-form label {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.smrs-interest-form input,
.smrs-interest-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    color: #fff;
    font-size: 14.5px;
    font-family: inherit;
}

.smrs-interest-form input:focus,
.smrs-interest-form textarea:focus {
    outline: none;
    border-color: #fff;
}

.smrs-interest-submit {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    background: var(--smrs-cream, #F3EEE3);
    color: var(--smrs-dark-green, #0C4143);
    border: none;
    font-weight: 600;
    font-size: 15px;
    padding: 15px 30px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

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

@media (max-width: 640px) {
    .smrs-interest-form {
        grid-template-columns: 1fr;
    }
}


/* Anchor offset for every form section the Register button (and any
   other link) can jump straight to - without this, landing on the
   anchor would tuck the form's top edge behind the fixed site nav. */
#moms_register-form,
#sons_camp-form,
#men_rsvp-form,
#church_partner-form,
#facilitator_apply-form {
    scroll-margin-top: 120px;
}