/* WAR NEWS WIRE — warnewswire.com
   Retro-modern WWII wire service aesthetic
   Fonts: Special Elite (typewriter), Oswald (bold headlines), IBM Plex Mono (body)
*/

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

body {
    background: #0a0a08;
    color: #d4cfc4;
    font-family: "IBM Plex Mono", "Courier New", Courier, monospace;
    font-size: 15px;
    line-height: 1.5;
}

/* ── FIXED SITE HEADER ─────────────────────────────────────── */

#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #0a0a08;
}

/* ── TICKER BAR ──────────────────────────────────────────── */

#ticker-bar {
    background: #1a0000;
    color: #fff;
    display: flex;
    align-items: center;
    height: 38px;
    border-bottom: 2px solid #8b0000;
    font-family: "IBM Plex Mono", monospace;
}

.ticker-label {
    background: #8b0000;
    color: #ffd700;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    letter-spacing: 3px;
    flex-shrink: 0;
    animation: pulse-label 2s ease-in-out infinite;
}

@keyframes pulse-label {
    0%, 100% { background: #8b0000; }
    50% { background: #6b0000; }
}

#ticker-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
    position: relative;
}

#ticker-track {
    display: inline-block;
    white-space: nowrap;
    animation: ticker-scroll var(--ticker-duration, 60s) linear infinite;
    padding-left: 100%;
}

#ticker-track:hover {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

#ticker-text {
    display: inline;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #e8e0d0;
}

.ticker-item a {
    color: #e8e0d0;
    text-decoration: none;
    transition: color 0.15s;
}

.ticker-item a:hover {
    color: #ff4444;
}

.ticker-bullet {
    color: #8b0000;
    font-weight: bold;
    margin: 0 8px;
}

.ticker-source {
    color: #8b6060;
    font-size: 12px;
    margin-left: 4px;
    margin-right: 12px;
}

.ticker-timer {
    background: #111;
    color: #8b0000;
    font-weight: bold;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 12px;
    flex-shrink: 0;
    min-width: 36px;
    justify-content: center;
    border-left: 1px solid #333;
}

/* ── HEADER ──────────────────────────────────────────────── */

header {
    text-align: center;
    padding: 8px 20px 6px;
    border-bottom: 1px solid #222;
    background: #0a0a08;
}

.site-title {
    font-family: "Oswald", Impact, sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: #e8e0d0;
    letter-spacing: 12px;
    text-transform: uppercase;
    line-height: 1;
}

.subtitle {
    margin-top: 2px;
}

.subtitle-link {
    font-family: "Special Elite", "Courier New", monospace;
    font-size: 16px;
    color: #8b0000;
    letter-spacing: 5px;
    text-decoration: none;
    border-bottom: 1px dotted #8b0000;
    transition: color 0.2s;
}

.subtitle-link:hover {
    color: #cc0000;
}

.update-time {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: #444;
    margin-top: 4px;
    letter-spacing: 1px;
}

#breaking-timer, #top-stories-timer {
    color: #666;
    font-weight: bold;
}

/* ── CATEGORY NAV ────────────────────────────────────────── */

#category-nav {
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 6px 10px;
    background: #0d0d0b;
    border-bottom: 2px solid #8b0000;
    flex-wrap: wrap;
}

.cat-link {
    font-family: "Oswald", sans-serif;
    color: #888;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 4px 14px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.cat-link:hover,
.cat-link.active {
    color: #e8e0d0;
    border-color: #8b0000;
    background: #1a0a0a;
}

.agitprop-link {
    color: #b8860b;
}

.agitprop-link:hover,
.agitprop-link.active {
    color: #ffd700;
    border-color: #b8860b;
    background: #1a1500;
}

.breaking-link {
    color: #cc4444;
}

.breaking-link:hover,
.breaking-link.active {
    color: #ff4444;
    border-color: #cc0000;
    background: #1a0a0a;
}

/* ── LIVE BAR ────────────────────────────────────────────── */

#live-bar {
    display: flex;
    align-items: center;
    background: #0d1a00;
    border-bottom: 1px solid #1a3300;
    padding: 0;
    min-height: 28px;
    font-size: 12px;
}

