/* ==========================================================================
   PAIKALLISLEHTI - DESIGN SYSTEM & CONTRAST TOKENS
   WCAG AA/AAA High-Contrast Design System for Light & Dark Modes
   ========================================================================== */

:root {
    /* Archivo carries the mark and the headlines: its width axis runs 75-125, so one
       face narrows for a headline and widens for the nameplate. Newsreader sets running
       text, because it was drawn for news. Montserrat and Raleway were geometric
       general-purpose faces and read as "app" rather than "paper". */
    --font-headline: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;

    /* --- Light Theme (Default) --- */
    --color-primary-light: #C1121F;          /* Deep Crimson Red - High Contrast */
    --color-primary-hover-light: #9B0E19;
    --color-secondary-light: #0F172A;        /* Slate 900 - Crisp dark headings */
    --color-accent-light: #D97706;           /* Warm Amber/Gold */
    --color-background-light: #F1F5F9;       /* Slate 100 - Clean modern neutral */
    --color-text-light: #0F172A;             /* Slate 900 - 14:1 contrast ratio */
    --color-muted-light: #475569;            /* Slate 600 - High legibility meta */
    --color-card-bg-light: #FFFFFF;          /* Pure White cards */
    --color-card-border-light: #CBD5E1;      /* Slate 300 - Distinct boundaries */
    --color-link-light: #C1121F;             /* Deep Crimson */
    --color-link-visited-light: #7F1D1D;     /* Dark Crimson */
    --color-navbar-bg-light: #0F172A;        /* Slate 900 */
    --color-navbar-text-light: #F8FAFC;
    --color-navbar-text-hover-light: #FFFFFF;
    --color-footer-bg-light: #0F172A;
    --color-footer-text-light: #94A3B8;
    --color-sidebar-hover-bg-light: #E2E8F0;
    --color-headline-card-hover-bg-light: #F8FAFC;
    --color-edit-control-bg-light: #F8FAFC;
    --color-surface-secondary-light: #E2E8F0;

    /* --- Dark Theme --- */
    --color-primary-dark: #EF4444;           /* Vibrant Red / Coral - High contrast against dark */
    --color-primary-hover-dark: #FCA5A5;
    --color-secondary-dark: #FFFFFF;         /* Pure White headings in dark mode */
    --color-accent-dark: #FBBF24;            /* Amber 400 */
    --color-background-dark: #0B0F19;        /* Deep Slate Black */
    --color-text-dark: #F1F5F9;              /* Slate 100 - High contrast body text */
    --color-muted-dark: #94A3B8;             /* Slate 400 - Clear secondary text */
    --color-card-bg-dark: #151D2E;           /* Slate 800+ - Rich dark card surface */
    --color-card-border-dark: #2A374D;       /* Slate 700 - Distinct visible border */
    --color-link-dark: #F87171;              /* Coral Red - High contrast on dark */
    --color-link-visited-dark: #FCA5A5;
    --color-navbar-bg-dark: #080C14;         /* Near black */
    --color-navbar-text-dark: #F1F5F9;
    --color-navbar-text-hover-dark: #FFFFFF;
    --color-footer-bg-dark: #080C14;
    --color-footer-text-dark: #94A3B8;
    --color-sidebar-hover-bg-dark: #1E293B;
    --color-headline-card-hover-bg-dark: #1E293B;
    --color-edit-control-bg-dark: #151D2E;
    --color-surface-secondary-dark: #1E293B;

    /* --- Default Active Theme Tokens (Light) --- */
    --color-primary: var(--color-primary-light);
    --color-primary-hover: var(--color-primary-hover-light);
    --color-secondary: var(--color-secondary-light);
    --color-accent: var(--color-accent-light);
    --color-background: var(--color-background-light);
    --color-text: var(--color-text-light);
    --color-muted: var(--color-muted-light);
    --color-card-bg: var(--color-card-bg-light);
    --color-card-border: var(--color-card-border-light);
    --color-link: var(--color-link-light);
    --color-link-visited: var(--color-link-visited-light);
    --color-navbar-bg: var(--color-navbar-bg-light);
    --color-navbar-text: var(--color-navbar-text-light);
    --color-navbar-text-hover: var(--color-navbar-text-hover-light);
    --color-footer-bg: var(--color-footer-bg-light);
    --color-footer-text: var(--color-footer-text-light);
    --color-sidebar-hover-bg: var(--color-sidebar-hover-bg-light);
    --color-headline-card-hover-bg: var(--color-headline-card-hover-bg-light);
    --color-edit-control-bg: var(--color-edit-control-bg-light);
    --color-surface-secondary: var(--color-surface-secondary-light);
}

