/**
 * CLS Improvements - Phase 1
 * Standalone CSS for layout stability optimizations
 */

/* Aspect Ratio Helpers - Prevent image layout shifts */
/* Scoped to audio programs only — homepage images are 2:1 (matching container reservation).
   Audio landing images are 16:9. Keeping global rule would override homepage critical CSS
   (aspect-ratio:2/1) and cause container to expand to 664px instead of 590px. */
.page-audio-programs .slideshow__cell img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.footer__logo img {
    width: 100px;
    height: auto;
    aspect-ratio: 1000 / 723;
}

.slideshow__logo img {
    max-width: 100%;
    height: auto;
}

.img-responsive {
    max-width: 100%;
    height: auto;
}

.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-2-1 {
    aspect-ratio: 2 / 1;
}

/* Widget Skeleton Styles - Reserve space for async widgets */
givebutter-widget {
    display: block;
    min-height: 400px;
    contain: layout;
    background: #f5f5f5;
    border-radius: 4px;
}

givebutter-widget:empty {
    position: relative;
}

givebutter-widget:empty::before {
    content: 'Loading donation form...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 14px;
}

.sponsorship-module {
    min-height: 200px;
    contain: layout;
}

.sponsorship-module.is-loading {
    background: #f5f5f5;
    border-radius: 4px;
}

.async-widget-container {
    min-height: var(--widget-min-height, 300px);
    contain: layout;
}

