/* Font Variables & New Color Palette */
:root {
    --font-headline: 'Montserrat', sans-serif;
    --font-body: 'Raleway', sans-serif;

    /* --- Light Theme (Default) --- */
    --color-primary-light: #D90429; /* Strong, classic red */
    --color-secondary-light: #0B132B; /* Very dark blue, almost black */
    --color-accent-light: #FFB703; /* Optional: Gold/yellow */
    --color-background-light: #f8f9fa; /* Light gray background */
    --color-text-light: #212529; /* Standard dark text */
    --color-muted-light: #6c757d; /* Standard muted gray */
    --color-card-bg-light: #ffffff; /* White cards */
    --color-card-border-light: #dee2e6; /* Light gray border */
    --color-link-light: #D90429; /* Primary Red */
    --color-link-visited-light: #A4031F; /* Darker red */
    --color-navbar-bg-light: #0B132B; /* Dark blue/black */
    --color-navbar-text-light: rgba(255, 255, 255, 0.85);
    --color-navbar-text-hover-light: rgba(255, 255, 255, 1);
    --color-footer-bg-light: #0B132B; /* Dark blue/black */
    --color-footer-text-light: rgba(255, 255, 255, 0.7);
    --color-sidebar-hover-bg-light: #e9ecef;
    --color-headline-card-hover-bg-light: #f8f9fa;
    --color-edit-control-bg-light: #f8f9fa;

    /* --- Dark Theme --- */
    --color-primary-dark: #E5383B; /* Slightly brighter red for dark */
    --color-secondary-dark: #E0E1DD; /* Light gray/off-white for headings/nav text */
    --color-accent-dark: #FFD166; /* Brighter yellow/gold */
    --color-background-dark: #1B263B; /* Dark blue background */
    --color-text-dark: #E0E1DD; /* Light gray/off-white text */
    --color-muted-dark: #A9B4C2; /* Lighter muted gray */
    --color-card-bg-dark: #2C3E50; /* Darker card background */
    --color-card-border-dark: #4A6572; /* Muted blue/gray border */
    --color-link-dark: #F07167; /* Lighter red/coral for links */
    --color-link-visited-dark: #D4504A; /* Slightly darker visited link */
    --color-navbar-bg-dark: #0D1B2A; /* Very dark blue, slightly different from light */
    --color-navbar-text-dark: rgba(224, 225, 221, 0.85); /* Use --color-secondary-dark base */
    --color-navbar-text-hover-dark: rgba(224, 225, 221, 1);
    --color-footer-bg-dark: #0D1B2A; /* Match navbar */
    --color-footer-text-dark: rgba(224, 225, 221, 0.7);
    --color-sidebar-hover-bg-dark: #34495E; /* Darker hover for sidebar */
    --color-headline-card-hover-bg-dark: #34495E; /* Darker hover for headline cards */
    --color-edit-control-bg-dark: #2C3E50; /* Match card background */

    /* --- Default Theme Assignment (Light) --- */
    --color-primary: var(--color-primary-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);
}

/* --- Dark Theme Overrides --- */
[data-theme="dark"] {
    --color-primary: var(--color-primary-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);

    /* Specific overrides for Bootstrap components if needed */
    --bs-body-color: var(--color-text-dark);
    --bs-body-bg: var(--color-background-dark);
    --bs-secondary-bg: var(--color-card-bg-dark); /* Use card bg for secondary bg */
    --bs-tertiary-bg: #34495E; /* A slightly different dark shade */
    --bs-emphasis-color: #f8f9fa; /* Lighter emphasis */
    --bs-secondary-color: var(--color-muted-dark); /* Muted text */
    --bs-border-color: var(--color-card-border-dark);
    --bs-link-color: var(--color-link-dark);
    --bs-link-hover-color: var(--color-primary-dark); /* Use primary dark for link hover */
    --bs-code-color: #e83e8c; /* Keep pinkish code color */
    --bs-heading-color: var(--color-secondary-dark); /* Use secondary dark for headings */

    /* Ensure text within edit controls uses the correct dark theme color */
    .edit-control-block {
        color: var(--color-text-dark); /* Explicitly set text color */
    }
    .edit-control-block label { /* Be more specific for labels if needed */
        color: var(--color-text-dark);
    }
}

