/* AI News Aggregator - Base Styles */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Accessibility Styles */

/* Skip navigation links */
/* Hide skip navigation links per request */
.skip-nav { display: none !important; }

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #0b0b0b;
    color: #e6e6e6;
    padding: 8px;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    font-size: 22px;
    font-weight: bold;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #e6e6e6;
    outline-offset: 2px;
}

/* Visually hidden content for screen readers */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Enhanced focus indicators */
*:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* High contrast focus for buttons */
button:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    background-color: #f0f8ff;
}

/* Enhanced keyboard focus indicators */
.keyboard-focused {
    outline: 3px solid #0066cc !important;
    outline-offset: 3px !important;
    background-color: rgba(0, 102, 204, 0.1) !important;
    border-radius: 2px;
}

/* Focus indicators for story links */
.story-link a:focus,
.main-headline:focus,
.column-headline a:focus,
.breaking-headline:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
    background-color: rgba(0, 102, 204, 0.1);
    border-radius: 2px;
    padding: 2px 4px;
    margin: -2px -4px;
}

/* Focus indicators for skip links */
.skip-link:focus {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #0066cc;
}

/* Keyboard navigation help text */
/* Hide keyboard shortcuts panel */
.keyboard-help { display: none !important; }

.keyboard-help.visible {
    opacity: 1;
}

.keyboard-help h4 {
    margin: 0 0 5px 0;
    font-size: 20px;
}

.keyboard-help ul {
    margin: 0;
    padding-left: 15px;
    list-style: none;
}

.keyboard-help li {
    margin-bottom: 2px;
}

.keyboard-help kbd {
    background: #333;
    border: 1px solid #555;
    border-radius: 2px;
    padding: 1px 4px;
    font-size: 17px;
    font-family: monospace;
}

/* Show keyboard help on focus */
/* no-op since keyboard-help is hidden */

/* High contrast mode enhancements */
@media (prefers-contrast: high) {
    .keyboard-focused {
        outline-width: 4px !important;
        background-color: rgba(0, 102, 204, 0.2) !important;
    }
    
    .skip-link:focus {
        outline-width: 4px;
        box-shadow: 0 0 0 6px #0066cc;
    }
}

/* Ensure interactive elements meet minimum touch target size */
button, a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Exception for text links to maintain natural flow */
.story-link a, .main-headline a, .column-headline a {
    min-height: auto;
    min-width: auto;
    display: inline;
    padding: 4px 0;
}

/* Typography - Global */
body {
    font-family: 'Bebas Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 26px;
    line-height: 1.4;
    color: #e6e6e6;
    background-color: #0b0b0b;
    margin: 0;
}

/* Link States - Drudge Report Style */
a {
    color: #e6e6e6;
    text-decoration: underline;
}

a:visited {
    color: #e6e6e6;
}

a:hover {
    color: #e6e6e6;
}

a:focus {
    outline: 2px solid #0000ff;
    outline-offset: 2px;
}

/* Responsive Grid System - Three Column Layout - Full Width */
.container {
    margin: 0;
    padding: 0 20px;
}

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    margin: 20px 0 0 0;
    padding: 0;
}

