/* ==========================================================================
   Journey Together — Global site styles
   Loaded on every front-end page by the plugin.
   Brand: sage greens from the logo + warm gold accent.
   ========================================================================== */

:root {
    --jt-green-dark:  #3D6B4F;  /* deep band / dark boxes            */
    --jt-green:       #5E8C5E;  /* logo sage                         */
    --jt-green-soft:  #B4CCA8;  /* logo butterfly fill               */
    --jt-green-light: #E8F0EA;  /* light box backgrounds             */
    --jt-green-bg:    #F2F7F2;  /* page background (almost white)     */
    --jt-gold:        #C29B40;  /* quatrefoil gold                   */
    --jt-gold-light:  #DCC074;  /* gold highlight                    */
    --jt-ink:         #2C3A30;  /* body copy                         */
}

/* --------------------------------------------------------------------------
   1. Global page background — solid light green, NO site-wide watermark.
      (The butterfly quatrefoil appears only as a hero overlay, see §9.)
   -------------------------------------------------------------------------- */
body.jt-has-watermark {
    background-color: var(--jt-green-bg);
}

/* --------------------------------------------------------------------------
   2. Hide the theme's default header (we render our own below).
      Covers the common Elementor-friendly themes. If a duplicate header
      still appears, tell me your theme name and I'll add its selector.
   -------------------------------------------------------------------------- */
body.jt-custom-header header.site-header,
body.jt-custom-header #masthead,
body.jt-custom-header .ast-main-header-bar-alignment,
body.jt-custom-header .site-header-row-container,
body.jt-custom-header > .wp-site-blocks > header.wp-block-template-part {
    display: none !important;
}

/* Hide the theme's default FOOTER too — the page already has its own footer
   (the © Journey Together Dallas / 501(c)(3) section). Covers common themes.
   If your real footer disappears, it lives in the theme footer — tell me and
   I'll target the duplicate instead. */
body.jt-custom-header footer.site-footer,
body.jt-custom-header #colophon,
body.jt-custom-header .ast-small-footer,
body.jt-custom-header .ast-footer-overlay,
body.jt-custom-header .site-footer-row-container,
body.jt-custom-header > .wp-site-blocks > footer.wp-block-template-part {
    display: none !important;
}

/* --------------------------------------------------------------------------
   3. Site header — full-width green band with horizontal logo,
      nav row beneath, gold quatrefoil "Give Here" at top-right.
   -------------------------------------------------------------------------- */
.jt-site-header {
    position: relative;
    z-index: 1000;
    font-family: Georgia, 'Times New Roman', serif;
}

/* Dark green band running the full width, logo centered across it */
.jt-header-band {
    background: var(--jt-green-dark);
    text-align: center;
    padding: 26px 20px 22px;
}
.jt-header-band .jt-header-logo {
    display: inline-block;
    line-height: 0;
}
.jt-header-band .jt-header-logo img {
    height: auto;
    width: auto;
    max-height: 85px;       /* aspect ratio preserved even when width is capped */
    max-width: 92vw;
    display: block;
}

/* Nav row directly beneath the band */
.jt-header-nav {
    background: #ffffff;
    border-bottom: 1px solid var(--jt-green-light);
    box-shadow: 0 2px 6px rgba(61,107,79,0.06);
}
.jt-nav-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    padding: 0 24px;
    min-height: 58px;
}
.jt-nav-inner ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 34px;
    flex-wrap: wrap;
    justify-content: center;
}
.jt-nav-inner li { margin: 0; }
.jt-nav-inner a {
    color: var(--jt-green-dark);
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 400;
    padding: 18px 2px;
    display: inline-block;
    transition: color 0.18s ease;
}
.jt-nav-inner a:hover,
.jt-nav-inner .current-menu-item > a { color: var(--jt-gold); }

/* --------------------------------------------------------------------------
   4. Gold quatrefoil "Give Here" — FIXED sticky, middle of the right edge.
      Stays put on every page no matter how far you scroll.
   -------------------------------------------------------------------------- */
