/* ==========================================================================
   Programs — Moms page
   ========================================================================== */

.smrs-prog {
    background: #fff;
    color: #141414;
}

.smrs-prog-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--smrs-dark-green, #0C4143);
    margin-bottom: 16px;
}

/* Reusable scroll-reveal (self-contained in this file, same pattern
   as the About page's .smrs-reveal) */
.smrs-prog-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.smrs-prog-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.smrs-prog-reveal.delay-1 { transition-delay: 0.1s; }
.smrs-prog-reveal.delay-2 { transition-delay: 0.2s; }
.smrs-prog-reveal.delay-3 { transition-delay: 0.3s; }
.smrs-prog-reveal.delay-4 { transition-delay: 0.4s; }
.smrs-prog-reveal.delay-5 { transition-delay: 0.5s; }

/* ---------- 1. Hero ---------- */

.smrs-prog-hero {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 100vh;
    min-height: 560px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.smrs-prog-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
}

.smrs-prog-hero-content {
    position: relative;
    z-index: 1;
    padding: 0 24px;
}

.smrs-prog-hero-h1 {
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 14px;
}

.smrs-prog-hero-h2 {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 400;
    margin: 0;
}

/* ---------- 2. Intro paragraph ---------- */

.smrs-prog-intro {
    max-width: 780px;
    margin: 0 auto;
    padding: 90px 32px;
    text-align: center;
}

.smrs-prog-intro p {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 300;
    line-height: 1.6;
    color: #3A3A38;
    margin: 0;
}

/* ---------- 3. Programme Structure — 6 hover tiles ---------- */

.smrs-prog-structure {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 32px 100px;
}

.smrs-prog-heading {
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 700;
    margin: 0 0 40px;
    text-align: center;
}

.smrs-structure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.smrs-structure-tile {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    min-height: 280px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #F5F3EE;
}

.smrs-structure-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.5s ease, transform 0.6s ease;
}

.smrs-structure-tile:hover .smrs-structure-bg {
    opacity: 1;
    transform: scale(1);
}

.smrs-structure-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.smrs-structure-title {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    transition: color 0.4s ease;
}

.smrs-structure-tile:hover .smrs-structure-title {
    color: #fff;
}

.smrs-structure-text {
    position: relative;
    z-index: 1;
    font-size: 13.5px;
    line-height: 1.5;
    color: #55534E;
    margin: 0;
    transition: color 0.4s ease;
}

.smrs-structure-tile:hover .smrs-structure-text {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- 4. Programme Journey — vertical timeline, 9 topics ---------- */

.smrs-prog-journey {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 32px 110px;
}

.smrs-journey-list {
    position: relative;
    margin-top: 50px;
}

/* The vertical line running through all items */
.smrs-journey-list::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 19px;
    width: 2px;
    background: #E7E1D8;
}

.smrs-journey-item {
    position: relative;
    padding-left: 60px;
    padding-bottom: 44px;
}

.smrs-journey-item:last-child {
    padding-bottom: 0;
}

.smrs-journey-dot {
    position: absolute;
    left: 0;
    top: 2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--smrs-dark-green, #0C4143);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.smrs-journey-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
}

.smrs-journey-text {
    color: #55534E;
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

/* ---------- 5. Expected Outcomes — 4 across, tick + text ---------- */

.smrs-prog-outcomes {
    background: #F7F5F0;
    padding: 90px 32px;
}

/* Full-frame variant — edge-to-edge and full viewport height,
   content centered, per the "should be full frame" request */
.smrs-prog-outcomes--full-frame {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 70px 32px;
}

.smrs-outcomes-grid {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.smrs-outcome-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.smrs-outcome-tick {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--smrs-dark-green, #0C4143);
    display: flex;
    align-items: center;
    justify-content: center;
}

.smrs-outcome-tick svg {
    width: 15px;
    height: 15px;
}

.smrs-outcome-text {
    font-size: 14.5px;
    line-height: 1.5;
    color: #2C2C2A;
    margin: 0;
}

/* ---------- 6. Moms Prayers — static reminder ---------- */

.smrs-prog-prayers {
    max-width: 700px;
    margin: 0 auto;
    padding: 90px 32px 100px;
    text-align: center;
}

.smrs-prog-prayers-text {
    color: #55534E;
    font-size: 15.5px;
    line-height: 1.7;
    margin: 0;
}

/* ---------- (orphaned) Active with Moms — bg image + text; this
   section was removed from the page per client request, kept here
   unused rather than deleted, matching how other removed sections
   are handled elsewhere on the site ---------- */

.smrs-prog-active {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
    padding: 60px 10%;
}

.smrs-prog-active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.smrs-prog-active-content {
    position: relative;
    z-index: 1;
    max-width: 520px;
}

.smrs-prog-active-content .smrs-prog-eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.smrs-prog-active-content h2 {
    color: #fff;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 700;
    margin: 0 0 16px;
}

.smrs-prog-active-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15.5px;
    line-height: 1.65;
    margin: 0;
}

/* ---------- 7. Signature Activity ---------- */

.smrs-prog-signature {
    max-width: 780px;
    margin: 0 auto;
    padding: 90px 32px;
    text-align: center;
}

.smrs-prog-signature-heading {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    margin: 0 0 18px;
}

.smrs-prog-signature p {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 300;
    line-height: 1.6;
    color: #3A3A38;
    margin: 0;
}

/* ---------- 8. Sponsors — grayscale to color on hover ---------- */

.smrs-prog-sponsors {
    padding: 60px 32px 100px;
    text-align: center;
}

.smrs-sponsors-row {
    max-width: 800px;
    margin: 40px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    flex-wrap: wrap;
}

.smrs-sponsor-logo {
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
    max-height: 60px;
}

.smrs-sponsor-logo:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-2px);
}

