/* =====================================================================
   GLOBAL MOBILE / RESPONSIVE FIX LAYER
   Loaded last (after book-reader.css) in layouts/user.blade.php so it
   wins the cascade without needing !important everywhere. This is an
   additive overrides layer, not a rewrite of the existing stylesheets.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. HORIZONTAL OVERFLOW SAFETY NET
   No stylesheet in this project sets box-sizing globally or clips
   horizontal overflow on html/body, so any single oversized/mis-placed
   element (an image, a fixed-width badge, an off-canvas sidebar that
   still contributes to layout width on some mobile browsers) can push
   the whole page wider than the viewport and create sideways scroll —
   this is what was cutting off the gallery images and other content
   at the right edge on some devices.
--------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Grid/flex children default to min-width:auto, which lets an oversized
   child (image, long unbroken word/URL) force its whole track wider than
   the column — the classic cause of a grid that overflows only on
   mobile even though every column is `1fr`. */
.book-grid > *,
.gallery-grid-page > *,
.book-card,
.gallery-card {
    min-width: 0;
}

/* ---------------------------------------------------------------------
   2. HEADER / FOOTER LOGO — visible fallback on failed or blank loads
   The .logo-broken class is toggled by the inline onerror/onload check
   added to the <img> tags in header.blade.php and footer.blade.php.
--------------------------------------------------------------------- */
.header-logo.logo-broken,
.sidebar-logo.logo-broken,
.footer-brand img.logo-broken {
    display: none;
}

.logo-fallback-text {
    display: none;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    color: var(--text-white);
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.brand:has(.logo-broken) .logo-fallback-text,
.sidebar-brand:has(.logo-broken) .logo-fallback-text,
.footer-brand:has(.logo-broken) .logo-fallback-text {
    display: inline-block;
}

/* ---------------------------------------------------------------------
   3. MOBILE MENU BUTTON — extra contrast guarantee
   Belt-and-braces on top of the existing fix in style.css: give the
   button its own faint chip background so the three bars have
   guaranteed contrast even if a future hero/overlay change makes the
   header background lighter than expected.
--------------------------------------------------------------------- */
@media (max-width: 991px) {
    .menu-toggle {
        background: rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-sm);
    }
    .site-header.scrolled .menu-toggle {
        background: rgba(17, 17, 17, 0.06);
    }
}

/* ---------------------------------------------------------------------
   4. GALLERY PAGE — tighter, safer mobile grid
--------------------------------------------------------------------- */
@media (max-width: 480px) {
    .gallery-grid-page {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .gallery-card-media {
        aspect-ratio: 4 / 3.2;
    }
    .gallery-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        margin-left: -4px;
        margin-right: -4px;
        padding-left: 4px;
        padding-right: 4px;
    }
    .gallery-filter-btn {
        flex: 0 0 auto;
    }
}

/* ---------------------------------------------------------------------
   5. BOOK LIST — grid + tabs on small screens
--------------------------------------------------------------------- */
@media (max-width: 480px) {
    .book-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .book-card-body {
        padding: 12px 12px 14px;
    }
    .book-card-body h3 {
        font-size: 13.5px;
    }
    .book-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }
    .book-category-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }
}