/* ==========================================================================
   DARK THEME OVERRIDES
   ========================================================================== */
[data-theme="dark"],
[data-bs-theme="dark"] {
    --color-primary: var(--color-primary-dark);
    --color-primary-hover: var(--color-primary-hover-dark);
    --color-secondary: var(--color-secondary-dark);
    --color-accent: var(--color-accent-dark);
    --color-background: var(--color-background-dark);
    --color-text: var(--color-text-dark);
    --color-muted: var(--color-muted-dark);
    --color-card-bg: var(--color-card-bg-dark);
    --color-card-border: var(--color-card-border-dark);
    --color-link: var(--color-link-dark);
    --color-link-visited: var(--color-link-visited-dark);
    --color-navbar-bg: var(--color-navbar-bg-dark);
    --color-navbar-text: var(--color-navbar-text-dark);
    --color-navbar-text-hover: var(--color-navbar-text-hover-dark);
    --color-footer-bg: var(--color-footer-bg-dark);
    --color-footer-text: var(--color-footer-text-dark);
    --color-sidebar-hover-bg: var(--color-sidebar-hover-bg-dark);
    --color-headline-card-hover-bg: var(--color-headline-card-hover-bg-dark);
    --color-edit-control-bg: var(--color-edit-control-bg-dark);
    --color-surface-secondary: var(--color-surface-secondary-dark);

    /* Bootstrap 5 Theme Variables */
    --bs-body-color: var(--color-text-dark);
    --bs-body-bg: var(--color-background-dark);
    --bs-card-bg: var(--color-card-bg-dark);
    --bs-card-border-color: var(--color-card-border-dark);
    --bs-card-cap-bg: var(--color-card-bg-dark);
    --bs-secondary-bg: var(--color-surface-secondary-dark);
    --bs-tertiary-bg: #1A2333;
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: var(--color-muted-dark);
    --bs-border-color: var(--color-card-border-dark);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
    --bs-link-color: var(--color-link-dark);
    --bs-link-hover-color: var(--color-link-hover-dark);
    --bs-heading-color: var(--color-secondary-dark);
}

/* ==========================================================================
   BASE & TYPOGRAPHY
   ========================================================================== */
body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 700;
    color: var(--color-secondary);
    letter-spacing: -0.25px;
}

h1 { font-weight: 900; }

