/* Footer + home-page theme-token overrides.
 *
 * The dev's style.css hardcoded Kannect colors in a few landing-surface
 * spots (footer, home CTA buttons, carousel arrows). Swapped to
 * --theme-color tokens here so every white-label org gets a coherent
 * feel without editing the dev's main stylesheet.
 *
 * Footer body: background = var(--theme-color). Text/icon contrast
 * auto-flips between white and dark based on the primary's luminance —
 * /assets/js/footer-contrast.js detects this at load and adds
 * .footer-on-dark or .footer-on-light. Two CSS custom properties
 * (--footer-fg, --footer-fg-muted) flip with the class so every text
 * rule inherits the right contrast. */

.site-footer {
    background-color: var(--theme-color);
    /* Defaults assume dark background (Kannect blue + most white-label
       themes). The footer-contrast.js script will flip these via
       .footer-on-light if the primary is too pale. */
    --footer-fg: #fff;
    --footer-fg-muted: rgba(255, 255, 255, 0.85);
    color: var(--footer-fg);
}
.site-footer.footer-on-light {
    --footer-fg: #1a1a1a;
    --footer-fg-muted: rgba(0, 0, 0, 0.7);
}
.site-footer.footer-on-dark {
    --footer-fg: #fff;
    --footer-fg-muted: rgba(255, 255, 255, 0.85);
}

/* Column headings ("EXPLORE", "CONTACT", etc.) */
.site-footer .footer-col h4 { color: var(--footer-fg); }

/* The dev uses .footer-col h4 span with the magenta→blue Kannect gradient
   for an org-name highlight. Override to inherit the footer fg — the
   gradient won't read on a saturated background and clashes with
   white-label themes. */
.site-footer .footer-col h4 span {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: var(--footer-fg);
    color: var(--footer-fg);
}

/* Brand column mission text */
.site-footer .footer-brand .footer-mission { color: var(--footer-fg-muted); }

/* Explore nav links */
.site-footer .footer-explore ul.menu-links li a { color: var(--footer-fg-muted); }
.site-footer .footer-explore ul.menu-links li a:hover {
    color: var(--footer-fg);
    opacity: 1;
}

/* Contact column text + inline icons */
.site-footer .contact-infos span,
.site-footer .contact-infos a { color: var(--footer-fg-muted); }
.site-footer .contact-infos a:hover { color: var(--footer-fg); }
.site-footer .contact-infos .contact-icon { color: var(--footer-fg); flex-shrink: 0; }

/* "Powered by Kannect" promo bar at the bottom — slightly darker stripe
   on dark backgrounds, slightly lighter on light backgrounds. */
.site-footer .kannect-promo { background: rgba(0, 0, 0, 0.12); }
.site-footer.footer-on-light .kannect-promo { background: rgba(0, 0, 0, 0.05); }
.site-footer .kannect-promo.is-revealed {
    border-top-color: rgba(255, 255, 255, 0.15);
}
.site-footer.footer-on-light .kannect-promo.is-revealed {
    border-top-color: rgba(0, 0, 0, 0.08);
}
.site-footer .kannect-promo-text,
.site-footer .footer-copy-text { color: var(--footer-fg-muted); }
.site-footer .kannect-promo-text a {
    color: var(--footer-fg);
    text-decoration: underline;
}
.site-footer .kannect-promo strong { color: var(--footer-fg); }

/* ── CTA download buttons (.mission-area).
      App Store button fills with the org's primary color. The apple.svg has
      a hardcoded #CCD0D2 light-gray fill that would clash on a colored
      background — neutralize via `filter: brightness(0) invert(1)` which
      converts any source colors to pure white, matching the white text
      and giving the org-themed button the proper Apple-template feel
      regardless of the org's primary. */

.mission-area .btn-ios,
.mission-area .btn-ios:hover {
    color: #fff !important;
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    transition: background-color .15s ease, border-color .15s ease;
}
.mission-area .btn-ios:hover {
    background-color: var(--theme-color-hover);
    border-color: var(--theme-color-hover);
}
.mission-area .btn-ios img {
    filter: brightness(0) invert(1);
}

/* Play Store button — outline secondary. Hover inverts (fills with the
   org's primary, text to white) so it never mixes primary + secondary in
   the same button at the same time. */
