/* ==========================================================================
   Central Park Conservancy colour theme
   Palette lifted verbatim from centralparknyc.org /dist/main.css theme tokens.
   Loaded AFTER bootstrap.min.css + style.css: this build of Bootstrap hardcodes
   hex values in its utility classes, so the utilities are re-declared here
   rather than relying on --bs-* alone.
   ========================================================================== */

:root {
    /* --- CPC theme tokens (names as shipped by centralparknyc.org) --- */
    --theme-primary:      #286140;  /* deep forest green - dominant brand */
    --theme-primary-dark: #1a4a2f;
    --theme-secondary:    #79c000;  /* bright leaf green - CTAs */
    --theme-tertiary:     #a4d65e;
    --theme-accent:       #c8e379;
    --theme-link:         #1e9b18;
    --theme-sage:         #bed0c6;
    --theme-green-100:    #e7f6cc;
    --theme-green-800:    #007a33;
    --theme-cta-hover:    #156537;

    /* --- CPC neutrals --- */
    --theme-ink:      #1e1e1e;
    --theme-ink-soft: #373737;
    --theme-grey:     #6b6b6b;
    --theme-line:     #d2d2d2;
    --theme-surface:  #efefef;

    /* --- Bootstrap variable remap (drives var() use in style.css + inline) --- */
    --bs-primary:        #286140;
    --bs-primary-rgb:    40, 97, 64;
    --bs-secondary:      #1a4a2f;
    --bs-secondary-rgb:  26, 74, 47;
    --bs-success:        #1e9b18;
    --bs-success-rgb:    30, 155, 24;
    --bs-info:           #0069b1;
    --bs-info-rgb:       0, 105, 177;
    --bs-warning:        #ffbf3f;
    --bs-warning-rgb:    255, 191, 63;
    --bs-danger:         #da291c;
    --bs-danger-rgb:     218, 41, 28;
    --bs-light:          #efefef;
    --bs-light-rgb:      239, 239, 239;
    --bs-dark:           #1e1e1e;
    --bs-dark-rgb:       30, 30, 30;
    --bs-tertiary:       #6b6b6b;
    --bs-link-color:     #1e9b18;
    --bs-link-hover-color: #156537;
}

