/* 
   Decolonial History App Theme (DHA)
   Vanilla CSS Styling for Premium Aesthetics
*/

:root {
    --bg-dark: #0f172a;
    --bg-darker: #020617;
    --primary: #f59e0b; /* Warm Gold */
    --primary-hover: #d97706;
    --primary-light: #fef3c7;
    --accent: #ef4444; /* Royal Crimson */
    --accent-teal: #14b8a6; /* Soft Teal */
    --text-light: #f8fafc;
    --text-muted: #94a3b8;
    --glass-bg: rgba(30, 41, 59, 0.45);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.35);
    --glass-blur: blur(12px);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   DHA Brand Tokens — Stage 1 design system
   All new rules must reference these variables. No raw hex literals.
   ========================================================================== */
:root {
    /* Core palette */
    --dha-masthead-teal:            #216864;
    --dha-accent-teal:              #6CCFCC;
    /* Small-caps labels on the map wash: #6CCFCC on #256972 is only 3.42:1.
       This lighter tint keeps the accent-teal reading and reaches 4.87:1. */
    --dha-accent-teal-label:        #B5EDEA;
    --dha-nav-navy:                 #0C1125;
    --dha-title-navy:               #1D3243;
    --dha-date-teal:                #217D7C;
    --dha-map-teal:                 #256972;
    --dha-table-teal:               #2F5661;   /* 8.0:1 on #FFFFFF — passes AA */
    --dha-table-teal-even:          #284B55;   /* 9.4:1 on #FFFFFF — passes AA */
    --dha-table-teal-hover:         #3F7480;   /* 5.2:1 on #FFFFFF — passes AA */
    --dha-table-highlight:          #9FE3D2;   /* 12.8:1 on #0C1125 — passes AA */
    --dha-table-highlight-hover:    #BDEFE3;   /* 14.8:1 on #0C1125 — passes AA */
    --dha-text-dark-navy:           #0C1125;
    --dha-text-white:               #FFFFFF;
    --dha-error-red:                #FF6B6B;

    /* Section colours */
    --dha-section-information:      #85A63E;
    --dha-section-sources-tab:      #CF7DA3;
    --dha-section-sources-content:  #DF91B9;
    --dha-section-comments-tab:     #9096E2;
    --dha-section-comments-content: #ABA9E8;
    --dha-section-events:           #D88D70;
    --dha-section-game-tab:         #23706B;
    --dha-section-game-content:     #13232E;

    /* Body copy contrast — checked against section backgrounds */
    --dha-body-on-information:      #0C1125;   /* 6.7:1 on #85A63E — passes AA */
    --dha-body-on-sources:          #0C1125;   /* 7.9:1 on #DF91B9 — passes AA */
    --dha-body-on-comments:         #0C1125;   /* 8.5:1 on #ABA9E8 — passes AA */
    --dha-body-on-events:           #0C1125;   /* 7.1:1 on #D88D70 — passes AA */
    --dha-body-on-game:             #F8FAFC;   /* 15.4:1 on #13232E — passes AA */
}

/* ===== Brand chrome ===== */

/* Masthead band */
.dha-masthead {
    background-color: var(--dha-masthead-teal);
    background-image: url('/images/brand/map_texture.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 0 12px;
    display: flex;
    align-items: center;
    height: 56px;
    overflow: hidden;
}
/* Low-opacity teal wash over the map texture */
.dha-masthead::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(33, 104, 100, 0.85);
    pointer-events: none;
}
.dha-masthead-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.dha-masthead-logo {
    height: calc(56px * 0.72);
    width: auto;
    flex-shrink: 0;
    display: block;
}
.dha-masthead-wordmark {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0;
    overflow: hidden;
    min-width: 0;
}
.dha-wordmark-light {
    color: var(--dha-text-white);
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 300;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    line-height: 1;
    font-family: 'Outfit', sans-serif;
}
.dha-wordmark-bold {
    color: var(--dha-text-white);
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    line-height: 1;
    margin-left: 0.35em;
    font-family: 'Outfit', sans-serif;
}
/* 3px accentTeal hairline below the masthead */
.dha-masthead-hairline {
    height: 3px;
    background-color: var(--dha-accent-teal);
    flex-shrink: 0;
}

/* Nav row */
.dha-nav-row {
    background-color: var(--dha-nav-navy);
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 48px;
    gap: 0;
    position: relative;
    z-index: 100;
}
.dha-nav-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.dha-nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.dha-nav-btn {
    background: none;
    border: none;
    color: var(--dha-text-white);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.dha-nav-btn:hover,
.dha-nav-btn.active {
    color: var(--dha-accent-teal);
}
.dha-nav-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    flex-shrink: 0;
}

/* Nav toggle button */
.dha-nav-toggle {
    background: none;
    border: none;
    color: var(--dha-text-white);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.dha-nav-toggle:hover,
.dha-nav-toggle[aria-expanded="true"] {
    color: var(--dha-accent-teal);
}
.dha-nav-toggle svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    flex-shrink: 0;
}
.dha-nav-toggle .dha-icon-close {
    display: none;
}
.dha-nav-toggle[aria-expanded="true"] .dha-icon-hamburger {
    display: none;
}
.dha-nav-toggle[aria-expanded="true"] .dha-icon-close {
    display: block;
}

