/* ==========================================================================
   BIBBULLMUN SOVEREIGN NATION ARCHIVE — MASTER RESPONSIVE STYLESHEET
   Comprehensive Cross-Device Support: 4K TVs, Desktops, Tablets & Mobiles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL BASE RESETS & TOUCH SAFETY
   -------------------------------------------------------------------------- */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    -webkit-text-size-adjust: 100%;
}

/* TV Overscan Safe Area Padding */
body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* Ensure all images and embeds are fluid */
img, svg, video, canvas, iframe {
    max-width: 100% !important;
    height: auto;
}

/* High-Visibility Focus Rings for TV Remote / Keyboard Navigation (10-Foot UI) */
a:focus-visible, 
button:focus-visible, 
input:focus-visible, 
select:focus-visible, 
textarea:focus-visible, 
[tabindex]:focus-visible {
    outline: 3px solid #c86400 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 12px rgba(200, 100, 0, 0.8) !important;
}

/* --------------------------------------------------------------------------
   2. ULTRA-WIDE & SMART TV DISPLAYS (min-width: 2000px: 4K UHD 3840px / 1440p)
   -------------------------------------------------------------------------- */
@media (min-width: 2000px) {
    /* Widen container while maintaining ideal reading line length */
    .content-container, .main-container-80 {
        width: 82% !important;
        max-width: 1600px !important;
        padding: 60px 4% !important;
        margin: 40px auto !important;
    }

    /* TV 10-foot typography scaling */
    body {
        font-size: 1.25rem !important;
    }

    .content-container p, 
    .content-container li, 
    .content-container td, 
    .content-container th, 
    .content-container blockquote,
    .content-container .fs-6 {
        font-size: 1.25rem !important;
        line-height: 1.8 !important;
    }

    .content-container h1, .display-4, .display-5 {
        font-size: 3.2rem !important;
    }

    .content-container h2, .h3 {
        font-size: 2.4rem !important;
    }

    .content-container h3, .h4 {
        font-size: 1.9rem !important;
    }

    .content-container h4, .h5 {
        font-size: 1.5rem !important;
    }

    /* Enlarge TV navigation bar */
    header .main-menu ul li a {
        padding: 18px 24px !important;
        font-size: 1.05rem !important;
    }

    /* Enlarge header banner on large screens */
    header .site-banner {
        height: 170px !important;
    }

    /* TV Remote Focus State Enlargement */
    a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
        outline: 5px solid #c86400 !important;
        outline-offset: 5px !important;
        box-shadow: 0 0 20px rgba(200, 100, 0, 0.9) !important;
    }
}

