@charset "utf-8";

/*
 * LavenderCAM final shared presentation layer.
 * Loaded after every page's own CSS so all public pages retain one visual system.
 */
:root {
    --lc-theme-navy: #203c64;
    --lc-theme-blue: #2c5889;
    --lc-theme-lavender: #71619f;
    --lc-theme-lavender-light: #a798d0;
    --lc-theme-ink: #20283a;
    --lc-theme-muted: #687386;
    --lc-theme-line: #dedbe8;
    --lc-theme-soft: #f6f4fa;
    --lc-theme-shadow: 0 7px 21px rgba(31, 38, 62, .09);
    --lc-theme-shadow-strong: 0 13px 30px rgba(35, 31, 71, .22);
}

/* One unmistakable title treatment on every content page. */
.content h1 {
    position: relative !important;
    display: block !important;
    width: 650px !important;
    max-width: 100% !important;
    margin: 0 auto 18px !important;
    padding: 22px 24px 23px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: linear-gradient(130deg, #253f67 0%, #51477f 53%, #8975b4 100%) !important;
    box-shadow: var(--lc-theme-shadow-strong) !important;
    color: #fff !important;
    font: 700 1.42rem/1.22 Georgia, "Times New Roman", serif !important;
    letter-spacing: -.02em !important;
    text-align: center !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.14) !important;
}

.content h1::before,
.content h1::after {
    content: none !important;
    display: none !important;
}

.content h2 {
    color: #29344a !important;
    font-family: Georgia, "Times New Roman", serif !important;
    letter-spacing: -.01em;
}

.content h3 {
    color: #343047;
    font-family: Georgia, "Times New Roman", serif;
}

.content > .centre > h6,
.content [class$="-intro"] > h6 {
    max-width: 620px !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    color: #574e70 !important;
    font: 700 .72rem/1.48 Arial, sans-serif !important;
    text-align: center !important;
}