.jt-quatrefoil-give {
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    width: 104px;
    height: 104px;
    z-index: 1100;
    color: var(--jt-gold);
    text-decoration: none;
    display: block;
    filter: drop-shadow(0 5px 12px rgba(61,107,79,0.32));
    transition: transform 0.18s ease;
}
.jt-quatrefoil-give:hover { transform: translateY(-50%) scale(1.05); }
.jt-quatrefoil-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.jt-quatrefoil-svg .jt-qf-shape { fill: var(--jt-gold); }
.jt-quatrefoil-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(61,107,79,0.45);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Responsive header
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
    .jt-header-band { padding: 18px 16px 16px; }
    .jt-header-band .jt-header-logo img { max-height: 56px; }
    .jt-nav-inner { gap: 16px; padding: 8px 16px 8px; }
    .jt-nav-inner ul { gap: 16px; }
    .jt-nav-inner a { font-size: 13px; padding: 8px 2px; letter-spacing: 0.08em; }
    .jt-quatrefoil-give {
        width: 84px; height: 84px; right: 8px;
    }
    .jt-quatrefoil-label { font-size: 10px; }
}

/* --------------------------------------------------------------------------
   6. Programs page — lighter green behind "Four Pillars of Support"
      (was dark green). Scoped to the Programs page only.
   -------------------------------------------------------------------------- */
body.jt-tpl-programs .jt-pillars-band,
body.jt-tpl-programs section.elementor-section.jt-pillars-band {
    background-color: var(--jt-green-light) !important;
    background-image: none !important;
}
/* Neutralise an Elementor background-overlay layer if one is used. */
body.jt-tpl-programs .jt-pillars-band > .elementor-background-overlay {
    background-color: var(--jt-green-light) !important;
    background-image: none !important;
    opacity: 1 !important;
}
/* Make the title + copy readable on the lighter green. */
body.jt-tpl-programs .jt-pillars-band .elementor-heading-title,
body.jt-tpl-programs .jt-pillars-band p {
    color: var(--jt-green-dark) !important;
}

/* --------------------------------------------------------------------------
   7. About page — 7M+ stat as a square box, top-right of the page.
   -------------------------------------------------------------------------- */
body.jt-tpl-about .jt-stat-box {
    background: var(--jt-green-dark);
    color: #fff;
    width: 150px;
    height: 150px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 8px 20px rgba(61,107,79,0.25);
    float: right;
    margin: 0 0 18px 28px;
}
body.jt-tpl-about .jt-stat-box * {
    color: #fff !important;
    margin: 0 !important;
    font-size: 40px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

/* About: when columns are merged into one (handled by JS adding this class) */
body.jt-tpl-about .jt-merge-cols > .elementor-container {
    display: block !important;
}
body.jt-tpl-about .jt-merge-cols > .elementor-container > .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
}

/* JS-applied: hide a single widget/section we want removed */
.jt-removed { display: none !important; }

/* --------------------------------------------------------------------------
   8. Careers page ( [jt_careers_page] )
   -------------------------------------------------------------------------- */
.jt-careers-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 10px 20px 40px;
    color: var(--jt-ink);
    font-family: Georgia, serif;
}
.jt-careers-page .jt-careers-hed {
    font-size: 30px;
    color: var(--jt-green-dark);
    text-align: center;
    margin: 0 0 6px;
}
.jt-careers-page .jt-careers-sub {
    text-align: center;
    font-size: 17px;
    color: var(--jt-green);
    margin: 0 0 28px;
}
.jt-careers-page .jt-careers-intro {
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
    margin: 0 auto 28px;
    max-width: 680px;
}
.jt-careers-page .jt-careers-cta {
    text-align: center;
    margin: 30px 0 4px;
    font-size: 16px;
}
.jt-careers-page .jt-careers-cta a {
    color: var(--jt-gold);
    font-weight: 700;
    text-decoration: none;
}
.jt-careers-page .jt-careers-cta a:hover { text-decoration: underline; }

/* (Hero overlay removed in v1.2.0 — the homepage hero background is now managed
   manually in Elementor, so the plugin no longer styles it.) */

/* --------------------------------------------------------------------------
   9. Our Team page ( [jt_team_page] )
   -------------------------------------------------------------------------- */
.jt-team-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 20px 50px;
    font-family: Georgia, serif;
    color: var(--jt-ink);
    text-align: center;
}
.jt-team-page .jt-team-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 14px;
    font-weight: 700;
    color: var(--jt-gold);
    margin: 0 0 10px;
}
.jt-team-page .jt-team-title {
    font-size: 34px;
    line-height: 1.15;
    color: var(--jt-green-dark);
    margin: 0 0 16px;
}
.jt-team-page .jt-team-intro {
    max-width: 720px;
    margin: 0 auto 38px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--jt-ink);
}