/* Text-based placeholder mark, since these are real trademarked logos
   we can't reproduce — swap the whole <span> for an <img> once you
   have the real logo files */
.smrs-sponsor-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #141414;
    letter-spacing: 0.02em;
}

/* ---------- 9. Registration form ---------- */

.smrs-prog-form-section {
    background: var(--smrs-dark-green, #0C4143);
    padding: 90px 32px;
}

.smrs-prog-form-inner {
    max-width: 640px;
    margin: 0 auto;
}

.smrs-prog-form-inner .smrs-prog-eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.smrs-prog-form-heading {
    color: #fff;
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 36px;
    text-align: center;
}


/* ==========================================================================
   Ultimate Member registration form (form_id 403) - the hand-coded
   .smrs-prog-form markup above was replaced by the [ultimatemember
   form_id="403"] shortcode, which renders UM's own markup (.um-field,
   .um-form-field, .um-button, etc.) instead - so this styles THOSE
   classes to match the same dark-green/cream form language, rather than
   the old .smrs-prog-form rules (removed, now unreachable).

   Marital Status and Country use Select2 dropdowns: the real <select>
   is visually hidden and Select2 draws its own control in place. UM
   configures Select2's dropdownParent to stay inside .um-field (checked
   the live DOM to confirm - it's NOT appended to <body>, which is
   Select2's usual default), so the open dropdown list can be scoped
   the same way as everything else here.

   IMPORTANT: Ultimate Member enqueues its own CSS files (um-styles.min,
   um-old-default.min, common.min, etc.) LATER in the page than this
   theme's stylesheets, regardless of where moms.css sits in the head -
   confirmed by checking document.styleSheets order in the browser. That
   means UM's own rules win the cascade on equal specificity even though
   this file loads first, the same "loads later so it wins" problem
   .smrs-family-section documents fixing with !important - so the visual
   properties below (colour/background/border) use !important too. */

.smrs-prog-form-inner .um-403.um {
    max-width: 100% !important;
    width: 100%;
}

.smrs-prog-form-inner .um-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
}

/* UM names a row's column divs after the row index too (e.g. row 1's
   columns are um-col-121/um-col-122), not just "column 1 / column 2" -
   so a literal selector for those two classes only matches row 1.
   Matching on "starts with um-col-" instead means this still works
   once more rows get added (e.g. pairing each Son Name with its Son
   Age on the same row - see the note on .um-row below). */
.smrs-prog-form-inner .um-row [class*="um-col-"] {
    flex: 1 1 260px;
    min-width: 0;
}

.smrs-prog-form-inner .um-field {
    margin-bottom: 16px;
}

.smrs-prog-form-inner .um-field-label label {
    display: block;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

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

.smrs-prog-form-inner .um-403.um .um-form input.um-form-field::placeholder,
.smrs-prog-form-inner .um-403.um .um-form textarea.um-form-field::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.smrs-prog-form-inner .um-403.um .um-form input.um-form-field:focus,
.smrs-prog-form-inner .um-403.um .um-form textarea.um-form-field:focus {
    outline: none;
    border-color: #fff !important;
}

/* .um-field prefix (not just .select2-container--default) needed here -
   UM's own um-styles.min.css targets these via ".um-field .select2..."
   at higher specificity than a bare ".select2-container--default ..."
   override would have, so this matches that same depth plus one more
   ancestor class to safely outrank it regardless of load order. */
.smrs-prog-form-inner .um-403.um .um-field .select2-container--default .select2-selection--single {
    height: auto;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px;
    padding: 12px 14px;
}

.smrs-prog-form-inner .um-403.um .um-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.smrs-prog-form-inner .um-403.um .um-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.smrs-prog-form-inner .um-403.um .um-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 10px;
}

.smrs-prog-form-inner .um-403.um .um-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255, 255, 255, 0.7) transparent transparent transparent !important;
}

.smrs-prog-form-inner .um-403.um .um-field .select2-dropdown {
    border-color: var(--smrs-dark-green, #0C4143) !important;
}

.smrs-prog-form-inner .um-403.um .um-field .select2-results__option--highlighted[aria-selected] {
    background: var(--smrs-dark-green, #0C4143) !important;
    color: #fff !important;
}

.smrs-prog-form-inner .um-col-alt {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.smrs-prog-form-inner .um-half {
    flex: 1;
}

.smrs-prog-form-inner .um-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    background: var(--smrs-cream, #F3EEE3) !important;
    color: var(--smrs-dark-green, #0C4143) !important;
    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-prog-form-inner .um-button:hover {
    background: #fff !important;
    transform: translateY(-2px);
}

.smrs-prog-form-inner .um-button.um-alt {
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
}

.smrs-prog-form-inner .um-button.um-alt:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #fff !important;
}

@media (max-width: 640px) {
    .smrs-prog-form-inner .um-row {
        flex-direction: column;
        gap: 0;
    }
    .smrs-prog-form-inner .um-col-alt {
        flex-direction: column;
    }
}

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

@media (max-width: 900px) {
    .smrs-structure-grid {
        grid-template-columns: 1fr 1fr;
    }
    .smrs-outcomes-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .smrs-structure-grid {
        grid-template-columns: 1fr;
    }
    .smrs-outcomes-grid {
        grid-template-columns: 1fr;
    }
    .smrs-prog-form {
        grid-template-columns: 1fr;
    }
    .smrs-sponsors-row {
        gap: 40px;
    }
}