.live-label {
    background: #006600;
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 0 12px;
    height: 28px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { background: #006600; }
    50% { background: #004400; }
}

#live-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
    position: relative;
    font-family: "IBM Plex Mono", monospace;
}

#live-track {
    display: inline-block;
    white-space: nowrap;
    animation: live-scroll var(--live-duration, 30s) linear infinite;
    padding-left: 100%;
}

#live-track:hover {
    animation-play-state: paused;
}

#live-track.no-scroll {
    animation: none;
    padding-left: 16px;
}

@keyframes live-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

#live-text {
    display: inline;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #668866;
}

#live-content a {
    color: #88cc88;
    text-decoration: none;
    font-weight: bold;
}

#live-content a:hover {
    color: #aaffaa;
}

.live-bullet {
    color: #006600;
    font-weight: bold;
    margin: 0 8px;
}

/* ── TOP ROW (Last 24h | Breaking | Broadcasts) ─────────── */

#top-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 1400px;
    margin: 0 auto;
    border-bottom: 3px double #222;
}

#top-row > .top-col {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 16px;
    border-right: 1px solid #1a1a18;
}

.top-col:last-child {
    border-right: none;
}

#top-col-center {
    background: #150000;
    border-left: 1px solid #330000;
    border-right: 1px solid #330000;
}

/* ── BREAKING NEWS ───────────────────────────────────────── */

.breaking-header {
    font-family: "Oswald", sans-serif;
    font-size: 22px;
    color: #cc0000;
    letter-spacing: 4px;
    margin-bottom: 10px;
    animation: flash-break 1.5s ease-in-out infinite;
}

@keyframes flash-break {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.breaking-update-note {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: #663333;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.breaking-update-note span {
    color: #994444;
    font-weight: bold;
}

/* ── SECTION HEADERS ─────────────────────────────────────── */

.section-header {
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    color: #8b0000;
    letter-spacing: 3px;
    padding: 10px 20px 6px;
    max-width: 1400px;
    margin: 0 auto;
    border-bottom: 1px solid #222;
}

/* ── 3-COLUMN LAYOUT ─────────────────────────────────────── */

#main-content {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
}

.column {
    flex: 1;
    padding: 14px 16px;
    border-right: 1px solid #1a1a18;
}

.column:last-child {
    border-right: none;
}

#col-center {
    flex: 1.5;
    border-left: 1px solid #1a1a18;
}

.col-header {
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    color: #8b0000;
    letter-spacing: 3px;
    border-bottom: 1px solid #2a2a28;
    padding-bottom: 4px;
    margin-bottom: 10px;
    margin-top: 20px;
    font-weight: 600;
}

.col-header:first-child {
    margin-top: 0;
}

/* ── LINK LISTS ──────────────────────────────────────────── */

.link-list {
    list-style: none;
}

.link-item {
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px dotted #1a1a18;
}

.link-item:last-child {
    border-bottom: none;
}

.link-item a {
    font-family: "Special Elite", "Courier New", monospace;
    color: #d4cfc4;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.35;
    display: block;
    transition: color 0.15s;
}

.link-item a:hover {
    color: #cc0000;
}

.link-item a:visited {
    color: #807a6e;
}

.link-item.breaking a {
    color: #ff4444;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
}

.link-source {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: #555;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.link-time {
    font-size: 11px;
    color: #444;
}

.no-articles {
    color: #333;
    font-style: italic;
    font-size: 13px;
    padding: 6px 0;
    font-family: "IBM Plex Mono", monospace;
}

/* ── BOTTOM SECTIONS ─────────────────────────────────────── */

#bottom-sections {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    border-top: 3px double #222;
}

.bottom-col {
    flex: 1;
    padding: 14px 16px;
    border-right: 1px solid #1a1a18;
}

.bottom-col:last-child {
    border-right: none;
}

/* ── HAPPENING NOW ───────────────────────────────────────── */

.happening-now-header {
    color: #cc4400 !important;
    font-size: 18px !important;
    letter-spacing: 4px !important;
    animation: happening-pulse 3s ease-in-out infinite;
}