/* --------------------------------------------------------------- utilities */
.bg-primary   { background-color: #286140 !important; }
.bg-secondary { background-color: #1a4a2f !important; }
.bg-success   { background-color: #1e9b18 !important; }
.bg-info      { background-color: #0069b1 !important; }
.bg-warning   { background-color: #ffbf3f !important; }
.bg-danger    { background-color: #da291c !important; }
.bg-light     { background-color: #efefef !important; }
.bg-dark      { background-color: #1e1e1e !important; }

.text-primary   { color: #286140 !important; }
.text-secondary { color: #1a4a2f !important; }
.text-success   { color: #007a33 !important; }
.text-info      { color: #002e5d !important; }
.text-warning   { color: #c65921 !important; }
.text-danger    { color: #93272c !important; }
.text-light     { color: #efefef !important; }
.text-dark      { color: #1e1e1e !important; }

.border-primary { border-color: #286140 !important; }
.border-warning { border-color: #ffbf3f !important; }
.border-danger  { border-color: #93272c !important; }

.bg-primary-translucent   { background-color: #286140 !important; }
.bg-secondary-translucent { background-color: #1a4a2f !important; }

a { color: #1e9b18; }
a:hover { color: #156537; }

/* ----------------------------------------------------------------- buttons */
/* CPC .button-primary: bg --theme-secondary, border --theme-link, white text */
.btn-primary {
    color: #fff;
    background-color: #79c000;
    border-color: #1e9b18;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #1e9b18;
    border-color: #156537;
}
.btn-primary:focus,
.btn-primary.focus { box-shadow: 0 0 0 0.125rem #1e9b18; }
.btn-primary:disabled,
.btn-primary.disabled { color: #fff; background-color: #a4d65e; border-color: #a4d65e; }

.btn-secondary {
    color: #fff;
    background-color: #286140;
    border-color: #286140;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active { color: #fff; background-color: #1a4a2f; border-color: #1a4a2f; }
.btn-secondary:focus { box-shadow: 0 0 0 0.125rem #1a4a2f; }

/* Share / secondary action: CPC tertiary green with deep-green text */
.btn-success {
    color: #1a4a2f;
    background-color: #a4d65e;
    border-color: #a4d65e;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active { color: #1a4a2f; background-color: #c8e379; border-color: #79c000; }
.btn-success:focus { box-shadow: 0 0 0 0.125rem #79c000; }

.btn-warning  { color: #1e1e1e; background-color: #ffbf3f; border-color: #ffbf3f; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { color: #1e1e1e; background-color: #f58220; border-color: #f58220; }

.btn-info     { color: #fff; background-color: #0069b1; border-color: #0069b1; }
.btn-info:hover, .btn-info:focus, .btn-info:active { color: #fff; background-color: #002e5d; border-color: #002e5d; }

.btn-danger   { color: #fff; background-color: #da291c; border-color: #da291c; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { color: #fff; background-color: #93272c; border-color: #93272c; }

.btn-outline-primary   { color: #286140; border-color: #286140; }
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active { color: #fff; background-color: #286140; border-color: #286140; }

.btn-outline-secondary { color: #1a4a2f; border-color: #1a4a2f; }
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active { color: #fff; background-color: #1a4a2f; border-color: #1a4a2f; }

.btn-outline-danger    { color: #93272c; border-color: #93272c; }
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active { color: #fff; background-color: #93272c; border-color: #93272c; }

/* ------------------------------------------------------- navbar and footer */
/* CPC ships a white header (<header class="bg-white">) with deep-green type. */
#sticky-nav-menu { background-color: #fff !important; }
.navbar-brand h1 { color: #286140 !important; }

.navbar .navbar-nav .nav-link,
.navbar-nav .nav-link { color: #286140 !important; }

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: #286140 !important; }

/* Dropdown panels hanging off the white header. DESKTOP ONLY: on mobile the
   menu is a deep-green slide-in panel where style.css makes the dropdown
   transparent and its items white, so painting the panel white here left
   white text on a white ground. */
@media (min-width: 992px) {
    .navbar .dropdown-menu.bg-light {
        background-color: #fff !important;
        border: 1px solid #d2d2d2;
        box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    }

    .dropdown-menu.bg-light .dropdown-item { color: #1e1e1e; }
    .dropdown-menu.bg-light .dropdown-item:hover,
    .dropdown-menu.bg-light .dropdown-item:focus { background-color: #e7f6cc; color: #286140; }
}

.footer .text-dark,
.footer .text-dark a,
.footer a.text-dark { color: #fff !important; }


/* Mobile slide-in menu panel */
@media (max-width: 991px) {
    /* the dropdown sits on the green panel, never on a surface of its own */
    #navbarCollapse .dropdown-menu { background-color: transparent !important; border: 0 !important; box-shadow: none !important; }
    #navbarCollapse .dropdown-item { color: #ffffff !important; }

    #navbarCollapse.mobile-overlay,
    #navbarCollapse.show,
    #navbarCollapse.open { background-color: #286140 !important; }
    #navbarCollapse .navbar-nav .nav-link { color: #fff !important; }
}

/* ------------------------------------------------------------ misc surface */
.spinner-border.text-primary { color: #286140 !important; }

/* CPC ships a high-contrast mode that swaps the lime CTA for the deep green. */
@media (prefers-contrast: more) {
    .btn-primary { background-color: #286140; border-color: #286140; }
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #1a4a2f; border-color: #1a4a2f; }
}

/* ==========================================================================
   Typography - mirrors centralparknyc.org's two-family system.
   CPC ships Gotham Narrow (Book 400 / Medium 500) for text and Gotham Condensed
   Black for display. Both are licensed Hoefler & Co. faces we cannot serve, so:
     display -> Anton        (the only Google face with Gotham Condensed Black's
                              ink density; ships ONE weight, so never ask for 900
                              or the browser fakes it and smears the counters)
     text    -> Figtree (moderate narrowing + real 400/500 cuts, mapping
                              1:1 onto GothamNarrSSm-Book / -Medium)
   ========================================================================== */

body,
.font-narrow {
    font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.005em;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.font-condensed {
    font-family: 'Anton', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.02;
}

.cpc-label {
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.82rem;
    line-height: 1.15;
    letter-spacing: 0.06em;
}

.btn { font-family: 'Figtree', sans-serif; font-weight: 600; }

/* ======================================================== HEADER ==========
   CPC's header is two stacked rows inside a max-width:1920px container with
   80px gutters, and it is TALL: ~181px at >=1200px, ~125px at 1024-1199px,
   ~80px at 768-1023px. It carries no border and no shadow - the white simply
   butts against the content below.
   ========================================================================== */
#sticky-nav-menu { background-color: #fff !important; border: 0 !important; box-shadow: none !important; }

@media (min-width: 992px) {
    /* height must be DEFINITE: .nav-bar carries Bootstrap .h-100 (height:100%),
       which resolves to auto against an auto-height parent. min-height will not do. */
    #sticky-nav-menu.mobile-banner-match { height: 125px !important; }
    /* CPC bottom-aligns the logo and nav (lg:items-end) rather than centring them. */
    .nav-bar { padding: 0 !important; height: 100%; align-items: flex-end !important; }
    #sticky-nav-menu nav.navbar {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
        align-items: flex-end !important;
        padding-bottom: 0.75rem !important;
        max-width: 1920px;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {
    #sticky-nav-menu.mobile-banner-match { height: 181px !important; }
    #sticky-nav-menu nav.navbar { padding-bottom: 3.25rem !important; }
}

/* --- Wordmark lockup: two stacked lines + the lime slab, echoing CPC's logo --- */
.ft-brand { display: inline-flex; align-items: flex-end; }

.ft-wordmark {
    display: flex;
    align-items: stretch;
    gap: 0.11em;
    margin: 0 !important;
    font-family: 'Anton', sans-serif !important;
    font-weight: 400 !important;
    /* CPC's glyph group is #28583C - a different green from the #286140 nav text. */
    color: #28583C !important;
    /* Anton cap height measures 0.865em. CPC sets baseline-to-baseline at
       1.114x cap height (27.84u / 24.99u in their logo SVG), so 0.865 x 1.114
       = 0.964. At 0.84 the caps were taller than the leading and collided. */
    line-height: 0.964;
    text-transform: uppercase;
    font-size: 1.35rem;
}

.ft-wordmark-text { display: flex; flex-direction: column; width: max-content; }
.ft-wordmark-line { display: block; letter-spacing: -0.01em; white-space: nowrap; }

/* Width-match line 2 to line 1 with tracking, NOT text-align-last:justify - with a
   single word space in "FUREVER TREE" that would dump ~0.57em into one gap.
   Anton advance widths (upem 2048, caps, ls -0.01em): line 1 = 5.4865em,
   line 2 = 4.9279em over 12 gaps -> 0.0366em each. */
.ft-wordmark-line:last-child { letter-spacing: 0.0366em; margin-right: -0.0366em; }

.ft-wordmark-block { display: block; align-self: stretch; width: 0.6em; background-color: #79C000; }

@media (min-width: 992px) { .ft-wordmark { font-size: 1.9rem; } }
@media (min-width: 1200px) { .ft-wordmark { font-size: 2.1rem; } }

/* --- Nav: CPC sets it in the condensed display face, uppercase, untracked --- */
.navbar .navbar-nav .nav-link,
.navbar-nav .nav-link {
    font-family: 'Anton', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0 !important;
    color: #286140 !important;
}

@media (min-width: 992px) {
    /* CPC centres the nav in a 60%-wide column rather than flushing it right. */
    .ft-nav { margin-left: auto; margin-right: auto; }

    .navbar .navbar-nav .nav-link,
    .navbar-nav .nav-link {
        font-size: 1.25rem !important;
        margin-right: 1.25rem !important;
        padding: 0 0 0.35rem 0 !important;
        position: relative;
        text-decoration: none !important;
    }

    /* .main-nav-link:after - a 2px lime bar that grows 0 -> 100% over .3s */
    .navbar .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 0; bottom: 0;
        display: block;
        height: 2px;
        width: 0;
        background-color: #79c000;
        transition: width .3s ease 0s, left .3s ease 0s;
    }
    .navbar .navbar-nav .nav-link:hover::after,
    .navbar .navbar-nav .nav-link.active::after { width: 100%; }

    /* CPC's current-section link turns lime */
    .navbar .navbar-nav .nav-link.active { color: #79c000 !important; }
}

@media (min-width: 1200px) {
    .navbar .navbar-nav .nav-link,
    .navbar-nav .nav-link { font-size: 1.5rem !important; margin-right: 2rem !important; }
}

/* Mobile keeps the compact 60px bar and the single-line wordmark. */
@media (max-width: 991.98px) {
    .ft-wordmark { font-size: 1.05rem; gap: 0.08em; }
    .ft-wordmark-block { width: 0.5em; }
}

/* Body copy on a coloured ground.
   White type on a dark field optically blooms, so 400 reads heavier there than
   the same weight does as dark-on-light. 300 with more open leading restores
   the airiness of CPC's own panel copy. */
.ft-panel-body,
.site-footer .footer-legalese,
.site-footer .footer-desc,
.site-footer .footer-fineprint,
.cpc-page .cpc-callout-panel p:not(.cpc-kicker),
.ft-panel .ft-panel-body {
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* ============================================================ FOOTER ======
   Mirrors centralparknyc.org's footer: deep-green field, three columns -
   org/legal/logo left, big condensed headline + signup centre, social + Top
   right. Padding follows their py-13 -> lg:pt-22 / lg:pb-50 rhythm.
   ========================================================================== */
.site-footer {
    background-color: #286140;
    color: #fff;
    margin-top: auto;
}

.site-footer a { color: #fff; }
.site-footer a:hover { color: #c8e379; }

.footer-grid {
    max-width: 1920px;
    margin: 0 auto;
    padding: 3.25rem 1.5625rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 992px) {
    .footer-grid {
        /* CPC's lg:pb-50 (200px) suits their footer because a partner-logo
           column fills the height; ours is shorter, so the bottom is brought
           close to the top instead of leaving a void. */
        padding: 5.5rem 5rem 6rem 5rem;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 4rem;
    }
}

.footer-col { min-width: 0; }

/* --- left column --- */
.footer-orgname {
    color: #fff;
    margin: 0 0 0.4rem 0;
    line-height: 1.25;
    white-space: nowrap;
}

/* Sits directly under the org name, where CPC puts its address block. */
.footer-contact { margin-bottom: 1.9rem !important; }

/* All regular footer copy shares one setting: the text face at 1rem/1.5.
   Only the wordmark and the headline use the display face. */
.site-footer,
.footer-legalese,
.footer-desc,
.footer-fineprint,
.footer-contact,
.footer-links a,
.footer-legal,
.footer-legal a {
    font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
}

.footer-legalese {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 34ch;
    margin: 0 0 1.25rem 0;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 3.5rem; }
/* Padding gives these a ~44px touch target without changing how they look;
   the negative margin keeps the text visually aligned with the column. */
.footer-links a,
.footer-contact,
.footer-legal a {
    text-decoration: underline;
    font-size: 1rem;
    display: inline-block;
    padding: 0.6rem 0.2rem;
    margin: -0.6rem -0.2rem;
}

.footer-logo { display: inline-block; text-decoration: none; }
.ft-wordmark.ft-wordmark--light { color: #ffffff !important; font-size: 1.6rem; }

/* --- centre column --- */
.footer-headline {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    /* Size is matched to CPC by CAP HEIGHT, not font-size: their Gotham
       Condensed caps are 0.74em, Anton's are 0.865em, so the same px value
       renders 17% larger. CPC = 46px/42px => 34.0px caps; 34.0 / 0.865 =
       39.3px. Mobile: their 36px/38px => 26.6px caps => 30.8px here. */
    font-size: 1.925rem;      /* 30.8px -> 26.6px caps, matches their 36px */
    line-height: 2.375rem;    /* 38px, their mobile leading */
    letter-spacing: 0;
    margin: 0 0 1.75rem 0;
}

@media (min-width: 992px) {
    .footer-headline {
        font-size: 2.45rem;    /* 39.2px -> 33.9px caps, matches their 46px */
        line-height: 2.625rem; /* 42px, their desktop leading */
    }
}

/* CPC's signup field: transparent on green with a 2px lime border */
.footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 35rem;
    border: 2px solid #79c000;
    border-radius: 2px;
    padding: 0.9rem 1.1rem;
    text-decoration: none;
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.footer-cta:hover { background-color: #79c000; color: #fff; }
.footer-cta-arrow { font-size: 1.35rem; line-height: 1; }

/* CPC's footer fine print is 16px / 24px Gotham Narrow. */
.footer-fineprint { font-size: 1rem; line-height: 1.5; margin: 1rem 0 0 0; max-width: 35rem; }
.footer-fineprint a { text-decoration: underline; }

/* --- right column --- */
.footer-meta-row { display: flex; align-items: center; justify-content: flex-start; }

.footer-social { display: flex; gap: 0.75rem; align-items: center; }

/* Sized up, and the padding gives each icon a 44px touch target. */
.footer-social a {
    color: #fff;
    font-size: 2.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    transition: color 0.2s ease;
}
.footer-social a:hover,
.footer-social a:focus { color: #c8e379; }