body {
    font-family: var(--font-body); /* Uses Raleway now */
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6; /* Improve base readability */
}

/* Navbar */
.navbar {
    background-color: var(--color-navbar-bg) !important; /* Dark blue/black background */
}
/* Ensure Navbar text is light */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .dropdown-toggle {
    color: var(--color-navbar-text) !important; /* Lighter text for dark background */
}
.navbar .navbar-brand:hover,
.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover,
.navbar .nav-link.active {
    color: var(--color-navbar-text-hover) !important; /* Full white on hover/active */
}
.navbar-brand {
     font-family: var(--font-headline);
     font-weight: 900; /* Use Black weight for brand */
     font-size: 1.4rem; /* Slightly larger brand */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline); /* Uses Montserrat now */
    font-weight: 900; /* Montserrat Black */
    color: var(--color-secondary); /* Dark blue/black headings */
    margin-top: 1.5rem; /* Add some space above headings */
    margin-bottom: 1rem;
}
h1.mb-4 { /* Main page title */
     color: var(--color-secondary);
     font-size: 3.2rem; /* Significantly larger main title */
     border-bottom: 2px solid var(--color-primary); /* Use primary red for border */
     padding-bottom: 0.5rem;
}
h5.card-title { /* Story Headlines */
    font-size: 2.4rem; /* Increased story headline size */
    font-weight: 900; /* Use Black weight */
    margin-bottom: 1rem; /* Increased space below headline */
    color: var(--color-secondary); /* Dark blue/black */
    line-height: 1.3; /* Adjust line height for larger font */
    hyphens: auto; /* Enable automatic hyphenation */
    word-break: break-word; /* Allow breaking long words if needed */
}
h5.card-title a {
    color: inherit !important; /* Make link inherit the dark heading color */
    text-decoration: none;
}
h5.card-title a:hover {
    color: var(--color-primary) !important; /* Red hover for headline links */
    text-decoration: none;
}
h5.card-title a:visited {
    color: var(--color-link-visited) !important; /* Use the same visited color */
}
h5.card-title a:visited:hover {
    color: var(--color-primary) !important; /* Revert to primary red on hover */
    filter: brightness(85%);
}

/* Media Query for Mobile Screens */
@media (max-width: 767.98px) {
    h5.card-title {
        font-size: 1.8rem; /* Smaller font size on mobile */
        line-height: 1.25; /* Adjust line height for smaller font */
        letter-spacing: -0.5px; /* Tighter letter spacing on mobile */
        font-weight: 700; /* Reduce font weight on mobile (from 900) */
    }
    /* Optional: Adjust main title size on mobile too */
    h1.mb-4 {
        font-size: 2.5rem;
    }

    .related-story-card .card-title {
        letter-spacing: 0.5px; /* Looser letter spacing for related story titles on mobile */
    }
}

/* Links & Active States */
a {
    color: var(--color-link); /* Primary Red for links */
    text-decoration: none; /* Remove underline by default */
    transition: color 0.2s ease-in-out, filter 0.2s ease-in-out; /* Smooth transition */
}
a:hover {
    filter: brightness(85%); /* Darken red slightly on hover */
    text-decoration: underline; /* Add underline on hover */
}
a:visited {
    color: var(--color-link-visited); /* A darker, slightly desaturated red for visited links */
    /* Optional: Remove underline for visited links if desired */
    /* text-decoration: none; */
}

.sidebar .nav-link { /* Style for regular topic links */
     padding: 0.3rem 1rem;
     color: var(--color-text);
     border-left: 3px solid transparent;
     display: block; /* Ensure block display */
     margin-bottom: 2px; /* Small gap between items */
}
.sidebar .nav-link:hover {
     background-color: var(--color-sidebar-hover-bg);
     text-decoration: none; /* No underline for sidebar links */
     color: var(--color-secondary); /* Darker text on hover */
}
.sidebar .nav-link.active { /* Style for the currently selected topic */
    font-weight: bold;
    color: var(--color-primary); /* Red text for active */
    border-left: 3px solid var(--color-primary); /* Red border */
    padding-left: calc(1rem - 3px);
    background-color: var(--color-background); /* Match body background or slightly off-white */
}