.text-muted {
    color: var(--color-muted) !important;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
    background-color: var(--color-navbar-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar .navbar-brand {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 1.35rem;
    color: var(--color-navbar-text-hover) !important;
}

.navbar .nav-link,
.navbar .dropdown-toggle {
    color: var(--color-navbar-text) !important;
    font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover,
.navbar .nav-link.active {
    color: var(--color-navbar-text-hover) !important;
}

/* ==========================================================================
   CARDS & SURFACES
   ========================================================================== */
.card,
.admin-card {
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-card-border) !important;
    color: var(--color-text);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.card-header {
    background-color: var(--color-card-bg) !important;
    border-bottom: 1px solid var(--color-card-border) !important;
    color: var(--color-secondary);
    font-weight: 600;
}

/* Override utility classes that fight theme */
[data-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-white {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light {
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-dark {
    color: var(--color-text) !important;
}

/* ==========================================================================
   MASTER TABS & SUB-TABS
   ========================================================================== */
.nav-tabs {
    border-bottom: 1px solid var(--color-card-border);
    background-color: var(--color-card-bg);
}

.nav-tabs .nav-link {
    color: var(--color-muted) !important;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.85rem 1.25rem;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--color-secondary) !important;
    background-color: rgba(125, 125, 125, 0.05);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--color-primary) !important;
    background-color: transparent !important;
    border-bottom: 3px solid var(--color-primary) !important;
}

.nav-pills .nav-link {
    color: var(--color-muted);
    font-weight: 600;
    border-radius: 0.375rem;
}

.nav-pills .nav-link.active {
    background-color: var(--color-primary);
    color: #FFFFFF !important;
}

/* ==========================================================================
   TABLES & DATA LISTS
   ========================================================================== */
.table {
    color: var(--color-text);
    border-color: var(--color-card-border);
}

.table th,
.table thead th,
.table-light th {
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-secondary) !important;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-card-border) !important;
}

.table td {
    color: var(--color-text);
    border-color: var(--color-card-border);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(125, 125, 125, 0.08) !important;
    color: var(--color-text);
}

.table a {
    color: var(--color-link);
    font-weight: 500;
    text-decoration: none;
}

.table a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ==========================================================================
   BADGES & STATUS CHIPS (WCAG Compliant Contrast)
   ========================================================================== */
.badge {
    font-weight: 600;
    letter-spacing: 0.25px;
    border-radius: 0.25rem;
}

/* Success Badges */
.badge.bg-success,
.badge.bg-success.bg-opacity-10 {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
[data-theme="dark"] .badge.bg-success,
[data-theme="dark"] .badge.bg-success.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.bg-success.bg-opacity-10 {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34D399 !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
}

/* Primary / Processing Badges */
.badge.bg-primary,
.badge.bg-primary.bg-opacity-10 {
    background-color: rgba(37, 99, 235, 0.15) !important;
    color: #1D4ED8 !important;
    border: 1px solid rgba(37, 99, 235, 0.35) !important;
}
[data-theme="dark"] .badge.bg-primary,
[data-theme="dark"] .badge.bg-primary.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-primary.bg-opacity-10 {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60A5FA !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Danger / Error Badges */
.badge.bg-danger,
.badge.bg-danger.bg-opacity-10 {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #B91C1C !important;
    border: 1px solid rgba(220, 38, 38, 0.35) !important;
}
[data-theme="dark"] .badge.bg-danger,
[data-theme="dark"] .badge.bg-danger.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.bg-danger.bg-opacity-10 {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #F87171 !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}

/* Warning Badges */
.badge.bg-warning,
.badge.bg-warning.bg-opacity-10 {
    background-color: rgba(217, 119, 6, 0.15) !important;
    color: #B45309 !important;
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
}
[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.bg-warning.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning.bg-opacity-10 {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #FBBF24 !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Info Badges */
.badge.bg-info,
.badge.bg-info.bg-opacity-10 {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: #0369A1 !important;
    border: 1px solid rgba(14, 165, 233, 0.35) !important;
}
[data-theme="dark"] .badge.bg-info,
[data-theme="dark"] .badge.bg-info.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.bg-info.bg-opacity-10 {
    background-color: rgba(56, 189, 248, 0.2) !important;
    color: #38BDF8 !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

/* Secondary / Neutral Badges */
.badge.bg-secondary {
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-muted) !important;
    border: 1px solid var(--color-card-border) !important;
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */
.form-control,
.form-select,
.input-group-text {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    color: var(--color-text);
    border-radius: 0.375rem;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-card-bg);
    border-color: var(--color-primary);
    color: var(--color-text);
    box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.15);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: #0D1424 !important;
    border-color: var(--color-card-border) !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-control::placeholder {
    color: #64748B;
}

/* ==========================================================================
   ACCORDIONS & LIST GROUPS
   ========================================================================== */
.accordion-item {
    background-color: var(--color-card-bg);
    border-color: var(--color-card-border);
    color: var(--color-text);
}

.accordion-button {
    background-color: var(--color-card-bg);
    color: var(--color-secondary);
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    background-color: var(--color-surface-secondary);
    color: var(--color-primary);
    box-shadow: none;
}

.list-group-item {
    background-color: var(--color-card-bg);
    border-color: var(--color-card-border);
    color: var(--color-text);
}

/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */
.progress {
    background-color: var(--color-surface-secondary);
    border-radius: 999px;
    overflow: hidden;
}

/* ==========================================================================
   SVG CHARTS & CONTAINERS
   ========================================================================== */
.svg-chart-box {
    background-color: var(--color-surface-secondary);
    border: 1px solid var(--color-card-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

.svg-chart-box text {
    fill: var(--color-text);
}

.svg-chart-box text.text-meta {
    fill: var(--color-muted);
}

/* ==========================================================================
   STORY CARDS & EDIT CONTROLS
   ========================================================================== */
.story-card {
    border: 1px solid var(--color-card-border);
    background-color: var(--color-card-bg);
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.story-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

h5.card-title {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--color-secondary);
    line-height: 1.3;
}

h5.card-title a {
    color: inherit !important;
    text-decoration: none;
}

h5.card-title a:hover {
    color: var(--color-primary) !important;
}

.edit-control-block {
    background-color: var(--color-surface-secondary);
    border: 1px solid var(--color-card-border);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    color: var(--color-text);
}

/* Pulse animation for active AI processing */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Page-specific rules, moved out of the views ──────────────────────────
   index.ejs, story.ejs, nearby.ejs and nearby-results.ejs each opened their
   own <!DOCTYPE>, <html> and <head> and then included partials/header.ejs,
   which opens all three again. Every one of those pages shipped two complete
   documents and two <title>s, which is why the tab read
   "Paikallislehti - Joensuu - Paikallislehti". The heads are gone; the CSS
   that lived in them is here.
   ──────────────────────────────────────────────────────────────────────── */

/* from views/index.ejs */
.daily-digest-banner {
            background: linear-gradient(to right, #f8f9fa, #ffffff);
            border-left: 4px solid #0d6efd !important;
        }

/* from views/story.ejs */
.audio-reader-box {
            background-color: var(--bs-tertiary-bg, #f8f9fa);
            border: 1px solid var(--bs-border-color, #dee2e6);
            transition: all 0.2s ease;
        }
        .audio-reading-active {
            border-color: #0d6efd !important;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
        }
        .developing-story-box {
            border-left: 4px solid #0d6efd;
            background-color: rgba(13, 110, 253, 0.04);
        }
        .timeline-item {
            position: relative;
            padding-left: 20px;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #6c757d;
        }
        .timeline-item.active::before {
            background-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
        }

/* from views/nearby-results.ejs */
#nearby-map {
            height: 380px;
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            margin-bottom: 2rem;
            z-index: 1;
        }
        .distance-badge {
            background-color: #00baf1;
            color: #fff;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.85em;
        }
        .location-header {
            background: linear-gradient(135deg, #0d6efd 0%, #00baf1 100%);
            color: white;
            padding: 2rem;
            border-radius: 12px;
            margin-bottom: 2rem;
        }
        .radius-pill-btn {
            border-radius: 20px !important;
            padding: 0.25rem 0.75rem !important;
            font-size: 0.85rem !important;
        }


/* ==========================================================================
   THE MASTHEAD
   --------------------------------------------------------------------------
   joensuun.tienoilla.fi already reads as a Finnish sentence, so the mark only
   has to say it. Two solid blocks, the lower riding 22% up into the upper.

   Blocks rather than loose type because of the overlap: letterforms crossing
   each other go muddy, while a block over a block keeps its own ground and the
   seam stays crisp.

   The town runs 5-14 characters across the 63 papers - Turun to
   Uudenkaupungin, a 2.8x swing. "tienoilla" is always nine, so the lower block
   holds the plate open when the name is short and the swing the layout has to
   absorb drops to 9-14. --len is the longer of the two, emitted by the view.
   ========================================================================== */

.masthead { margin: 0 0 1.75rem; }

.plate {
    display: grid;
    --plate-measure: min(34rem, 76vw);
    --plate-lap: .22em;
}

.plate-blk {
    display: block;
    width: max-content;
    max-width: 100%;
    font-family: var(--font-headline);
    font-weight: 800;
    font-variation-settings: "wdth" 86;
    text-transform: uppercase;
    letter-spacing: -.012em;
    line-height: .96;
    padding: .16em .30em .21em;
    font-size: calc(var(--plate-measure) / var(--len, 9) * 1.44);
}

.plate-town {
    justify-self: start;
    background: var(--color-primary);
    color: #FFFFFF;
}
/* a folded compound: the second half sits under the first, same block */
.plate-town + .plate-town { margin-top: .06em; }

.plate-tienoilla {
    justify-self: end;
    position: relative;
    z-index: 2;
    background: var(--color-secondary);
    color: var(--color-background);
    margin-top: calc(var(--plate-lap) * -1);
}

.masthead-dateline {
    margin: 1rem 0 0;
    font-family: var(--font-headline);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   THE NAVBAR MARK
   --------------------------------------------------------------------------
   The same mark one line high: the town in its block, "tienoilla" plain in the
   same face beside it. A different lockup here would mean the bar carried a
   different mark from the page it sits on.

   Both parts are inline-block so they share a baseline. As plain inlines with
   padding they do not - padding on an inline does not move its baseline - which
   is what made the two words sit crooked.
   ========================================================================== */

.navbar-mark {
    display: inline-flex;
    align-items: baseline;
    gap: .3em;
    text-decoration: none;
    line-height: 1;
}
.navbar-mark:hover { text-decoration: none; }

.navbar-mark-town,
.navbar-mark-tienoilla {
    display: inline-block;
    vertical-align: baseline;
    font-family: var(--font-headline);
    font-weight: 800;
    font-variation-settings: "wdth" 86;
    text-transform: uppercase;
    letter-spacing: -.012em;
    font-size: 1rem;
    line-height: 1;
}
.navbar-mark-town {
    background: var(--color-primary);
    color: #FFFFFF;
    padding: .17em .28em .21em;
}
.navbar-mark-tienoilla {
    color: var(--color-navbar-text);
    padding: .17em 0 .21em;
}

.navbar-change {
    font-family: var(--font-headline);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-left: 1rem;
}