.async-widget-container.is-loading {
    background: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.async-widget-container.is-loading::after {
    content: 'Loading...';
    color: #999;
    font-size: 14px;
}

/* Footer partner logos - prevent shift when images load */
.footer .row.vspace-small-12 .column {
    min-height: 120px;
}

/* ── Slideshow Container CLS Prevention ──────────────────────────────────
   Root cause: .slideshow.is-hidden starts at height:0 (Foundation
   display:none). Flickity removes is-hidden on init, expanding the
   container from 0 to full height, shifting everything below.
   adaptiveHeight:true also resizes container after init.

   Fix: .slideshow-container reserves 2:1 space via aspect-ratio.
   Browser computes height = width/2 regardless of inner display:none.
   When Flickity shows the slideshow, it fills already-reserved space. */

/* Slideshow "See ›" affordance after title */
.slideshow__see-more {
    font-size: 0.875rem;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0.75;
    margin-left: 0.25rem;
    letter-spacing: 0.01em;
}

/* Reduce gap between slideshow and label row by 20px (was 60px / 3.75rem → 40px / 2.5rem → 20px / 1.25rem)
   Target only the slideshow row using :has() to avoid affecting other vspace-small-12 rows. */
.row.vspace-small-12:has(.slideshow-container) {
    margin-bottom: 1.25rem !important;
}

/* Slideshow CLS fix: .slideshow-container reserves correct space via
   aspect-ratio (ensures 2:1 for desktop) + min-height on mobile (ensures
   image + caption fits). Foundation is-hidden has display:none on .slideshow
   but the CONTAINER still has height from aspect-ratio/min-height.
   When Flickity removes is-hidden, content fills pre-reserved space = no CLS. */

/* Override app.css background:#000 on container so page texture shows through */
.slideshow-container {
    background: transparent !important;
    aspect-ratio: 2 / 1;
}

/* Restore slideshow title to production size — staging app.css has a grouped
   font-size:inherit override that kills the 1.5rem/700 from the original rule */
.slideshow__title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    line-height: 1.6 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media screen and (max-width: 39.9375em) {
    /* Mobile: min-height reserves image (220px at 440px) + caption (min-height:170px)
       so even with Foundation's display:none on .slideshow, the container holds its space.
       Content fills this pre-reserved area when Flickity removes is-hidden = no CLS. */
    .slideshow-container {
        min-height: 400px;
    }
}

/* ── Slideshow Caption Fixes (homepage desktop) ─────────────────────
   Issue 1: Caption height varies across slides (SoundCloud slides are
   186px tall; text-only slides are ~70px). Fix: min-height: 186px on
   medium+ so the white box is the same height on every panel.

   Issue 2: position:absolute; bottom:-10px on .slideshow__caption--bottom
   makes the caption bleed 10px below .slideshow__cell. CSS spec says
   overflow:hidden on .flickity-viewport does NOT clip an absolutely-
   positioned element whose containing block (.slideshow__cell) is inside
   the viewport — so the caption escapes the clip and overlaps the section
   header labels below. Fix: change bottom to 0 to stop the bleed. ─── */

@media print,screen and (min-width: 40.5625em) {
    .slideshow__caption--bottom {
        bottom: 0 !important;       /* was -10px; stop bleed outside container */
        min-height: 186px;          /* SoundCloud height (166px) + 2×10px padding */
        box-sizing: border-box;
    }
}

/* ── Audio Landing CLS Prevention ──────────────────────────────────
   Root cause: slideshow container and caption section have no reserved
   height. When Flickity initializes with adaptiveHeight:true, the
   container resizes → CLS. Caption below slideshow also shifts as
   content loads. Fix: reserve space via aspect-ratio on the container
   and min-height on the caption. body.page-audio-programs scopes
   these to the audio landing page only. ────────────────────────────── */

.page-audio-programs .slideshow-container {
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    contain: layout style;
}

.page-audio-programs .slideshow__caption {
    min-height: 120px;
    contain: layout style;
}

/* On mobile, audio slideshow is full-width so aspect-ratio holds */
@media screen and (max-width: 39.9375em) {
    .page-audio-programs .slideshow-container {
        aspect-ratio: 16 / 9;
    }
}

/* ── Mobile CLS Prevention ──────────────────────────────────────────
   These rules MUST live in this synchronous stylesheet, not in
   mobile-fixes.css (which loads async via preload+onload and arrives
   after first paint, causing the very reflow it tries to fix).
   ─────────────────────────────────────────────────────────────────── */

/* Phase 1: vspace-small container stacking
   Targets: Donate (CLS 1.471→0.547), Events (CLS 1.000→0.555)
   Root cause: .row.vspace-small-* reflowing from multi-col to stacked */
@media screen and (max-width: 39.9375em) {
    .row.vspace-small-12,
    .row.vspace-small-8 {
        clear: both;
    }

    .row.vspace-small-12 > .columns,
    .row.vspace-small-12 > .column,
    .row.vspace-small-8 > .columns,
    .row.vspace-small-8 > .column {
        float: none;
        width: 100%;
        clear: both;
    }
}

/* Phase 4: mobile-fixes.css async rule duplication
   Root cause: mobile-fixes.css loads async (preload+onload), so its
   mobile layout rules arrive after first paint, causing row margin
   shifts and vspace reflow on Audio (CLS 0.548), Donate, etc.
   Fix: duplicate the layout-altering mobile-fixes.css rules here
   (synchronous) so they apply at first paint. Async duplicates are
   harmless — same values, same specificity. */
@media screen and (max-width: 640px) {
    /* mobile-fixes.css line 86-89: changes .row from auto centering
       to fixed negative margins on mobile. Without this at first paint,
       rows render centered then jump when async CSS arrives. */
    .row {
        margin-left: -0.625rem;
        margin-right: -0.625rem;
    }

    /* mobile-fixes.css line 92-98: stacks medium columns on mobile */
    .small-12.medium-8.columns,
    .small-12.medium-4.columns {
        clear: both;
        float: none;
        width: 100%;
        margin-bottom: 20px;
    }

    /* mobile-fixes.css line 101-104: adds margin + clear to vspace-small-12 */
    .vspace-small-12 {
        margin-bottom: 20px !important;
        clear: both;
    }

    /* mobile-fixes.css line 321-324: hides desktop subnav on mobile.
       Without this at first paint, the subnav renders visible then
       disappears when async CSS arrives, shifting all content below. */
    .subnav--main {
        display: none !important;
    }

    /* mobile-fixes.css line 107-110: slideshow margin on mobile */
    .slideshow {
        margin-bottom: 20px;
        clear: both;
    }
}

/* Phase 2: mobile nav layout shift prevention
   Target: Audio Programs (CLS 1.548), Events (0.107)
   Root cause: mobile-fixes.css (async) hides .main-nav__nav-bar and
   shows .main-nav__menu-toggle AFTER first paint — browser renders
   desktop nav then hides it, causing massive reflow.
   Fix: duplicate critical layout rules here (sync) so the nav renders
   in mobile state from first paint. Async duplicates are harmless. */
@media screen and (max-width: 640px) {
    .main-nav__nav-bar {
        display: none !important;
    }

    .main-nav__menu-toggle {
        display: block !important;
    }
}

/* Mobile/Desktop Layout Controls */
.mobile-only-layout {
    display: block;
}

.desktop-only-layout {
    display: none;
}

@media screen and (min-width: 40.5625em) {
    .mobile-only-layout {
        display: none;
    }
    
    .desktop-only-layout {
        display: block;
    }
}

/* Mobile Recent Articles - Ensure full width ONLY on mobile */
@media screen and (max-width: 40.5624em) {
    .mobile-only-layout .article-tile {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mobile-only-layout .vspace-small-4 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Desktop Only: Fix Upcoming Events header alignment */
@media screen and (min-width: 40.5625em) {
    .medium-4.columns > a .hr-title--event {
        padding-left: 0.625rem;
    }
}

/* Explicit Mobile/Desktop Section Controls - Fix Foundation Visibility Classes */
@media screen and (max-width: 39.9375em) {
    /* Hide desktop sections on mobile - including flex containers */
    .hide-for-small-only,
    .row.hide-for-small-only,
    .columns.hide-for-small-only {
        display: none !important;
    }
    
    /* Show mobile sections on mobile */
    .show-for-small-only {
        display: block !important;
    }
}

@media screen and (min-width: 40em) {
    /* Show desktop sections on desktop */
    .hide-for-small-only {
        display: block !important;
    }
    
    /* Hide mobile sections on desktop */
    .show-for-small-only {
        display: none !important;
    }
}

/* Ensure mobile sections are full width */
@media screen and (max-width: 39.9375em) {
    .show-for-small-only .row {
        max-width: 100%;
        margin: 0;
        padding: 0 0.9375rem;
    }
    
    .show-for-small-only .small-12.columns {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    
    .show-for-small-only .article-tile,
    .show-for-small-only .column {
        width: 100% !important;
        max-width: 100% !important;
    }

    .homepage-mobile-legacy-shell,
    .audio-filter-shell {
        display: block;
        width: 100%;
        overflow: hidden;
    }

    /* P2: Homepage mobile section CLS containment
       Min-height reservations removed 2026-04-24: P2 mobileOnly fix now uses
       direct src on mobile tiles (no Foundation interchange), so content is
       in HTML from the start and no space reservation or contain needed. */

    /* P2: Article tile images — reserve 1:1 space to prevent CLS from
       lazy-loaded images expanding from 0 to natural size */
    .show-for-small-only .article-tile__img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        background: #f3f3f3;
    }
}

/* A1: Color contrast fix — article tag labels (#bb6b0f → #af640e)
   Raises contrast ratio from 4.02:1 to 4.51:1 (WCAG AA §1.4.3) */
.tag__label--article {
    background-color: #af640e;
}

.hr-title--article {
    border-bottom-color: #af640e;
}

.hr-title--article .hr-title__text,
.hr-title--article .hr-title__text::after {
    background-color: #af640e;
}

/* A3: Focus indicator fixes for keyboard accessibility
   Compensates for Foundation's outline:none on summary and menu toggle */
summary:focus-visible {
    outline: 2px solid #341f07;
    outline-offset: 2px;
}

.main-nav__menu-toggle:focus-visible {
    outline: 2px solid #341f07;
    outline-offset: 2px;
}