/* Collapsible Nav menu panel */
.dha-nav-menu[hidden] {
    display: none !important;
}
.dha-nav-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 260px;
    background-color: var(--dha-nav-navy);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}
@media (max-width: 640px) {
    .dha-nav-menu {
        left: 0;
        right: 0;
        width: 100%;
        min-width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}
.dha-nav-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    color: var(--dha-text-white);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, background-color 0.15s;
    box-sizing: border-box;
}
.dha-nav-menu-item:hover,
.dha-nav-menu-item:focus,
.dha-nav-menu-item.active {
    color: var(--dha-accent-teal);
    background-color: rgba(255, 255, 255, 0.06);
    outline: none;
}
.dha-nav-menu-item.active {
    font-weight: 700;
}
.dha-nav-menu-item svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    flex-shrink: 0;
}
.dha-nav-menu-form {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
}
.dha-nav-menu-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.12);
    margin: 6px 0;
    border: none;
    padding: 0;
}
.dha-nav-menu-heading {
    padding: 8px 18px 4px 18px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}
.dha-nav-locale-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s;
    box-sizing: border-box;
}
.dha-nav-locale-item:hover,
.dha-nav-locale-item:focus {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--dha-accent-teal);
    outline: none;
}
.dha-nav-locale-item.active {
    color: var(--dha-accent-teal);
    font-weight: 700;
}
.dha-nav-locale-item .dha-locale-code {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--dha-text-white);
}
.dha-nav-locale-item.active .dha-locale-code {
    background: rgba(37, 105, 114, 0.4);
    color: var(--dha-accent-teal);
}
.dha-nav-locale-item .dha-locale-name {
    flex: 1;
}
.dha-nav-locale-item .dha-locale-check {
    fill: none;
    stroke: var(--dha-accent-teal);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Map panel */
.dha-map-panel {
    background-color: var(--dha-map-teal);
    background-image: url('/images/brand/map_texture.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 14px 16px;
    text-align: center;
}
.dha-map-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(37, 105, 114, 0.85);
    pointer-events: none;
}
.dha-map-panel-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.dha-map-label {
    color: var(--dha-accent-teal-label);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
}

/* Date bar */
.dha-date-bar {
    display: flex;
    align-items: stretch;
    background-color: var(--dha-date-teal);
    border: 1.5px solid rgba(12, 17, 37, 0.5);
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    min-height: 48px;
    max-width: 360px;
    width: 100%;
}
.dha-date-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    text-align: center;
    flex: 3 1 0;
}
.dha-date-box.month {
    flex: 5 1 0;
}
.dha-date-box-text {
    color: var(--dha-text-white);
    font-weight: 900;
    letter-spacing: 0.03em;
    font-size: clamp(14px, 2.5vw, 20px);
    font-family: 'Outfit', sans-serif;
    word-break: break-word;
}
.dha-date-box.month .dha-date-box-text {
    font-size: clamp(12px, 2vw, 17px);
}
.dha-date-divider {
    width: 1.5px;
    background-color: rgba(12, 17, 37, 0.5);
    align-self: stretch;
    flex-shrink: 0;
}

/* Interactive Date Bar Picker (Home Page Day + Month Picker) */
.dha-date-picker-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 360px;
}

.dha-date-bar.is-picker {
    flex: 1 1 auto;
    max-width: 360px;
}

.dha-date-select {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    text-align: center;
    text-align-last: center;
    flex: 3 1 0;
    background-color: transparent;
    border: none;
    color: var(--dha-text-white);
    font-weight: 900;
    letter-spacing: 0.03em;
    font-size: clamp(14px, 2.5vw, 20px);
    font-family: 'Outfit', sans-serif;
    word-break: break-word;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-height: 48px;
    line-height: 1.2;
    transition: background-color 0.15s ease;
}

.dha-date-select.month {
    flex: 5 1 0;
    font-size: clamp(12px, 2vw, 17px);
}

.dha-date-select.year {
    flex: 3 1 0;
    min-width: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    background-color: transparent;
    border: none;
    color: var(--dha-text-white);
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.dha-date-select.year::-webkit-outer-spin-button,
.dha-date-select.year::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dha-date-select.year::placeholder {
    color: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

.dha-date-select:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.dha-date-select:focus-visible {
    outline: 2px solid var(--dha-accent-teal);
    outline-offset: -2px;
}

.dha-date-select option {
    background-color: var(--dha-title-navy);
    color: var(--dha-text-white);
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    padding: 6px 10px;
}

.dha-date-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dha-date-teal);
    color: var(--dha-text-white);
    border: 1.5px solid rgba(12, 17, 37, 0.5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    height: 48px;
    padding: 0 14px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-smooth, all 0.2s ease);
    white-space: nowrap;
    flex-shrink: 0;
}

.dha-date-submit-btn:hover {
    background-color: var(--dha-accent-teal);
    color: var(--dha-text-dark-navy);
}

.dha-date-submit-btn:focus-visible {
    outline: 2px solid var(--dha-accent-teal);
    outline-offset: -2px;
}

