/**
 * HOMEPAGE-ONLY RESPONSIVE FIXES
 * Scoped to index.html only - does NOT affect other pages
 * Fixes: double padding, banner positioning, anchor scroll offset
 */

/* ========================================
   MOBILE & TABLET FIXES (≤1024px)
   Desktop (≥1025px) is untouched
   ======================================== */

/* FIX 1: Remove double top spacing on hero section (mobile & iPad) */
@media (max-width: 1024px) {

    body.homepage .hero,
    body[data-page="home"] .hero,
    .page-home .hero {
        padding-top: var(--spacing-md) !important;
        margin-top: 0 !important;
    }
}

/* Mobile Header Composition Rhythm (MOBILE-ONLY) */
@media (max-width: 768px) {
    /* Unified header composition with breathing space */
    header {
        padding-bottom: 0.75rem; /* Breathing space below logo */
    }
    
    /* Countdown integration spacing */
    body.homepage .inline-countdown-banner,
    body[data-page="home"] .inline-countdown-banner,
    .page-home .inline-countdown-banner {
        margin-top: 0.5rem; /* Intentional gap from header */
        margin-bottom: 1rem; /* Breathing space to hero */
    }
    
    /* Hero composition adjustment for better rhythm */
    body.homepage .hero,
    body[data-page="home"] .hero,
    .page-home .hero {
        padding-top: 1.5rem !important; /* Intentional rhythm from countdown */
    }
}

/* FIX 2: Banner flows naturally below sticky header - NO JS REQUIRED */
@media (max-width: 768px) {

    body.homepage .inline-countdown-banner,
    body[data-page="home"] .inline-countdown-banner,
    .page-home .inline-countdown-banner {
        position: relative;
        /* Flows naturally in document - no fixed positioning */
        z-index: 998;
        top: 0;
    }

    /* No margin needed - banner flows naturally above main */
    body.homepage main,
    body[data-page="home"] main,
    .page-home main {
        margin-top: 0;
    }
}

/* Mobile rhythm: breather + consistent section titles */
@media (max-width: 768px) {
    .next-service-section::before {
        height: 80px;
    }

    #next-service h2,
    #new-here h2,
    #ministries h2,
    #featured-events h2 {
        margin-bottom: 1rem;
    }
}

/* FIX 4: iPad-specific adjustments (769px-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Single clear hero spacing rule - no conflicts */
    body.homepage .hero,
    body[data-page="home"] .hero,
    .page-home .hero {
        padding-top: 2.5rem;
        margin-top: 0;
    }

    /* Banner flows naturally - consistent positioning */
    body.homepage .inline-countdown-banner,
    body[data-page="home"] .inline-countdown-banner,
    .page-home .inline-countdown-banner {
        position: relative;
        top: 0;
    }

    /* Main content flows naturally below banner - DON'T override redesign-styles.css */
    body.homepage main,
    body[data-page="home"] main,
    .page-home main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* FIX 5: iPad Safari - Let sticky header work naturally */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Removed overflow-x: clip override - it breaks position: sticky */
    /* Base sticky header from redesign-styles.css works correctly */
}

/* =========================================
   MOBILE UX POLISH — TAP TARGETS & FEEDBACK
   ========================================= */

/* 1) CAROUSEL DOTS — Larger tap targets without changing appearance */
@media (max-width: 768px) {

    /* Circle carousel dots */
    .circle-dot {
        /* Visual size remains 12px, but clickable area is larger */
        padding: 12px;
        margin: 0 4px;
        /* Keeps visual dot size at 12px but tap area is ~36px */
    }

    /* GPBC rotator dots */
    .gpbc-nav-dot {
        /* Visual size remains 12px, but clickable area is larger */
        padding: 14px;
        margin: 0 4px;
        /* Keeps visual dot size at 12px but tap area is ~40px */
    }

    /* Increase gap between dots to prevent mis-taps */
    .circle-nav-dots {
        gap: 1rem !important;
    }

    .gpbc-rotator-nav {
        gap: 1.25rem !important;
    }
}

