/* ================================================================
   SETUSPAIN - PRODUCTION CSS
   Clean, organized, mobile-first approach
   ================================================================ */

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

:root {
    /* --------------------------------------------------------------
       Brand palette sampled directly from the SetuSpain logo:
       navy bridge #011A30, Bangladesh green #02522F
       Spanish red #E3081C, Spanish gold #F9AB0D
       -------------------------------------------------------------- */
    --brand-navy: #0F2C4D;
    --brand-navy-deep: #071A2F;
    --brand-green: #02522F;
    --brand-green-soft: #40705B;
    --brand-red: #E3081C;
    --brand-gold: #F9AB0D;

    --primary-color: #0F2C4D;   /* navy: links, buttons, structure */
    --secondary-color: #02522F; /* green: secondary accents */
    --accent-color: #E3081C;    /* red: highlights, hover */
    --highlight-color: #F9AB0D; /* gold: badges, underlines */

    --text-dark: #16202B;
    --text-light: #EDF1F5;
    --text-muted: #5B6B7C;
    --bg-dark: #0C1826;
    --bg-dark-soft: #132537;
    --bg-light: #ffffff;
    --bg-tint: #F5F8FA;
    --border-color: #DCE3EA;
    --border-dark: #24384D;
    --success-color: #02522F;
    
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Measured, not guessed: logo 60px + 1.5rem padding top and bottom + 1px
       border. Used by scroll-padding-top and by anything that has to sit clear
       of the header. */
    --nav-h: 109px;

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
}

html {
    scroll-behavior: smooth;
}

/* The navbar is sticky, so an anchor jump scrolls the target to y=0, which is
   underneath it. scroll-padding-top pushes every anchored scroll down by the
   header height plus a little breathing room, which is what makes "Categories",
   "Latest" and the skip link land where the reader expects. */
html {
    scroll-padding-top: calc(var(--nav-h) + var(--spacing-sm));
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
    transition: background-color 0.3s, color 0.3s;
}

/* Dark mode */
body.dark-mode {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ================================================================
   NAVBAR
   ================================================================ */

.navbar {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s;
}

body.dark-mode .navbar {
    background: var(--bg-dark);
    border-bottom-color: #374151;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-img {
    height: 50px;
    width: auto;
    display: block;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: var(--spacing-lg);
    margin: 0;
}

.nav-menu a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: var(--primary-color);
}

/* Theme Button */
.theme-btn {
    background: none;
    border: 2px solid var(--primary-color);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.theme-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

/* Menu Toggle (Mobile) */
.menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    gap: 6px;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: all 0.3s;
}

body.dark-mode .menu-toggle span {
    background: var(--text-light);
}

/* ================================================================
   HERO SECTION
   ================================================================ */