@keyframes happening-pulse {
    0%, 100% { color: #cc4400; }
    50% { color: #ff6600; }
}

/* ── AGITPROP (in bottom section) ────────────────────────── */

.agitprop-col {
    background: #0d0d00;
}

.agitprop-header {
    color: #b8860b !important;
}

.agitprop-warning {
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    color: #ff3300;
    letter-spacing: 3px;
    font-weight: 700;
    text-transform: uppercase;
}

.agitprop-timer {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    color: #666600;
    letter-spacing: 1px;
    font-weight: normal;
    margin-left: 8px;
}

.agitprop-col .link-item a {
    color: #c4b878;
}

.agitprop-col .link-item a:hover {
    color: #ffd700;
}

.agitprop-col .link-item a:visited {
    color: #8a8040;
}

.agitprop-col .link-source {
    color: #666600;
}

.podcast-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dotted #1a1a18;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
}

.podcast-item:last-child {
    border-bottom: none;
}

.podcast-name {
    font-family: "Special Elite", monospace;
    color: #d4cfc4;
    font-size: 15px;
    min-width: 200px;
}

.podcast-status {
    color: #555;
    font-size: 12px;
}

.podcast-live {
    color: #00cc00;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.podcast-live a {
    color: #00cc00;
    text-decoration: none;
}

.podcast-live a:hover {
    color: #00ff00;
}

.podcast-episode a {
    color: #888;
    text-decoration: none;
    font-size: 13px;
}

.podcast-episode a:hover {
    color: #d4cfc4;
}

/* ── CUSTOM SECTIONS ─────────────────────────────────────── */

#custom-sections-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

#custom-sections {
    display: flex;
    border-top: 2px solid #1a1a18;
}

.custom-section-col {
    flex: 1;
    padding: 14px 16px;
    border-right: 1px solid #1a1a18;
}

.custom-section-col:last-child {
    border-right: none;
}

/* ── FAVORITE LINKS ──────────────────────────────────────── */

#favorite-links {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 20px;
    border-top: 3px double #222;
    text-align: center;
}

.fav-links-row {
    margin-bottom: 8px;
    line-height: 2;
}

.fav-links-row a {
    font-family: "Oswald", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-decoration: none;
    letter-spacing: 2px;
    margin: 0 10px;
    transition: color 0.2s;
}

.fav-links-row a:hover {
    color: #d4cfc4;
}

.fav-podcasts {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted #222;
}

.fav-label {
    font-family: "Oswald", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #8b0000;
    letter-spacing: 2px;
    margin-right: 6px;
}

.fav-podcasts a {
    color: #888;
}

.fav-podcasts a:hover {
    color: #cc4400;
}

/* ── LAST 24 HOURS ───────────────────────────────────────── */

.last24h-header {
    color: #cc6600 !important;
    letter-spacing: 4px !important;
    font-size: 18px !important;
}

#last24h-links .link-item a {
    font-size: 16px;
    font-weight: bold;
}

#last24h-links .link-item.graded {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
}

#last24h-links .link-item.graded .link-source {
    width: 100%;
    padding-left: 38px;
}

.grade {
    display: inline-block;
    font-weight: bold;
    font-size: 10px;
    padding: 1px 4px;
    margin-right: 6px;
    border: 1px solid;
    font-family: 'Courier New', monospace;
    letter-spacing: 0;
    flex-shrink: 0;
    line-height: 1.4;
}

.grade-a-plus { color: #ff0000; border-color: #ff0000; }
.grade-a      { color: #ff3300; border-color: #ff3300; }
.grade-b-plus { color: #cc6600; border-color: #cc6600; }
.grade-b      { color: #999900; border-color: #999900; }
.grade-c      { color: #666666; border-color: #666666; }

/* ── ANONYMOUS CONTACT ───────────────────────────────────── */

#contact-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 20px;
    border-top: 1px solid #1a1a18;
}

#contact-section .section-header {
    padding: 0 0 8px;
    max-width: none;
}

.contact-note {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: #555;
    margin-bottom: 10px;
    font-style: italic;
}

#tip-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

#tip-message {
    flex: 1;
    background: #111;
    border: 1px solid #333;
    color: #d4cfc4;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    padding: 8px;
    resize: vertical;
    min-height: 50px;
}

#tip-message:focus {
    outline: none;
    border-color: #8b0000;
}

.tip-submit {
    font-family: "Oswald", sans-serif;
    background: #1a0000;
    color: #8b0000;
    border: 1px solid #8b0000;
    padding: 8px 16px;
    font-size: 13px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tip-submit:hover {
    background: #8b0000;
    color: #fff;
}

.tip-status {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: #888;
    margin-top: 6px;
    min-height: 16px;
}

.footer-policy {
    color: #555;
    letter-spacing: 2px;
    margin-top: 6px;
}

/* ── FOOTER ──────────────────────────────────────────────── */

footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #1a1a18;
    color: #333;
    font-size: 12px;
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: 0.5px;
}

/* ── FIELD LIBRARY ───────────────────────────────────────── */

#field-library {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 20px;
    border-top: 1px solid #1a1a18;
}