.dha-date-submit-btn.is-js-hidden {
    position: absolute;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: -24px;
    pointer-events: none;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dha-date-submit-btn.is-js-hidden:focus {
    position: static;
    pointer-events: auto;
    margin: 0;
    width: auto;
    height: 48px;
    padding: 0 14px;
    clip: auto;
    overflow: visible;
}

/* Title band */
.dha-title-band {
    background-color: var(--dha-title-navy);
    padding: 12px 16px;
    text-align: center;
    width: 100%;
}
.dha-title-band-text {
    color: var(--dha-text-white);
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.3;
    font-family: 'Outfit', sans-serif;
}

/* Footer */
.dha-footer {
    background-color: var(--dha-map-teal);
    background-image: url('/images/brand/map_texture.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 24px 16px;
    text-align: center;
    margin-top: auto;
}
.dha-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(37, 105, 114, 0.88);
    pointer-events: none;
}
.dha-footer-inner {
    position: relative;
    z-index: 1;
    color: var(--dha-text-white);
    font-size: 0.9rem;
}
.dha-footer-inner a {
    color: var(--dha-accent-teal);
    text-decoration: none;
}
.dha-footer-inner a:hover {
    text-decoration: underline;
}

/* Advertorial slot */
.dha-advertorial {
    /* Empty when no advert — partial renders nothing */
}
.dha-advertorial-label-bar {
    background-color: var(--dha-title-navy);
    padding: 4px 16px;
    text-align: center;
}
.dha-advertorial-label-text {
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.dha-advertorial-image {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* =====  Home table  ===== */
.dha-home-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Outfit', sans-serif;
}
.dha-home-table tr {
    background-color: var(--dha-table-teal);
    transition: background-color 0.15s;
}
.dha-home-table tr:nth-child(even) {
    background-color: var(--dha-table-teal-even);
}
.dha-home-table tr:hover {
    background-color: var(--dha-table-teal-hover);
}
.dha-home-table td {
    padding: 12px 14px;
    color: var(--dha-text-white);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.9rem;
    vertical-align: middle;
}
.dha-home-table td.year-col {
    font-weight: 700;
    white-space: nowrap;
    width: 5em;
}
.dha-home-table td.country-col,
.dha-home-table td.category-col {
    width: 9em;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85); /* 6.3:1 on #2F5661, 7.4:1 on #284B55 — passes AA */
}
.dha-home-table td.country-col a,
.dha-home-table td.category-col a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
}
.dha-home-table td.country-col a:hover,
.dha-home-table td.category-col a:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dha-home-table td.title-col a {
    display: inline-block;
    min-height: 24px;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.5;
}
.dha-home-table td.title-col a:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dha-home-table-wrap {
    border-radius: 0;
    overflow: hidden;
}
/* Responsive: stack on narrow screens */
@media (max-width: 540px) {
    .dha-home-table,
    .dha-home-table thead,
    .dha-home-table tbody,
    .dha-home-table tr,
    .dha-home-table td {
        display: block;
    }
    .dha-home-table thead { display: none; }
    .dha-home-table tr {
        margin-bottom: 4px;
        padding: 4px 0;
    }
    .dha-home-table td {
        padding: 6px 14px;
    }
    .dha-home-table td.year-col { font-size: 1rem; }
}

/* ===== Section tabs ===== */
.dha-section-tabs {
    display: flex;
    min-height: 46px;
    overflow: hidden;
}
.dha-section-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    transition: box-shadow 0.15s;
    position: relative;
    color: var(--dha-text-dark-navy);
}
.dha-section-tab[aria-selected='true'] {
    box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 -3px 0 currentColor;
    z-index: 1;
}
.dha-section-tab:focus-visible {
    outline: 3px solid var(--dha-accent-teal);
    outline-offset: -3px;
}
.dha-section-tab svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dha-section-tab-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: currentColor;
    line-height: 1.2;
}
.dha-section-tab-information { background-color: var(--dha-section-information); }
.dha-section-tab-sources     { background-color: var(--dha-section-sources-tab); }
.dha-section-tab-media    { background-color: var(--dha-section-comments-tab); }
.dha-section-tab-events      { background-color: var(--dha-section-events); }
.dha-section-tab-game        {
    background-color: var(--dha-section-game-tab);
    color: var(--dha-text-white);
}

@media (max-width: 640px) {
    .dha-section-tabs {
        min-height: 46px;
        height: auto;
    }
    .dha-section-tab {
        flex-direction: column;
        gap: 2px;
        padding: 6px 4px;
    }
    .dha-section-tab-label {
        font-size: 0.7rem;
        text-align: center;
        white-space: normal;
        overflow-wrap: break-word;
    }
}

/* Section panels */
.dha-section-panel {
    padding: 20px 16px;
}
.dha-section-panel-information { background-color: var(--dha-section-information); color: var(--dha-body-on-information); }
.dha-section-panel-sources     { background-color: var(--dha-section-sources-content); color: var(--dha-body-on-sources); }
.dha-section-panel-media    { background-color: var(--dha-section-comments-content); color: var(--dha-body-on-comments); }
.dha-section-panel-events      { background-color: var(--dha-section-events); color: var(--dha-body-on-events); }
.dha-section-panel-game        { background-color: var(--dha-section-game-content); color: var(--dha-body-on-game); }

