/* ===============================================================================
   BIBBULLMUN SOVEREIGN NATION ARCHIVE — MASTER SITewide CSS (css/style.css)
   Single Source of Truth Stylesheet for All Website Pages
   =============================================================================== */

:root {
    --ochre: #c86400;
    --deep-red: #8B3A3A;
    --black: #000000;
    --cream: #F5F0E8;
    --white: #FFFFFF;
    --text-dark: #111111;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000000 !important;
    margin: 0;
    padding: 0;
    line-height: 1.7;
    color: #111111 !important;
    overflow-x: visible;
}

/* ===============================================================================
   80% WIDE WHITE CONTENT CONTAINER (MASTER LAYOUT FOR ALL PAGES)
   Applies to .content-container, .content-area, .live-db-essay-container, main, etc.
   =============================================================================== */
.content-container, 
.content-area, 
.live-db-essay-container, 
.main-container-80, 
.container-80 {
    width: 80% !important;
    max-width: none !important;
    margin: 30px auto !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    padding: 45px !important;
    border-radius: 12px !important;
    border: 3px solid #c86400 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45) !important;
    box-sizing: border-box !important;
}

main, .site-main {
    background-color: #000000 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* All Headings Sitewide in Ochre (#c86400) */
h1, h2, h3, h4, h5, h6,
.content-container h1, .content-container h2, .content-container h3, 
.content-container h4, .content-container h5, .content-container h6,
.content-area h1, .content-area h2, .content-area h3,
.content-area h4, .content-area h5, .content-area h6,
.live-db-essay-container h1, .live-db-essay-container h2, .live-db-essay-container h3,
.live-db-essay-container h4, .live-db-essay-container h5, .live-db-essay-container h6,
.text-ochre {
    color: #c86400 !important;
    font-weight: 700;
}

.content-container p, .content-container li, .content-container td, 
.content-container th, .content-container div,
.content-area p, .content-area li, .content-area td,
.content-area th, .content-area div {
    color: #111111 !important;
}

/* Body Content Font Size Adjustment (+1pt) */
.content-container p, .content-container li, .content-container td,
.content-container th, .content-container blockquote,
.content-area p, .content-area li, .content-area td,
.content-area th, .content-area blockquote {
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
}

/* ===============================================================================
   HEADER & BANNER SECTION
   =============================================================================== */
header {
    margin: 0;
    padding: 0;
    width: 100%;
}

header .header-container {
    position: relative;
    text-align: center;
    background: #ffffff;
    border-bottom: 5px solid #8B3A3A;
    width: 100%;
    overflow: hidden;
}

header .banner-section {
    width: 100%;
}

header .site-banner {
    width: 100% !important;
    height: 130px !important;
    object-fit: cover !important;
    object-position: center left !important;
    display: block !important;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 55%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 55%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0) 100%);
}

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

header .season-time-box {
    background: rgba(15, 15, 15, 0.94) !important;
    color: #F5F0E8 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    border: 2px solid #c86400 !important;
    text-align: right !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
    font-family: 'Georgia', 'Times New Roman', serif !important;
    min-width: 180px !important;
}

header .widget-season {
    font-size: 0.9rem !important;
    font-weight: bold !important;
    color: #c86400 !important;
    font-family: 'Georgia', 'Times New Roman', serif !important;
}

header .widget-subdesc {
    font-size: 0.72rem !important;
    color: #e6a86c !important;
    font-style: italic !important;
    font-family: 'Georgia', 'Times New Roman', serif !important;
}

header .widget-time {
    font-size: 0.88rem !important;
    font-weight: bold !important;
    color: #ffffff !important;
    border-top: 1px solid #333333 !important;
    margin-top: 4px !important;
    padding-top: 3px !important;
    letter-spacing: 0.5px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* ===============================================================================
   STICKY MAIN NAVIGATION BAR (BLACK WITH OCHRE BORDER & HOVER)
   =============================================================================== */
.site-nav, .main-menu {
    background-color: #000000 !important;
    border-top: 1px solid #c86400;
    border-bottom: 2px solid #c86400;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
    overflow: visible !important;
}

.nav-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important; flex-wrap: nowrap !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow: visible !important;
}

.nav-menu > li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.nav-menu > li > a {
    display: block !important;
    padding: 14px 18px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    white-space: nowrap !important;
}

.nav-menu > li:hover > a {
    background-color: #8B3A3A !important;
    color: #ffffff !important;
}

