/* ============================================================
   WEATHER DUCK — Day Carousel  (v1.0)
   Scoped to .wd-dc* — no leakage.

   Compact single-day-at-a-time view with prev/next arrows.
   Falls back to showing Today only when JS doesn't load.
   ============================================================ */


/* ----------------------------------------------------------
 * Wrapper
 * ---------------------------------------------------------- */
.wd-dc {
    font-family: var(--wd-font);
    text-align: center;
    max-width: 460px;          /* keeps it compact even in wide containers */
    margin: 0 auto;
}


/* ----------------------------------------------------------
 * Nav row: [<]  Day Label  [>]
 * ---------------------------------------------------------- */
.wd-dc__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
}

/* Day label */
.wd-dc__label {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--wd-green);
    line-height: 1.25;
    letter-spacing: 0.01em;
    min-width: 7em;            /* prevents layout shift when label changes */
}

/* Arrows — hidden until JS adds .wd-dc--js (graceful degradation) */
.wd-dc__arrow {
    display: none;             /* hidden without JS */
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #b5c4b8;
    border-radius: 4px;
    background: #f4f7f5;
    color: var(--wd-green);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

/* JS has loaded — show arrows */
.wd-dc--js .wd-dc__arrow {
    display: inline-flex;
}

.wd-dc__arrow:hover:not(:disabled),
.wd-dc__arrow:focus-visible:not(:disabled) {
    background: #e0ebe3;
    border-color: #8ea793;
    outline: none;
}

.wd-dc__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}


/* ----------------------------------------------------------
 * Day panels — only the active one is visible
 * ---------------------------------------------------------- */
.wd-dc__panel {
    display: none;
}

.wd-dc__panel--active {
    display: block;
}

/* Summary text — matches existing header typography */
.wd-dc__summary {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--wd-text-primary);
    line-height: 1.45;
    margin: 0 0 4px;
}

.wd-dc__summary--empty {
    color: var(--wd-text-muted);
    font-style: italic;
}


/* ----------------------------------------------------------
 * Dashed separator between day summary and score
 * ---------------------------------------------------------- */
.wd-dc__separator {
    border-top: 1px dashed rgba(66, 90, 71, 0.25);
    margin: 8px 0 6px;
}


/* ----------------------------------------------------------
 * Score panels — toggled in sync with day panels
 * ---------------------------------------------------------- */
.wd-dc__score {
    display: none;
}

.wd-dc__score--active {
    display: block;
}

/* Re-use existing score-line styles from forecast-header.css.
   Only override the margin to keep things tight in carousel context. */
.wd-dc .wd-fc-header__score-line {
    margin: 0;
}