/* Comments alternating rows */
.dha-comment-row:nth-child(even) {
    background-color: rgba(255,255,255,0.12);
}
.dha-comment-row {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 4px;
}

/* Sources icon row */
.dha-sources-icons {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.dha-sources-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1.5px solid rgba(12,17,37,0.3);
    background: rgba(255,255,255,0.2);
    color: var(--dha-nav-navy);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}
.dha-sources-icon-btn:hover {
    background: rgba(255,255,255,0.35);
}
.dha-sources-icon-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dha-sources-text {
    width: 100%;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--dha-nav-navy);
    word-break: break-word;
    white-space: pre-line;
}
.dha-sources-text a {
    display: block;
    color: var(--dha-nav-navy);
    text-decoration: underline;
    font-weight: 600;
}
.dha-sources-text a:hover {
    opacity: 0.75;
}

/* Subscription upsell on section panel */
.dha-section-upsell {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(12,17,37,0.2);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    margin: 12px 0;
}
.dha-section-upsell-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 6px;
}
.dha-section-upsell a {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 18px;
    border-radius: 8px;
    background-color: var(--dha-nav-navy);
    color: var(--dha-text-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Voice player in information panel */
.dha-voice-player {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.dha-voice-player audio {
    height: 36px;
    flex: 1;
    min-width: 200px;
}
.dha-voice-label {
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Home map panel + date bar layout */
.dha-home-chrome {
    margin-bottom: 0;
}

/* Override body background for new layout */
body.dha-layout {
    /* Button surfaces need a darker red than the accent: white on #ef4444 is
       only 3.75:1, below the 4.5:1 AA threshold for a button label. */
    --dha-btn-red:        #dc2626;   /* white on this = 4.83:1 */
    --dha-btn-red-hover:  #b91c1c;   /* white on this = 6.47:1 */
    --dha-btn-navy-hover: #1a2240;
    background: var(--bg-dark);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
    background-attachment: fixed;
    color: var(--text-light);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Glassmorphism utility */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 var(--glass-shadow);
    border-radius: 16px;
    padding: 24px;
    transition: var(--transition-smooth);
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Master Layout Styling */
.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* body.dha-layout is a flex column, where margin:auto makes an item shrink
   to its content - the story page then changed width with every tab. */
body.dha-layout > .app-container {
    width: 100%;
}

/* Header & Navigation Bar */
.app-navbar {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-light);
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Playfair Display', serif;
}

.brand-logo span {
    color: var(--primary);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    transition: var(--transition-smooth);
    font-size: 0.95rem;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--primary);
}

.profile-link {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.profile-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Language Switcher Styling */
.locale-switcher {
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 30px;
    border: 1px solid var(--glass-border);
}

.locale-btn {
    padding: 4px 12px;
    border-radius: 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: var(--transition-smooth);
}

.locale-btn.active {
    background: var(--primary);
    color: var(--bg-darker);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    gap: 8px;
}

.btn-primary {
    background: var(--primary);
    color: var(--bg-darker);
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-light);
    border: 1px solid var(--glass-border);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: var(--bg-darker);
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
}

/* Welcome Page Layout */
.hero-section {
    padding: 80px 0 60px;
    text-align: center;
    background: radial-gradient(circle at center, rgba(245, 158, 11, 0.08) 0%, transparent 60%);
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 20px;
    background: linear-gradient(to right, #ffffff, #f59e0b, #fef3c7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 650px;
    margin: 0 auto 40px;
}

/* Stats / Notifications Panel */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.stat-card {
    text-align: center;
    border-top: 4px solid var(--primary);
}

.stat-val {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    font-family: 'Playfair Display', serif;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* Home Dashboard Page Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    padding: 40px 0;
}

@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.sidebar-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stories-list-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Date centric search selector */
.date-selector-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
    border-left: 5px solid var(--primary);
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.date-input-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.form-control {
    width: 100%;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-light);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-smooth);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

/* Form Dropdown Options Styling for Readability */
select option,
.form-control option,
.admin-input option {
    background-color: #0f172a; /* matches --bg-dark */
    color: #f8fafc; /* matches --text-light */
}

/* Date Range Picker */
input[type="date"].form-control {
    color-scheme: dark;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .6;
    cursor: pointer;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Custom Multiselect */
.custom-multiselect {
    position: relative;
    width: 100%;
    user-select: none;
}

.multiselect-trigger {
    font-size: 0.95rem;
    padding: 10px 16px;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-light);
    transition: var(--transition-smooth);
}

.multiselect-trigger:hover {
    border-color: var(--primary);
}

.multiselect-trigger .selected-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
    color: var(--text-muted);
}

.multiselect-options {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #0f172a;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.multiselect-search {
    width: 100%;
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    margin-bottom: 8px;
    outline: none;
    transition: var(--transition-smooth);
}

.multiselect-search:focus {
    border-color: var(--primary);
}

.multiselect-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-light);
    width: 100%;
}

.multiselect-options label:hover {
    color: var(--primary);
}

