/* ============================================================
   WEATHER DUCK — Forecast Page Header  (v5.2)
   Scoped to .wd-fc-header__* + .wd-fc-astro-* — no leakage

   Desktop (≥1100px): fixed 160px-tall 5-column grid
     Col 1: Location  |  Col 2: Map  |  Col 3: Today  |  Col 4: Tomorrow  |  Col 5: Sun & Moon

   Mobile: flex column, natural DOM order
     Location → Map → Today → Tomorrow → Sun & Moon

   WeatherDuck green: #425A47
   ============================================================ */


/* ----------------------------------------------------------
 * Section wrapper
 * ---------------------------------------------------------- */
.wd-fc-header {
    font-family: var(--wd-font);
    margin-bottom: 24px;
}


/* ----------------------------------------------------------
 * Main row
 * ---------------------------------------------------------- */
.wd-fc-header__row {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 1100px) {
    .wd-fc-header__row {
        display: grid;
        grid-template-columns: 140px 190px 1fr 1fr 1.4fr;
        grid-template-rows: 128px;
        align-items: stretch;
        gap: 0 20px;
    }
}


/* ----------------------------------------------------------
 * All columns — desktop: fill row height as flex column
 * ---------------------------------------------------------- */
@media (min-width: 1100px) {
    .wd-fc-header__col {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}


/* ----------------------------------------------------------
 * Col 1: Location — CENTRED vertically + horizontally
 * ---------------------------------------------------------- */
.wd-fc-header__col--loc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

@media (min-width: 1100px) {
    .wd-fc-header__col--loc {
        justify-content: center;
    }
}

.wd-fc-header__location {
    display: block;
    font-size: var(--wd-font-size-xl);
    font-weight: 700;
    color: var(--wd-green);
    line-height: 1.15;
}

.wd-fc-header__county {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--wd-green);
}

.wd-fc-header__coords {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--wd-text-primary);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.wd-fc-header__updated {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--wd-text-secondary);
    line-height: 1.4;
}


/* ----------------------------------------------------------
 * Col 2: Mini map
 * ---------------------------------------------------------- */
.wd-fc-header__col--map {
    border-radius: var(--wd-radius-sm);
    overflow: hidden;
    line-height: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

@media (max-width: 1099px) {
    .wd-fc-header__col--map {
        height: 144px;
    }
}

@media (min-width: 1100px) {
    .wd-fc-header__col--map {
        height: 128px;
    }
}

/* Force Leaflet container to fill regardless of nesting — zero
   padding/margin so no grey bars leak through the background. */
.wd-fc-header__col--map > div,
.wd-fc-header__col--map .wd-location-map {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wd-fc-header__col--map > div > div {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wd-fc-header__col--map .leaflet-container {
    width: 100% !important;
    height: 100% !important;
}


/* ----------------------------------------------------------
 * Col 3 & 4: Today / Tomorrow — CENTRED text
 * ---------------------------------------------------------- */
.wd-fc-header__col--today,
.wd-fc-header__col--tomorrow {
    text-align: center;
}

@media (min-width: 1100px) {
    .wd-fc-header__col--today,
    .wd-fc-header__col--tomorrow {
        padding-top: 10px;
        overflow: hidden;
    }
}

/* Summary wrapper — centres its children */
.wd-fc-header__summary-wrap {
    text-align: center;
}

/* Day title heading — Title Case, bolder, green */
.wd-fc-header__daytitle {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--wd-green);
    margin: 0 0 5px;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

/* Narrative summary text — centred, 3-line clamp */
.wd-fc-header__summary-text {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--wd-text-primary);
    line-height: 1.45;
    margin: 0 0 4px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Score line */
.wd-fc-header__score-line {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--wd-text-secondary);
    margin: 4px 0 0;
    flex-shrink: 0;
    text-align: center;
}

@media (min-width: 1100px) {
    .wd-fc-header__score-line {
        margin-top: auto;
        padding-bottom: 10px;
    }
}

.wd-fc-header__score-val {
    font-weight: 700;
    color: var(--wd-text-primary);
}

.wd-fc-header__score-val.wd-fc-header__score--excellent { color: var(--wd-score-excellent-text); }
.wd-fc-header__score-val.wd-fc-header__score--good      { color: var(--wd-score-good-text); }
.wd-fc-header__score-val.wd-fc-header__score--fair       { color: var(--wd-score-fair-text); }
.wd-fc-header__score-val.wd-fc-header__score--poor       { color: var(--wd-score-poor-text); }
.wd-fc-header__score-val.wd-fc-header__score--terrible   { color: var(--wd-score-bad-text); }


/* ----------------------------------------------------------
 * Col 5: Sun & Moon — compact, NO borders/shading
 * ---------------------------------------------------------- */
@media (min-width: 1100px) {
    .wd-fc-header__col--astro {
        padding-top: 8px;
        overflow: hidden;
    }
}

/* Astro title — "SUN & MOON — NEXT 5 DAYS" */
.wd-fc-header__astro-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wd-green);
    margin: 0 0 4px;
    line-height: 1.2;
    flex-shrink: 0;
}