/* --------------------------------------------------------------------------
   10. v1.3.0 — content updates (Home hero, Support section, Programs)
       These scope to the live Elementor element IDs on each page.
   -------------------------------------------------------------------------- */

/* Home HERO: drop the "Journey Together Dallas" line — keep only
   "Coming to Dallas in 2027" (hero005, restyled + split to 2 lines by JS). */
body.jt-tpl-home .elementor-element-hero004 { display: none !important; }

body.jt-tpl-home .elementor-element-hero005 .elementor-heading-title {
    color: var(--jt-green-dark) !important;   /* darker green */
    text-align: center !important;
    line-height: 1.08 !important;
    margin-top: -14px !important;             /* nudge up on the watermark */
}

/* Home: the "Support Our Mission" donate block lives on the Donate page now —
   hide it on the home page only. */
body.jt-tpl-home .elementor-element-dona001 { display: none !important; }

/* Programs: enlarge the "Meaningful social activity improves…" line. */
body.jt-tpl-programs .elementor-element-246b611 p {
    font-size: 20px !important;
    line-height: 1.6 !important;
}

/* Programs: the Four Pillars graphic is a fixed 420px block whose four quadrants
   are absolutely positioned at the edges. On phones a theme rule was shrinking
   the box below 408px, so the quadrants slid together and overlapped (hiding
   "Innovative Care" / "Brain Health"). FIX: force the box to KEEP its 420px
   width (so quadrants never collide), then scale the whole thing down with a
   valid unitless factor (--s) and reclaim the freed space with a margin computed
   from --s. Scaling is uniform, so the layout stays intact, just smaller. */
@media (max-width: 768px) {
    body.jt-tpl-programs .elementor-element-phero07 div[style*="420px"] {
        --s: 0.90;
        width: 420px !important;       /* keep its real width — no collapse */
        max-width: none !important;    /* override the theme's max-width:100% */
        flex: 0 0 auto !important;     /* and don't let flex shrink it       */
        transform: scale(var(--s));
        transform-origin: center center;
        margin: calc(420px * (var(--s) - 1) / 2) !important;
    }
}
@media (max-width: 440px) {
    body.jt-tpl-programs .elementor-element-phero07 div[style*="420px"] { --s: 0.84; }
}
@media (max-width: 400px) {
    body.jt-tpl-programs .elementor-element-phero07 div[style*="420px"] { --s: 0.78; }
}
@media (max-width: 360px) {
    body.jt-tpl-programs .elementor-element-phero07 div[style*="420px"] { --s: 0.72; }
}

/* Programs: even, concentric gap around the center emblem (desktop AND mobile).
   The original masks are carved from each quadrant's own corner, which sits 6px
   off the true center, so the reveal bulged at the diagonals (uneven gap). We
   RE-CENTER each quadrant's circular cutout on the true graphic center (210,210
   in the 420px box → local px per quadrant) so the four cutouts form ONE circle
   concentric with the center circle. Cutout radius 75px around the 135px circle
   leaves an even ~8px ring. */
body.jt-tpl-programs .elementor-element-phero07 div[style*="width:105px;height:105px"] {
    width: 135px !important;
    height: 135px !important;
}
body.jt-tpl-programs .elementor-element-phero07 div[style*="at 100% 100%"] {
    -webkit-mask-image: radial-gradient(circle 75px at 210px 210px, transparent 100%, black 75px) !important;
    mask-image: radial-gradient(circle 75px at 210px 210px, transparent 100%, black 75px) !important;
}
body.jt-tpl-programs .elementor-element-phero07 div[style*="at 0% 100%"] {
    -webkit-mask-image: radial-gradient(circle 75px at -6px 210px, transparent 100%, black 75px) !important;
    mask-image: radial-gradient(circle 75px at -6px 210px, transparent 100%, black 75px) !important;
}
body.jt-tpl-programs .elementor-element-phero07 div[style*="at 100% 0%"] {
    -webkit-mask-image: radial-gradient(circle 75px at 210px -6px, transparent 100%, black 75px) !important;
    mask-image: radial-gradient(circle 75px at 210px -6px, transparent 100%, black 75px) !important;
}
body.jt-tpl-programs .elementor-element-phero07 div[style*="at 0% 0%"] {
    -webkit-mask-image: radial-gradient(circle 75px at -6px -6px, transparent 100%, black 75px) !important;
    mask-image: radial-gradient(circle 75px at -6px -6px, transparent 100%, black 75px) !important;
}

