/* ================================================================
   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
   ================================================================ */

/* The original hero block is gone: it centred everything with flex and used
   the pre-brand purple gradient. Its replacement is in the HERO section near
   the end of this file. Leaving both in place meant the new rules were fighting
   a stale text-align: center that the cascade kept winning. */

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

.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); }

/* --- 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;
}

/* ================================================================
   BUTTON VARIANTS

   btn-ghost is for secondary actions that should be reachable but not
   compete with the primary one. The composer previously showed five
   equally-weighted buttons, which gives no indication of what to do
   first.
   ================================================================ */

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-ghost:hover {
    background: var(--bg-tint);
    color: var(--text-dark);
    border-color: var(--text-muted);
}

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

body.dark-mode .btn-ghost:hover {
    background: var(--bg-dark-soft);
    color: var(--text-light);
}

.btn-ghost.btn-danger:hover {
    background: rgba(227, 8, 28, 0.08);
    color: var(--brand-red);
    border-color: var(--brand-red);
}

body.dark-mode .btn-ghost.btn-danger:hover {
    background: rgba(255, 90, 99, 0.14);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* ================================================================
   COMPOSER SEND STEPS
   ================================================================ */

.send-steps {
    display: grid;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.send-step {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--spacing-sm);
    align-items: start;
}

.send-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}

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

.send-note {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.send-note code {
    background: rgba(15, 44, 77, 0.08);
    padding: 0.05rem 0.28rem;
    border-radius: 3px;
}

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

.actions-minor {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

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

/* Search result term highlighting */
.article-item mark {
    background: rgba(249, 171, 13, 0.35);
    color: inherit;
    padding: 0 0.12em;
    border-radius: 2px;
    font-weight: 600;
}

body.dark-mode .article-item mark {
    background: rgba(249, 171, 13, 0.3);
    color: var(--text-light);
}

/* ================================================================
   PRONUNCIATION CHIPS
   ================================================================ */

.say {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    white-space: nowrap;
}

.say-text {
    font-weight: 700;
    color: var(--brand-navy);
    white-space: normal;
}

body.dark-mode .say-text { color: var(--primary-color); }

.say-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    flex: 0 0 auto;
    align-self: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--brand-navy);
    font-size: 0.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.12s ease;
}

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

.say-btn:hover {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
    transform: scale(1.08);
}

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

.say-btn.speaking {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
    animation: sayPulse 1s ease-in-out infinite;
}

@keyframes sayPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(227, 8, 28, 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(227, 8, 28, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .say-btn.speaking { animation: none; }
}

.say-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg-tint);
    border-left: 3px solid var(--brand-gold);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

body.dark-mode .say-hint { background: var(--bg-dark-soft); }

/* A list of vocabulary reads better with room to breathe */
.article-body li .say { margin-right: 0.15rem; }

@media print { .say-btn, .say-hint { display: none !important; } }

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

   The old hero said "Your Guide. Your Community. Your Bridge." and
   nothing else. That is a slogan, not an answer: someone landing from a
   WhatsApp group has a specific word in mind, usually NIE or padrón, and
   the page gave them no sign it covered that. This one names the topics,
   states the language, and offers four direct entry points.
   ================================================================ */

.hero {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-xl) var(--spacing-md);
    background:
        radial-gradient(1100px 420px at 12% -10%, rgba(2, 82, 47, 0.10), transparent 60%),
        radial-gradient(900px 420px at 88% 0%, rgba(227, 8, 28, 0.08), transparent 60%),
        var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .hero {
    background:
        radial-gradient(1100px 420px at 12% -10%, rgba(95, 169, 127, 0.16), transparent 60%),
        radial-gradient(900px 420px at 88% 0%, rgba(255, 90, 99, 0.12), transparent 60%),
        var(--bg-dark);
    border-color: var(--border-dark);
}

/* The three-colour bridge ribbon, carried over from the logo */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: 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%);
}

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-xl);
    align-items: center;
}

.hero-content { max-width: 640px; margin: 0; text-align: left; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 var(--spacing-sm);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Bangladesh green and red, then Spanish red and gold */
.hero-flag {
    width: 34px;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        var(--brand-green) 0 45%, var(--brand-red) 45% 72%, var(--brand-gold) 72% 100%);
}

.hero h1 {
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin: 0 0 var(--spacing-sm);
    color: var(--brand-navy);
}

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

.hero-bn {
    color: var(--brand-red);
    font-family: 'Noto Sans Bengali', 'Hind Siliguri', 'Nirmala UI', system-ui, sans-serif;
}

body.dark-mode .hero-bn { color: var(--accent-color); }

.hero-sub {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 var(--spacing-lg);
    max-width: 54ch;
}

body.dark-mode .hero-sub { color: #A9BACB; }

.hero-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.hero-buttons .btn { padding: 0.7rem 1.4rem; font-size: 0.98rem; }

.hero-chips {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.hero-chips-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-right: 0.15rem;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.34rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-dark);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.15s ease;
}

body.dark-mode .hero-chip {
    background: var(--bg-dark-soft);
    color: var(--text-light);
    border-color: var(--border-dark);
}

.hero-chip:hover {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
    transform: translateY(-1px);
}

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

/* --- the at-a-glance panel --- */

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(64px, auto));
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--brand-gold);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(15, 44, 77, 0.07);
}

body.dark-mode .hero-stats {
    background: var(--bg-dark-soft);
    border-color: var(--border-dark);
    border-top-color: var(--brand-gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.hero-stat { text-align: center; }

.hero-stat-n {
    display: block;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-navy);
    font-variant-numeric: tabular-nums;
}

body.dark-mode .hero-stat-n { color: var(--primary-color); }

.hero-stat-l {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

.hero-stat-note {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
}

body.dark-mode .hero-stat-note { border-color: var(--border-dark); }

/* --- responsive --- */

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
        padding: var(--spacing-md);
    }
    .hero-stat-n { font-size: 1.5rem; }
}

@media (max-width: 560px) {
    .hero { padding: var(--spacing-lg) var(--spacing-md); }
    .hero-sub { font-size: 0.98rem; }
    /* Full-width buttons: a thumb should not have to aim on a phone. */
    .hero-buttons { flex-direction: column; align-items: stretch; }
    .hero-buttons .btn { width: 100%; }
    .hero-chips-label { width: 100%; margin-bottom: 0.15rem; }
}

/* ================================================================
   SCROLL TO TOP
   ================================================================ */

.to-top {
    position: fixed;
    right: var(--spacing-md);
    bottom: var(--spacing-md);
    z-index: 850;              /* under the notice banner, over the content */
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--brand-navy);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(15, 44, 77, 0.18);

    /* Hidden by default and kept out of hit testing, so it cannot swallow a
       tap meant for whatever sits underneath it. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

body.dark-mode .to-top {
    background: var(--bg-dark-soft);
    border-color: var(--border-dark);
    color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.to-top:hover {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
    transform: translateY(-2px);
}

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

.to-top:active { transform: translateY(0); }

/* The notice banner sits along the bottom on the first visit, so lift the
   button clear of it while that is on screen. */
body:has(#cookieBanner[style*="block"]) .to-top { bottom: calc(var(--spacing-md) + 120px); }

@media (max-width: 560px) {
    .to-top {
        width: 42px;
        height: 42px;
        right: var(--spacing-sm);
        bottom: var(--spacing-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .to-top { transition: opacity 0.01ms, visibility 0.01ms; transform: none; }
    .to-top.visible { transform: none; }
    .to-top:hover { transform: none; }
}

@media print { .to-top { display: none !important; } }