.multiselect-checkbox {
    cursor: pointer;
    accent-color: var(--primary);
}

/* Searchable select */
.searchable-select {
    position: relative;
    user-select: none;
    display: inline-block;
    min-width: 220px;
    vertical-align: middle;
}

.searchable-select.is-open {
    z-index: 60;
}

.searchable-select--block,
.form-group .searchable-select,
.date-input-group .searchable-select {
    display: block;
    width: 100%;
    min-width: 0;
}

.searchable-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.searchable-select__trigger {
    width: 100%;
    font-size: 0.95rem;
    padding: 10px 16px;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    color: var(--text-light);
    transition: var(--transition-smooth);
    font-family: inherit;
    line-height: 1.5;
    text-align: left;
    box-sizing: border-box;
    gap: 8px;
}

body.dha-layout .searchable-select__trigger {
    background-color: rgba(2, 6, 23, 0.65);
    border: 1px solid var(--glass-border);
    color: var(--text-light);
}

.searchable-select__trigger:hover,
.searchable-select.is-open .searchable-select__trigger {
    border-color: var(--primary);
}

.searchable-select__trigger:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.date-input-group .searchable-select__trigger {
    font-size: 0.85rem;
    padding: 8px 12px;
}

.searchable-select__selected-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
    color: var(--text-light);
    flex: 1;
}

.searchable-select__caret {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.searchable-select.is-open .searchable-select__caret {
    transform: rotate(180deg);
}

.searchable-select__panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #0f172a;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    z-index: 100;
    max-height: 280px;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
}

.searchable-select.is-open .searchable-select__panel {
    display: block;
}

.searchable-select__search {
    width: 100%;
    font-size: 0.85rem;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    margin-bottom: 8px;
    outline: none;
    transition: var(--transition-smooth);
    box-sizing: border-box;
    font-family: inherit;
}

.searchable-select__search:focus {
    border-color: var(--primary);
}

.searchable-select__options {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.searchable-select__option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-light);
    transition: var(--transition-smooth);
    margin-bottom: 2px;
    user-select: none;
}

.searchable-select__option:hover,
.searchable-select__option.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--primary);
}

.searchable-select__option.is-selected {
    background: rgba(245, 158, 11, 0.15);
    color: var(--primary);
    font-weight: 600;
}

.searchable-select__option.is-selected.is-active {
    background: rgba(245, 158, 11, 0.25);
    color: var(--primary);
}

.searchable-select__option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.searchable-select__no-results {
    padding: 10px 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    list-style: none;
}



/* Category list badges */
.category-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.category-badge {
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.category-badge:hover, .category-badge.active {
    background: var(--primary-light);
    color: var(--bg-darker);
    border-color: var(--primary);
}

/* Story Entry Cards */
.story-card {
    position: relative;
    overflow: hidden;
}

.story-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.story-tag {
    background: rgba(245, 158, 11, 0.15);
    color: var(--primary);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.story-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.story-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--text-light);
}

.story-summary {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--glass-border);
    padding-top: 15px;
    margin-top: 15px;
}

.story-country {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Story Details Page */
.story-header-cover {
    position: relative;
    padding: 60px 40px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    margin-bottom: 30px;
    overflow: hidden;
}

.story-header-cover::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(circle at top right, rgba(245, 158, 11, 0.15), transparent 50%);
    pointer-events: none;
}

.story-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
}

.verification-badge {
    background: rgba(20, 184, 166, 0.15);
    color: var(--accent-teal);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 30px;
}

@media (max-width: 900px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Inline media styling */
.media-container {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.audio-narration-player {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    padding: 10px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.narration-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-left: 10px;
}

.media-embed {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.media-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.media-gallery-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    transition: opacity 0.15s;
}

.media-gallery-thumbs a:hover .media-gallery-thumb {
    opacity: 0.8;
}

/* Detail Interactive Tabs */
.tabs-header {
    display: flex;
    border-bottom: 1.5px solid var(--glass-border);
    gap: 20px;
    margin-bottom: 25px;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 10px 5px;
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
}

.tab-btn.active {
    color: var(--primary);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1.5px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Timeline vertical track */
.timeline-track {
    position: relative;
    padding: 20px 0;
}

.timeline-track::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--primary) 0%, rgba(255,255,255,0.05) 100%);
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
    padding-left: 70px;
}

.timeline-dot {
    position: absolute;
    left: 20px;
    top: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-darker);
    border: 4px solid var(--primary);
    box-shadow: 0 0 10px var(--primary);
    z-index: 2;
}

.timeline-year {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 8px;
}

/* Discussion and Q&A Feed */
.feed-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.feed-item {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 16px;
    border: 1.5px solid var(--glass-border);
}

.feed-item-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.feed-user {
    font-weight: 600;
    color: var(--text-light);
}

.feed-text {
    font-size: 0.95rem;
}

.feed-answer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--glass-border);
    display: flex;
    gap: 10px;
}

.answer-label {
    background: rgba(20, 184, 166, 0.15);
    color: var(--accent-teal);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    align-self: flex-start;
    text-transform: uppercase;
}

/* Quizzes cards */
.quiz-question-card {
    border-top: 4px solid var(--primary);
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.quiz-option-btn {
    width: 100%;
    text-align: left;
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-light);
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 12px;
}