.hero {
    background: linear-gradient(135deg, #2563eb15, #7c3aed15);
    padding: var(--spacing-xl) var(--spacing-md);
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    line-height: 1.2;
}

.hero p {
    font-size: 1.25rem;
    color: #666;
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

body.dark-mode .hero p {
    color: #9ca3af;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ================================================================
   BUTTONS
   ================================================================ */

.btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

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

.btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

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

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
}

/* ================================================================
   CATEGORIES
   ================================================================ */

.categories {
    padding: var(--spacing-xl) var(--spacing-md);
    background: var(--bg-light);
}

body.dark-mode .categories {
    background: #111827;
}

.categories h2,
.latest h2,

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.category-card {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
    text-align: center;
}

body.dark-mode .category-card {
    background: #1f2937;
    border-color: #374151;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

body.dark-mode .category-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.category-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

.category-card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

.category-card p {
    color: #666;
    font-size: 0.95rem;
}

body.dark-mode .category-card p {
    color: #9ca3af;
}

/* ================================================================
   ARTICLES SECTION
   ================================================================ */

.latest {
    padding: var(--spacing-xl) var(--spacing-md);
    background: #f9fafb;
}

body.dark-mode .latest {
    background: #1f2937;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.article-card {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all 0.3s;
}

body.dark-mode .article-card {
    background: #111827;
}

.article-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

body.dark-mode .article-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.article-card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

.article-meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
}

body.dark-mode .article-meta {
    color: #9ca3af;
}

.article-card p {
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.read-more {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.read-more:hover {
    color: var(--secondary-color);
}

/* ================================================================
   FOOTER
   ================================================================ */

.footer {
    background: var(--bg-dark);
    color: var(--text-light);
    padding: var(--spacing-xl) var(--spacing-md);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-section h4 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-md);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-section a {
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid #374151;
    color: #9ca3af;
}

/* ================================================================
   RESPONSIVE DESIGN - MOBILE
   ================================================================ */

@media (max-width: 768px) {
    :root { --nav-h: 89px; }

    .logo-img {
        height: 40px;
    }

    .nav-menu {
        gap: var(--spacing-md);
    }

    .menu-toggle {
        display: flex;
    }

    /* top: 100% pins the panel to the bottom edge of the navbar whatever its
       height turns out to be. The previous value was a hard-coded 70px against
       an 89px navbar, so the panel sat 19px too high and covered the logo. */
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-light);
        flex-direction: column;
        align-items: stretch;
        padding: 0 var(--spacing-lg);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 10px 24px rgba(15, 44, 77, 0.12);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        gap: var(--spacing-md);
    }

    body.dark-mode .nav-menu {
        background: var(--bg-dark);
        border-bottom-color: #374151;
    }

    /* A fixed pixel cap silently clips whatever is added last. This menu grew
       from three items to six and the theme button, 56px past the old 300px
       limit, ended up cut in half. Bounded by the viewport instead, and
       scrollable if it ever outgrows even that. */
    .nav-menu.open {
        max-height: min(75vh, 520px);
        overflow-y: auto;
        padding: var(--spacing-lg);
        overscroll-behavior: contain;
    }

    /* Full-width rows give a proper touch target rather than a text-sized one. */
    .nav-menu li { width: 100%; }

    .nav-menu a {
        display: block;
        padding: var(--spacing-xs) 0;
        min-height: 44px;
        line-height: 44px;
    }

    .nav-menu .theme-btn { margin-top: var(--spacing-xs); }
    .nav-search span { display: inline; }

    .hero {
        padding: var(--spacing-lg) var(--spacing-md);
        min-height: 400px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .category-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-md);
    }

    .categories h2,
    .latest h2,
    .contribute h2 {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    :root { --nav-h: 84px; }

    .logo-img {
        height: 35px;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .categories h2,
    .latest h2,
    .contribute h2 {
        font-size: 1.5rem;
    }
}

/* ================================================================
   COOKIE BANNER
   ================================================================ */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-dark);
    color: var(--text-light);
    padding: var(--spacing-lg);
    z-index: 9999;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.cookie-notice {
    flex: 1;
    min-width: 300px;
}

.cookie-notice a {
    color: var(--primary-color);
    text-decoration: none;
}

.cookie-notice a:hover {
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: var(--spacing-md);
    white-space: nowrap;
}

.cookie-close {
    background: transparent;
    color: var(--text-light);
    border-color: var(--text-light);
}

.cookie-close:hover {
    background: var(--text-light);
    color: var(--bg-dark);
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-actions {
        width: 100%;
    }

    .cookie-actions button {
        flex: 1;
    }

    .cookie-banner {
        padding: var(--spacing-md);
    }
}

/* ================================================================
   LOGO VARIATIONS & STYLING
   ================================================================ */

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.logo:hover {
    opacity: 0.9;
}

.logo-img {
    height: 60px;
    width: auto;
    display: block;
    object-fit: contain;
    object-position: center left;
    transition: filter 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05);
}

/* A real dark-theme asset is swapped in by ThemeManager, so no filter is
   needed here -- brightening a correctly-coloured PNG only washes it out. */
body.dark-mode .logo-img { filter: none; opacity: 1; }

/* Responsive logo sizing */
@media (max-width: 768px) {
    .logo-img {
        height: 50px;
    }
}

@media (max-width: 480px) {
    .logo-img {
        height: 40px;
    }
}

/* ================================================================
   NAVBAR LOGO CONTAINER
   ================================================================ */

/* Smooth transitions */
* {
    transition-property: background-color, color, border-color;
    transition-duration: 0.3s;
}

/* Skip transitions for specific elements to avoid flickering */
.theme-btn,
.btn,
.category-card,
.article-card {
    transition-property: all;
    transition-duration: 0.3s;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible for keyboard navigation */
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ================================================================
   LANGUAGE HANDLING
   Interface chrome stays English; only content marked lang="bn"
   uses the Bangla font stack.
   ================================================================ */

[lang="bn"] {
    font-family: 'Noto Sans Bengali', 'Hind Siliguri', 'SolaimanLipi',
                 'Nirmala UI', 'Shonar Bangla', system-ui, sans-serif;
    line-height: 1.9;
}

.navbar, .footer, .breadcrumb, .cookie-banner,
.article-meta, .article-item-meta, .article-disclaimer, .article-nav {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ================================================================
   BREADCRUMB
   ================================================================ */

.breadcrumb {
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.breadcrumb-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
    color: #6b7280;
}

.breadcrumb a { color: var(--primary-color); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
body.dark-mode .breadcrumb-inner { color: #9ca3af; }

/* ================================================================
   CATEGORY PAGES
   ================================================================ */

.category-header {
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(124,58,237,0.08));
    padding: var(--spacing-xl) 0;
    margin-bottom: var(--spacing-xl);
}

.category-header h1 { font-size: 2.25rem; margin-bottom: var(--spacing-sm); }
.category-header p { color: #4b5563; font-size: 1.05rem; margin: 0; }
body.dark-mode .category-header p { color: #9ca3af; }

.category-main { padding-bottom: var(--spacing-xl); }
.category-main h2 { font-size: 1.4rem; margin-bottom: var(--spacing-lg); }
.category-main .count { color: #6b7280; font-weight: 400; }

.category-count {
    display: inline-block;
    margin-top: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 600;
}

.articles-list { display: grid; gap: var(--spacing-md); }

.article-item {
    display: block;
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.article-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}

.article-item h3 { font-size: 1.3rem; margin: 0 0 var(--spacing-sm); }

.article-item-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    color: #6b7280;
    font-size: 0.85rem;
    margin-bottom: var(--spacing-sm);
}
body.dark-mode .article-item-meta { color: #9ca3af; }

.article-item-desc { margin: 0 0 var(--spacing-sm); }
.read-more-btn { color: var(--primary-color); font-weight: 600; }

.no-articles {
    text-align: center;
    padding: var(--spacing-xl);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: #6b7280;
}
body.dark-mode .no-articles { color: #9ca3af; }

/* ================================================================
   ARTICLE PAGES
   ================================================================ */

.article-container {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

.article-header {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.article-title { font-size: 2rem; line-height: 1.4; margin-bottom: var(--spacing-md); }

.article-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    color: #6b7280;
    font-size: 0.9rem;
}
body.dark-mode .article-meta { color: #9ca3af; }

.article-body h2 { font-size: 1.5rem; margin: var(--spacing-xl) 0 var(--spacing-md); }
.article-body h3 { font-size: 1.2rem; margin: var(--spacing-lg) 0 var(--spacing-sm); }
.article-body p { margin-bottom: var(--spacing-md); }
.article-body ul, .article-body ol { margin: 0 0 var(--spacing-lg) var(--spacing-lg); }
.article-body li { margin-bottom: var(--spacing-xs); }

.info-box, .tip-box, .warning-box {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border-left: 4px solid;
    margin: var(--spacing-lg) 0;
}

.info-box { background: #eff6ff; border-color: #2563eb; }
.tip-box { background: #f0fdf4; border-color: #16a34a; }
.warning-box { background: #fef2f2; border-color: #dc2626; }

.info-box p:last-child,
.tip-box p:last-child,
.warning-box p:last-child { margin-bottom: 0; }

body.dark-mode .info-box { background: rgba(37, 99, 235, 0.12); }
body.dark-mode .tip-box { background: rgba(22, 163, 74, 0.12); }
body.dark-mode .warning-box { background: rgba(220, 38, 38, 0.12); }

.article-source {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.article-disclaimer {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(107, 114, 128, 0.08);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: #4b5563;
}
body.dark-mode .article-disclaimer { color: #9ca3af; }

.article-nav {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-xl);
}

.article-nav .btn { text-decoration: none; display: inline-block; }

@media (max-width: 768px) {
    .article-title { font-size: 1.5rem; }
    .category-header h1 { font-size: 1.75rem; }
}

/* ================================================================
   BRAND THEME OVERRIDES  (logo-derived)
   Loaded last so it wins over earlier generic rules.
   ================================================================ */

/* --- Dark mode surfaces tuned to the navy in the logo --- */
body.dark-mode {
    --primary-color: #7FB0E0;
    --secondary-color: #5FA97F;
    --accent-color: #FF5A63;
    --border-color: var(--border-dark);
    --text-muted: #93A5B8;
    background-color: var(--bg-dark);
}

body.dark-mode .navbar,
body.dark-mode .footer,
body.dark-mode .breadcrumb {
    background: var(--bg-dark-soft);
    border-color: var(--border-dark);
}

body.dark-mode .category-card,
body.dark-mode .article-card,
body.dark-mode .article-item {
    background: var(--bg-dark-soft);
    border-color: var(--border-dark);
}

/* --- Navbar: gold hairline echoes the ribbon in the logo --- */
.navbar {
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 0 rgba(249, 171, 13, 0.35);
}

.nav-menu a {
    color: var(--text-dark);
    font-weight: 500;
}

body.dark-mode .nav-menu a { color: var(--text-light); }
.nav-menu a:hover { color: var(--accent-color); }

/* --- Hero: the three logo colours as a bridge ribbon --- */
.hero {
    background:
        linear-gradient(180deg, rgba(15, 44, 77, 0.05), rgba(255, 255, 255, 0)),
        var(--bg-light);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg,
        var(--brand-green) 0%, var(--brand-green) 33%,
        var(--brand-navy) 33%, var(--brand-navy) 66%,
        var(--brand-red) 66%, var(--brand-red) 100%) 1;
}

body.dark-mode .hero {
    background: linear-gradient(180deg, rgba(127, 176, 224, 0.08), rgba(12, 24, 38, 0));
}

.hero h1 { color: var(--brand-navy); }
body.dark-mode .hero h1 { color: var(--text-light); }

/* --- Buttons --- */
.btn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--brand-navy);
    color: #fff;
    border: 2px solid var(--brand-navy);
}

.btn-primary:hover {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

.btn-secondary {
    background: transparent;
    color: var(--brand-navy);
    border: 2px solid var(--brand-navy);
}

.btn-secondary:hover {
    background: var(--brand-navy);
    color: #fff;
}

body.dark-mode .btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-dark);
}

body.dark-mode .btn-secondary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .btn-secondary:hover {
    background: var(--primary-color);
    color: var(--bg-dark);
}

/* --- Section headings get a gold underline --- */
.categories h2,
.latest h2,
.category-main h2 {
    position: relative;
    padding-bottom: var(--spacing-xs);
}

.categories h2::after,
.latest h2::after,
.category-main h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: var(--brand-gold);
    border-radius: 2px;
}

/* --- Cards --- */
.category-card,
.article-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    border-top: 3px solid var(--brand-navy);
    background: var(--bg-light);
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

.category-card:hover,
.article-card:hover {
    transform: translateY(-3px);
    border-top-color: var(--brand-red);
    box-shadow: 0 8px 22px rgba(15, 44, 77, 0.12);
}

body.dark-mode .category-card:hover,
body.dark-mode .article-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.article-item { border-left: 3px solid var(--brand-green); }
.article-item:hover { border-left-color: var(--brand-red); }

/* --- Category header banner --- */
.category-header {
    background: linear-gradient(135deg,
        rgba(2, 82, 47, 0.10), rgba(15, 44, 77, 0.10) 55%, rgba(227, 8, 28, 0.10));
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .category-header {
    background: linear-gradient(135deg,
        rgba(2, 82, 47, 0.28), rgba(15, 44, 77, 0.28) 55%, rgba(227, 8, 28, 0.20));
}

.category-header h1 { color: var(--brand-navy); }
body.dark-mode .category-header h1 { color: var(--text-light); }

/* --- Content boxes recoloured to brand --- */
.info-box   { background: rgba(15, 44, 77, 0.06);  border-color: var(--brand-navy); }
.tip-box    { background: rgba(2, 82, 47, 0.07);   border-color: var(--brand-green); }
.warning-box{ background: rgba(227, 8, 28, 0.06);  border-color: var(--brand-red); }

body.dark-mode .info-box    { background: rgba(127, 176, 224, 0.12); border-color: var(--primary-color); }
body.dark-mode .tip-box     { background: rgba(95, 169, 127, 0.12);  border-color: var(--secondary-color); }
body.dark-mode .warning-box { background: rgba(255, 90, 99, 0.12);   border-color: var(--accent-color); }

/* --- Footer --- */
.footer {
    background: var(--brand-navy-deep);
    color: var(--text-light);
    border-top: 3px solid var(--brand-gold);
    padding: var(--spacing-xl) 0 var(--spacing-lg);
}

.footer h4 { color: #fff; margin-bottom: var(--spacing-sm); }
.footer p, .footer li { color: #C4D0DC; }
.footer ul { list-style: none; }
.footer a { color: #C4D0DC; text-decoration: none; }
.footer a:hover { color: var(--brand-gold); text-decoration: underline; }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.footer-bottom {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
    font-size: 0.9rem;
}

/* --- Cookie banner --- */
.cookie-banner { background: var(--brand-navy-deep); color: var(--text-light); }
.cookie-banner a { color: var(--brand-gold); }

/* --- Focus visibility (accessibility) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--brand-gold);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- Skip link --- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--brand-navy);
    color: #fff;
    padding: 0.75rem 1rem;
    z-index: 2000;
    border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus { left: 0; }

/* --- Print --- */
@media print {
    .navbar, .footer, .cookie-banner, .article-nav,
    .contribute, .breadcrumb, .menu-toggle { display: none !important; }
    body { color: #000; background: #fff; }
    .article-container { max-width: 100%; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================
   ARTICLE COVER IMAGE (used by posts made in the composer)
   ================================================================ */

.article-cover {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    display: block;
    border-bottom: 3px solid var(--brand-gold);
}

@media (max-width: 768px) {
    .article-cover { max-height: 260px; }
}

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

/* ================================================================
   CONTRIBUTE / COMPOSE ENTRY POINTS
   ================================================================ */

.contribute {
    background: linear-gradient(135deg,
        rgba(2, 82, 47, 0.10), rgba(15, 44, 77, 0.10) 55%, rgba(227, 8, 28, 0.08));
    padding: var(--spacing-xl) 0;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

body.dark-mode .contribute {
    background: linear-gradient(135deg,
        rgba(2, 82, 47, 0.25), rgba(15, 44, 77, 0.25) 55%, rgba(227, 8, 28, 0.16));
    border-color: var(--border-dark);
}

.contribute h2 { margin-bottom: var(--spacing-xs); }
.contribute p {
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto var(--spacing-md);
}
body.dark-mode .contribute p { color: #B6C4D2; }

.footer-cta {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    text-align: center;
}

.footer-cta p { margin: 0; color: #C4D0DC; }

.btn-compose {
    background: var(--brand-gold);
    color: #1a1205;
    border: 2px solid var(--brand-gold);
    padding: 0.6rem 1.2rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-md);
    display: inline-block;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn-compose:hover {
    background: #fff;
    border-color: #fff;
    color: var(--brand-navy-deep);
}

.btn-compose:active { transform: translateY(1px); }

/* ================================================================
   POLICY TABLES
   ================================================================ */

.policy-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0 var(--spacing-lg);
    font-size: 0.9rem;
}

.policy-table th,
.policy-table td {
    border: 1px solid var(--border-color);
    padding: 0.6rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

.policy-table th {
    background: var(--bg-tint);
    font-weight: 700;
}

body.dark-mode .policy-table th { background: var(--bg-dark-soft); }
body.dark-mode .policy-table th,
body.dark-mode .policy-table td { border-color: var(--border-dark); }

.policy-table code {
    font-size: 0.85em;
    background: rgba(15, 44, 77, 0.08);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    word-break: break-all;
}

body.dark-mode .policy-table code { background: rgba(255, 255, 255, 0.1); }

/* Tables scroll rather than overflow on small screens */
@media (max-width: 640px) {
    .policy-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ================================================================
   AD SLOTS
   Reserved height prevents the page jumping when an ad loads, which
   is both a Core Web Vitals problem and an accidental-click problem.
   ================================================================ */

.ad-slot {
    display: block;
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-sm) 0;
    min-height: 100px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.ad-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.ad-slot .adsbygoogle { min-height: 90px; }

/* Keep a clear gap from real links so no one taps an ad by accident */
.ad-slot + *, * + .ad-slot { margin-top: var(--spacing-xl); }

/* ================================================================
   ABOUT / CONTACT / AUTHOR
   ================================================================ */

.author-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0 var(--spacing-lg);
}

.author-card {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand-green);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

body.dark-mode .author-card { border-color: var(--border-dark); border-left-color: var(--secondary-color); }

.author-card h3 { margin-bottom: 0.15rem; font-size: 1.05rem; }

.author-role {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.author-box {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand-gold);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
}

body.dark-mode .author-box { border-color: var(--border-dark); border-left-color: var(--brand-gold); }

.author-box h2 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.author-box p { margin-bottom: var(--spacing-xs); }

.contact-email {
    font-size: 1.3rem;
    font-weight: 700;
    margin: var(--spacing-md) 0 var(--spacing-lg);
    word-break: break-all;
}

.policy-table .table-section {
    background: var(--bg-tint);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.dark-mode .policy-table .table-section { background: var(--bg-dark-soft); }

.policy-table .muted, .muted-note { color: var(--text-muted); font-size: 0.85rem; }

.linklike {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #C4D0DC;
    cursor: pointer;
    text-decoration: none;
}

.linklike:hover { color: var(--brand-gold); text-decoration: underline; }

@media print { .ad-slot { display: none !important; } }

/* Transparent PNG logos: nothing behind them, so no background bleed */
.logo-img {
    background: transparent;
    image-rendering: -webkit-optimize-contrast;
}

.big-404 {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: var(--brand-navy);
}

body.dark-mode .big-404 { color: var(--primary-color); }

.legal-content .big-404 + h2 { margin-top: 0; }

.legal-content.text-center { text-align: center; }

/* ================================================================
   ARTICLE AUDIO PLAYER
   ================================================================ */

.listen {
    --played: 0%;
    margin: var(--spacing-lg) 0 var(--spacing-xl);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand-gold);
    border-radius: var(--radius-md);
    background: var(--bg-tint);
}

body.dark-mode .listen {
    background: var(--bg-dark-soft);
    border-color: var(--border-dark);
    border-left-color: var(--brand-gold);
}

.listen-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    font-size: 0.92rem;
}

.listen-icon { font-size: 1.1rem; }
.listen-title { font-weight: 600; }

.listen-time {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Three states, in order of how the page can actually fail:

   no `js` class          scripting is off or blocked before paint, so the
                          browser's own controls stay visible
   `js`                   scripting is alive, hide the native controls before
                          first paint so they never flash
   `js player-fallback`   main.js never initialised within 4 seconds, or the
                          file failed to load, so put the native controls back  */

.listen-audio { width: 100%; display: block; }
.js .listen-audio { display: none; }
.js.player-fallback .listen-audio { display: block; }

.listen-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: nowrap;
}

.listen-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 40px;
    height: 40px;
    padding: 0 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.dark-mode .listen-btn {
    background: var(--bg-dark);
    color: var(--text-light);
    border-color: var(--border-dark);
}

.listen-btn:hover {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

body.dark-mode .listen-btn:hover {
    background: var(--primary-color);
    color: var(--bg-dark);
    border-color: var(--primary-color);
}

.listen-btn.play {
    min-width: 48px;
    height: 48px;
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
    font-size: 1rem;
}

.listen-btn.play:hover { background: var(--brand-red); border-color: var(--brand-red); }

body.dark-mode .listen-btn.play {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-dark);
}

.btn-num { font-size: 0.62rem; font-weight: 700; }

/* Seek bar. The filled portion is driven by --played from the script. */
.listen-seek {
    flex: 1 1 auto;
    min-width: 60px;
    height: 6px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--brand-red) 0%, var(--brand-red) var(--played),
        var(--border-color) var(--played), var(--border-color) 100%);
    cursor: pointer;
}

body.dark-mode .listen-seek {
    background: linear-gradient(to right,
        var(--primary-color) 0%, var(--primary-color) var(--played),
        var(--border-dark) var(--played), var(--border-dark) 100%);
}

.listen-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brand-navy);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: grab;
}

.listen-seek::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--brand-navy);
    cursor: grab;
}

body.dark-mode .listen-seek::-webkit-slider-thumb { background: var(--primary-color); border-color: var(--bg-dark); }
body.dark-mode .listen-seek::-moz-range-thumb { background: var(--primary-color); border-color: var(--bg-dark); }

.listen-btn.rate { font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.listen-btn.dl { font-size: 1.05rem; }

.listen.is-playing { border-left-color: var(--brand-red); }
body.dark-mode .listen.is-playing { border-left-color: var(--accent-color); }

.listen-error { margin: 0; color: var(--brand-red); font-size: 0.88rem; }

/* On narrow screens drop the least essential buttons rather than wrapping
   into a cramped second row. Speed and download stay reachable from the
   native player if anyone needs them. */
@media (max-width: 560px) {
    .listen-btn.dl { display: none; }
    .listen-btn { min-width: 36px; height: 36px; padding: 0 0.35rem; }
    .listen-btn.play { min-width: 44px; height: 44px; }
}

@media (max-width: 400px) {
    .listen-btn.mute { display: none; }
}

@media print { .listen { display: none !important; } }

/* ================================================================
   SEARCH
   ================================================================ */

.search-main { padding-bottom: var(--spacing-xl); }
.search-hint { color: var(--text-muted); margin-bottom: var(--spacing-md); }

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 620px;
    margin-bottom: var(--spacing-sm);
}

.search-box input {
    width: 100%;
    padding: 0.85rem 2.6rem 0.85rem 1rem;
    font-size: 1.05rem;
    font-family: inherit;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-light);
    color: var(--text-dark);
}

body.dark-mode .search-box input {
    background: var(--bg-dark-soft);
    color: var(--text-light);
    border-color: var(--border-dark);
}

.search-box input:focus { outline: none; border-color: var(--brand-navy); }
body.dark-mode .search-box input:focus { border-color: var(--primary-color); }

.search-box input::-webkit-search-cancel-button { display: none; }

.search-box button {
    position: absolute;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.search-box button:hover { background: var(--bg-tint); color: var(--brand-red); }
body.dark-mode .search-box button:hover { background: var(--bg-dark); }

.search-count {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: var(--spacing-md);
}

.nav-search { display: inline-flex; align-items: center; gap: 0.3rem; }

@media (min-width: 769px) {
    .nav-search span { display: none; }
    .nav-search { font-size: 1.05rem; }
}

/* ================================================================
   RELATED ARTICLES
   ================================================================ */

.related {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

body.dark-mode .related { border-color: var(--border-dark); }

.related h2 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--spacing-sm);
}

.related-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--brand-green);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

body.dark-mode .related-item { border-color: var(--border-dark); border-top-color: var(--secondary-color); }

.related-item:hover {
    transform: translateY(-2px);
    border-top-color: var(--brand-red);
    box-shadow: 0 6px 16px rgba(15, 44, 77, 0.1);
}

.related-cat, .related-meta { font-size: 0.75rem; color: var(--text-muted); }
.related-title { font-weight: 600; line-height: 1.5; }

@media print { .related, .search-box { display: none !important; } }

/* ================================================================
   STICKY HEADER CLEARANCE
   ================================================================ */

#main,
#categories,
#latest,
.article-header,
.category-header,
[id^="related"] {
    scroll-margin-top: calc(var(--nav-h) + var(--spacing-sm));
}

/* The skip link moves focus rather than scrolling, so the browser may place
   the target flush against the top. This keeps it clear of the header. */
#main:focus,
#main:target {
    scroll-margin-top: calc(var(--nav-h) + var(--spacing-sm));
    outline: none;
}

/* Sticky panels inside the page must clear the header too, or they slide
   underneath it as you scroll. */
.compose-wrap > .panel[style*="sticky"],
.listen.is-sticky {
    top: calc(var(--nav-h) + var(--spacing-xs));
}

/* ================================================================
   VERIFIED DATE
   Signals to a reader that someone rechecked the government source,
   which is a different claim from "the file was edited".
   ================================================================ */

.verified-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.verified-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-green);
    flex: 0 0 auto;
}

body.dark-mode .verified-dot { background: var(--secondary-color); }

/* ================================================================
   LEGAL, ABOUT AND CONTACT PAGES

   These had no layout rules at all, so they rendered full-bleed with
   default margins: text ran the entire window width, which on a desktop
   monitor is roughly 200 characters a line. Comfortable reading is
   nearer 65 to 75, and legal text is exactly the kind nobody rereads
   when they lose their place.
   ================================================================ */

.legal-content {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-xl);
    font-size: 1.03rem;
    line-height: 1.75;
}

.legal-content h1 {
    font-size: 2.1rem;
    line-height: 1.25;
    margin-bottom: var(--spacing-xs);
}

.legal-content .last-updated {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--border-color);
}

body.dark-mode .legal-content .last-updated { border-color: var(--border-dark); }

/* Generous space above a heading, tight below it, so each heading reads as
   belonging to the text that follows rather than floating between blocks. */
.legal-content h2 {
    font-size: 1.35rem;
    line-height: 1.35;
    margin: var(--spacing-xl) 0 var(--spacing-sm);
    padding-top: var(--spacing-xs);
    scroll-margin-top: calc(var(--nav-h) + var(--spacing-md));
}

.legal-content h3 {
    font-size: 1.08rem;
    margin: var(--spacing-lg) 0 var(--spacing-xs);
    color: var(--brand-navy);
}

body.dark-mode .legal-content h3 { color: var(--primary-color); }

.legal-content p { margin-bottom: var(--spacing-md); }

.legal-content ul,
.legal-content ol {
    margin: 0 0 var(--spacing-md) 1.35rem;
    padding: 0;
}

.legal-content li { margin-bottom: 0.5rem; }
.legal-content li::marker { color: var(--brand-gold); }

.legal-content a { text-decoration: underline; text-underline-offset: 2px; }

/* First paragraph after the date line carries the summary, so give it weight */
.legal-content .info-box p { font-size: 1.05rem; }

/* --- section anchors --- */

.legal-h2 { position: relative; }

.legal-h2 .anchor {
    position: absolute;
    left: -1.1rem;
    text-decoration: none;
    color: var(--brand-gold);
    opacity: 0;
    transition: opacity 0.2s ease;
    font-weight: 400;
}

.legal-h2:hover .anchor,
.legal-h2 .anchor:focus { opacity: 1; }

/* Never hide the anchor off-screen on narrow viewports */
@media (max-width: 860px) {
    .legal-h2 .anchor { display: none; }
}

/* --- table of contents --- */

.toc {
    margin: var(--spacing-lg) 0 var(--spacing-xl);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-tint);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--brand-navy);
}

body.dark-mode .toc {
    background: var(--bg-dark-soft);
    border-left-color: var(--primary-color);
}

.toc h2 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin: 0 0 var(--spacing-sm);
    padding: 0;
}

.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--spacing-lg);
}

