/* ============================================================
   FORECAST CENTER PAGE
   Extracted from known-good harper.css during modular migration.
   Do not merge page-specific rules back into harper-core.css.
   ============================================================ */

/* ============================================================
   FORECAST CENTER
   ============================================================ */

.forecast-center-intro,
.geek-page-intro {
    margin: 0 0 28px 0;
    padding: 16px 18px;
    background: #f5f7f9;
    border: 1px solid #d9dee3;
    border-radius: 8px;
    line-height: 1.5;
}


.forecast-center-heading {
    margin-top: 34px;
    margin-left: 16px;
}


.forecast-center-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-left: 16px;
    margin-right: 16px;
}


.forecast-center-card {
    display: flex;
    flex-direction: column;
}


.forecast-center-card .forecast-detail {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #d9dee3;
    font-size: 0.92rem;
    line-height: 1.45;
}


/* ------------------------------------------------------------
   AREA FORECAST DISCUSSION
   ------------------------------------------------------------ */

.afd-card {
    margin-top: 16px;
    border: 1px solid #d9dee3;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}


.afd-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
    background: #f5f7f9;
    border-bottom: 1px solid #d9dee3;
}


.afd-issued {
    font-size: 0.9rem;
    color: #555555;
    text-align: right;
}


.afd-text {
    margin: 0;
    padding: 20px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;
    font-size: 0.9rem;
    line-height: 1.45;
    background: #ffffff;
    overflow-x: auto;
}


/* ------------------------------------------------------------
   NATIONAL FORECAST CHARTS
   ------------------------------------------------------------ */

.national-chart-card {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid #d9dee3;
    border-radius: 8px;
    background: #ffffff;
}


.national-chart-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}


.national-chart-button {
    padding: 9px 18px;
    border: 1px solid #aab2bb;
    border-radius: 6px;
    background: #f5f7f9;
    cursor: pointer;
    font: inherit;
}


.national-chart-button:hover {
    background: #e9edf1;
}


.national-chart-button.active {
    font-weight: bold;
    background: #dfe7ee;
}


.national-chart-display {
    text-align: center;
}


.national-chart-image {
    display: none;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
}


.national-chart-image.active {
    display: block;
}


/* ------------------------------------------------------------
   FORECAST CENTER — SMALL SCREENS
   ------------------------------------------------------------ */

@media (max-width: 700px) {

    .forecast-center-grid {
        grid-template-columns: 1fr;
    }

    .afd-header {
        flex-direction: column;
        gap: 5px;
    }

    .afd-issued {
        text-align: left;
    }

    .afd-text {
        padding: 14px;
        font-size: 0.82rem;
    }

    .national-chart-card {
        padding: 12px;
    }

}


/* ============================================================
   FORECAST CENTER — COMPACT TUNING
   ============================================================ */

.forecast-center-intro,
.geek-page-intro {
    padding: 12px 15px;
    margin-bottom: 22px;
    font-size: 0.95rem;
}

.forecast-center-heading {
    margin-top: 28px;
    margin-left: 16px;
}

.forecast-center-grid {
    grid-template-columns:
        repeat(auto-fit, minmax(195px, 1fr));
    gap: 14px;
    margin-left: 16px;
    margin-right: 16px;
}

.forecast-center-card {
    font-size: 0.92rem;
}

.forecast-center-card .forecast-period {
    font-size: 0.95rem;
}

.forecast-center-card .forecast-icon {
    max-width: 70px;
}

.forecast-center-card .forecast-temperature {
    font-size: 1.35rem;
}

.forecast-center-card .forecast-detail {
    margin-top: 9px;
    padding-top: 9px;
    font-size: 0.84rem;
    line-height: 1.35;
}

.afd-text {
    font-size: 1.00rem;
    line-height: 1.45;
    padding: 16px 18px;
    font-weight: 600;
    color: #17212b;
}

.national-chart-image {
    max-width: 1000px;
}

.national-chart-card {
    padding: 14px;
}

/* Forecast Center visual depth */
.forecast-center-card,
.national-chart-card {
    box-shadow: var(--shadow);
}

/* ============================================================
   FORECAST CENTER — LONG-RANGE OUTLOOK TEASER
   ============================================================ */

.forecast-outlook-teaser {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;

    margin: 14px 16px 18px;
    padding: 13px 16px;

    background: #eef5f9;
    border: 1px solid #c9d9e4;
    border-left: 5px solid #367da9;
    border-radius: 10px;

    color: inherit;
    text-decoration: none;
}