.quiz-option-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.option-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.85rem;
}

.quiz-option-btn:hover .option-letter {
    background: var(--primary);
    color: var(--bg-darker);
}

.quiz-result-box {
    padding: 16px;
    border-radius: 12px;
    margin-top: 15px;
    border: 1px solid;
    animation: fadeIn 0.4s ease;
}

.quiz-result-box.correct {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--accent-teal);
    color: var(--accent-teal);
}

.quiz-result-box.incorrect {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--accent);
    color: #fca5a5;
}

/* Colophon screen (modal or card display) */
.colophon-card {
    border-top: 4px solid var(--accent);
}

/* Alert systems */
.alert {
    padding: 12px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-weight: 500;
    animation: fadeIn 0.4s ease;
}

.alert-success {
    background: rgba(20, 184, 166, 0.15);
    border: 1px solid var(--accent-teal);
    color: var(--accent-teal);
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--accent);
    color: #fca5a5;
}

/* Interactive likes/bookmarks panel */
.story-actions {
    display: flex;
    gap: 10px;
}

.action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-light);
}

.action-btn.active.like {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

.action-btn.active.bookmark {
    background: rgba(20, 184, 166, 0.15);
    border-color: var(--accent-teal);
    color: var(--accent-teal);
}

/* Auth Cards styling */
.auth-container {
    max-width: 480px;
    margin: 80px auto;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* ------------------------------------------------------------------
   Stage 2 — public pages onto the DHA identity.

   The public layout is `body.dha-layout`; the admin layout is not, so
   everything here is scoped to it and the admin dark skin is untouched.
   Rather than rewriting fourteen views by hand, the older skin's own
   variables are repointed at the DHA palette, so every page that uses
   `glass-card`, `story-card`, `story-tag` or the form controls inherits
   the new identity without any change to its markup or behaviour.
   ------------------------------------------------------------------ */

body.dha-layout {
    --bg-dark:        #0f172a;                        /* near-black slate */
    --bg-darker:      #020617;
    /* Text-weight red. #ef4444 as body/link text measures 4.15:1 on the card
       surface, just under AA; #f87171 reads 5.5:1 there. Button surfaces do not
       use this - they use --dha-btn-red, which is darker for white labels. */
    --primary:        #f87171;
    --primary-hover:  #fca5a5;
    --primary-light:  #fee2e2;
    --accent:         #f87171;
    --accent-teal:    var(--dha-accent-teal);
    --text-light:     #f8fafc;
    --text-muted:     #adbccd;                        /* lifted from #94a3b8 for headroom on
                                                        the lighter card surfaces */
    --glass-bg:       rgba(30, 41, 59, 0.7);          /* dark slate translucent surface */
    --glass-border:   rgba(255, 255, 255, 0.08);
    --glass-shadow:   rgba(0, 0, 0, 0.35);

    background-color: var(--bg-dark);
    color: var(--text-light);
}

/* Cards read as dark translucent slate surfaces rather than teal wash. */
body.dha-layout .glass-card,
body.dha-layout .story-card {
    background-color: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}

/* Section headings sit on a titleNavy band, as they do on story detail. */
body.dha-layout .glass-card > h2:first-child,
body.dha-layout .glass-card > h3:first-child {
    color: var(--dha-accent-teal);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

/* Chips/tags pick up the date-box treatment. */
body.dha-layout .story-tag {
    background-color: var(--dha-date-teal);
    color: var(--dha-text-white);
    border-radius: 6px;
}

/* Form controls on slate rather than teal. */
body.dha-layout .form-control,
body.dha-layout input[type="text"],
body.dha-layout input[type="email"],
body.dha-layout input[type="password"],
body.dha-layout input[type="number"],
body.dha-layout input[type="date"],
body.dha-layout input[type="search"],
body.dha-layout select,
body.dha-layout textarea {
    background-color: rgba(2, 6, 23, 0.65);
    border: 1px solid var(--glass-border);
    color: var(--text-light);
}
body.dha-layout .form-control:focus,
body.dha-layout input:focus,
body.dha-layout select:focus,
body.dha-layout textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* Primary action in red family, white text for contrast. */
body.dha-layout .btn-primary {
    background-color: var(--dha-btn-red);
    color: var(--dha-text-white);
    border: none;
    font-weight: 700;
}
body.dha-layout .btn-primary:hover {
    background-color: var(--dha-btn-red-hover);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}
body.dha-layout .btn-outline:hover {
    background-color: var(--primary);
    color: var(--dha-text-white);
}

/* Modifier class: Buttons on section-colored panels (information, sources, comments, events) */
.btn-on-section,
.btn.btn-on-section,
body.dha-layout .btn.btn-on-section,
body.dha-layout .btn-primary.btn-on-section {
    background-color: var(--dha-nav-navy);
    color: var(--dha-text-white);
    border: none;
    font-weight: 600;
    transition: background-color 0.15s, opacity 0.15s;
}
.btn-on-section:hover,
.btn.btn-on-section:hover,
body.dha-layout .btn.btn-on-section:hover,
body.dha-layout .btn-primary.btn-on-section:hover {
    background-color: var(--dha-btn-navy-hover);
    color: var(--dha-text-white);
}


/* Related Events scrollable reading path */
.dha-related-events-scroll {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 6px;
}
.dha-related-events-scroll::-webkit-scrollbar {
    width: 6px;
}
.dha-related-events-scroll::-webkit-scrollbar-track {
    background: rgba(12, 17, 37, 0.08);
    border-radius: 3px;
}
.dha-related-events-scroll::-webkit-scrollbar-thumb {
    background: rgba(12, 17, 37, 0.25);
    border-radius: 3px;
}
.dha-related-story-item {
    border-bottom: 1px solid rgba(12,17,37,0.15);
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    transition: background-color 0.15s;
}
.dha-related-story-item.dha-related-story-current {
    background-color: rgba(12, 17, 37, 0.12);
    border-left: 4px solid var(--dha-nav-navy);
}
.dha-current-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    background-color: var(--dha-nav-navy);
    color: var(--dha-text-white);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* A page header band, reusing the map-panel language for pages that are
   not event-shaped and so carry no date bar. */
.dha-page-panel {
    background-color: var(--dha-map-teal);
    background-image: url('/images/brand/map_texture.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    padding: 22px 16px;
    text-align: center;
    border-bottom: 3px solid var(--dha-accent-teal);
}
.dha-page-panel .dha-page-label {
    color: var(--dha-accent-teal-label);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0;
}
.dha-page-panel .dha-page-sub {
    color: var(--dha-text-white);
    margin: 6px 0 0;
    font-size: 1.15rem;
    font-weight: 600;
}

/* Section-coloured surfaces reused off story detail, so a person's
   related events and a community's discussion match the story page. */
.dha-surface-events   { background-color: var(--dha-section-events);           color: var(--dha-body-on-events); }
.dha-surface-comments { background-color: var(--dha-section-comments-content); color: var(--dha-body-on-comments); }
.dha-surface-information { background-color: var(--dha-section-information);   color: var(--dha-body-on-information); }
.dha-surface-events a, .dha-surface-comments a, .dha-surface-information a { color: var(--dha-text-dark-navy); }

@media (max-width: 640px) {
    .dha-page-panel { padding: 16px 12px; }
    .dha-page-panel .dha-page-sub { font-size: 1rem; }
}

/* ==========================================================================
   Public Pagination
   ========================================================================== */
.dha-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.dha-pagination-bar__summary {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.dha-pagination {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.dha-pagination__info,
.dha-pagination__goto-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.dha-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    border: 1px solid var(--glass-border);
    transition: var(--transition-smooth);
}

.dha-pagination__btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.dha-pagination__btn--active {
    background: var(--accent-teal);
    color: var(--bg-darker);
    border-color: var(--accent-teal);
    font-weight: 700;
}

.dha-pagination__btn--active:hover {
    background: var(--accent-teal);
    color: var(--bg-darker);
}

.dha-pagination__btn--disabled {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    cursor: not-allowed;
    user-select: none;
}

.dha-pagination__btn--disabled:hover {
    background: rgba(255, 255, 255, 0.02);
}

.dha-pagination__goto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.dha-pagination__goto-input {
    width: 70px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--bg-darker);
    border: 1px solid var(--glass-border);
    color: var(--text-light);
    border-radius: 6px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 0.85rem;
    outline: none;
}

.dha-pagination__goto-input:focus {
    border-color: var(--accent-teal);
}

/* Story media panel: image grid and embedded players. */
.dha-media-heading {
    font-size: 1.05rem;
    margin: 0 0 10px;
    color: var(--dha-nav-navy);
}

.dha-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.dha-media-thumb {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
}

.dha-media-thumb img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}

/* 16:9 box so the iframe scales with the column instead of a fixed height. */
.dha-media-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 14px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
}

.dha-media-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.dha-media-link {
    display: inline-block;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--dha-nav-navy);
}

/* Media panel sub-tabs */
.dha-media-subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.dha-media-subtab {
    padding: 7px 14px;
    border: 1px solid rgba(12, 17, 37, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    color: var(--dha-nav-navy);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.dha-media-subtab.is-active {
    background: var(--dha-nav-navy);
    color: #fff;
    border-color: var(--dha-nav-navy);
}

.dha-media-subtab:focus-visible {
    outline: 2px solid var(--dha-accent-teal);
    outline-offset: 2px;
}

/* Keep the footer at the bottom of the viewport on short pages: without this
   it floats up under the content when the page is zoomed out. */
body.dha-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.dha-layout #main-content {
    flex: 1 0 auto;
}

/* ==========================================================================
   Games Player Styling (Quiz & True/False)
   ========================================================================== */

/* Sub-tabs inside Game player */
.dha-game-subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 10px;
    flex-wrap: wrap;
}
.dha-game-subtab {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth, all 0.2s ease);
}
.dha-game-subtab:hover {
    color: var(--text-light, #f8fafc);
    background: rgba(255, 255, 255, 0.12);
}
.dha-game-subtab.is-active,
.dha-game-subtab[aria-selected="true"] {
    background: var(--dha-accent-teal, #6CCFCC);
    color: var(--dha-nav-navy, #0C1125);
    border-color: var(--dha-accent-teal, #6CCFCC);
    font-weight: 700;
}
.dha-game-subtab:focus-visible {
    outline: 2px solid var(--dha-accent-teal, #6CCFCC);
    outline-offset: 2px;
}

/* Guest login hint */

/* Question indicator dots/pills */
.dha-game-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
    align-items: center;
}
.dha-game-dot {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-muted, #94a3b8);
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth, all 0.2s ease);
    font-family: inherit;
}
.dha-game-dot:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--text-light, #f8fafc);
}
.dha-game-dot.is-active {
    border-color: var(--dha-accent-teal, #6CCFCC);
    box-shadow: 0 0 8px rgba(108, 207, 204, 0.4);
    color: var(--text-light, #f8fafc);
}
.dha-game-dot.is-correct {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.6);
    color: #4ade80;
}
.dha-game-dot.is-wrong {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.6);
    color: #f87171;
}

/* Question Card */
.dha-game-card {
    background: var(--glass-bg, rgba(30, 41, 59, 0.45));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    backdrop-filter: var(--glass-blur, blur(12px));
    -webkit-backdrop-filter: var(--glass-blur, blur(12px));
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 8px 32px var(--glass-shadow, rgba(0, 0, 0, 0.35));
    margin-bottom: 20px;
}
.dha-game-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 0.85rem;
    color: var(--text-muted, #94a3b8);
}
.dha-game-question-text {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--text-light, #f8fafc);
    margin-bottom: 20px;
    font-family: inherit;
    font-weight: 600;
}

/* Options Grid */
.dha-game-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
@media (min-width: 640px) {
    .dha-game-options.is-multiple-choice {
        grid-template-columns: 1fr 1fr;
    }
    .dha-game-options.is-true-false {
        grid-template-columns: 1fr 1fr;
    }
}
.dha-game-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-light, #f8fafc);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: var(--transition-smooth, all 0.2s ease);
    width: 100%;
}
.dha-game-option-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--dha-accent-teal, #6CCFCC);
    transform: translateY(-1px);
}
.dha-game-option-btn:focus-visible {
    outline: 2px solid var(--dha-accent-teal, #6CCFCC);
    outline-offset: 2px;
}
.dha-game-option-btn:disabled {
    cursor: default;
    opacity: 0.9;
}
.dha-option-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-light, #f8fafc);
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.dha-option-text {
    flex: 1;
}

/* Option feedback states */
.dha-game-option-btn.is-correct {
    background: rgba(34, 197, 94, 0.25) !important;
    border-color: #22c55e !important;
    color: #86efac !important;
    font-weight: 600;
}
.dha-game-option-btn.is-correct .dha-option-badge {
    background: #22c55e;
    color: #064e3b;
}
.dha-game-option-btn.is-correct-answer {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: #22c55e !important;
    color: #86efac !important;
}
.dha-game-option-btn.is-correct-answer .dha-option-badge {
    background: #22c55e;
    color: #064e3b;
}
.dha-game-option-btn.is-wrong {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}
.dha-game-option-btn.is-wrong .dha-option-badge {
    background: #ef4444;
    color: #450a0a;
}

/* Feedback container */
.dha-game-feedback {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dha-game-feedback-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}
.dha-game-feedback-img {
    max-height: 120px;
    max-width: 160px;
    border-radius: 8px;
    object-fit: contain;
}
.dha-bounce-emoji {
    font-size: 3.5rem;
    display: inline-block;
    animation: dhaBounce 0.6s ease infinite alternate;
}
.dha-shake-emoji {
    font-size: 3.5rem;
    display: inline-block;
    animation: dhaShake 0.5s ease-in-out 2;
}
.dha-games-container [hidden] {
    display: none !important;
}

@keyframes dhaBounce {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-16px) scale(1.15); }
}
@keyframes dhaShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px) rotate(-4deg); }
    40%, 80% { transform: translateX(8px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dha-bounce-emoji,
    .dha-shake-emoji {
        animation: none !important;
    }
}

.dha-game-status-label {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.dha-game-status-label.is-correct {
    color: #4ade80;
}
.dha-game-status-label.is-wrong {
    color: #f87171;
}
.dha-game-explanation-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #94a3b8);
    font-weight: 700;
    margin-bottom: 4px;
}
.dha-game-explanation-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-light, #f8fafc);
    margin: 0;
}

/* Action button strip */
.dha-game-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}
.dha-game-try-again-btn {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid var(--primary, #f59e0b);
    color: #fde68a;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth, all 0.2s ease);
}
.dha-game-try-again-btn:hover {
    background: var(--primary, #f59e0b);
    color: #000;
}
.dha-game-next-btn {
    background: var(--dha-accent-teal, #6CCFCC);
    border: 1px solid var(--dha-accent-teal, #6CCFCC);
    color: var(--dha-nav-navy, #0C1125);
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth, all 0.2s ease);
}
.dha-game-next-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.dha-game-story-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--dha-accent-teal, #6CCFCC);
    text-decoration: underline;
    font-weight: 600;
}

/* Empty states */
.dha-game-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted, #94a3b8);
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
}