/* Style for "Kaikki aiheet" link */
.sidebar .nav-link-all {
    font-weight: bold; /* Make it always bold */
    margin-bottom: 0.75rem; /* Add more space below it */
    border-bottom: 1px solid var(--color-card-border); /* Add a separator line */
    padding-bottom: 0.5rem; /* Add padding below text before border */
    /* Keep the default border-left transparent unless active */
}
.sidebar .nav-link-all.active {
     /* Use the standard active style, but ensure boldness */
     font-weight: bold;
     color: var(--color-primary); /* Red text */
     border-left: 3px solid var(--color-primary); /* Red border */
     padding-left: calc(1rem - 3px);
     background-color: var(--color-background);
}
.sidebar .nav-link-all:hover {
     background-color: var(--color-sidebar-hover-bg); /* Slightly darker hover */
     text-decoration: none;
     color: var(--color-secondary);
}

/* Cards */
.card {
    border: 1px solid var(--color-card-border);
    background-color: var(--color-card-bg);
    margin-bottom: 2rem; /* Increased spacing between cards */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow for depth */
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Add transition for hover */
}

/* Add subtle hover effect to story cards on index page */
.story-card:hover {
    transform: translateY(-2px); /* Slightly lift the card */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Slightly increase shadow */
}

.card-header {
    background-color: var(--color-background); /* Even lighter header background */
    font-size: 0.8rem; /* Slightly smaller header text */
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-card-border);
    padding: 0.5rem 1.5rem; /* Adjust padding */
}
.card-body {
    padding: 1.5rem;
}

/* Badges */
.badge {
     background-color: var(--color-primary); /* Red background */
     color: white !important; /* Ensure white text */
     font-size: 0.75rem; /* Slightly smaller badges */
     padding: 0.3em 0.6em;
     font-weight: 500; /* Slightly bolder badge text */
}
a.badge:hover {
     filter: brightness(85%); /* Darken badge on hover */
     color: white !important;
     text-decoration: none;
}

/* Specific Text Styles */
.card-text.lead strong, /* Style for the ingress */
p.lead { /* Also target ingress directly if needed */
    font-family: var(--font-body); /* Ensure ingress uses Raleway */
    font-weight: 400 !important; /* Use 400 for 'Regular' weight */
    display: block; /* Make it a block element */
    margin-bottom: 1rem; /* Add space after ingress */
    font-size: 1.2rem; /* Slightly larger ingress */
    color: var(--color-text); /* Ensure standard text color */
    line-height: 1.7; /* More line height for ingress */
}
.ai-body { /* Container for AI body text */
    font-family: var(--font-body); /* Ensure body uses Raleway */
    font-weight: 400; /* Use 400 for 'Regular' weight */
    margin-bottom: 1rem; /* Space below body */
}
.ai-body p { margin-bottom: 0.75rem; line-height: 1.7; } /* More line height for body */
.ai-headlines { font-size: 0.8rem; color: var(--color-muted); font-style: italic; }
.text-muted { color: var(--color-muted) !important; }
.sidebar h5 {
    margin-top: 1.5rem; /* Increased space above sidebar titles */
    margin-bottom: 0.5rem;
    font-size: 0.85rem; /* Slightly smaller sidebar titles */
    text-transform: uppercase;
    letter-spacing: 0.75px; /* Increased letter spacing */
    color: var(--color-muted);
    font-weight: 700; /* Bold sidebar titles */
}

/* Footer */
footer.footer {
    background-color: var(--color-footer-bg); /* Dark blue/black in both themes */
    color: var(--color-footer-text);
    padding: 1.5rem 0;
    font-size: 0.9rem;
    margin-top: 2rem;
}

/* Styles moved from admin.ejs */
.table-sm td, .table-sm th {
    padding: 0.3rem; /* Smaller padding for tables */
}
.word-break {
    word-break: break-all; /* Break long URLs */
}

/* Styles moved from edit-story.ejs */
/* ... */