.mission-area .btn-light {
    color: var(--theme-color) !important;
    background-color: transparent;
    border: 1.5px solid var(--theme-color);
    transition: background-color .15s ease, color .15s ease;
}
.mission-area .btn-light:hover {
    color: #fff !important;
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

/* ── Owl carousel nav arrows on the homepage.
   Dev's style.css:626 hardcoded a Kannect-sky-blue (#2b9fd5) on hover and
   bakes the same Kannect blue into the plan-3x box-shadow (rgba(9,151,217)).
   Both swapped to theme tokens so they follow per-org branding.

   Dev's style.css:637 also gave the groups (.plan-3x) arrows a 5px
   border-radius — different shape from the 10px on campaigns/events
   arrows. Normalize to 10px so all four homepage carousels share the
   same arrow look. */
.owl-nav > div:hover {
  background: var(--theme-color-hover);
}
.plan-3x .owl-nav > div {
  border-radius: 10px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-color), transparent 75%);
}

/* Homepage carousel cards — dev's .blk default has margin: 30px 0 which
   adds 30px above and below each campaign/resource card inside the owl
   carousel. Event cards use .event-blk (no margin), so the "View all"
   CTA below the events carousel sits 30px tighter to its cards than the
   campaigns/resources CTAs. Zero the bottom margin on .blk inside the
   homepage carousel rows so all four "View all" buttons sit the same
   distance below their cards. */
section.campaigns-area .all-campains .blk,
section.blog-area .all-campains .blk {
  margin-top: 0;
  margin-bottom: 0;
}

/* The campaign card's Donate button (.blk-wrap a.theme-btn) has 25px of
   top margin above it (style.css:571), pushing the card's overall
   height taller than events cards. The "View all campaigns" CTA below
   the carousel ends up reading as much further from its content than
   the "View all events" CTA does — because the visual content-end of
   campaign cards is the Donate button itself, but the carousel container
   bottom is still flush with all cards equal-height. Pull the campaigns
   CTA up so its visual distance from the cards' content matches events. */
section.campaigns-area .section-cta-row {
  margin-top: 32px;
}
@media (max-width: 767px) {
  /* On mobile the carousel arrows move over the cards (see listing-grid
     .owl-nav repositioning) AND the campaign card grows taller because
     the layout stacks content top-to-bottom — both push the CTA further
     from where the user expects it. Trim to almost flush with the card
     bottom. Combined with the campaigns-area bottom padding the CTA
     still has breathing room before the next section starts. */
  section.campaigns-area .section-cta-row {
    margin-top: 0;
  }
}

/* ── Desktop footer layout: 3 horizontal columns ───────────────────────
   The dev's style.css:951 set footer-grid to 4 side-by-side columns
   (Brand 1.7 | Company 1 | Discover 1 | Contact 1.4). We collapsed
   Company + Discover into a single column (.footer-explore-combined)
   with the two sublists side-by-side, so the grid drops to 3 columns
   and the section labels sit on the same horizontal line. */