.library-header {
    color: #8b6600 !important;
}

.library-subtitle {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: #555;
    margin-bottom: 14px;
    font-style: italic;
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.library-item {
    padding: 10px;
    border: 1px solid #1a1a18;
    background: #0d0d0b;
}

.library-category {
    font-family: "Oswald", sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #8b6600;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.library-title {
    font-family: "Special Elite", "Courier New", monospace;
    font-size: 14px;
    color: #d4cfc4;
    text-decoration: none;
    display: block;
    line-height: 1.3;
    transition: color 0.15s;
}

.library-title:hover {
    color: #cc6600;
}

.library-author {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: #555;
    margin-top: 3px;
}

/* ── SUPPORT THE WIRE ───────────────────────────────────── */

#support-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.support-border {
    border-top: 3px double #333;
    margin: 0 auto;
    max-width: 600px;
}

.support-header {
    font-family: "Oswald", sans-serif;
    font-size: 24px;
    color: #8b0000;
    letter-spacing: 6px;
    padding: 12px 0;
}

.support-body {
    padding: 14px 0;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    color: #888;
    line-height: 1.6;
}

.support-body p {
    margin-bottom: 2px;
}

.support-costs {
    margin-top: 10px !important;
    color: #aaa;
}

.support-cta {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 28px;
    font-family: "Oswald", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffd700;
    background: #1a0000;
    border: 2px solid #8b0000;
    text-decoration: none;
    transition: all 0.2s;
}

.support-cta:hover {
    background: #8b0000;
    color: #fff;
}

.support-onetime {
    margin-top: 10px !important;
    font-size: 12px;
    color: #555;
}

.support-digest {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #1a1a18;
    background: #0d0d0b;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.digest-header {
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    color: #cc6600;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.subscribe-row {
    display: flex;
    gap: 8px;
}

#subscribe-email {
    flex: 1;
    background: #111;
    border: 1px solid #333;
    color: #d4cfc4;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    padding: 8px 10px;
}

#subscribe-email:focus {
    outline: none;
    border-color: #8b0000;
}

.subscribe-btn {
    font-family: "Oswald", sans-serif;
    background: #1a0000;
    color: #cc6600;
    border: 1px solid #cc6600;
    padding: 8px 18px;
    font-size: 13px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.subscribe-btn:hover {
    background: #cc6600;
    color: #fff;
}

.subscribe-status {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: #888;
    margin-top: 6px;
    min-height: 16px;
}

.digest-note {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: #555;
    margin-top: 6px;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 900px) {
    .site-title {
        font-size: 42px;
        letter-spacing: 6px;
    }

    .subtitle-link {
        font-size: 13px;
        letter-spacing: 2px;
    }

    #main-content {
        flex-direction: column;
    }

    .column {
        border-right: none;
        border-bottom: 1px solid #1a1a18;
    }

    #col-center {
        border-left: none;
        order: -1;
    }

    #top-row {
        flex-direction: column;
    }

    .top-col {
        border-right: none;
        border-bottom: 1px solid #1a1a18;
    }

    #bottom-sections {
        flex-direction: column;
    }

    .bottom-col:first-child {
        border-right: none;
        border-bottom: 1px solid #1a1a18;
    }

    .podcast-item {
        flex-direction: column;
        gap: 2px;
    }

    .podcast-name {
        min-width: auto;
    }

    .library-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .subscribe-row {
        flex-direction: column;
    }
}