/* --------------------------------------------------------------------------
   3. LARGE DESKTOP & 1080P TV (1200px to 1999px)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1999px) {
    .content-container, .main-container-80 {
        width: 80% !important;
        max-width: 1250px !important;
        padding: 45px 3% !important;
        margin: 30px auto !important;
    }
}

/* --------------------------------------------------------------------------
   4. TABLETS & SMALL DESKTOPS (768px to 1199px: iPads, Laptops)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
    .content-container, .main-container-80 {
        width: 92% !important;
        max-width: 100% !important;
        padding: 35px 25px !important;
        margin: 20px auto !important;
    }

    header .site-banner {
        height: 120px !important;
    }

    header .header-widget {
        right: 15px !important;
    }

    .header-donate-btn {
        left: 15px !important;
    }

    header .main-menu ul li a {
        padding: 12px 14px !important;
        font-size: 0.82rem !important;
    }
}

/* --------------------------------------------------------------------------
   5. MOBILE PHONES (max-width: 767px: iPhone, Android, Foldables)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Expand content container to 96% to eliminate wasted black side voids */
    .content-container, .main-container-80 {
        width: 96% !important;
        max-width: 100% !important;
        padding: 22px 14px !important;
        margin: 12px auto !important;
        border-radius: 6px !important;
    }

    /* Fluid mobile typography */
    body {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .content-container p, 
    .content-container li, 
    .content-container td, 
    .content-container th, 
    .content-container blockquote,
    .content-container .fs-6 {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .content-container h1, .display-4, .display-5 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    .content-container h2, .h3 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    .content-container h3, .h4 {
        font-size: 1.2rem !important;
    }

    .content-container h4, .h5, .h6 {
        font-size: 1.05rem !important;
    }

    /* Mobile Header & Banner adjustments */
    header .header-container {
        min-height: 90px;
    }

    header .site-banner {
        height: 95px !important;
        object-fit: cover !important;
    }

    /* Reposition Donate button & Season widget to prevent collision */
    .header-donate-btn {
        position: absolute !important;
        top: 50% !important;
        left: 8px !important;
        transform: translateY(-50%) scale(0.8) !important;
        transform-origin: left center !important;
        z-index: 100 !important;
    }

    header .header-widget {
        position: absolute !important;
        top: 50% !important;
        right: 8px !important;
        transform: translateY(-50%) scale(0.82) !important;
        transform-origin: right center !important;
        z-index: 100 !important;
    }

    header .season-time-box {
        padding: 5px 8px !important;
        border-radius: 4px !important;
    }

    header .widget-season {
        font-size: 0.75rem !important;
    }

    header .widget-subdesc {
        display: none !important; /* Hide subdescription on small mobile screens */
    }

    header .widget-time {
        font-size: 0.82rem !important;
    }

    /* Mobile Navigation Menu Toggle Button */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100% !important;
        background-color: #000000 !important;
        color: #c86400 !important;
        border: none !important;
        border-bottom: 3px solid #c86400 !important;
        padding: 12px 16px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        cursor: pointer;
        z-index: 1001;
    }

    .mobile-menu-toggle:hover, .mobile-menu-toggle:focus {
        background-color: #8B3A3A !important;
        color: #ffffff !important;
    }

    /* Collapsible Navigation Menu on Mobile */
    header .main-menu {
        display: none !important;
        flex-direction: column !important;
        position: relative !important;
        width: 100% !important;
        max-height: 75vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    header .main-menu.is-open {
        display: block !important;
    }

    header .main-menu ul.nav-menu {
        flex-direction: column !important;
        width: 100% !important;
    }

    header .main-menu ul.nav-menu > li {
        width: 100% !important;
        border-bottom: 1px solid #222222;
    }

    header .main-menu ul.nav-menu > li > a {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 14px 18px !important;
        font-size: 0.95rem !important;
        white-space: normal !important;
    }

    /* Mobile Submenu Accordions */
    header .main-menu ul.nav-menu li ul,
    .nav-menu li ul:not(.grid-2col),
    .nav-menu > li > ul {
        display: none !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        background-color: #111111 !important;
        border: none !important;
        border-left: 4px solid #c86400 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    header .main-menu ul.nav-menu li.submenu-active > ul,
    header .main-menu ul.nav-menu li.submenu-active > ul.grid-2col {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: static !important;
    }

    header .main-menu ul.nav-menu li ul li a,
    .nav-menu li ul:not(.grid-2col) li a {
        padding: 10px 18px 10px 28px !important;
        font-size: 0.88rem !important;
        white-space: normal !important;
        border-bottom: 1px solid #1a1a1a !important;
    }

    /* Touch-Friendly Footnote Anchors (Reset sup wrappers, style only anchor badges) */
    sup.footnote-ref,
    sup.footnote-ref-wrap,
    sup {
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        padding: 0 !important;
    }

    a.footnote-ref, 
    a.footnote-badge,
    sup a.footnote-ref,
    sup a.footnote-badge,
    sup a[href*="-footnotes.php"],
    sup a[href*="index-footnotes.php"] {
        display: inline-block !important;
        padding: 3px 6px !important;
        margin: 0 2px !important;
        border-radius: 4px !important;
        background-color: rgba(200, 100, 0, 0.12) !important;
        color: #c86400 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        line-height: 1.1 !important;
        min-width: 24px !important;
        text-align: center !important;
    }

    /* Touch-Friendly Backlinks on Footnotes Page */
    .aglc4-footnotes-list a[href*="index.php"] {
        display: inline-block !important;
        padding: 5px 12px !important;
        margin-top: 6px !important;
        border-radius: 4px !important;
        background-color: rgba(200, 100, 0, 0.1) !important;
        font-size: 0.88rem !important;
    }

    /* Mobile Table Usability */
    .table-responsive {
        border-radius: 6px !important;
        box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
        margin-bottom: 1.5rem !important;
    }

    .table-responsive table {
        margin-bottom: 0 !important;
    }

    .table-responsive th, .table-responsive td {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
    }

    /* Stack Figure Action Buttons on Mobile */
    .figure-container .btn {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important;
    }

    /* Cultural Sensitivity Modal Mobile Safety */
    .cultural-modal-content {
        width: 95% !important;
        max-width: 95vw !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        padding: 0 !important;
    }
}

/* Short screens / Mobile Landscape orientation safety */
@media (max-height: 600px) {
    .cultural-modal-content {
        max-height: 94vh !important;
        max-width: 92vw !important;
    }
    .cultural-modal-header {
        padding: 8px 16px !important;
    }
    .cultural-modal-header h2 {
        font-size: 1.1rem !important;
    }
    .cultural-modal-body {
        padding: 10px 16px !important;
        font-size: 0.88rem !important;
    }
    .cultural-primary-text {
        font-size: 0.9rem !important;
        padding: 6px 10px !important;
        margin-bottom: 8px !important;
    }
    .cultural-modal-footer {
        padding: 8px 16px !important;
    }
    .btn-cultural-acknowledge {
        padding: 7px 18px !important;
        font-size: 0.9rem !important;
    }
}

/* --------------------------------------------------------------------------
   6. EXTRA SMALL MOBILES (max-width: 380px: iPhone SE, older Androids)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    .header-donate-btn {
        transform: translateY(-50%) scale(0.7) !important;
        left: 4px !important;
    }

    header .header-widget {
        transform: translateY(-50%) scale(0.72) !important;
        right: 4px !important;
    }

    header .site-banner {
        height: 85px !important;
    }

    .content-container, .main-container-80 {
        padding: 16px 10px !important;
    }
}


/* ==========================================================================
   ENHANCED RESPONSIVE TYPOGRAPHY & TABLES FOR MOBILE & QA AUDIT
   ========================================================================== */

/* Fluid Page Title across all viewports */
.page-title, h1.page-title {
    font-size: clamp(1.5rem, 5.2vw, 3.1rem) !important;
    line-height: 1.15 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
}

.page-subtitle, h2.page-subtitle {
    font-size: clamp(0.95rem, 3.2vw, 1.35rem) !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
}

.monograph-badge {
    font-size: clamp(0.72rem, 2.4vw, 0.9rem) !important;
    letter-spacing: clamp(0.5px, 0.2vw, 1.5px) !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    display: inline-block !important;
}

/* Base table-responsive styling */
.table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 1.5rem !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Visible horizontal scrollbar on touch devices */
.table-responsive::-webkit-scrollbar {
    height: 7px !important;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: #c86400 !important;
    border-radius: 4px !important;
}
.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

/* Mobile specific table adjustments */
@media (max-width: 767px) {
    .page-title, h1.page-title {
        font-size: clamp(1.35rem, 5.8vw, 1.85rem) !important;
        letter-spacing: normal !important;
        padding: 0 4px !important;
    }

    .page-subtitle, h2.page-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        padding: 0 4px !important;
    }

    .monograph-badge {
        font-size: 0.72rem !important;
        padding: 5px 8px !important;
    }

    /* Table mobile formatting: minimum width guarantees columns don't collapse */
    .table-responsive table {
        min-width: 580px !important;
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0 !important;
    }

    .table-responsive th,
    .table-responsive td {
        padding: 6px 8px !important;
        vertical-align: middle !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .table-responsive th {
        font-size: 0.82rem !important;
    }
}


/* ==========================================================================
   MOBILE RESPONSIVE TABLE CARDS (< 768px)
   Transforms rigid multi-column tables into 100% fluid, self-contained cards.
   Guarantees zero horizontal overflow on any mobile viewport (320px - 767px).
   ========================================================================== */
@media (max-width: 767px) {
    /* Container expands to 96% of mobile screen */
    .content-container, 
    .content-area, 
    .live-db-essay-container, 
    .main-container-80, 
    .container-80 {
        width: 96% !important;
        max-width: 100% !important;
        padding: 16px 10px !important;
        margin: 10px auto !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .essay-header, 
    header.essay-header {
        padding: 10px 4px !important;
        margin-bottom: 1.25rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fluid Page Title: Scales smoothly down to 320px viewports without horizontal overflow */
    .page-title, 
    h1.page-title, 
    .content-container h1, 
    .content-container .display-5 {
        font-size: clamp(1.2rem, 5.2vw, 1.75rem) !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 0.65rem !important;
        letter-spacing: normal !important;
    }

    .page-subtitle, 
    h2.page-subtitle, 
    .content-container h2 {
        font-size: clamp(0.85rem, 3.2vw, 1.1rem) !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 1rem !important;
    }

    .monograph-badge {
        font-size: 0.72rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        max-width: 100% !important;
        padding: 4px 8px !important;
        line-height: 1.3 !important;
        display: inline-block !important;
        letter-spacing: 0.5px !important;
    }

    /* Responsive Table to Card Transformation */
    .table-responsive {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
        padding: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    .table-responsive table {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        background: transparent !important;
    }

    .table-responsive thead {
        display: none !important; /* Hide rigid desktop table header on mobile */
    }

    .table-responsive tbody {
        display: block !important;
        width: 100% !important;
    }

    .table-responsive tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 1.1rem !important;
        border: 2px solid #c86400 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .table-responsive tr:hover {
        background-color: #fdfaf6 !important;
    }

    .table-responsive td {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        padding: 7px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f0eae1 !important;
        font-size: 0.92rem !important;
        line-height: 1.45 !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    .table-responsive td:last-child {
        border-bottom: none !important;
        padding-bottom: 2px !important;
    }

    .table-responsive td::before {
        content: attr(data-label);
        display: block !important;
        font-weight: 700 !important;
        font-size: 0.76rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        color: #8B3A3A !important;
        margin-bottom: 3px !important;
        width: 100% !important;
    }

    /* Hide the swipe hint since table cards fit 100% on mobile without swiping */
    .table-swipe-hint {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .content-container, 
    .main-container-80 {
        width: 98% !important;
        padding: 12px 6px !important;
        margin: 6px auto !important;
    }

    .page-title, 
    h1.page-title {
        font-size: 1.18rem !important;
    }

    .page-subtitle, 
    h2.page-subtitle {
        font-size: 0.82rem !important;
    }
}