@media (max-width: 620px) {
    .toc-list { columns: 1; }
    .toc { padding: var(--spacing-md); }
}

.toc-list li {
    margin-bottom: 0.4rem;
    break-inside: avoid;
}

.toc-list a {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-dark);
}

body.dark-mode .toc-list a { color: var(--text-light); }
.toc-list a:hover { color: var(--brand-red); text-decoration: underline; }
body.dark-mode .toc-list a:hover { color: var(--accent-color); }

.toc-num {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--brand-gold);
    font-weight: 700;
    padding-top: 0.1rem;
}

/* Highlight the section the reader is currently in */
.toc-list a.current {
    color: var(--brand-red);
    font-weight: 600;
}

body.dark-mode .toc-list a.current { color: var(--accent-color); }

/* --- back to top --- */

.back-to-top {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.88rem;
}

body.dark-mode .back-to-top { border-color: var(--border-dark); }
.back-to-top a { color: var(--text-muted); text-decoration: none; }
.back-to-top a:hover { color: var(--brand-red); text-decoration: underline; }

/* --- 404 is centred and has no contents list --- */

.legal-content.text-center { max-width: 560px; }
.legal-content.text-center ul,
.legal-content.text-center ol { margin-left: 0; list-style-position: inside; }

@media (max-width: 768px) {
    .legal-content {
        padding: var(--spacing-lg) var(--spacing-md);
        font-size: 1rem;
    }
    .legal-content h1 { font-size: 1.7rem; }
    .legal-content h2 { font-size: 1.2rem; }
}

