/* ==========================================================================
   Halaba Zone Prosperity Party — Premium Desktop Layer
   --------------------------------------------------------------------------
   Every rule in this file lives inside @media (min-width: 992px). Nothing
   here can touch phones or tablets — public.css / events.css / chat.css
   render exactly as before below that width. This file only re-presents
   the SAME markup once the screen is wide enough to be a real desktop.

   Design language — "Civic Ribbon":
   Ethiopian ceremonial dress and church vestments use a woven trim of small
   repeating triangles (tibeb) in a band of colour along an edge — a detail
   that says "this belongs to something," not decoration for its own sake.
   That band, redrawn as a thin repeating-gradient triangle strip in the
   brand's own blue/gold/green, is this layer's one recurring signature:
   under the hero, under section headings, along the footer. It appears
   exactly three times per page, never as wallpaper.

   Load order: linked last, after public.css/events.css/chat.css, so these
   rules win on specificity ties without !important.
   ========================================================================== */

/* New desktop-only nav, duplicated inline inside the header next to the office
   name (see includes/header.php). Hidden by default so phones/tablets are
   completely unaffected — mirrors the existing ".desktop-nav { display:none }"
   pattern in public.css. Only revealed inside the min-width:992px block below. */
.app-header-nav { display: none; }

@media (min-width: 992px) {

    :root {
        --hp-canvas: #eef2f7;
        --hp-ink: #14212f;
        --hp-ink-soft: #4d5c6d;
        --hp-line: rgba(6, 48, 92, 0.09);
        --hp-card-shadow: 0 1px 2px rgba(6, 48, 92, 0.05), 0 10px 28px rgba(6, 48, 92, 0.07);
        --hp-card-shadow-hover: 0 6px 14px rgba(6, 48, 92, 0.08), 0 22px 40px rgba(6, 48, 92, 0.14);
        --hp-radius-lg: 22px;
        --hp-radius-md: 16px;
    }

    body.dark-mode {
        --hp-canvas: #0b1420;
        --hp-ink: #eef2f7;
        --hp-ink-soft: #9db0c4;
        --hp-line: rgba(255, 255, 255, 0.08);
        --hp-card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px rgba(0,0,0,0.35);
        --hp-card-shadow-hover: 0 6px 14px rgba(0,0,0,0.3), 0 22px 44px rgba(0,0,0,0.45);
    }

    html, body { background: var(--hp-canvas); }

    /* --------------------------------------------------------------------
       Civic Ribbon — the signature motif, used sparingly
       -------------------------------------------------------------------- */
    .civic-ribbon {
        height: 6px;
        width: 100%;
        background-image: repeating-linear-gradient(
            135deg,
            var(--hp-secondary) 0, var(--hp-secondary) 6px,
            var(--hp-primary) 6px, var(--hp-primary) 12px,
            var(--hp-green) 12px, var(--hp-green) 18px
        );
        background-size: 300% 100%;
        opacity: 0.9;
    }

    /* ----------------------------------------------------------------
       1. Page skeleton — generous, confident, centred
       ---------------------------------------------------------------- */
    .app-content, .desktop-nav-inner, .site-footer-inner, .site-footer-bottom {
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
    }
    .app-content { padding: 40px 32px 88px; }

    /* public.css sets .app-content { overflow-x: hidden } globally (all breakpoints,
       to guard against accidental horizontal scroll). At desktop widths that
       accidentally turns .app-content into a scroll container, which breaks
       position:sticky on .hp-sidebar below it (sticky ends up "stuck" relative
       to a container that never itself scrolls, so it never visibly moves).
       Restoring normal (visible) overflow here — desktop-only — fixes that
       without touching the mobile/tablet safeguard at all. */
    .app-content { overflow-x: visible; }

    .hp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
    .hp-sidebar {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* Nav is now merged into the header (single row), so the sidebar only
           needs to clear the header's own height, not header + nav. */
        top: 88px;
    }
    .hp-sidebar::after {
        content: "";
        display: block;
        height: 90px;
        border-radius: var(--hp-radius-md);
        background-image: repeating-linear-gradient(
            135deg,
            rgba(11, 83, 158, 0.04) 0 16px,
            rgba(245, 218, 7, 0.05) 16px 32px,
            rgba(22, 122, 66, 0.04) 32px 48px
        );
    }

    /* ----------------------------------------------------------------
       2. Header + nav — quiet chrome, one confident accent
       ---------------------------------------------------------------- */
    .app-header {
        padding: 12px 32px;
        box-shadow: 0 1px 0 rgba(0,0,0,0.06);
        /* No position override here: the base rule in public.css already sets
           position: sticky, which — like relative/absolute/fixed — establishes
           a positioning context, so the absolutely-centered nav below anchors
           to it just fine without needing to downgrade it to `relative` (which
           would silently break the sticky/pinned header on scroll). */
    }
    .app-logo { width: 40px; height: 40px; flex-shrink: 0; }
    .app-title {
        font-size: 0.95rem;
        line-height: 1.28;
        letter-spacing: 0.01em;
        max-width: 380px;
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .app-header { flex-wrap: nowrap; }
    .app-header > .d-flex:first-child { min-width: 0; flex-shrink: 1; }
    .app-header > .d-flex:last-child { flex-shrink: 0; }

    /* The old standalone nav row is retired on desktop — its links now live
       centred in the header, between the office brand and the action icons.
       Markup is left in place (harmless, unused) purely so nothing else that
       might reference it breaks; it simply never renders at this width. */
    .desktop-nav { display: none; }

    /* Centred header nav: taken out of the header's flex flow entirely (the
       header markup carries Bootstrap's d-flex/justify-content-between
       utilities, which are !important and can't be reliably overridden with
       display:grid) and absolutely centred instead. This keeps it visually
       centred no matter how long the office name is or how many icons sit
       on the right, since it no longer competes for flex space with either
       side. */
    .app-header-nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        gap: 2px;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 999px;
        padding: 4px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 10px rgba(0,0,0,0.10);
    }
    .app-header-nav a {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 9px 16px;
        border-radius: 999px;
        font-size: 0.86rem;
        font-weight: 600;
        color: rgba(255,255,255,0.72);
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.15s ease, background-color 0.15s ease;
    }
    .app-header-nav a i { font-size: 0.98rem; }
    .app-header-nav a:hover { color: #fff; background: rgba(255,255,255,0.10); }
    .app-header-nav a.active { color: var(--hp-dark); background: var(--hp-secondary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
    .app-header-nav .desktop-nav-avatar { width: 20px; height: 20px; }

    /* ----------------------------------------------------------------
       3. Hero — the thesis statement
       ---------------------------------------------------------------- */
    .welcome-hero {
        border-radius: var(--hp-radius-lg);
        padding: 0;
        margin-bottom: 0;
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        align-items: stretch;
        min-height: 340px;
        background:
            radial-gradient(900px 380px at 8% -20%, rgba(245, 218, 7, 0.16), transparent 60%),
            radial-gradient(700px 500px at 100% 120%, rgba(0, 0, 0, 0.22), transparent 60%),
            linear-gradient(135deg, var(--hp-dark) 0%, var(--hp-primary) 58%, #1583cf 130%);
        box-shadow: 0 28px 64px rgba(6, 48, 92, 0.32);
        text-align: left;
        border: 1px solid rgba(255,255,255,0.08);
    }
    .welcome-hero-glow { display: none; }
    .welcome-hero > .welcome-hero-logo,
    .welcome-hero > .welcome-hero-title,
    .welcome-hero > .welcome-hero-tag,
    .welcome-hero > .welcome-hero-about,
    .welcome-hero > .welcome-hero-actions {
        grid-column: 1;
        margin-left: 0;
        text-align: left;
        position: relative;
        z-index: 2;
    }
    .welcome-hero { padding: 54px 0 0 56px; }

    /* Thin civic-ribbon accent running down the left edge of the text block —
       ties the hero back to the site's recurring tibeb motif without adding
       another full ribbon strip. */
    .welcome-hero::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        z-index: 2;
        background-image: repeating-linear-gradient(
            180deg,
            var(--hp-secondary) 0, var(--hp-secondary) 10px,
            var(--hp-primary) 10px, var(--hp-primary) 20px,
            var(--hp-green) 20px, var(--hp-green) 30px
        );
        opacity: 0.9;
    }

    /* Emblem gets its own quiet plinth — a ringed badge rather than a bare logo,
       so it reads as an official seal rather than a loose icon. */
    .welcome-hero-logo {
        width: 66px;
        height: 66px;
        margin: 0 0 22px;
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.35),
            0 0 0 7px rgba(255,255,255,0.07),
            0 10px 22px rgba(0,0,0,0.28);
    }

    /* Eyebrow kicker above the title — a small gold rule, not invented copy. */
    .welcome-hero-title {
        font-size: 2.3rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        line-height: 1.14;
        max-width: 580px;
        padding-top: 14px;
        text-shadow: 0 2px 18px rgba(0,0,0,0.18);
    }
    .welcome-hero-title::before {
        content: "";
        display: block;
        width: 46px;
        height: 4px;
        border-radius: 3px;
        background: var(--hp-secondary);
        margin-bottom: 16px;
    }
    .welcome-hero-tag {
        margin-bottom: 16px;
        margin-top: 10px;
        font-size: 1.02rem;
        font-weight: 500;
        color: rgba(255,255,255,0.88);
    }
    .welcome-hero-about {
        font-size: 0.98rem;
        max-width: 480px;
        opacity: 0.92;
        color: rgba(255,255,255,0.82);
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,0.14);
    }
    .welcome-hero-actions { justify-content: flex-start; padding-right: 40px; margin-top: 14px; padding-bottom: 46px; gap: 14px; }
    .hero-btn { padding: 13px 24px; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
    .hero-btn-solid:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.2); }
    .hero-btn-outline { border-color: rgba(255,255,255,0.4); backdrop-filter: blur(2px); }
    .hero-btn-outline:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.7); }

    /* Right-hand panel: an "official seal" motif — concentric rings, the
       ribbon texture, plus a large soft watermark of the office emblem
       bleeding into the blue, built to feel engraved rather than pasted on. */
    .welcome-hero::after {
        content: "";
        grid-column: 2;
        display: block;
        position: relative;
        z-index: 1;
        background-image:
            radial-gradient(circle at 74% 50%, transparent 188px, rgba(255,255,255,0.14) 189px, rgba(255,255,255,0.14) 190px, transparent 191px),
            radial-gradient(circle at 74% 50%, transparent 228px, rgba(255,255,255,0.06) 229px, rgba(255,255,255,0.06) 230px, transparent 231px),
            radial-gradient(circle at 34% 38%, rgba(255,255,255,0.09) 0, transparent 46%),
            repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 34px);
    }

    /* Large faint watermark of the office logo, rendered as a soft white
       silhouette and blended into the gradient — the "combined with the
       blue background" seal effect, sitting behind the ring and the text. */
    .welcome-hero-watermark {
        display: block;
        position: absolute;
        top: 52%;
        right: 2%;
        width: 400px;
        height: 400px;
        transform: translateY(-50%) rotate(-4deg);
        object-fit: contain;
        opacity: 0.28;
        filter: brightness(0) invert(1);
        pointer-events: none;
        z-index: 0;
    }

    /* ----------------------------------------------------------------
       4. Stat strip — sits as a floating bar bridging the hero
       ---------------------------------------------------------------- */
    .stat-strip {
        margin-top: -34px;
        margin-bottom: 30px;
        margin-left: 40px;
        margin-right: 40px;
        position: relative;
        z-index: 2;
        border-radius: var(--hp-radius-md);
        box-shadow: var(--hp-card-shadow-hover);
        padding: 22px 12px;
    }
    .stat-item { transition: transform 0.2s ease; }
    .stat-strip:hover .stat-item { opacity: 0.55; }
    .stat-strip .stat-item:hover { opacity: 1; transform: translateY(-3px); }
    .stat-num { font-size: 1.7rem; }

    /* ----------------------------------------------------------------
       5. Section rhythm — the ribbon reappears under each heading
       ---------------------------------------------------------------- */
    .section-title {
        font-size: 1.2rem;
        padding-bottom: 12px;
        margin-bottom: 20px;
        border-bottom: none;
        position: relative;
    }
    .section-title::after {
        content: "";
        position: absolute;
        left: 0; bottom: 0;
        width: 56px; height: 4px;
        border-radius: 3px;
        background-image: repeating-linear-gradient(
            135deg,
            var(--hp-secondary) 0, var(--hp-secondary) 5px,
            var(--hp-primary) 5px, var(--hp-primary) 10px,
            var(--hp-green) 10px, var(--hp-green) 15px
        );
    }
    .section-link { font-weight: 600; }

    /* ----------------------------------------------------------------
       6. Next-event spotlight
       ---------------------------------------------------------------- */
    .event-spotlight {
        border-radius: var(--hp-radius-md);
        padding: 22px 26px;
        box-shadow: var(--hp-card-shadow);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .event-spotlight:hover { box-shadow: var(--hp-card-shadow-hover); transform: translateY(-2px); }
    .es-title { font-size: 1.05rem; }

    /* ----------------------------------------------------------------
       7. Leadership preview strip (homepage)
       ---------------------------------------------------------------- */
    .leader-scroll {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 18px;
        overflow: visible;
    }
    .leader-mini {
        width: auto;
        padding: 18px 10px;
        border-radius: var(--hp-radius-md);
        border: 1px solid var(--hp-line);
        box-shadow: var(--hp-card-shadow);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .leader-mini:hover { transform: translateY(-4px); box-shadow: var(--hp-card-shadow-hover); }
    .leader-mini-photo { width: 86px; height: 86px; }
    .leader-mini-name { font-size: 0.86rem; white-space: normal; }
    .leader-mini-pos { font-size: 0.76rem; }

    /* ----------------------------------------------------------------
       8. Search + filter pills
       ---------------------------------------------------------------- */
    .search-bar-wrap input { padding-top: 12px; padding-bottom: 12px; }
    .filter-pill { padding: 8px 18px; font-size: 0.86rem; }
    .filter-pill:hover { background: rgba(11,83,158,0.08); }

    /* ----------------------------------------------------------------
       9. News feed cards (fb-post) — the main reading column
       ---------------------------------------------------------------- */
    .fb-post {
        border-radius: var(--hp-radius-md);
        box-shadow: var(--hp-card-shadow);
        border: 1px solid var(--hp-line);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
        overflow: hidden;
    }
    .fb-post:hover { box-shadow: var(--hp-card-shadow-hover); transform: translateY(-2px); }
    .fb-post-header { padding: 16px 20px 8px; }
    .fb-post-header-logo { width: 42px; height: 42px; }
    .fb-post-text { padding-left: 20px; padding-right: 20px; }
    .fb-post-text .title { font-size: 1.08rem; }
    /* Keep the mobile behaviour (whole photo visible, letterboxed) — just taller. Never crop. */
    .fb-post img.cover { height: 440px; object-fit: contain; }
    .fb-actions { padding-left: 20px !important; padding-right: 20px !important; }
    .fb-action-btn { font-size: 0.88rem; }
    .fb-action-btn:hover { background: rgba(11,83,158,0.07); border-radius: 8px; }
    .read-more-btn:hover { text-decoration: underline; }

    .hp-card { border: 1px solid var(--hp-line); box-shadow: var(--hp-card-shadow); }
    .hp-card:hover { box-shadow: var(--hp-card-shadow-hover); }

    .load-more-btn { padding: 12px 28px; }
    .load-more-btn:hover { box-shadow: 0 8px 18px rgba(6,48,92,0.12); }

    /* ----------------------------------------------------------------
       10. Sidebar — sticky companion column
       ---------------------------------------------------------------- */
    .sidebar-card {
        border-radius: var(--hp-radius-md);
        box-shadow: var(--hp-card-shadow);
        border: 1px solid var(--hp-line);
        padding: 20px;
        transition: box-shadow 0.2s ease;
    }
    .sidebar-card:hover { box-shadow: var(--hp-card-shadow-hover); }
    .sidebar-card-title { font-size: 0.98rem; margin-bottom: 12px; }
    .sidebar-link-list a { padding: 8px 4px; border-radius: 8px; transition: background 0.15s ease, padding-left 0.15s ease; }
    .sidebar-link-list a:hover { background: rgba(11,83,158,0.07); padding-left: 10px; }
    .sidebar-fb-btn:hover { filter: brightness(1.06); }

    /* ----------------------------------------------------------------
       11. Leadership page
       ---------------------------------------------------------------- */
    .leadership-hero { padding: 64px 60px; border-radius: var(--hp-radius-lg); }
    .leadership-hero-title { font-size: 2.1rem; }
    .leadership-hero-sub { font-size: 1rem; max-width: 620px; margin-left: auto; margin-right: auto; }

    .leader-spotlight { border-radius: var(--hp-radius-lg); }

    .leader-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
    .leader-card-pro {
        border-radius: var(--hp-radius-md);
        border: 1px solid var(--hp-line);
        box-shadow: var(--hp-card-shadow);
    }
    .leader-card-pro:hover, .leader-card-pro:active {
        transform: translateY(-6px);
        box-shadow: var(--hp-card-shadow-hover);
    }

    /* Full-profile modal: the 440px phone-width sizing left this looking
       like a stray mobile card floating in the middle of a large screen.
       Scale it up properly for desktop and give the header/photo more
       room to breathe rather than just stretching the mobile proportions. */
    .leader-modal-overlay { padding: 32px; }
    .leader-modal-card { width: min(540px, 90vw); max-height: 82vh; border-radius: var(--hp-radius-lg); }
    .leader-modal-banner { height: 150px; }
    .leader-modal-header { padding-bottom: 72px; }
    .leader-modal-photo,
    .leader-modal-photo-fallback { width: 140px; height: 140px; border-width: 5px; }
    .leader-modal-photo-fallback { font-size: 2.8rem; }
    .leader-modal-body { padding: 18px 44px 32px; }
    .leader-modal-name { font-size: 1.5rem; }
    .leader-modal-position { font-size: 0.88rem; padding: 8px 20px; margin-top: 10px; }
    .leader-modal-contact-row { margin-top: 14px; gap: 10px; }
    .leader-modal-contact-chip { font-size: 0.85rem; padding: 7px 16px; }
    .leader-modal-bio-label { margin-top: 20px; font-size: 0.8rem; }
    .leader-modal-bio { font-size: 0.95rem; line-height: 1.75; max-width: 420px; margin-left: auto; margin-right: auto; }
    .leader-modal-close { width: 38px; height: 38px; font-size: 1rem; }

    /* ----------------------------------------------------------------
       12. Events — masonry-style two-up grid
       ---------------------------------------------------------------- */
    .ev-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .ev-card {
        border-radius: var(--hp-radius-md);
        box-shadow: var(--hp-card-shadow);
        border: 1px solid var(--hp-line);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .ev-card:hover { box-shadow: var(--hp-card-shadow-hover); transform: translateY(-3px); }

    /* ----------------------------------------------------------------
       13. Event / news detail pages — read like an official release,
       not a stretched-out social post: a centred reading column, real
       typographic hierarchy, and a proper byline strip.
       ---------------------------------------------------------------- */
    .ev-detail-hero { border-radius: var(--hp-radius-lg); }
    .ev-detail-title { font-size: 1.6rem; }
    .article-cover { border-radius: var(--hp-radius-md); max-height: 560px; object-fit: contain; }
    .gallery-photo { border-radius: 14px; }
    .fb-post-header.rounded-4 { border-radius: var(--hp-radius-md) var(--hp-radius-md) 0 0 !important; }

    .news-article-page {
        max-width: 760px;
        margin: 4px auto 40px;
        background: #fff;
        border-radius: var(--hp-radius-lg);
        border: 1px solid var(--hp-line);
        box-shadow: var(--hp-card-shadow-hover);
        padding: 34px 44px 44px;
    }
    body.dark-mode .news-article-page { background: #101a26; }

    .news-article-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--hp-ink-soft) !important;
        padding: 8px 4px;
        margin-bottom: 4px;
        transition: color 0.15s ease;
    }
    .news-article-back:hover { color: var(--hp-primary) !important; }

    /* Byline strip — office emblem, name, official badge, publish date and
       category, set off from the headline by a rule instead of running the
       social-post card styling straight into the article body. */
    .news-article-header {
        padding: 4px 0 22px !important;
        border-bottom: 1px solid var(--hp-line);
        margin-bottom: 26px;
    }
    .news-article-header .fb-post-header-logo { width: 48px; height: 48px; }
    .news-article-header .fb-post-header-name { font-size: 1rem; color: var(--hp-ink); }
    .news-article-header .fb-post-header-meta { font-size: 0.8rem; }
    .news-article-header .badge-category {
        background: transparent;
        color: var(--hp-primary);
        border: 1px solid rgba(11,83,158,0.3);
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        font-size: 0.66rem;
    }
    body.dark-mode .news-article-header .badge-category { color: var(--hp-secondary); border-color: rgba(245,218,7,0.35); }

    .news-article-title {
        font-size: 2.05rem;
        font-weight: 800;
        line-height: 1.28;
        letter-spacing: -0.01em;
        color: var(--hp-ink);
        margin: 0 0 22px;
    }
    .news-article-body {
        font-size: 1.06rem;
        line-height: 1.85;
        color: var(--hp-ink-soft);
        margin-bottom: 6px;
    }
    .news-article-page .article-cover { margin-top: 26px !important; margin-bottom: 30px !important; box-shadow: var(--hp-card-shadow); }
    .news-article-page .section-title { margin-top: 30px; }

    /* Engagement actions read as a quiet utility bar, not the loud
       edge-to-edge social-app row from the mobile feed. */
    .news-article-page .fb-actions-detail {
        border-top: 1px solid var(--hp-line);
        border-bottom: 1px solid var(--hp-line);
        padding: 10px 0 !important;
        margin: 30px 0 10px !important;
    }
    .news-article-page .fb-action-btn:hover { background: rgba(11,83,158,0.06); border-radius: 8px; }

    .comment-list { max-width: 760px; }

    /* ----------------------------------------------------------------
       14. Profile
       ---------------------------------------------------------------- */
    .profile-hero { border-radius: var(--hp-radius-lg); padding: 40px; }
    .profile-stats-grid { gap: 18px; }
    .profile-stat-card { border-radius: var(--hp-radius-md); box-shadow: var(--hp-card-shadow); }
    .profile-account-card { border-radius: var(--hp-radius-md); box-shadow: var(--hp-card-shadow); }

    /* ----------------------------------------------------------------
       15. Contact
       ---------------------------------------------------------------- */
    .hero-banner { border-radius: var(--hp-radius-lg); padding: 48px; }
    .contact-row { border-radius: var(--hp-radius-md); box-shadow: var(--hp-card-shadow); padding: 18px 20px; transition: box-shadow 0.2s ease, transform 0.2s ease; }
    .contact-row:hover { box-shadow: var(--hp-card-shadow-hover); transform: translateY(-2px); }

    /* ----------------------------------------------------------------
       16. Auth pages — centered card over a full-bleed brand backdrop
       ---------------------------------------------------------------- */
    .auth-wrapper {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        background:
            radial-gradient(700px 340px at 15% 10%, rgba(245,218,7,0.18), transparent 60%),
            linear-gradient(150deg, var(--hp-dark), var(--hp-primary) 70%);
        position: relative;
        overflow: hidden;
    }
    .auth-wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px);
        pointer-events: none;
    }
    .auth-wrapper::after { content: none; }
    .auth-card {
        border-radius: var(--hp-radius-lg, 24px);
        box-shadow: 0 24px 60px rgba(6, 48, 92, 0.35);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 56px 64px;
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        background: #fff;
        position: relative;
        z-index: 1;
    }
    body.dark-mode .auth-card { background: #101a26; }
    .auth-logo { width: 64px; height: 64px; }
    .auth-card .btn-primary-hp { padding: 12px; }

    /* ----------------------------------------------------------------
       17. Chat — desktop keeps the app chrome and centres the thread
             as a tall, rounded messenger panel instead of full-bleed.
       ---------------------------------------------------------------- */
    body.chat-thread-page .app-header { display: flex !important; }
    body.chat-thread-page .app-content { padding-bottom: 40px !important; }
    body.chat-thread-page { overflow: auto !important; }

    .chat-thread-wrap {
        height: calc(100vh - 172px);
        min-height: 560px;
        max-width: 900px;
        margin: 24px auto 0;
        border-radius: var(--hp-radius-lg);
        overflow: hidden;
        box-shadow: var(--hp-card-shadow-hover);
        border: 1px solid var(--hp-line);
    }
    .chat-thread-header { border-radius: var(--hp-radius-lg) var(--hp-radius-lg) 0 0; padding: 18px 22px; }
    .chat-thread-back { display: none; }
    .chat-composer-wrap { padding: 16px 20px; }
    .chat-composer { border-radius: 24px; }

    /* Close button: replaces the (hidden) mobile back-arrow as the way to
       leave the floating thread panel. */
    .chat-thread-close-desktop {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-left: 6px;
        border-radius: 50%;
        color: rgba(255,255,255,0.85);
        font-size: 1rem;
        text-decoration: none;
        flex-shrink: 0;
        transition: color 0.15s ease, background-color 0.15s ease;
    }
    .chat-thread-close-desktop:hover { color: #fff; background: rgba(255,255,255,0.14); }

    .chat-list-page .app-content { max-width: 760px; }
    .chat-empty-state { padding: 80px 20px; }

    /* ----------------------------------------------------------------
       18. Site footer — the ribbon's third and final appearance
       ---------------------------------------------------------------- */
    .site-footer {
        display: block;
        margin-top: 64px;
        background: var(--hp-dark);
        color: rgba(255,255,255,0.82);
    }
    .site-footer-inner {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: 32px;
        padding: 48px 32px 36px;
    }
    .site-footer-brand { display: flex; align-items: flex-start; gap: 14px; }
    .site-footer-logo { width: 48px; height: 48px; border-radius: 50%; background: #fff; padding: 4px; object-fit: contain; }
    .site-footer-name { font-weight: 700; color: #fff; font-size: 1rem; margin-bottom: 4px; }
    .site-footer-tag { font-size: 0.84rem; color: rgba(255,255,255,0.6); max-width: 240px; }
    .site-footer-heading { font-weight: 700; color: #fff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
    .site-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 0.88rem; }
    .site-footer-col a, .site-footer-col span { color: rgba(255,255,255,0.75); text-decoration: none; display: flex; align-items: center; gap: 8px; }
    .site-footer-col a:hover { color: var(--hp-secondary); }
    .site-footer-ribbon { height: 5px; background-image: repeating-linear-gradient(135deg, var(--hp-secondary) 0 6px, var(--hp-primary) 6px 12px, var(--hp-green) 12px 18px); opacity: 0.85; }
    .site-footer-bottom { display: flex; justify-content: space-between; padding: 16px 32px; font-size: 0.78rem; color: rgba(255,255,255,0.5); }

    /* Utility: keyboard focus stays visible everywhere on desktop */
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
        outline: 2px solid var(--hp-primary);
        outline-offset: 2px;
    }
}

/* Between 992-1279px there isn't always room for a long office name + full
   nav labels + header icons on one line — collapse nav labels to icon-only
   with a tooltip until the viewport is wide enough for the full row. Still
   entirely within the min-width:992px desktop territory; phones/tablets
   never reach this rule. */
@media (min-width: 992px) and (max-width: 1279px) {
    .app-title { max-width: 170px; }
    .app-header-nav { gap: 0; }
    .app-header-nav a { padding: 9px 11px; }
    .app-header-nav a span { display: none; }
    .app-header-nav a i { font-size: 1.05rem; }
}

/* Respect reduced-motion preferences on desktop hovers/transitions */
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .fb-post, .ev-card, .leader-card-pro, .sidebar-card, .contact-row, .event-spotlight,
    .leader-mini, .stat-strip .stat-item, .hero-btn-solid {
        transition: none !important;
    }
    .fb-post:hover, .ev-card:hover, .leader-card-pro:hover, .contact-row:hover,
    .event-spotlight:hover, .leader-mini:hover, .load-more-btn:hover {
        transform: none !important;
    }
}