.forecast-outlook-teaser:hover {
    background: #e7f1f7;
    border-color: #aac8da;
}

.forecast-outlook-icon {
    width: 48px;
    height: 48px;
}

.forecast-outlook-icon svg {
    display: block;
    width: 48px;
    height: 48px;
}

.outlook-icon-bg {
    fill: #dcecf5;
}

.outlook-icon-sun {
    fill: #d79a43;
}

.outlook-icon-rays {
    fill: none;
    stroke: #d79a43;
    stroke-width: 2.3;
    stroke-linecap: round;
}

.outlook-icon-cloud {
    fill: #4f8db4;
}

.forecast-outlook-copy {
    min-width: 0;
}

.forecast-outlook-kicker {
    color: #60798a;
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.forecast-outlook-title {
    color: var(--blue-dark);
    font-size: 1.04rem;
    font-weight: 900;
}

.forecast-outlook-question {
    margin-top: 2px;
    color: #415f72;
    font-size: 0.84rem;
    font-weight: 700;
}

.forecast-outlook-status {
    margin-top: 4px;
    color: #667b89;
    font-size: 0.74rem;
    font-weight: 700;
}

.forecast-outlook-arrow {
    color: #246b98;
    font-size: 1.7rem;
    font-weight: 900;
}

@media (max-width: 620px) {
    .forecast-outlook-teaser {
        grid-template-columns: auto minmax(0, 1fr);
        margin-left: 10px;
        margin-right: 10px;
    }

    .forecast-outlook-arrow {
        display: none;
    }
}


/* Forecast outlook teaser — bring arrow in beside the text */

@media (min-width: 621px) {

    .forecast-outlook-teaser {
        grid-template-columns: auto max-content auto 1fr;
        column-gap: 14px;
    }

    .forecast-outlook-arrow {
        justify-self: start;
        margin-left: 4px;

        font-size: 2.7rem;
        line-height: 1;
        font-weight: 900;
    }
}


/* Forecast outlook teaser — larger call-to-action arrow */

@media (min-width: 621px) {
    .forecast-outlook-arrow {
        font-size: 4rem;
        line-height: 0.8;
        font-weight: 900;
    }
}

/* ============================================================
   FORECAST CENTER — COMPACT DATA STATUS CARD
   ============================================================ */

.aviation-refresh-notice {
    padding: 10px 14px;
    gap: 12px;
}

.aviation-refresh-icon {
    font-size: 2rem;
    line-height: 1;
}

.aviation-refresh-title {
    font-size: 0.92rem;
    line-height: 1.15;
    margin-bottom: 3px;
}

.aviation-refresh-text {
    font-size: 0.78rem;
    line-height: 1.35;
}


/* Forecast card primitives reused from Current Weather */
/* ============================================================
   PAGE 1 — NWS FORECAST
   ============================================================ */

.forecast-section {
    margin-top: 20px;
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.section-heading {
    margin-bottom: 13px;
}

.section-heading h2 {
    margin: 0;
    color: var(--blue-dark);
    font-size: 1.15rem;
}

.section-subtitle {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.82rem;
}

.forecast-section .forecast-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.forecast-card {
    padding: 13px 10px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
}

.forecast-period {
    min-height: 1.3em;
    color: var(--blue-dark);
    font-size: 0.9rem;
    font-weight: 900;
}

.forecast-icon {
    display: block;
    width: 72px;
    height: 72px;
    margin: 9px auto;
    border-radius: 7px;
}

.forecast-condition {
    min-height: 2.8em;
    font-size: 0.85rem;
    font-weight: 600;
}

.forecast-temperature {
    margin-top: 5px;
    font-size: 1.15rem;
    font-weight: 900;
}

.forecast-wind,
.forecast-rain {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.77rem;
}

.forecast-source {
    margin-top: 16px;
    color: var(--muted);
    font-size: 0.74rem;
}



.forecast-jump-links {
    margin-top: 16px;
    font-size: 0.92rem;
}

.forecast-jump-links a {
    font-weight: 700;
    text-decoration: none;
}

.forecast-jump-links a:hover {
    text-decoration: underline;
}

/* Compact page-data freshness line.
   Matches the site's page-update treatment without allowing
   routine timestamps to dominate the Forecast Center. */
.forecast-data-update {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--muted, #667788);
}

.forecast-update-separator {
    padding: 0 0.16em;
    color: var(--muted, #667788);
}