/* Submenu Dropdowns - 50% Slower Disappearance (380ms Delay + 500ms Fade) */
.nav-menu li ul {
    display: flex !important;
    flex-direction: column !important;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #000000 !important;
    border: 2px solid #c86400;
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.9);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    min-width: 280px;
    z-index: 100000;
    overflow: visible !important;
    max-height: none !important;
    transition: opacity 0.35s ease 0.35s, visibility 0s ease 0.70s !important;
    pointer-events: none;
}

.nav-menu li:hover > ul {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.15s ease 0s, visibility 0s ease 0s !important;
}

.nav-menu li ul li {
    position: relative !important;
    width: 100% !important;
}

.nav-menu li ul li a {
    display: block !important;
    padding: 8px 18px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    white-space: nowrap !important;
}

.nav-menu li ul li:hover > a {
    background-color: #c86400 !important;
    color: #ffffff !important;
}

/* Level 2 Sub-submenus Flyout to Right */
.nav-menu li ul li ul:not(.grid-2col):not(.grid-column ul) {
    display: flex !important;
    flex-direction: column !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute !important;
    top: -2px !important;
    left: 100% !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    min-width: 300px !important;
    max-width: 92vw !important;
    background-color: #000000 !important;
    border: 2px solid #c86400 !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.98) !important;
    list-style: none !important;
    z-index: 100005 !important;
    overflow: visible !important;
    transition: opacity 0.2s ease 0.1s, visibility 0s ease 0.3s;
}

header .main-menu ul li ul li:hover > ul,
header .main-menu ul li ul li:hover > ul li,
header .main-menu ul li ul li:hover > ul a,
header .main-menu ul li:hover > ul,
.nav-menu li ul li:hover > ul,
.nav-menu li ul li:hover > ul li,
.nav-menu li ul li:hover > ul a,
.nav-menu li:hover > ul {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.15s ease 0s, visibility 0s ease 0s !important;
}

/* 2-Column Grid Submenu */
.grid-2col {
    display: grid !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
    gap: 4px 14px !important;
    min-width: 680px !important;
    width: max-content !important;
    max-width: 92vw !important;
    padding: 8px 14px !important;
    position: absolute !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.98) !important;
    background-color: #000000 !important;
    border: 2px solid #c86400 !important;
    border-radius: 6px !important;
    z-index: 999999 !important;
    height: auto !important;
    max-height: calc(100vh - 180px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: opacity 0.35s ease 0.35s, visibility 0s ease 0.70s !important;
}

header .main-menu > ul > li > ul.grid-2col,
.nav-menu > li > ul.grid-2col {
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
}

header .main-menu ul li ul li ul.grid-2col,
.nav-menu li ul li ul.grid-2col {
    top: -2px !important;
    left: 100% !important;
    right: auto !important;
    margin-left: 0 !important;
}