/* --------------------------------------------------------------------------
   11. v1.3.1 — mobile-only refinements
       Nav hamburger, hero centering, Programs card spacing.
   -------------------------------------------------------------------------- */

/* ---- Mobile hamburger menu — lives in the green band, top-right of the logo.
        Button rendered by PHP inside .jt-header-band; toggles .jt-nav-open on
        .jt-site-header via JS. ---- */
.jt-nav-toggle {
    display: none !important;   /* never on desktop */
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent !important;
}
.jt-nav-toggle:hover,
.jt-nav-toggle:focus,
.jt-nav-toggle:active,
.jt-nav-toggle:focus-visible {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;   /* kill the pink focus/active outline */
}

@media (max-width: 781px) {
    /* Band becomes a row: logo on the left, hamburger on the right */
    .jt-header-band {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
    }
    .jt-header-band .jt-header-logo { margin: 0; }
    .jt-header-band .jt-header-logo img { max-height: 48px; max-width: 72vw; }

    .jt-nav-toggle {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 36px;
        padding: 0;
        flex: 0 0 auto;
        cursor: pointer;
    }
    .jt-nav-toggle span {
        display: block;
        width: 26px !important;   /* explicit px — width:100% collapsed to 0 inside
                                     the flex-column button on the live page */
        height: 3px !important;
        background: #ffffff !important;   /* white bars, visible on dark green */
        border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .jt-site-header.jt-nav-open .jt-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .jt-site-header.jt-nav-open .jt-nav-toggle span:nth-child(2) { opacity: 0; }
    .jt-site-header.jt-nav-open .jt-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* The white nav row is hidden until the hamburger is tapped, then it drops
       down as a full-width vertical menu. */
    .jt-header-nav { display: none; }
    .jt-site-header.jt-nav-open .jt-header-nav { display: block; }
    .jt-nav-inner {
        flex-direction: column;
        gap: 0;
        padding: 0;
        min-height: 0;
    }
    .jt-nav-inner ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin: 0;
    }
    .jt-nav-inner li {
        width: 100%;
        text-align: center;
        border-top: 1px solid var(--jt-green-light);
    }
    .jt-nav-inner a { display: block; padding: 14px 0; font-size: 14px; }
}

/* ---- Home hero: center the quatrefoil overlay + even out spacing ---- */
@media (max-width: 768px) {
    body.jt-tpl-home .elementor-element-hero001,
    body.jt-tpl-home .elementor-element-hero001 .elementor-background-overlay {
        background-position: center center !important;
    }
    body.jt-tpl-home .elementor-element-hero001 > .elementor-container {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
        align-items: center !important;
    }
    body.jt-tpl-home .elementor-element-hero005 .elementor-heading-title {
        margin-top: 0 !important;   /* let it sit centered, not nudged up, on mobile */
    }
}

/* ---- Programs: tighten side padding on the four program cards ---- */
@media (max-width: 768px) {
    body.jt-tpl-programs .elementor-element-pcard01 {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    body.jt-tpl-programs .elementor-element-pcard03 > .elementor-container,
    body.jt-tpl-programs .elementor-element-pcard11 > .elementor-container,
    body.jt-tpl-programs .elementor-element-pcard22 > .elementor-container,
    body.jt-tpl-programs .elementor-element-pcard31 > .elementor-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.jt-tpl-programs .elementor-col-20 {
        width: 16% !important;
        padding: 0 2px !important;
    }
    body.jt-tpl-programs .elementor-col-80 {
        width: 84% !important;
        padding: 0 6px 0 4px !important;
    }
}

/* ---- Programs hero (PROGRAMS / Four Pillars / intro) + quatrefoil column:
        trim the heavy side padding on mobile ---- */
@media (max-width: 768px) {
    body.jt-tpl-programs .elementor-element-phero01 > .elementor-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    body.jt-tpl-programs .elementor-element-phero01 .elementor-widget-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* the quatrefoil's own column — a little less padding on both sides */
    body.jt-tpl-programs .elementor-element-phero06 > .elementor-widget-wrap {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}