/* Styles moved from index.ejs */
.sidebar .nav-link {
    padding: 0.3rem 1rem;
}
.sidebar .nav-link.active {
    font-weight: bold;
    /* background-color: #e9ecef; */ /* Removed, handled by variable */
}
.sidebar .nav-link-all.active {
    font-weight: bold;
    /* background-color: #e9ecef; */ /* Removed, handled by variable */
}
.story-card img {
    max-height: 200px;
    object-fit: cover;
}
.story-card .card-body {
    display: flex;
    flex-direction: column;
}
.story-card .card-text {
    flex-grow: 1;
}
.story-card .card-footer {
    background-color: transparent;
    border-top: none;
    padding-top: 0;
}
.tag-link {
    margin-right: 5px;
    margin-bottom: 5px;
}
.city-selector .dropdown-toggle {
    color: var(--color-navbar-text);
}
.city-selector .dropdown-toggle:hover {
    color: var(--color-navbar-text-hover);
}

/* New styles for hidden stories */
.story-hidden {
  opacity: 0.65; /* Make it slightly faded */
  /* Optional: Slightly different background if list-group-item-secondary isn't enough */
  /* background-color: #f8f9fa; */
}

/* Ensure links within hidden items are also muted */
.story-hidden a {
    color: var(--color-muted) !important; /* Use the muted variable */
}

.story-hidden .badge {
    opacity: 0.8; /* Optionally fade badges slightly too */
}

/* Sidebar / Offcanvas Adjustments */
.sidebar h5, /* Target h5 in the original sidebar class if still used */
#sidebarOffcanvas h5 { /* Target h5 inside the Offcanvas */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    color: var(--color-muted);
    font-weight: 700;
}

/* Ensure sidebar links have correct styling */
#sidebarOffcanvas .nav-link {
     padding: 0.3rem 1rem;
     color: var(--color-text);
     border-left: 3px solid transparent;
     display: block;
     margin-bottom: 2px;
}
#sidebarOffcanvas .nav-link:hover {
     background-color: var(--color-sidebar-hover-bg);
     text-decoration: none;
     color: var(--color-secondary);
}
#sidebarOffcanvas .nav-link.active {
    font-weight: bold;
    color: var(--color-primary);
    border-left: 3px solid var(--color-primary);
    padding-left: calc(1rem - 3px);
    background-color: transparent; /* Keep background transparent */
}
#sidebarOffcanvas .nav-link-all {
    font-weight: bold;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-card-border);
    padding-bottom: 0.5rem;
}
#sidebarOffcanvas .nav-link-all.active {
     font-weight: bold;
     color: var(--color-primary);
     border-left: 3px solid var(--color-primary);
     padding-left: calc(1rem - 3px);
     background-color: transparent;
}
#sidebarOffcanvas .nav-link-all:hover {
     background-color: var(--color-sidebar-hover-bg);
     text-decoration: none;
     color: var(--color-secondary);
}

/* --- REVERT Sidebar Selectors --- */
/* Apply to both the desktop column and the mobile offcanvas body */
.col-md-3.d-md-block h5, /* Desktop sidebar column */
#sidebarOffcanvas .offcanvas-body h5 { /* Mobile offcanvas */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    color: var(--color-muted);
    font-weight: 700;
}