@media print {
    .toc, .back-to-top, .legal-h2 .anchor { display: none !important; }
    .legal-content { max-width: 100%; }
}

/* ================================================================
   ABOUT AND CONTACT SPECIFICS
   ================================================================ */

/* Author cards sit inside the reading column, so a single card should not
   stretch to full width and look like a banner. */
.legal-content .author-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: var(--spacing-md) 0 var(--spacing-lg);
}

.legal-content .author-card {
    background: var(--bg-tint);
    border-color: transparent;
    border-left-width: 3px;
}

body.dark-mode .legal-content .author-card {
    background: var(--bg-dark-soft);
    border-color: transparent;
    border-left-color: var(--secondary-color);
}

/* The contact address is the whole point of the page, so it gets treated as
   an action rather than a line of body text. */
.contact-email {
    display: block;
    margin: var(--spacing-md) 0 var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg,
        rgba(2, 82, 47, 0.08), rgba(15, 44, 77, 0.08) 60%, rgba(227, 8, 28, 0.06));
    border-radius: var(--radius-md);
    border-left: 3px solid var(--brand-gold);
    text-align: center;
}

body.dark-mode .contact-email {
    background: linear-gradient(135deg,
        rgba(2, 82, 47, 0.22), rgba(15, 44, 77, 0.22) 60%, rgba(227, 8, 28, 0.14));
}