.column {
    min-height: 200px;
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
    .columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .container {
        padding: 0 15px;
    }
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
    .columns {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    /* Tablet: tighten portrait images further */
    .column .story-image.is-portrait img,
    .column .section-top-image.is-portrait img,
    .column-section .story-image.is-portrait img,
    .column-section .section-top-image.is-portrait img,
    .breaking-news .story-image.is-portrait img,
    .breaking-news .section-top-image.is-portrait img {
        max-height: 360px;
    }
}

/* Desktop breakpoint */
@media (min-width: 1025px) {
    .columns {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }
}
/
* Visual Hierarchy - Drudge Report Style */

/* Breaking News Banner - Level 1 Prominence */
.breaking-news {
    background-color: #0b0b0b;
    border: 2px solid #444444;
    padding: 10px;
    /* Align with left column text start */
    text-align: left;
    margin: 0 0 20px 15px; /* same left indent as .column.left padding-left */
    font-weight: normal;
    font-size: 26px;
    max-width: none; /* width is set dynamically to match left column */
}

.breaking-news a {
    color: #e6e6e6;
    text-decoration: underline;
    font-weight: normal;
}

.breaking-news a:hover {
    color: #e6e6e6;
    text-decoration: underline;
}

/* Ensure breaking section images are left-aligned and above text */
.breaking-news .story-image,
.breaking-news .section-top-image { text-align: left; }
.breaking-news .story-image img,
.breaking-news .section-top-image img { display: block; margin: 0 0 8px 0; }

/* Header Layout - Centered like Drudge Report */
header {
    text-align: center;
    padding: 10px 20px 10px 20px;
    margin: 0;
}

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

/* Main Headline - Level 2 Prominence - Above logo, same size */
.main-headline {
    margin: 0 auto 15px auto;
    /* Wider main headline to extend further for better text flow */
    max-width: 1200px;
}

.main-headline a {
    font-size: 55px;
    font-weight: bold;
    color: #e6e6e6;
    text-decoration: underline;
    line-height: 1.2;
    display: block;
    text-align: center;
}

.main-headline a:hover {
    color: #e6e6e6;
    text-decoration: underline;
}

/* Site Logo - Centered, same size as main headline */
.logo {
    font-size: 55px;
    font-weight: 400;
    color: #e6e6e6;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0;
}

/* Column dividers like Drudge - Content flush with dividers, spacing via padding */
.column.left {
    border-right: 1px solid #444;
    padding-left: 15px;
    padding-right: 20px;
}
.column.center {
    border-right: 1px solid #444;
    padding-left: 20px;
    padding-right: 20px;
}
.column.right {
    padding-left: 20px;
    padding-right: 15px;
}

/* Column headlines styled same as regular stories (uniform size/color) */
.column-headline {
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 8px;
    padding-bottom: 0;
}

/* Ensure heading wrapper doesn't enlarge text or add spacing */
.column-headline h3 {
    font-size: 22px;
    font-weight: normal;
    margin: 0;
}

.column-headline a {
    color: #e6e6e6;
    text-decoration: underline;
}

.column-headline a:visited {
    color: #e6e6e6;
}

.column-headline a:hover { color: #e6e6e6; }

/* All Story Links - Uniform styling like Drudge Report */
.story-link {
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.4;
}

.story-link a {
    color: #e6e6e6;
    text-decoration: underline;
    display: block;
}

.story-link a:visited { color: #e6e6e6; }

.story-link a:hover { color: #e6e6e6; }

/* Story spacing and organization */
.story-group {
    margin-bottom: 25px;
}

/* Headline links for breaking, main, and three-column sections */
.breaking-news a,
.breaking-headline,
.main-headline,
.main-headline a,
.column-headline a,
.story-link a {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: #3aa3ff;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.breaking-news a:hover,
.breaking-headline:hover,
.main-headline:hover,
.main-headline a:hover,
.column-headline a:hover,
.story-link a:hover {
  color: #66baff;
}

.breaking-news a:visited,
.breaking-headline:visited,
.main-headline:visited,
.main-headline a:visited,
.column-headline a:visited,
.story-link a:visited {
  color: #89c9ff;
}

/* Footer */
footer {
    text-align: center;
    margin-top: 50px;
    padding: 20px;
    font-size: 19px;
    color: inherit;
}

/* Ad slots (optional) - Hidden until ready for ads */
.ad-slot {
    display: none;
    text-align: center;
    color: #999;
    font-size: 19px;
    border: 1px dashed #444;
    margin: 10px auto;
}

.ad-leaderboard {
    height: 90px;
    line-height: 90px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Thin one-line mini footer */
.mini-footer {
    text-align: center;
    padding: 8px 10px;
    font-size: 16px;
    color: #e6e6e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.mini-footer__brand {
    color: #f63489;
}

.mini-footer a {
    color: inherit;
    text-decoration: underline;
    min-height: auto;
    min-width: auto;
    display: inline;
}

footer button {
    background: none;
    border: 1px solid #ccc;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 22px;
    transition: all 0.2s ease;
}

footer button:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

footer button:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
    background-color: #f0f8ff;
}

/* Mobile header adjustments */
@media (max-width: 768px) {
    .main-headline {
        max-width: 600px; /* expanded for better text flow on tablets */
    }
    
    .main-headline a {
        font-size: 36px;
    }
    
    .logo {
        font-size: 43px;
    }
    
    .breaking-news {
        font-size: 24px;
        max-width: none; /* keep dynamic width */
    }
    
    /* Mobile Image Size Adjustments */
    .breaking-news .story-image img,
    .breaking-news .section-top-image img {
        width: 330px;
    }

    /* Smaller portrait cap on mobile for density */
    .column .story-image.is-portrait img,
    .column .section-top-image.is-portrait img,
    .column-section .story-image.is-portrait img,
    .column-section .section-top-image.is-portrait img {
        max-height: 340px;
    }

    .breaking-news .story-image.is-portrait img,
    .breaking-news .section-top-image.is-portrait img {
        max-height: 340px;
    }
    
    #main-story .story-image img,
    #main-story .section-top-image img {
        width: 320px;
    }
    
    .column .story-image img,
    .column .section-top-image img,
    .column-section .story-image img,
    .column-section .section-top-image img {
        width: 300px;
    }
}/* Enh
anced Responsive Design */

/* Small mobile devices */
@media (max-width: 480px) {
    body {
        font-size: 22px;
    }
    
    .container {
        padding: 0 10px;
    }
    
    .columns {
        gap: 15px;
    }
    
    .logo {
        font-size: 36px;
        letter-spacing: 1px;
    }
    
    .main-headline {
        max-width: 90%; /* responsive width for better mobile text flow */
    }
    
    .main-headline a {
        font-size: 26px;
    }
    
    .column-headline {
        font-size: 24px;
    }
    
    .story-link {
        font-size: 20px;
    }
    
    .breaking-news {
        max-width: none; /* keep dynamic width on small screens too */
    }
    
    /* Small Mobile Image Size Adjustments */
    .breaking-news .story-image img,
    .breaking-news .section-top-image img {
        width: 260px;
    }
    
    #main-story .story-image img,
    #main-story .section-top-image img {
        width: 220px;
    }
    
    .column .story-image img,
    .column .section-top-image img,
    .column-section .story-image img,
    .column-section .section-top-image img {
        width: 220px;
    }

    /* Small phones: even tighter portrait cap */
    .column .story-image.is-portrait img,
    .column .section-top-image.is-portrait img,
    .column-section .story-image.is-portrait img,
    .column-section .section-top-image.is-portrait img,
    .breaking-news .story-image.is-portrait img,
    .breaking-news .section-top-image.is-portrait img {
        max-height: 260px;
    }
}

/* Large desktop screens */
@media (min-width: 1200px) {
    .columns {
        gap: 0;
        padding: 0;
    }
}

/* Touch-friendly improvements for mobile */
@media (hover: none) and (pointer: coarse) {
    a {
        min-height: 44px;
        display: inline-block;
        padding: 2px 0;
    }
    
    .story-link a {
        padding: 8px 0;
        line-height: 1.4;
    }
}

/* Print Stylesheet */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    body {
        font-size: 19pt;
        line-height: 1.5;
    }
    
    .breaking-news {
        background: white !important;
        border: 2px solid black !important;
        page-break-inside: avoid;
    }
    
    header {
        page-break-after: avoid;
    }
    
    .columns {
        display: block;
    }
    
    .column {
        page-break-inside: avoid;
        margin-bottom: 20pt;
    }
    
    .main-headline a,
    .column-headline a,
    .story-link a {
        text-decoration: none;
        color: black !important;
    }
    
    .main-headline a:after,
    .column-headline a:after,
    .story-link a:after {
        content: " (" attr(href) ")";
        font-size: 15pt;
        color: #666;
    }
    
    .logo {
        font-size: 36pt;
    }
    
    /* Hide non-essential elements in print */
    .breaking-news:empty {
        display: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    a {
        text-decoration: underline;
        font-weight: bold;
    }
    
    .breaking-news {
        border-width: 3px;
    }
    
    header {
        border-bottom-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* Auto-re
fresh and Update Styles */

/* New Content Indicator */
.new-content-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #0066cc;
    color: white;
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.new-content-indicator.visible {
    transform: translateY(0);
}

.new-content-indicator.hidden {
    transform: translateY(-100%);
}

.indicator-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    gap: 15px;
}

.indicator-text {
    font-weight: 500;
    font-size: 22px;
}

.indicator-button {
    background: white;
    color: #0066cc;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.indicator-button:hover {
    background: #f0f0f0;
}

.indicator-close {
    background: none;
    border: none;
    color: white;
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.indicator-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* New Story Animations */
.updating-content {
    overflow-x: hidden;
}

.new-story-highlight {
    background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.1), transparent);
    animation: highlight-pulse 2s ease-in-out;
}

@keyframes highlight-pulse {
    0% {
        background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.2), transparent);
    }
    50% {
        background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.1), transparent);
    }
    100% {
        background: transparent;
    }
}