/* ---------------------------------------------------------------------
   6. BOOK READER — small-screen polish
--------------------------------------------------------------------- */
@media (max-width: 480px) {
    .reader-toolbar {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .reader-toolbar-right {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .reader-stage {
        min-height: 60vh;
    }
}

/* ---------------------------------------------------------------------
   7. BOOK CARD — audio badge
   Was duplicated inline in books.blade.php, audio-book.blade.php,
   audio-books.blade.php and book.blade.php. Centralised here so there
   is one definition instead of four copies to keep in sync.
--------------------------------------------------------------------- */
.book-card { position: relative; }
.book-card-audio {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
}

/* ---------------------------------------------------------------------
   8. SITE-WIDE CONTAINER — fluid full-width layout
   Bootstrap's .container (used on every page, including the homepage
   "Vision, Mission & Our Work" / "Support the Foundation" section) caps
   out at a fixed 1140px, then 1320px, with a hard jump at each
   breakpoint. On the wide desktop monitors most visitors use today,
   that leaves the page looking narrow with unused space on both sides
   and gives the impression the layout "isn't full width". Overriding
   it here — the last file loaded — with a fluid max-width and fluid
   (clamp-based) side padding lets every page's content keep using the
   available width smoothly at every viewport size, from small phones
   up to ultra-wide monitors, with no fixed breakpoint jump. Bootstrap's
   .row / .col-* gutter math (used on the Home page's info-card row) is
   unaffected, since it is calculated from the gutter variable, not
   from container padding.
--------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 4vw, 64px);
    padding-right: clamp(16px, 4vw, 64px);
}

/* =====================================================================
   9. HOME — "Vision, Mission & Our Work" + full-width "Support the
      Foundation" band
   ---------------------------------------------------------------------
   - .mission-section--home  : pulls the section UP (the default 90px
     section padding + 65px heading margin stacked to ~155px of dead
     space above the heading) and gives the heading a proper gap to the
     cards below it.
   - .mission-card--center   : every card is a flex column, so its icon,
     title and text sit in the VERTICAL MIDDLE of the card whatever the
     copy length (a 1-line card next to a 2-line card no longer leaves a
     ragged empty strip at the bottom).
   - .support-band           : the Support the Foundation call-to-action
     now lives OUTSIDE the .container as its own full-bleed section, so
     the band runs edge-to-edge at every screen size; only its content
     is held to the fluid container width.
   Scoped to new modifier classes so the same .mission-* / .about-cta-*
   components on Donate, Legal Status, Vision etc. are not disturbed.
===================================================================== */
.mission-section--home {
    padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 76px);
}

.mission-section--home .am-section-heading {
    margin-top: 0;
    margin-bottom: clamp(26px, 3.2vw, 42px);
}

.mission-grid--home {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    align-items: stretch;
}

.mission-card--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;      /* vertical middle */
    text-align: center;
    min-height: clamp(200px, 17vw, 240px);
    padding: clamp(24px, 2.6vw, 36px) clamp(18px, 2vw, 28px);
}

.mission-card--center .mission-icon {
    margin: 0 auto 18px;
    flex: 0 0 auto;
}

.mission-card--center h3 {
    margin: 0 0 8px;
}

.mission-card--center p {
    margin: 0;
    max-width: 34ch;
}

@media screen and (max-width: 1199px) {
    .mission-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 575px) {
    .mission-section--home { padding: 32px 0 44px; }
    .mission-grid--home { grid-template-columns: 1fr; gap: 14px; }
    .mission-card--center { min-height: 0; padding: 26px 18px; }
}

/* ---- Full-width call-to-action band (Support the Foundation) ---------- */
.about-cta.support-band {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(36px, 5.5vw, 68px) 0;
    border-radius: 0;
    background:
        linear-gradient(135deg, #F3ECD2 0%, #EADFB8 100%);
    border-top: 1px solid rgba(184, 146, 42, 0.38);
    border-bottom: 1px solid rgba(184, 146, 42, 0.38);
}

.about-cta.support-band .about-cta-inner {
    display: flex;
    align-items: center;               /* text + buttons share one vertical centre line */
    justify-content: space-between;
    gap: 20px clamp(24px, 4vw, 56px);
    flex-wrap: wrap;
}

.about-cta.support-band .about-cta-inner > div:first-child {
    flex: 1 1 320px;
    min-width: 0;
}

.about-cta.support-band .about-cta-inner h2 {
    margin: 0 0 8px;
}

.about-cta.support-band .about-cta-inner p {
    margin: 0;
    max-width: 62ch;
}

.about-cta.support-band .about-cta-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* Every other CTA on the site follows the same fluid rules */
.about-cta .about-cta-inner { min-width: 0; }

@media screen and (max-width: 767px) {
    .about-cta.support-band .about-cta-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 18px;
    }
    .about-cta.support-band .about-cta-inner > div:first-child { flex: 0 0 auto; width: 100%; }
    .about-cta.support-band .about-cta-inner p { margin-inline: auto; }
    .about-cta.support-band .about-cta-actions { width: 100%; justify-content: center; }
}

