/* 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/theme-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 theme-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 blue→magenta 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 — the `filter: brightness(0) invert(1)` recolor
      forces it to pure white. On a PALE primary that white logo also
      disappears (same way white text would), so we drive the filter
      from --icon-on-primary-filter, which theme-contrast.js sets to
      'brightness(0) invert(1)' for white or 'brightness(0)' for dark
      so the apple logo always matches the button text. */

.mission-area .btn-ios,
.mission-area .btn-ios:hover {
    color: var(--theme-on-primary) !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: var(--icon-on-primary-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-readable) !important;
    background-color: transparent;
    border: 1.5px solid var(--theme-color-readable);
    transition: background-color .15s ease, color .15s ease;
}
.mission-area .btn-light:hover {
    color: var(--theme-on-primary) !important;
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

/* ── Owl carousel nav arrows on the homepage.
   Dev's style.css 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 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;
}

/* Campaigns CTA spacing tweak — DESKTOP ONLY. On desktop the campaign
   card's Donate button (.blk-wrap a.theme-btn) has 25px of top margin
   above it (style.css), pushing the visual content-end of the card
   down to the button. Without this override the "View all campaigns"
   CTA reads too far from its content compared to events. 32px lands
   the CTA at the same visual distance as the events section's 64px-
   to-card-content gap.

   Mobile keeps the default .section-cta-row { margin-top: 64px } —
   on mobile the campaign card grows taller (vertical stack) and the
   carousel arrows move over the cards, so the same 64px reads as
   right-sized breathing room rather than 'too far' like it does on
   desktop. */
@media (min-width: 768px) {
  section.campaigns-area .section-cta-row {
    margin-top: 32px;
  }
}

/* ── Desktop footer layout: 3 horizontal columns ───────────────────────
   The dev's style.css 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 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 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, .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,
    .section-cta-btn,
    .blk-wrap a.theme-btn,
    .blk a.theme-btn {
        margin-left: auto;
        margin-right: auto;
    }
}