/* Story Animation States */
[data-story-new="true"] {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Smooth transitions for story updates */
.breaking-story,
.main-story,
.column-story,
.regular-story {
    transition: all 0.3s ease;
}

/* Loading states */
.updating-content .breaking-story,
.updating-content .main-story,
.updating-content .column-story,
.updating-content .regular-story {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Mobile adjustments for new content indicator */
@media (max-width: 768px) {
    .indicator-content {
        flex-direction: column;
        gap: 10px;
        padding: 10px 15px;
    }
    
    .indicator-text {
        font-size: 20px;
    }
    
    .indicator-button {
        font-size: 19px;
        padding: 5px 10px;
    }
}

/* Ensure new content indicator doesn't interfere with layout */
body.updating-content {
    padding-top: 0;
}

/* Visual feedback for auto-refresh */
.auto-refresh-active::after {
    content: " ⟳";
    color: #666;
    font-size: 1.21em;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}/* Offli
ne Indicator */
.offline-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ff6b35;
    color: white;
    z-index: 999;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.offline-indicator.visible {
    transform: translateY(0);
}

.offline-indicator.hidden {
    transform: translateY(-100%);
}

.offline-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    gap: 10px;
}

.offline-icon {
    font-size: 24px;
}

.offline-text {
    font-weight: 500;
    font-size: 22px;
}

/* Adjust body padding when indicators are visible */
.new-content-indicator.visible ~ * {
    margin-top: 50px;
}

.offline-indicator.visible ~ * {
    margin-top: 45px;
}

.new-content-indicator.visible + .offline-indicator.visible ~ * {
    margin-top: 95px;
}

/* Cache status indicator */
.cache-status {
    font-size: 1.21em;
    color: #666;
    font-style: italic;
}

/* Storage warning */
.storage-warning {
    background: #ffa500;
    color: white;
    padding: 5px 10px;
    font-size: 19px;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.storage-warning.visible {
    transform: translateY(0);
}
/*
 Error Fallback Styles */
.error-fallback {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 20px;
    margin: 10px 0;
    text-align: center;
}

.error-fallback .error-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.error-fallback h3 {
    color: #856404;
    margin-bottom: 10px;
    font-size: 26px;
}

.error-fallback p {
    color: #856404;
    margin-bottom: 10px;
}

.error-fallback details {
    margin-top: 15px;
    text-align: left;
}

.error-fallback summary {
    cursor: pointer;
    color: #856404;
    font-weight: bold;
}

.error-fallback .error-message {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 10px;
    margin-top: 10px;
    font-family: monospace;
    font-size: 22px;
    word-break: break-word;
}

.error-fallback .retry-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

.error-fallback .retry-button:hover {
    background-color: #0056b3;
}

.error-fallback .retry-button:focus {
    outline: 2px solid #0000ff;
    outline-offset: 2px;
}

/* Enhanced Image Handling Styles */
.story-image {
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 4px;
}

.story-image img {
    max-width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease-in-out;
}

/* Loading state styles */
.story-image.image-loading {
    background-color: #f8f9fa;
    position: relative;
}

.story-image.image-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: shimmer 2s infinite;
    z-index: 1;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.image-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #e0e0e0;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hide loading indicator when image is loaded */
.story-image.image-loaded .image-loading-indicator {
    display: none;
}

/* Error state styles */
.story-image.image-error {
    background-color: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-error-indicator {
    color: #6c757d;
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.image-error-indicator svg {
    opacity: 0.6;
}

.image-caption {
    margin-top: 5px;
    font-size: 19px;
    color: #666;
    font-style: italic;
    text-align: center;
}

/* Lazy loading placeholder styles */
.story-image img[data-src] {
    background-color: #f0f0f0;
    min-height: 150px;
}

/* Progressive loading enhancement */
.story-image img[src*="data:image/svg"] {
    opacity: 1; /* Show placeholder immediately */
    background-color: #f8f9fa;
}

/* Fade-in effect for loaded images */
.story-image img:not([src*="data:image/svg"]) {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.story-image.image-loaded img {
    opacity: 1;
}

/* Section-based layout additions */
.column-section { margin: 6px 0; }
.section-title { font-weight: bold; margin: 4px 0; text-align: left; }
/* Admin-only: never show section titles on public site */
.column-section .section-title { display: none !important; }
/* Explicit divider element (legacy) — kept but not used by renderer */
.section-divider { 
    border: 0; 
    border-top: 1px solid #444; 
    margin: 10px 0 6px; 
    width: 100%;
}
.section-divider--thick { border-top-width: 2px; }
.section-divider--thin { border-top-width: 1px; }
.section-top-image img,
.section-top-image iframe {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 4px auto;
}
.section-top-image iframe {
    aspect-ratio: 16/9;
    border: 0 !important;
    outline: none;
    box-shadow: none;
}
.ad-section { text-align: center; margin: 8px 0; }
.ad-section img { max-width: 100%; height: auto; }

/* Compact spacing between items inside a section */
.regular-story[data-column], .column-story[data-column] {
    margin-bottom: 4px;
}

/* Automatic divider between successive sections based on data attribute
   Scope to columns only so breaking/main areas are unaffected */
.column .column-section + .column-section[data-divider="thin"],
#left-column .column-section + .column-section[data-divider="thin"],
#center-column .column-section + .column-section[data-divider="thin"],
#right-column .column-section + .column-section[data-divider="thin"] {
    border-top: 1px solid #444; padding-top: 6px; margin-top: 10px;
}
.column .column-section + .column-section[data-divider="thick"],
#left-column .column-section + .column-section[data-divider="thick"],
#center-column .column-section + .column-section[data-divider="thick"],
#right-column .column-section + .column-section[data-divider="thick"] {
    border-top: 2px solid #444; padding-top: 6px; margin-top: 10px;
}

/* Section-specific Image Widths - Following Drudge Report Pattern */

/* Breaking Section Images - 380px fixed width to match text constraint */
/* Keep a reasonable default width for breaking images while allowing container to control alignment */
.breaking-news .story-image img,
.breaking-news .section-top-image img,
.breaking-news .section-top-image iframe {
    width: 380px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 0 8px 0;
}

/* Main Section Images - slightly larger on desktop */
#main-story .story-image img,
#main-story .section-top-image img,
#main-story .section-top-image iframe {
    width: 640px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Column Section Images - 375px fixed width */
.column .story-image,
.column .section-top-image,
.column-section .story-image,
.column-section .section-top-image { text-align: left; }
.column .story-image img,
.column .section-top-image img,
.column-section .story-image img,
.column-section .section-top-image img,
.column .section-top-image iframe,
.column-section .section-top-image iframe {
    width: 375px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 0 8px 0; /* align with text start inside column */
}

/* Portrait-only caps (no cropping) for columns and breaking; main remains unchanged */
/* Portrait-only caps (no cropping) */
/* Columns (left/center/right) */
.column .story-image.is-portrait img,
.column .section-top-image.is-portrait img,
.column-section .story-image.is-portrait img,
.column-section .section-top-image.is-portrait img {
    height: auto;
    max-height: 420px; /* tighten portrait height in columns */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

/* Breaking section */
.breaking-news .story-image.is-portrait img,
.breaking-news .section-top-image.is-portrait img {
    height: auto;
    max-height: 430px; /* slightly larger than columns */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}
/* Dark theme readability enhancements */
/* Ensure base colors remain consistent */
body { background-color: #0b0b0b; color: #e6e6e6; }
/* Keep global link defaults neutral; section-specific overrides below */
a, a:visited { color: #e6e6e6; letter-spacing: 0.05em; }
a:hover { color: #ffffff; }

/* Headline readability and hierarchy */
.main-headline a {
    letter-spacing: 0.01em;
}

/* Apply gold glow to the first few breaking headlines */
.breaking-headline,
.breaking-headline a {
    letter-spacing: 0.01em;
}
.breaking-news .story-link:nth-child(-n+3) a {
    /* no-op: removing glow */
}

/* Other headlines */
.column-headline a { letter-spacing: 0.01em; }
.logo { color: #e6e6e6; letter-spacing: 0.05em; font-weight: 400; }
.logo img { max-width: 100%; height: auto; display: inline-block; }

/* Component color consistency */
.breaking-news { background-color: #0b0b0b; }
.skip-link { background: #0b0b0b; color: #e6e6e6; }
.skip-link:focus { outline-color: #e6e6e6; }

/* ===== Readability + Color Refresh (no layout changes) ===== */
:root{
  --ink:#e6e6e6;
  --link:#3aa3ff;
  --link-hover:#66baff;
  --link-visited:#89c9ff;
  --underline-thick: 1.5px;
  --underline-offset: 3px;
  /* Headline variant palette */
  --headline-default:#3aa3ff;
  --headline-default-hover:#66baff;
  --headline-default-visited:#89c9ff;
  --headline-offwhite:#e5e7eb;
  --headline-offwhite-hover:#ffffff;
  --headline-offwhite-visited:#d1d5db;
  --headline-pink:#f63489;
  --headline-pink-hover:#ff5aa2;
  --headline-pink-visited:#d91f74;
}

/* 1) Main story headline (keep current font-size) */
.main-headline,
.main-headline a{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: var(--link);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thick);
  text-underline-offset: var(--underline-offset);
}
.main-headline:hover,
.main-headline a:hover{ color: var(--link-hover); }
.main-headline:visited,
.main-headline a:visited{ color: var(--link-visited); }

/* 2) Breaking section (same as now, but ~8% larger for readability) */
.breaking-news { font-size: 1.08em; }
@media (max-width: 768px) {
  .breaking-news { font-size: calc(24px * 1.08); }
}
.breaking-news a,
.breaking-news .breaking-headline,
.breaking-news .story-link a{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: var(--link);
  line-height: 1.38;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thick);
  text-underline-offset: var(--underline-offset);
}
.breaking-news a:hover,
.breaking-news .breaking-headline:hover,
.breaking-news .story-link a:hover{ color: var(--link-hover); }
.breaking-news a:visited,
.breaking-news .breaking-headline:visited,
.breaking-news .story-link a:visited{ color: var(--link-visited); }

/* 3) Three-column headlines (keep existing sizes) */
.columns .column-headline a,
.columns .story-link a,
.column a{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: var(--link);
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thick);
  text-underline-offset: var(--underline-offset);
}
.columns .column-headline a:hover,
.columns .story-link a:hover,
.column a:hover{ color: var(--link-hover); }
.columns .column-headline a:visited,
.columns .story-link a:visited,
.column a:visited{ color: var(--link-visited); }

/* Non-link headings/labels remain readable soft white */
.columns h2, .breaking-news h2, .main-headline h2, .section-title{
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* ===== End patch ===== */

/* 1. Blue link improvements */
a {
  color: #3aa3ff;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: #66baff; }
a:visited { color: #89c9ff; }

/* Headline color variants */
.headline { color: var(--headline-default); }
.headline:hover { color: var(--headline-default-hover); }
.headline:visited { color: var(--headline-default-visited); }

.headline--default { color: var(--headline-default) !important; }
.headline--default:hover { color: var(--headline-default-hover) !important; }
.headline--default:visited { color: var(--headline-default-visited) !important; }

.headline--offwhite { color: var(--headline-offwhite) !important; }
.headline--offwhite:hover { color: var(--headline-offwhite-hover) !important; }
.headline--offwhite:visited { color: var(--headline-offwhite-visited) !important; }

.headline--pink { color: var(--headline-pink) !important; }
.headline--pink:hover { color: var(--headline-pink-hover) !important; }
.headline--pink:visited { color: var(--headline-pink-visited) !important; }

/* 2. Main story spacing fix */
.main-story a,
.main-headline a,
.main-section a {
  letter-spacing: 0.02em;
  line-height: 1.2;
  font-weight: 800;
}

/* Ensure main story spacing applies regardless of render path */
a.main-headline,
#main-story a,
#main-story .story-link a {
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

/* Main section story items should use full container width */
#main-story .story-link {
  width: 100%;
  display: block;
}