/* 2) COUNTDOWN BANNER CTA — Larger tap target, spacing from numbers */
@media (max-width: 768px) {

    body.homepage .inline-countdown-banner .banner-link,
    body[data-page="home"] .inline-countdown-banner .banner-link,
    .page-home .inline-countdown-banner .banner-link,
    body:has(.inline-countdown-banner) .banner-link {
        /* Increase tap area */
        padding: 0.5rem 0.85rem !important;
        min-height: 32px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin-left: 0.5rem;
    }

    /* Add tap feedback */
    body.homepage .inline-countdown-banner .banner-link:active,
    body[data-page="home"] .inline-countdown-banner .banner-link:active,
    .page-home .inline-countdown-banner .banner-link:active,
    body:has(.inline-countdown-banner) .banner-link:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 1);
    }

    /* Reduce accidental taps on countdown numbers */
    body.homepage .inline-countdown-banner .countdown-value,
    body[data-page="home"] .inline-countdown-banner .countdown-value,
    .page-home .inline-countdown-banner .countdown-value,
    body:has(.inline-countdown-banner) .countdown-value {
        pointer-events: none;
        user-select: none;
    }

    body.homepage .inline-countdown-banner .countdown-unit,
    body[data-page="home"] .inline-countdown-banner .countdown-unit,
    .page-home .inline-countdown-banner .countdown-unit,
    body:has(.inline-countdown-banner) .countdown-unit {
        pointer-events: none;
        user-select: none;
    }
}

/* 3) HEADER CONTROLS — Better spacing to prevent accidental taps */
@media (max-width: 768px) {
    .nav-container {
        gap: 1rem !important;
        padding: 0 1rem;
    }

    /* Logo — WCAG AAA tap target (48px) */
    .logo {
        padding: 0.65rem;
        margin: -0.65rem;
        min-height: 48px; /* WCAG AAA minimum */
        display: flex;
        align-items: center;
    }

    /* Mobile menu button — WCAG AAA minimum */
    .mobile-menu-btn {
        min-width: 48px; /* WCAG AAA */
        min-height: 48px;
        padding: 0.85rem !important;
        border-radius: 12px;
        transition: background 0.2s ease, transform 0.15s ease;
    }

    /* Premium tap feedback - Logo */
    .logo:active {
        transform: scale(0.97);
        opacity: 0.85;
        transition: transform 0.15s ease, opacity 0.15s ease;
    }

    /* Premium tap feedback - Dark mode toggle */
    .dark-mode-toggle {
        min-width: 44px;
        min-height: 44px;
        transition: transform 0.15s ease, background 0.2s ease;
    }
    
    .dark-mode-toggle:active {
        transform: scale(0.92) rotate(15deg);
        background: rgba(255, 255, 255, 0.15);
    }

    /* Premium tap feedback - Menu button */
    .mobile-menu-btn:active {
        transform: scale(0.94);
        background: rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.05);
        border-radius: 8px;
    }
}