.contact-email a {
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--brand-navy);
    word-break: break-word;
}

body.dark-mode .contact-email a { color: var(--primary-color); }
.contact-email a:hover { color: var(--brand-red); text-decoration: underline; }
body.dark-mode .contact-email a:hover { color: var(--accent-color); }

@media (max-width: 480px) {
    .contact-email { padding: var(--spacing-md) var(--spacing-sm); }
    .contact-email a { font-size: 1.05rem; }
}

/* On the contact page each h3 introduces a reason to write, so give them a
   marker that reads as a list of options rather than document sections. */
.legal-content h3 {
    position: relative;
    padding-left: 0.9rem;
}

.legal-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-gold);
}

/* Boxes inside the reading column should breathe more than they do in an
   article, where they interrupt a narrative rather than a reference list. */
.legal-content .info-box,
.legal-content .tip-box,
.legal-content .warning-box {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
}

/* Tables inside the reading column */
.legal-content .policy-table { font-size: 0.88rem; }

/* ================================================================
   LINK COLOURS

   Links had no colour rule anywhere, so they fell back to the browser
   default #0000EE. Against the dark background that is a contrast ratio
   of 1.9:1, where WCAG AA asks for 4.5:1 on body text. It was close to
   unreadable in dark mode and it affected every page, not just these.
   ================================================================ */

a {
    color: var(--brand-navy);
    text-decoration-color: rgba(15, 44, 77, 0.35);
}

a:hover { color: var(--brand-red); text-decoration-color: currentColor; }

body.dark-mode a {
    color: var(--primary-color);
    text-decoration-color: rgba(127, 176, 224, 0.4);
}

body.dark-mode a:hover { color: var(--accent-color); }

/* Elements that carry their own colour must not be overridden by the above. */
.logo, .btn, .nav-menu a, .footer a, .toc-list a,
.article-item, .related-item, .category-card, .article-card,
.skip-link, .listen-btn, .read-more, .read-more-btn {
    text-decoration-color: currentColor;
}