@media screen and (max-width: 575px) {
    .about-cta.support-band .about-cta-inner h2 { font-size: 24px; }
    .about-cta.support-band .about-cta-actions { flex-direction: column; align-items: stretch; }
    .about-cta.support-band .about-cta-actions .btn-primary,
    .about-cta.support-band .about-cta-actions .am-hero-btn-outline {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Other pages that still use .about-cta as a full-width <section> */
@media screen and (max-width: 575px) {
    .mission-section { padding: 48px 0; }
    .mission-card { padding: 28px 18px; }
    .about-cta { padding: 44px 0; }
    .about-cta-inner h2 { font-size: 24px; }
    .about-cta-actions { width: 100%; }
    .about-cta-actions .btn-primary,
    .about-cta-actions .am-hero-btn-outline {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }
}

/* =====================================================================
   10. RESPONSIVE SAFETY NET (all pages)
   Generic guards for the things that most often break small screens:
   rich-text tables/iframes/pre, long unbroken words and URLs, and
   media that carry fixed width/height attributes.
===================================================================== */
.am-content-body,
.blog-detail-content,
.mission-card p,
.team-profile {
    overflow-wrap: anywhere;
    word-break: normal;
}

.am-content-body table,
.blog-detail-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.am-content-body iframe,
.blog-detail-content iframe,
.am-content-body video,
.blog-detail-content video {
    max-width: 100%;
}

.am-content-body pre,
.blog-detail-content pre {
    max-width: 100%;
    overflow-x: auto;
}

.contact-map iframe { min-height: 260px; }

/* Buttons never force a row wider than the screen */
.btn-primary,
.am-hero-btn-outline {
    max-width: 100%;
}

/* Keep tap targets comfortable on touch screens */
@media (pointer: coarse) {
    .btn-primary,
    .am-hero-btn-outline,
    .nav-cta,
    .sidebar-cta {
        min-height: 44px;
    }
}

/* Respect reduced-motion preferences (hover lifts, reveals, sliders) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   11. COOKIE / ANALYTICS CONSENT BANNER
   Rendered by layouts/partials/user/cookie-consent.blade.php, and only
   when Google Analytics is configured in Settings > Integrations.
===================================================================== */
.cookie-consent {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 1200;
    width: min(760px, calc(100% - 24px));
    display: none;
    align-items: center;
    gap: 14px 20px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--green-900, #0A2A1C);
    color: var(--on-dark, #F4F0E2);
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(6, 25, 15, 0.38);
    font-size: 14px;
    line-height: 1.55;
}

.cookie-consent.is-visible { display: flex; }

.cookie-consent p {
    flex: 1 1 280px;
    margin: 0;
    color: var(--on-dark-muted, rgba(244, 240, 226, 0.84));
}

.cookie-consent a {
    color: var(--gold-400, #E6C766);
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.cookie-consent-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.cookie-consent button {
    font: inherit;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--gold-500, #D4AF37);
    min-height: 40px;
}

.cookie-consent .cookie-accept {
    background: var(--gold-500, #D4AF37);
    color: var(--on-gold, #0A2A1C);
}

.cookie-consent .cookie-decline {
    background: transparent;
    color: var(--on-dark, #F4F0E2);
}

.cookie-consent button:focus-visible {
    outline: 3px solid var(--gold-300, #F0D98A);
    outline-offset: 2px;
}

@media (max-width: 575px) {
    .cookie-consent { bottom: 10px; padding: 14px; }
    .cookie-consent-actions { width: 100%; }
    .cookie-consent button { flex: 1 1 0; }
}

/* =====================================================================
   11. GOLD/WHITE BUTTON PAIR PARITY (site-wide)
   Wherever a gold .btn-primary sits next to the white outline button
   (.am-hero-btn-outline, e.g. hero "Learn More" + "Donate"), they must
   share one box model so their tops/bottoms/heights line up exactly.
   .am-hero-btn-outline is the reference (13px/28px padding, 1.5px
   border); .btn-primary is pinned to match it here, last in the
   cascade, so no earlier rule can reintroduce a mismatch.
===================================================================== */
.btn-primary,
.am-hero-btn-outline {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 28px;
    border-width: 1.5px;
    border-style: solid;
    line-height: 1.3;
    font-size: var(--font-size-button, 14px);
    font-weight: 600;
    vertical-align: middle;
}