/* 3B) MOBILE HEADER SLOGAN — Premium gold placement under countdown */
@media (max-width: 768px) {
    body.homepage .header-slogan {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        width: 100%;
        padding: 0.25rem 1rem 0.75rem;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.22em;
        font-weight: 700;
        font-size: 0.82rem;
        line-height: 1.25;
        background: linear-gradient(135deg, #f7e3a1 0%, #d4a64a 45%, #b17a2b 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 2px 8px rgba(177, 122, 43, 0.25);
    }

    body.homepage .header-slogan span {
        display: block;
    }

    /* Hide hero slogan on mobile */
    body.homepage .hero-main-text .hero-slogan {
        display: none;
    }

    /* Dark/scrolled header needs extra glow for legibility */
    body.dark header.scrolled .header-slogan,
    body[data-theme="dark"] header.scrolled .header-slogan {
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 10px rgba(247, 227, 161, 0.35);
    }
}

@media (min-width: 769px) {
    body.homepage .header-slogan {
        display: none;
    }
}

/* 4) HERO CTA BUTTONS — Better tap feedback */
@media (max-width: 768px) {

    body.homepage .hero .btn,
    body[data-page="home"] .hero .btn,
    .page-home .hero .btn {
        min-height: 48px;
        padding: 0.875rem 1.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.homepage .hero .btn:active,
    body[data-page="home"] .hero .btn:active,
    .page-home .hero .btn:active {
        transform: scale(0.97);
    }
}

/* 5) CAROUSEL CTA BUTTONS — Better tap area */
@media (max-width: 768px) {

    /* Fix: Center event-cta buttons on homepage */
    body.homepage .event-cta,
    body[data-page="home"] .event-cta,
    .page-home .event-cta {
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: var(--spacing-md) !important;
    }

    body.homepage .event-cta .btn,
    body[data-page="home"] .event-cta .btn,
    .page-home .event-cta .btn {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        display: block;
        text-align: center;
    }


    /* Circle carousel buttons */
    .circle-carousel .btn {
        min-height: 48px;
        padding: 0.875rem 2rem;
    }

    .circle-carousel .btn:active {
        transform: scale(0.97) !important;
    }

    /* GPBC rotator buttons */
    .gpbc-slide-cta {
        min-height: 44px;
        padding: 0.75rem 1.75rem !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .gpbc-slide-cta:active {
        transform: scale(0.97) !important;
    }
}

/* 6) FOCUS STATES — Ensure visibility on all interactive elements */
@media (max-width: 768px) {

    /* Enhanced focus for better accessibility */
    .logo:focus-visible,
    .dark-mode-toggle:focus-visible,
    .mobile-menu-btn:focus-visible {
        outline: 3px solid var(--color-accent, #c9a961);
        outline-offset: 2px;
        border-radius: 4px;
    }

    .circle-dot:focus-visible,
    .gpbc-nav-dot:focus-visible {
        outline: 3px solid rgba(45, 122, 143, 0.8);
        outline-offset: 4px;
    }

    body.homepage .inline-countdown-banner .banner-link:focus-visible,
    body[data-page="home"] .inline-countdown-banner .banner-link:focus-visible,
    .page-home .inline-countdown-banner .banner-link:focus-visible {
        outline: 3px solid var(--color-accent, #c9a961);
        outline-offset: 3px;
    }
}

/* 7) CARD LINKS — Better tap targets and feedback */
@media (max-width: 768px) {

    /* What's Happening card links */
    body.homepage .feature-card .card-link,
    body[data-page="home"] .feature-card .card-link,
    .page-home .feature-card .card-link {
        min-height: 44px;
        padding: 0.75rem 1.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.5rem;
    }

    body.homepage .feature-card .card-link:active,
    body[data-page="home"] .feature-card .card-link:active,
    .page-home .feature-card .card-link:active {
        transform: translateY(1px);
        opacity: 0.8;
    }

    /* Ministry showcase buttons */
    body.homepage .gpbc-showcase-btn,
    body[data-page="home"] .gpbc-showcase-btn,
    .page-home .gpbc-showcase-btn {
        min-height: 44px;
        padding: 0.75rem 1.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.homepage .gpbc-showcase-btn:active,
    body[data-page="home"] .gpbc-showcase-btn:active,
    .page-home .gpbc-showcase-btn:active {
        transform: scale(0.97);
    }

    /* New Here section CTA buttons */
    body.homepage .new-here-cta .btn,
    body[data-page="home"] .new-here-cta .btn,
    .page-home .new-here-cta .btn {
        min-height: 48px;
        padding: 0.875rem 1.75rem;
        margin: 0.5rem;
    }

    body.homepage .new-here-cta .btn:active,
    body[data-page="home"] .new-here-cta .btn:active,
    .page-home .new-here-cta .btn:active {
        transform: scale(0.97);
    }

    /* Next step section buttons */
    body.homepage .next-step-cta .btn,
    body[data-page="home"] .next-step-cta .btn,
    .page-home .next-step-cta .btn {
        min-height: 48px;
        padding: 0.875rem 1.75rem;
    }

    body.homepage .next-step-cta .btn:active,
    body[data-page="home"] .next-step-cta .btn:active,
    .page-home .next-step-cta .btn:active {
        transform: scale(0.97);
    }
}

/* 8) NAV LINKS — Better tap targets in mobile menu */
@media (max-width: 768px) {

    body.homepage .nav-links a,
    body[data-page="home"] .nav-links a,
    .page-home .nav-links a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 0.875rem 1rem;
    }

    body.homepage .nav-links a:active,
    body[data-page="home"] .nav-links a:active,
    .page-home .nav-links a:active {
        background: rgba(59, 130, 246, 0.08);
        transform: translateX(2px);
    }

    /* Dropdown menu items */
    body.homepage .dropdown-menu a,
    body[data-page="home"] .dropdown-menu a,
    .page-home .dropdown-menu a {
        min-height: 44px;
        padding: 0.75rem 1.5rem !important;
    }

    body.homepage .dropdown-menu a:active,
    body[data-page="home"] .dropdown-menu a:active,
    .page-home .dropdown-menu a:active {
        background: rgba(59, 130, 246, 0.12) !important;
    }
}

/* ========================================
   GET INVOLVED SECTION — Mobile Text Fixes
   ======================================== */

/* Prevent text truncation and overflow in Get Involved section */
@media (max-width: 768px) {

    body.homepage .block-the-loop .content,
    body[data-page="home"] .block-the-loop .content,
    .page-home .block-the-loop .content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }

    body.homepage .block-the-loop .content p,
    body[data-page="home"] .block-the-loop .content p,
    .page-home .block-the-loop .content p {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        font-size: 1rem !important;
        line-height: 1.65 !important;
        overflow: visible !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        hyphens: auto !important;
        margin-bottom: 1.5rem !important;
        display: block !important;
    }

    body.homepage .block-the-loop .content h2,
    body[data-page="home"] .block-the-loop .content h2,
    .page-home .block-the-loop .content h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        max-height: none !important;
        height: auto !important;
    }

    body.homepage .block-the-loop .container,
    body[data-page="home"] .block-the-loop .container,
    .page-home .block-the-loop .container {
        padding: 0 1.25rem !important;
        gap: 2.5rem !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.homepage .block-the-loop,
    body[data-page="home"] .block-the-loop,
    .page-home .block-the-loop {
        padding: 3rem 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Ensure button doesn't overflow */
    body.homepage .block-the-loop .button,
    body[data-page="home"] .block-the-loop .button,
    .page-home .block-the-loop .button {
        width: 100%;
        max-width: 280px;
        text-align: center;
        padding: 14px 32px !important;
        font-size: 1rem !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {

    body.homepage .block-the-loop .content h2,
    body[data-page="home"] .block-the-loop .content h2,
    .page-home .block-the-loop .content h2 {
        font-size: 1.75rem !important;
    }

    body.homepage .block-the-loop .content p,
    body[data-page="home"] .block-the-loop .content p,
    .page-home .block-the-loop .content p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    body.homepage .block-the-loop .container,
    body[data-page="home"] .block-the-loop .container,
    .page-home .block-the-loop .container {
        padding: 0 1rem !important;
    }

    body.homepage .block-the-loop .button,
    body[data-page="home"] .block-the-loop .button,
    .page-home .block-the-loop .button {
        padding: 12px 28px !important;
        font-size: 0.95rem !important;
    }
}

/* ========================================
   IPAD UX POLISH (769px-1024px)
   ======================================== */

/* 1) TAP TARGETS — Slightly smaller than mobile but still comfortable */
@media (min-width: 769px) and (max-width: 1024px) {
    .circle-dot {
        padding: 10px;
        margin: 0 3px;
    }

    .gpbc-nav-dot {
        padding: 12px;
        margin: 0 3px;
    }

    .circle-nav-dots {
        gap: 0.875rem !important;
    }

    .gpbc-rotator-nav {
        gap: 1rem !important;
    }
}

/* 2) HEADER SPACING — Better for touch on iPad */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-container {
        gap: 1.25rem;
    }

    .dark-mode-toggle {
        min-width: 40px;
        min-height: 40px;
    }
}

/* 3) TAP FEEDBACK — Consistent across iPad */
@media (min-width: 769px) and (max-width: 1024px) {

    .logo:active,
    .dark-mode-toggle:active,
    .btn:active,
    .circle-dot:active,
    .gpbc-nav-dot:active,
    .gpbc-slide-cta:active {
        transform: scale(0.97);
    }

    body.homepage .inline-countdown-banner .banner-link:active,
    body[data-page="home"] .inline-countdown-banner .banner-link:active,
    .page-home .inline-countdown-banner .banner-link:active {
        transform: scale(0.95);
    }
}

/* =========================================
   HOMEPAGE ONLY — COUNTDOWN BREATHING ROOM
   ========================================= */
body.homepage .inline-countdown-banner,
body[data-page="home"] .inline-countdown-banner,
.page-home .inline-countdown-banner,
body:has(.inline-countdown-banner) .inline-countdown-banner {
    margin-bottom: 1rem;
}

/* =========================================
   HOMEPAGE ONLY — MOBILE H1 FULL NAME FIX
   ========================================= */
@media (max-width: 768px) {

    body.homepage .hero h1,
    body[data-page="home"] .hero h1,
    .page-home .hero h1,
    body:has(.inline-countdown-banner) .hero h1 {
        font-size: 1.5rem !important;
        /* Smaller to fit full name */
        line-height: 1.3 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: none;
        max-width: 100%;
        padding: 0 0.5rem;
    }
}

@media (max-width: 480px) {

    body.homepage .hero h1,
    body[data-page="home"] .hero h1,
    .page-home .hero h1,
    body:has(.inline-countdown-banner) .hero h1 {
        font-size: 1.35rem !important;
        /* Even smaller for very small screens */
    }
}

/* =========================================
   HOMEPAGE ONLY — MOBILE COUNTDOWN COMPACT
   ========================================= */
@media (max-width: 768px) {

    /* Two-line centered layout */
    body.homepage .inline-banner-content,
    body[data-page="home"] .inline-banner-content,
    .page-home .inline-banner-content,
    body:has(.inline-countdown-banner) .inline-banner-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.3rem !important;
        padding: 0.5rem 0.5rem !important;
        text-align: center;
    }

    /* Line 1: Icon + Event Name */
    body.homepage .banner-line-1,
    body[data-page="home"] .banner-line-1,
    .page-home .banner-line-1,
    body:has(.inline-countdown-banner) .banner-line-1 {
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }

    body.homepage .inline-countdown-banner .event-icon,
    body[data-page="home"] .inline-countdown-banner .event-icon,
    .page-home .inline-countdown-banner .event-icon,
    body:has(.inline-countdown-banner) .event-icon {
        font-size: 1rem !important;
        flex-shrink: 0;
    }

    body.homepage .inline-countdown-banner .event-label,
    body[data-page="home"] .inline-countdown-banner .event-label,
    .page-home .inline-countdown-banner .event-label,
    body:has(.inline-countdown-banner) .event-label {
        font-size: 0.75rem !important;
    }

    body.homepage .inline-countdown-banner .event-label strong,
    body[data-page="home"] .inline-countdown-banner .event-label strong,
    .page-home .inline-countdown-banner .event-label strong,
    body:has(.inline-countdown-banner) .event-label strong {
        font-size: 0.75rem !important;
    }

    /* Line 2: Countdown + Details */
    body.homepage .banner-line-2,
    body[data-page="home"] .banner-line-2,
    .page-home .banner-line-2,
    body:has(.inline-countdown-banner) .banner-line-2 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    body.homepage .inline-countdown-banner .inline-countdown,
    body[data-page="home"] .inline-countdown-banner .inline-countdown,
    .page-home .inline-countdown-banner .inline-countdown,
    body:has(.inline-countdown-banner) .inline-countdown {
        display: inline-flex !important;
        gap: 0.2rem !important;
        flex-wrap: nowrap !important;
    }

    body.homepage .inline-countdown-banner .banner-link,
    body[data-page="home"] .inline-countdown-banner .banner-link,
    .page-home .inline-countdown-banner .banner-link,
    body:has(.inline-countdown-banner) .banner-link {
        display: inline-block !important;
        font-size: 0.7rem !important;
        padding: 0.2rem 0.5rem !important;
        white-space: nowrap !important;
    }

    body.homepage .inline-countdown-banner .countdown-value,
    body[data-page="home"] .inline-countdown-banner .countdown-value,
    .page-home .inline-countdown-banner .countdown-value,
    body:has(.inline-countdown-banner) .countdown-value {
        font-size: 0.8rem !important;
        padding: 0.15rem 0.25rem !important;
        min-width: 1.6ch !important;
    }

    body.homepage .inline-countdown-banner .countdown-unit,
    body[data-page="home"] .inline-countdown-banner .countdown-unit,
    .page-home .inline-countdown-banner .countdown-unit,
    body:has(.inline-countdown-banner) .countdown-unit {
        font-size: 0.6rem !important;
        margin-right: 0.1rem !important;
    }
}

/* ========================================
   FALLBACK: If body classes not present, 
   apply to index.html by checking for 
   .inline-countdown-banner existence
   ======================================== */
@media (max-width: 768px) {
    body:has(.inline-countdown-banner) .hero {
        padding-top: var(--spacing-md) !important;
    }

    body:has(.inline-countdown-banner) main {
        margin-top: calc(var(--header-height) + var(--countdown-banner-height));
    }
}

/* Body padding handles the offset now (via navigation.js) */
body.homepage main,
body.homepage .hero,
body.homepage #home {
    padding-top: 0;
}

/* Banner positioning handled dynamically by navigation.js */

@media (max-width: 1024px) {

    body:has(.inline-countdown-banner) section[id],
    body:has(.inline-countdown-banner) div[id] {
        scroll-margin-top: calc(var(--header-height) + var(--countdown-banner-height) + 20px);
    }
}

/* =========================================
   HOMEPAGE ONLY — SKIP LINK FIX (MOBILE)
   ========================================= */
@media (max-width: 768px) {

    body.homepage a.skip-to-content,
    body.homepage .skip-link,
    body[data-page="home"] a.skip-to-content,
    body[data-page="home"] .skip-link,
    body:has(.inline-countdown-banner) a.skip-to-content,
    body:has(.inline-countdown-banner) .skip-link {
        position: absolute;
        top: -9999px;
        left: 0;
    }

    body.homepage a.skip-to-content:focus,
    body.homepage .skip-link:focus,
    body[data-page="home"] a.skip-to-content:focus,
    body[data-page="home"] .skip-link:focus,
    body:has(.inline-countdown-banner) a.skip-to-content:focus,
    body:has(.inline-countdown-banner) .skip-link:focus {
        top: 0.5rem;
        left: 0.5rem;
        z-index: 2000;
    }
}

/* =========================================
   HOMEPAGE ONLY — COMMUNITY SPACING & RHYTHM
   ========================================= */
@media (max-width: 768px) {

    /* Tighten the macro container that holds community events */
    .whats-happening-macro {
        padding: 2rem 0 !important;
        background: rgba(0, 0, 0, 0.02);
        /* Subtle separation */
        border-radius: 20px;
        margin: 1rem 0;
    }

    /* Reduce gap between Flip Cards section and Circle Carousel */
    .flip-scroll-section {
        padding-bottom: 2rem !important;
    }

    #circle-hero {
        padding-top: 1rem !important;
        margin-top: 0 !important;
    }

    /* Adjust section display titles for mobile density */
    .section-title-display {
        font-size: 2.25rem !important;
        margin-bottom: 2rem !important;
        padding: 0 1rem;
    }

    /* Tighten the "Join Us" carousel items */
    .glass-halo-card {
        padding: 1.5rem !important;
        margin: 0 1rem;
    }

    .shape-content-wrapper h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Ensure vertical rhythm is consistent */
    section {
        padding: 3.5rem 0 !important;
    }
}

/* Specific iPhone Fix for long Flip-Card scroll height */
@media (max-width: 480px) {
    .flip-sticky-wrapper {
        min-height: auto !important;
    }

    .flip-cards-container {
        gap: 1.5rem !important;
    }
}