/* Ensure sidebar links have correct styling in both contexts */
.col-md-3.d-md-block .nav-link, /* Desktop */
#sidebarOffcanvas .offcanvas-body .nav-link { /* Mobile */
     padding: 0.3rem 1rem;
     color: var(--color-text);
     border-left: 3px solid transparent;
     display: block;
     margin-bottom: 2px;
}
.col-md-3.d-md-block .nav-link:hover, /* Desktop */
#sidebarOffcanvas .offcanvas-body .nav-link:hover { /* Mobile */
     background-color: var(--color-sidebar-hover-bg);
     text-decoration: none;
     color: var(--color-secondary);
}
.col-md-3.d-md-block .nav-link.active, /* Desktop */
#sidebarOffcanvas .offcanvas-body .nav-link.active { /* Mobile */
    font-weight: bold;
    color: var(--color-primary);
    border-left: 3px solid var(--color-primary);
    padding-left: calc(1rem - 3px);
    background-color: transparent; /* Keep background transparent */
}
.col-md-3.d-md-block .nav-link-all, /* Desktop */
#sidebarOffcanvas .offcanvas-body .nav-link-all { /* Mobile */
    font-weight: bold;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-card-border);
    padding-bottom: 0.5rem;
}
.col-md-3.d-md-block .nav-link-all.active, /* Desktop */
#sidebarOffcanvas .offcanvas-body .nav-link-all.active { /* Mobile */
     font-weight: bold;
     color: var(--color-primary);
     border-left: 3px solid var(--color-primary);
     padding-left: calc(1rem - 3px);
     background-color: transparent;
}
.col-md-3.d-md-block .nav-link-all:hover, /* Desktop */
#sidebarOffcanvas .offcanvas-body .nav-link-all:hover { /* Mobile */
     background-color: var(--color-sidebar-hover-bg);
     text-decoration: none;
     color: var(--color-secondary);
}

/* Style the new navbar trigger button */
.navbar .nav-item .btn.nav-link {
    color: var(--color-navbar-text) !important;
    text-align: left; /* Align text like other nav links */
    padding: 0.5rem 1rem; /* Match nav-link padding */
}
.navbar .nav-item .btn.nav-link:hover {
    color: var(--color-navbar-text-hover) !important;
    background-color: transparent; /* No button background on hover */
}

/* P1.1.4: Style for main story cards */
.main-story-card {
    border-color: var(--color-primary); /* Example: Use Bootstrap primary color for border */
    border-width: 2px;
}

.main-story-card .card-title a {
    font-weight: bold; /* Make main story titles bolder */
}

.main-stories-section h2 {
    color: var(--color-primary);
}

/* Style for control blocks in edit view */
.edit-control-block {
  background-color: var(--color-edit-control-bg); /* Light background */
  padding: 1rem;
  border: 1px solid var(--color-card-border);
  border-radius: 0.25rem;
  margin-bottom: 1rem; /* Ensure spacing */
}

.edit-control-block .form-check-label {
  margin-left: 0.5rem; /* Add some space between checkbox and label */
}

/* Related Story Cards */
.related-story-card {
    border: 1px solid var(--color-card-border);
    background-color: var(--color-card-bg);
    box-shadow: none; /* Remove default card shadow for a flatter look */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.related-story-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Add shadow on hover */
}

.related-story-card .card-title {
    font-size: 1.1rem; /* Slightly smaller title than main cards */
    font-weight: 700; /* Bold title */
    margin-bottom: 0.25rem;
}

.related-story-card .card-title a {
    color: var(--color-secondary) !important; /* Use dark heading color */
    text-decoration: none;
}

.related-story-card .card-title a:hover {
    color: var(--color-primary) !important; /* Red hover */
    text-decoration: underline;
}

.related-story-card .card-text {
    font-size: 0.85rem; /* Smaller date text */
}

.related-stories h4 {
    font-size: 1.3rem; /* Adjust heading size */
    margin-bottom: 1rem;
    color: var(--color-secondary);
}

/* Headline Story Cards (Tier 3) */
.headline-story-card {
    border: 1px solid var(--color-card-border);
    background-color: var(--color-card-bg);
    box-shadow: none; /* No shadow for simpler look */
    margin-bottom: 1rem; /* Less margin than full cards */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.headline-story-card:hover {
    background-color: var(--color-headline-card-hover-bg); /* Slightly change background on hover */
}

.headline-story-card .card-body {
    padding: 0.75rem; /* Reduced padding */
}

.headline-story-card .headline-title {
    font-size: 1rem; /* Smaller font size for headline */
    margin-bottom: 0.25rem; /* Less space below title */
    font-weight: 500; /* Slightly less bold than main titles */
}

.headline-story-card .headline-title a {
    color: var(--color-text); /* Use default text color */
    text-decoration: none;
}

.headline-story-card .headline-title a:hover {
    text-decoration: underline;
}

.headline-story-card .card-text {
    font-size: 0.8rem; /* Smaller date text */
}