.site-footer .footer-grid {
    grid-template-columns: 1.7fr 1.6fr 1.4fr;
}
.site-footer .footer-explore-combined {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.site-footer .footer-explore-combined .footer-explore-sublist {
    flex: 1;
    min-width: 0;
}

/* Get-in-touch column always left-aligned on desktop. */
.site-footer .footer-contact,
.site-footer .footer-contact h4,
.site-footer .footer-contact .contact-infos {
    text-align: left;
}
.site-footer .footer-contact .contact-infos > div {
    justify-content: flex-start;
}

/* Tablet breakpoint — dev's style.css:1103 collapses to 2 columns at
   ≤991px. Re-spread our 3-column override to match: the combined
   Company+Discover column spans both columns of the 2-col grid so its
   two sublists still sit side-by-side; Brand and Contact stack below
   as single-column rows. */
@media (max-width: 991px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .site-footer .footer-explore-combined {
        grid-column: 1 / -1;
    }
}

/* ── Mobile footer layout: 3 stacked centered rows ─────────────────────
   At ≤767px the grid drops to one column with rows centered (Brand →
   Company+Discover → Contact). The middle row keeps its two sublists
   side-by-side until ≤575px where they stack. The text in every row is
   centered; only the icon rows inside .contact-infos are left-aligned
   as a column that itself sits centered, so icons line up vertically. */
@media (max-width: 767px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        justify-items: center;
        text-align: center;
    }
    .site-footer .footer-col.footer-brand,
    .site-footer .footer-col.footer-explore-combined {
        max-width: 520px;
        width: 100%;
    }
    .site-footer .footer-col.footer-contact {
        max-width: 420px;
        width: 100%;
    }

    /* Brand row: logo + mission + socials, all centered. */
    .site-footer .footer-brand .footer-logo {
        display: inline-block;
    }
    .site-footer .footer-brand .footer-mission {
        margin-left: auto;
        margin-right: auto;
        max-width: none;
    }
    .site-footer .footer-brand ul.social-links {
        justify-content: center;
    }

    /* Company + Discover: 2 sublists side-by-side, content-width columns
       centered as a pair instead of stretching to the row's edges.
       Pulls Company in from the far left and Discover in from the far
       right so the two lists sit close to the middle of the row. */
    .site-footer .footer-explore-combined {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 48px;
        align-items: flex-start;
    }
    .site-footer .footer-explore-combined .footer-explore-sublist {
        text-align: left;
        flex: 0 0 auto;
    }

    /* Get-in-touch: heading + each contact row fully centered. Override
       the desktop text-align:left rule on the parent so the heading and
       each address/phone/email row read centered on mobile. */
    .site-footer .footer-contact,
    .site-footer .footer-contact h4,
    .site-footer .footer-contact .contact-infos {
        text-align: center;
    }
    .site-footer .footer-contact .contact-infos {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .site-footer .footer-contact .contact-infos > div {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        justify-content: center;
        text-align: left;
    }
}


/* ── Mobile-only footer + CTA fixes ─────────────────────────────────────
   Scoped behind max-width: 767px so desktop behavior is untouched. */
@media (max-width: 767px) {
    /* Footer "Get in touch" rows render icon + text on the same line.
       Dev's responsive.css:275 sets .contact-infos > div { flex-direction:
       column; margin-top:10px } which stacks the icon above the text and
       doubles spacing between rows. Zero out margin-top so the parent's
       flex gap controls spacing; flex-direction:row is already enforced
       by the desktop rule above (.site-footer specificity wins). */
    .site-footer .contact-infos > div {
        margin-top: 0;
    }
    .site-footer .contact-infos .contact-icon {
        margin-top: 3px;
    }

    /* CTA download buttons — App Store + Google Play stack vertically on
       mobile (side-by-side at full width left both buttons squashed and
       distorted at 320–375px). Stacked, each button gets the full row
       width and reads cleanly. Centered with a 14px gap between them. */
    .mission-area .nav {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .mission-area .nav .btn-ios,
    .mission-area .nav .btn-light {
        width: 100%;
        max-width: 260px;
        justify-content: center;
    }

    /* Hero banner — desktop has the org banner cover-cropped to 500px tall.
       On mobile the inline height:500px style on .hero-area combined with
       background-size: cover crops the sides of a landscape banner so
       heavily that the user sees almost none of the actual image. Override
       to a banner-shaped aspect ratio (16:9), drop the fixed height, and
       use background-position: center so what IS shown is the middle of
       the image (not the top corner). Background-color falls back to the
       org's theme color so any letterboxing reads as branded. */
    section.hero-area {
        height: auto !important;
        aspect-ratio: 16 / 9;
        background-size: cover;
        background-position: center center;
        background-color: var(--theme-color);
        padding: 0;
    }

    /* Navbar — long org names were wrapping next to the logo inside the
       .navbar-brand row, pushing the hamburger toggler down/left. Stack
       logo on top, org name underneath so the brand column stays narrow
       and the toggler stays anchored on the right. Bootstrap's
       .align-items-center utility on the brand anchor is !important
       (sets align-items: center) — when we flip flex-direction to column,
       that 'center' becomes horizontal centering, which nudged the logo
       to the right. Override with !important so the logo + name both
       hug the left edge of the brand block. */
    .navbar .navbar-brand {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px;
        max-width: calc(100% - 70px); /* leave space for the hamburger */
        padding-left: 0;
        margin-left: 0;
    }
    .navbar .navbar-brand img {
        padding-right: 0 !important;
        margin-left: 0;
        height: 60px;
        width: auto;
    }
    .navbar .navbar-brand > span {
        max-width: 100% !important;
        font-size: 14px;
        line-height: 1.2 !important;
    }

    /* Standalone CTAs center on mobile — the common single-button classes
       used as standalone CTAs (.theme-btn, .site-btn, .section-cta-btn,
       and the donate/learn-more button on org carousel cards). They're
       all display:flex with width:max-content in the dev's style.css, so
       margin: auto on the block axis horizontally centers them.

       Buttons inside flex parent rows (the inline ticket-checkout pill,
       the multi-step modal action row) are NOT in this list — flex
       parents already control their kids' position and adding margin:auto
       there would shove the child to one side. */
    .theme-btn,
    .site-btn,
    .section-cta-btn,
    .blk-wrap a.theme-btn,
    .blk a.theme-btn {
        margin-left: auto;
        margin-right: auto;
    }
}