.content :is(
    .train-hub-intro, .train-intro, .grid-intro, .warning-intro,
    .power-intro, .tsunami-intro, .ntp-intro, .sky-intro,
    [class$="-page"] > [class$="-intro"]
) {
    max-width: 620px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    color: var(--lc-theme-muted) !important;
    font-family: Arial, sans-serif !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

.content [class$="-intro"] p,
.content p[class$="-intro"] {
    color: var(--lc-theme-muted) !important;
    line-height: 1.55 !important;
}

/* Reusable LavenderCAM surface shared across every subject area. */
.content :is(
    .live-status-panel, .today-glance-tile, .home-panels-loading,
    .pollen-card, .pollen-glance-item, .grid-tile, .grid-box,
    .warning-summary, .warning-item, .warning-empty,
    .earthquake-info-box, .earthquake-item, .empty-feed-box,
    .tsunami-status-box, .tsunami-latest-box, .tsunami-item, .tsunami-quick-tile,
    .volcano-status-box, .volcano-info-box,
    .fire-status, .fire-stat, .fire-info,
    .sky-card, .sky-box, .sky-alert,
    .ntp-panel, .ntp-clock-box, .ntp-info-box, .ntp-world-box, .ntp-status-panel,
    .traffic-info-box, .traffic-list-panel, .vms-gantry,
    .traffic-panel, .traffic-card, .traffic-main-status, .traffic-summary, .traffic-warning,
    .power-panel,
    .river-panel, .river-card, .today-panel, .source-card, .river-info-box,
    .flight-topbar, .legend,
    .ais-panel, .aviation-grid, .contact-panel, .faq-card,
    .iss-section, .jetstream-section, .jetstream-link-card,
    .lightning-info, .lightning-report, .lightningdata-section,
    .location-panel, .location-map-card, .privacy-frame-wrap,
    .rain-chart-section, .rainradar-section, .satellite-section,
    .snowradar-section, .weathergraph-section, .wind-chart-section, .historyyear-section,
    .train-section, .train-data-note, .station-button,
    .timelapse-feature, .timelapse-archive, .video-snapshot-archive
) {
    border-color: var(--lc-theme-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--lc-theme-shadow) !important;
}

.content :is(
    .grid-tile:not(.grid-tile-wide), .grid-box,
    .warning-item, .warning-empty,
    .earthquake-info-box, .earthquake-item, .empty-feed-box,
    .tsunami-latest-box, .tsunami-item, .tsunami-quick-tile,
    .volcano-info-box,
    .fire-stat, .fire-info,
    .sky-card, .sky-box,
    .ntp-clock-box, .ntp-info-box, .ntp-world-box,
    .traffic-info-box, .traffic-list-panel, .traffic-card, .traffic-summary,
    .power-panel,
    .river-card, .source-card, .river-info-box,
    .ais-panel, .contact-panel, .faq-card,
    .iss-section, .jetstream-section, .jetstream-link-card,
    .lightning-info, .lightning-report, .lightningdata-section,
    .location-panel, .location-map-card, .privacy-frame-wrap,
    .rain-chart-section, .rainradar-section, .satellite-section,
    .snowradar-section, .weathergraph-section, .wind-chart-section, .historyyear-section,
    .train-section, .station-button
) {
    background: linear-gradient(145deg, #fff 0%, #f8f7fb 100%) !important;
}

/* Consistent section bars and card headings. */
.content :is(
    .warning-feed, .train-section, .grid-box, .sky-box,
    .ntp-info-box, .ntp-world-box, .traffic-list-panel,
    .river-panel, .iss-section, .jetstream-section,
    .lightningdata-section, .rainradar-section, .satellite-section,
    .snowradar-section, .weathergraph-section, .historyyear-section
) > h2,
.content :is(.grid-box-title, .sky-box-title, .section-title, .traffic-list-head) {
    margin-top: 0 !important;
    color: var(--lc-theme-ink) !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.content :is(
    .grid-box-title, .sky-box-title, .section-title,
    .ntp-info-title, .ntp-world-title, .traffic-list-head,
    .timelapse-archive-title, .video-snapshot-gallery-title
) {
    padding-bottom: 9px !important;
    border-bottom: 1px solid #e8e5ef !important;
}

/* One language for notes, explanations and update messages. */
.content :is(
    .train-data-note, .grid-source-guide, .warning-note,
    .earthquake-note, .tsunami-note, .tsunami-section-note,
    .fire-map-note, .sky-note, .ntp-small-note,
    .traffic-note, .traffic-status-note, .power-links,
    .river-note, .flow-note, .table-note,
    .ais-note, .aviation-note, .contact-note,
    .jetstream-note, .snowradar-note, .weathergraphs-note,
    .privacy-note, .timelapse-note
) {
    border: 1px solid #d6d0e4 !important;
    border-radius: 9px !important;
    background: #f4f1f8 !important;
    color: #5c566c !important;
    box-shadow: none !important;
}

/* Uniform status chips without losing each page's severity meaning. */
.content :is(
    .warning-pill, .quake-pill, .tsunami-pill, .volcano-pill,
    .flight-pill, .grid-help-icon, .marker-count
) {
    border-radius: 999px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
}

.content :is(.green, .train-good, .grid-green) { color: #278051 !important; }
.content :is(.amber, .yellow, .train-warn, .grid-amber) { color: #a56800 !important; }
.content :is(.red, .train-bad, .grid-red) { color: #bb304b !important; }
.content :is(.purple) { color: #6d51a5 !important; }

.content :is(
    .warning-pill, .quake-pill, .tsunami-pill,
    .volcano-pill, .flight-pill
) { color: #fff !important; }

/* Tables use the same quiet header, spacing and row rhythm. */
.content :is(
    .train-table, .grid-table, .pollen-table, .traffic-table,
    .sky-table, .ntp-status-table, .overflow-table,
    .volcano-table, .volcano-europe-table
) {
    width: 100% !important;
    border: 1px solid #d9d5e3 !important;
    border-radius: 9px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    background: #fff !important;
}

.content :is(
    .train-table, .grid-table, .pollen-table, .traffic-table,
    .sky-table, .ntp-status-table, .overflow-table,
    .volcano-table, .volcano-europe-table
) th {
    border-color: #d9d5e3 !important;
    background: #e9e6f0 !important;
    color: #3f3855 !important;
    font: 700 .62rem/1.35 Arial, sans-serif !important;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.content :is(
    .train-table, .grid-table, .pollen-table, .traffic-table,
    .sky-table, .ntp-status-table, .overflow-table,
    .volcano-table, .volcano-europe-table
) td {
    border-color: #ece9f1 !important;
    color: #353b4a;
}

/* Frames, maps, charts and media sit in the same polished frame. */
.content :is(
    .flightmap-wrap, .fire-wrap, .earthquake-list,
    .ais-map-wrap, .aqi-map-wrapper, .iss-frame-wrapper,
    .jetstream-frame-wrapper,
    .lightning-map, .stormvue-wrapper, .lightningdata-frame-wrapper,
    .location-map-card, .rainradar-frame-wrapper, .satellite-frame-wrapper,
    .snowradar-frame-wrapper,
    .forecast-wrapper, .aqi-chart, .rain-chart, .wind-chart,
    .grid-chart-wrap, .history-records-frame,
    .timelapse-player, .video-snapshot-viewer
) {
    overflow: hidden;
    border-color: #d2cddc !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 22px rgba(31, 38, 62, .11) !important;
}

.content :is(
    .iss-frame, .jetstream-frame, .jetstream-aviation-frame,
    .lightningdata-frame, .rainradar-frame, .satellite-frame,
    .snowradar-frame, .weather-frame, .weather-table-frame
) {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.content :is(
    .iss-frame-wrapper, .jetstream-frame-wrapper,
    .lightningdata-frame-wrapper, .rainradar-frame-wrapper,
    .satellite-frame-wrapper, .snowradar-frame-wrapper
) > :is(img, iframe) {
    border-radius: 0 !important;
}

/* All action links and controls share the LavenderCAM button language. */
.content a:is(
    .history-trends-link, .history-year-card, .river-link-button,
    .home-timelapse-button, .video-snapshot-viewer-back
),
.content button:not(.plant-trigger),
.content input[type="button"],
.content input[type="submit"] {
    border-radius: 8px !important;
}

.content a:is(.river-link-button, .home-timelapse-button, .video-snapshot-viewer-back),
.content button:not(.map-mode-button):not(.plant-trigger),
.content input[type="button"],
.content input[type="submit"] {
    border: 1px solid rgba(75, 65, 122, .35) !important;
    background: linear-gradient(135deg, var(--lc-theme-navy), var(--lc-theme-lavender)) !important;
    box-shadow: 0 5px 14px rgba(43, 42, 79, .16) !important;
    color: #fff !important;
}

.content :is(.map-mode-button, .fire-view-switch button) {
    border-radius: 8px !important;
}

/* FAQ and static information pages use the same readable measure. */
.content :is(.faq-grid, .contact-panel, .privacy-frame-wrap, .location-panel) {
    max-width: 650px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.faq-card {
    margin-bottom: 14px !important;
    padding: 17px !important;
    border-left: 4px solid var(--lc-theme-lavender) !important;
}

/* Preserve high-priority alert backgrounds after uniform surface styling. */
.warning-summary.green { border-left-color: #399964 !important; background: linear-gradient(145deg, #fff 0%, #f0faf4 100%) !important; }
.warning-summary.yellow { border-left-color: #d8a11f !important; background: linear-gradient(145deg, #fff 0%, #fff9e8 100%) !important; }
.warning-summary.amber { border-left-color: #d97706 !important; background: linear-gradient(145deg, #fff 0%, #fff5e7 100%) !important; }
.warning-summary.red { border-left-color: #c93651 !important; background: linear-gradient(145deg, #fff 0%, #fff0f3 100%) !important; }
.train-good { background: #edf8f1 !important; }
.train-warn { background: #fff8e5 !important; }
.train-bad { background: #fff0f3 !important; }
.train-muted { background: #f3f4f6 !important; }

/* Dark feature panels retain deliberate high-contrast internal colours. */
.pollen-hero .pollen-kicker,
.pollen-hero .pollen-title,
.pollen-hero .pollen-summary,
.pollen-hero .pollen-meta-item,
.pollen-hero .pollen-meta-item strong {
    color: #fff !important;
}

.pollen-hero .pollen-summary { color: rgba(255,255,255,.9) !important; }
.pollen-hero {
    background: linear-gradient(130deg, #3f356f 0%, #6f63b6 58%, #9a83ca 100%) !important;
    color: #fff !important;
}
.pollen-hero .pollen-meta {
    border-top-color: rgba(255,255,255,.16) !important;
    background: rgba(20,15,49,.16) !important;
}
.pollen-hero .pollen-meta-item {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.82) !important;
}

.pollen-page .plant-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    font-weight: 700 !important;
    filter: none !important;
}

/* Shared mobile rhythm, regardless of a page's original inline rules. */
@media screen and (max-width: 760px) {
    .content h1 {
        width: calc(100% - 28px) !important;
        padding: 19px 18px 20px !important;
        border-radius: 12px !important;
        font-size: 1.18rem !important;
    }

    .content > .centre,
    .content > [class$="-page"],
    .content > main[class*="-page"] {
        max-width: 100% !important;
    }

    .content :is(
        .warning-page-panel, .grid-panel, .train-panel,
        .power-panel, .river-panel, .sky-wrap,
        .fire-wrap, .flightmap-wrap
    ) {
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
    }

    .content :is(.aviation-grid, .location-map-grid, .river-grid, .today-grid) {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content *,
    .content *::before,
    .content *::after {
        scroll-behavior: auto !important;
    }
}
/* Earthquake feed filters sit on dark blue controls, so link-history colours
   must never reduce their contrast. Keep the selected amber filter dark. */
.content .earthquake-buttons a,
.content .earthquake-buttons a:link,
.content .earthquake-buttons a:visited,
.content .earthquake-buttons a:hover,
.content .earthquake-buttons a:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

.content .earthquake-buttons a.active,
.content .earthquake-buttons a.active:link,
.content .earthquake-buttons a.active:visited,
.content .earthquake-buttons a.active:hover,
.content .earthquake-buttons a.active:focus {
    color: #332e45 !important;
}

/* Tsunami summary panels use semantic dark backgrounds. Protect their text
   from the shared card typography so status messages stay immediately clear. */
.content .tsunami-status-box,
.content .tsunami-status-box h3,
.content .tsunami-status-box p,
.content .tsunami-status-box strong,
.content .tsunami-status-box a,
.content .tsunami-status-box a:link,
.content .tsunami-status-box a:visited {
    color: #ffffff !important;
}

.content .tsunami-status-box.tsunami-watch,
.content .tsunami-status-box.tsunami-watch h3,
.content .tsunami-status-box.tsunami-watch p,
.content .tsunami-status-box.tsunami-watch strong,
.content .tsunami-status-box.tsunami-advisory,
.content .tsunami-status-box.tsunami-advisory h3,
.content .tsunami-status-box.tsunami-advisory p,
.content .tsunami-status-box.tsunami-advisory strong {
    color: #2f2a3f !important;
}

/* Keep typography legible wherever an individual page uses the shared dark
   feature treatment. These override only the foreground colours. */
.content .train-hero,
.content .train-hero .train-hero-title,
.content .train-hero .train-feature,
.content .warning-feed > h2 {
    color: #ffffff !important;
}

.content .train-hero .train-hero-kicker {
    color: #e9e4f8 !important;
}

.content .train-hero .train-hero-copy,
.content .sky-hero .sky-hero-title,
.content .sky-hero .sky-hero-sub,
.content .grid-tile-wide .grid-tile-detail {
    color: rgba(255, 255, 255, .88) !important;
}

.content .grid-tile-wide .grid-tile-title {
    color: #e5e0f2 !important;
}

.content .grid-tile-wide .grid-tile-value {
    color: #ffffff !important;
}