/* Scroll wrapper */
.wd-fc-header__astro-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox */
}
.wd-fc-header__astro-scroll::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari */
}

@media (min-width: 1100px) {
    .wd-fc-header__astro-scroll {
        overflow: visible;
        flex: 1;
    }
}

/* ── Astro table — structural only, zero borders ── */
.wd-fc-astro-table {
    width: 100%;
    min-width: 260px;
    border-collapse: collapse;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
    border: 0;
}

.wd-fc-astro-table th,
.wd-fc-astro-table td {
    border: 0;
    background: none;
    text-align: left;
    white-space: nowrap;
    vertical-align: baseline;
}

/* Headers — icon + text, very compact */
.wd-fc-astro-table th {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--wd-green);
    padding: 0 3px 3px 0;
    line-height: 1.15;
    text-align: center;
}

/* Icon inside header */
.wd-fc-astro-table th span[aria-hidden] {
    font-size: 0.72rem;
    margin-right: 1px;
    vertical-align: baseline;
}

/* Text label beside icon */
.wd-fc-astro__thtext {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Day column header — no icon, just "Day", left-aligned */
.wd-fc-astro__th-day {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
}

/* Cells — tight */
.wd-fc-astro-table td {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--wd-text-primary);
    padding: 1px 3px 1px 0;
    line-height: 1.15;
    text-align: center;
}

/* Day column — bold, left-aligned */
.wd-fc-astro__td-day {
    font-weight: 700;
    color: var(--wd-text-primary);
    text-align: left;
}

/* Daylight column — green accent */
.wd-fc-astro__td-dl {
    color: #2e5c38;
    font-weight: 600;
}

/* Today row — green day label */
.wd-fc-astro__tr--today .wd-fc-astro__td-day {
    color: var(--wd-green);
}


/* ----------------------------------------------------------
 * LEGACY class neutralisation
 * The old wd-fc-header__astro-table / __th / __td classes
 * are no longer output by PHP, but if they appear in cached
 * HTML, zero out their borders so nothing leaks.
 * ---------------------------------------------------------- */
.wd-fc-header__astro-table,
.wd-fc-header__th,
.wd-fc-header__td {
    border: 0 !important;
}
.wd-fc-header__astro-table tbody tr + tr .wd-fc-header__td {
    border: 0 !important;
}

/* Legacy .wd-fc-header__col-label — no longer used by astro,
   kept for any other callers that may still reference it. */
.wd-fc-header__col-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wd-green);
    margin: 0 0 6px;
    line-height: 1.2;
    flex-shrink: 0;
}


/* ==============================================================
 * MOBILE-ONLY OVERRIDES (≤ 767px)
 * ============================================================== */

/* ----------------------------------------------------------
 * A) Summaries: remove 3-line clamp so full text shows
 * ---------------------------------------------------------- */
@media (max-width: 767px) {
    .wd-fc-header__summary-text {
        display: block;
        -webkit-box-orient: unset;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }
}

/* ----------------------------------------------------------
 * B) Map: shorter on mobile
 * ---------------------------------------------------------- */
@media (max-width: 767px) {
    .wd-fc-header__col--map {
        height: 69px;
    }
}

/* ----------------------------------------------------------
 * C) Astro toggle: button + table switching (mobile only)
 * ---------------------------------------------------------- */

/* Astro header row — title + button side by side */
.wd-fc-astro__header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.wd-fc-astro__header .wd-fc-header__astro-title {
    margin: 0;
}

/* Toggle button — hidden on desktop, shown on mobile */
.wd-fc-astro__toggle {
    display: none;
}

@media (max-width: 767px) {
    .wd-fc-astro__toggle {
        display: inline-block;
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--wd-text-on-green);
        background: var(--wd-green);
        border: 1px solid var(--wd-green-hover);
        border-radius: 4px;
        padding: 3px 8px;
        cursor: pointer;
        line-height: 1.3;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .wd-fc-astro__toggle:hover,
    .wd-fc-astro__toggle:focus {
        background: var(--wd-green-hover);
    }

    /* Hide the full desktop table, show mobile toggle tables */
    .wd-fc-astro__desktop {
        display: none;
    }
}

/* Mobile toggle tables — hidden on desktop */
.wd-fc-astro__tables {
    display: none;
}
@media (max-width: 767px) {
    .wd-fc-astro__tables {
        display: block;
    }
}