/* 2-Column Grid Internal Columns & Inner List Reset */
header .main-menu ul.nav-menu li ul.grid-2col li.grid-column,
header .main-menu ul li ul.grid-2col li.grid-column,
.nav-menu li ul.grid-2col li.grid-column,
ul.grid-2col li.grid-column,
.grid-2col .grid-column {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

header .main-menu ul.nav-menu li ul.grid-2col li.grid-column ul,
header .main-menu ul li ul.grid-2col li.grid-column ul,
.nav-menu li ul.grid-2col li.grid-column ul,
ul.grid-2col li.grid-column ul,
.grid-2col .grid-column ul {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    width: 100% !important;
    list-style: none !important;
    left: auto !important;
    top: auto !important;
}

/* UNIVERSAL INSTANT HOVER ENGINE FOR ALL DROPDOWNS & FLYOUTS */
header .main-menu ul li:hover > ul,
header .main-menu ul li:hover > ul li,
header .main-menu ul li:hover > ul a,
header .main-menu ul li ul li:hover > ul,
header .main-menu ul li ul li:hover > ul li,
header .main-menu ul li ul li:hover > ul a,
.nav-menu li:hover > ul,
.nav-menu li:hover > ul li,
.nav-menu li:hover > ul a,
.nav-menu li ul li:hover > ul,
.nav-menu li ul li:hover > ul li,
.nav-menu li ul li:hover > ul a,
.nav-menu li:hover > ul.grid-2col,
.nav-menu li:hover > ul.grid-2col ul,
.nav-menu li:hover > ul.grid-2col li,
.nav-menu li:hover > ul.grid-2col a,
header .main-menu ul li:hover > ul.grid-2col,
header .main-menu ul li:hover > ul.grid-2col ul,
header .main-menu ul li:hover > ul.grid-2col li,
header .main-menu ul li:hover > ul.grid-2col a {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.1s ease 0s, visibility 0s linear 0s !important;
}

.grid-2col li a {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    padding: 6px 10px !important;
    color: #ffffff !important;
    display: block !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.grid-2col li a:hover {
    background-color: #c86400 !important;
    color: #ffffff !important;
}

/* Rightmost Menu Items Flyout Left */
.nav-menu > li.menu-right > ul {
    left: auto !important;
    right: 0 !important;
}

.nav-menu > li.menu-right ul li ul,
.nav-menu > li.menu-right ul.grid-2col {
    left: auto !important;
    right: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* ===============================================================================
   OFFICIAL CULTURAL SENSITIVITY WARNING MODAL (APH STYLE)
   =============================================================================== */
.cultural-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 10, 5, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cultural-modal-overlay.active {
    display: flex !important;
}

.cultural-modal-content {
    background: #ffffff;
    border-radius: 12px;
    max-width: 650px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    border: 2px solid #c86400;
    overflow: hidden;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.cultural-modal-header {
    background: #111111;
    color: #ffffff;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 3px solid #c86400;
}

.cultural-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #f7b731 !important;
    font-weight: 700;
}

.cultural-icon {
    font-size: 1.8rem;
}

.cultural-modal-body {
    padding: 25px;
    color: #222222;
    font-size: 1.05rem;
    line-height: 1.6;
}

.cultural-primary-text {
    font-size: 1.12rem;
    color: #900c3f;
    background: #fff5f5;
    padding: 12px 16px;
    border-left: 4px solid #900c3f;
    border-radius: 4px;
    margin-bottom: 18px;
}

.cultural-note {
    font-size: 0.95rem;
    color: #555555;
    font-style: italic;
    margin-bottom: 0;
}

.cultural-modal-footer {
    padding: 18px 25px;
    background: #f9f9f9;
    border-top: 1px solid #eeeeee;
    text-align: right;
}

.btn-cultural-acknowledge {
    background: #c86400;
    color: #ffffff;
    border: none;
    padding: 12px 28px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(200, 100, 0, 0.3);
}

.btn-cultural-acknowledge:hover {
    background: #a05000;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(200, 100, 0, 0.4);
}

/* ===============================================================================
   AGLC4 FOOTNOTES & BUTTONS STYLING
   =============================================================================== */
.btn-read-more, .btn-outline-dark {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #c86400 !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
}

.btn-read-more:hover, .btn-outline-dark:hover {
    background-color: #8B3A3A !important;
    color: #ffffff !important;
    border-color: #8B3A3A !important;
}

/* ===============================================================================
   CANONICAL AGLC4 INLINE FOOTNOTE BADGE STYLES (23-STATES.PHP OCHRE STANDARD)
   =============================================================================== */
/* Superscript wrapper containers MUST NEVER have borders, backgrounds, or padding (Eliminates Double-Boxing Sitewide) */
sup,
sup.footnote-ref,
sup.footnote-ref-wrap,
sup.ms-1 {
    display: inline !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 1px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
    vertical-align: super !important;
    font-size: smaller !important;
    line-height: 0 !important;
    position: relative !important;
    top: 0 !important;
}

/* Any inner elements inside footnote links must be transparent without borders */
sup a *,
a.footnote-ref *,
a.footnote-badge * {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Canonical Single Ochre Badge (strictly applied to the anchor link) */
sup a.footnote-ref,
sup a.footnote-badge,
a.footnote-ref,
a.footnote-badge,
sup a[href*="-footnotes.php"],
sup a[href*="#fn"],
sup a[href*="#ref"] {
    display: inline-block !important;
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #c86400 !important;
    background-color: #f8f9fa !important;
    border: 1px solid #c86400 !important;
    border-radius: 4px !important;
    padding: 1px 5px !important;
    margin: 0 2px !important;
    text-decoration: none !important;
    vertical-align: baseline !important;
    position: relative !important;
    top: 0 !important;
    transition: all 0.15s ease-in-out !important;
}

/* Standalone footnote anchor links without a parent <sup> maintain superscript baseline offset */
a.footnote-ref:not(sup a),
a.footnote-badge:not(sup a) {
    top: -0.4em !important;
}

sup a.footnote-ref:hover,
sup a.footnote-badge:hover,
a.footnote-ref:hover,
a.footnote-badge:hover,
sup a[href*="-footnotes.php"]:hover,
sup a[href*="#fn"]:hover,
sup a[href*="#ref"]:hover {
    background-color: #c86400 !important;
    color: #ffffff !important;
    border-color: #8c4600 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(200, 100, 0, 0.3) !important;
}