/* ============================================================
   FLATPICKR THEME — flatpickr-theme.css
   ============================================================
   Global flatpickr skin: card-style calendar popup matching the
   site's surfaces/radii, gold "selected" day, no pointer arrow.
   
   — link this file on any page that uses flatpickr and
   every calendar on it will pick up the same look.

   Depends only on the tokens declared in variables.css
   (--color-*, --radius-*, --shadow-pop, --font-body).

   These rules are prefixed with `body` purely to out-specify
   flatpickr.min.css, which must load after this file for that to
   work (see load order note in whichever template links both).

   The --fptheme-* below are the calendar-only colours that have
   no equivalent in variables.css. They are declared rather than
   inlined because datepicker-theme.css reads them too, to dress
   the page's two non-flatpickr calendars in the same skin — so
   these four values are the single place all three follow.
   ============================================================ */
:root {
    --fptheme-placeholder: #A9A49C; /* weekday labels */
    --fptheme-day:         #3D3833; /* a selectable day */
    --fptheme-today-ring:  #E6E2D8; /* the hairline around today */
    --fptheme-day-muted:   #D6D2CC; /* disabled + adjacent-month days */
}

body .flatpickr-calendar {
    width: 318px;
    padding: 18px;
    background: var(--color-surface-white);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    font-family: var(--font-body);
    font-size: 13px;
}

/* the little pointer triangle — the design has none */
body .flatpickr-calendar.arrowTop::before,
body .flatpickr-calendar.arrowTop::after,
body .flatpickr-calendar.arrowBottom::before,
body .flatpickr-calendar.arrowBottom::after {
    display: none;
}

/* ── month bar ───────────────────────────────────────────── */
/* position:relative so the two nav buttons anchor inside the
   calendar's padding instead of flush against its edge. */
body .flatpickr-calendar .flatpickr-months {
    position: relative;
    align-items: center;
    height: 30px;
    margin-bottom: 14px;
}

body .flatpickr-calendar .flatpickr-months .flatpickr-month {
    height: 30px;
    background: transparent;
    color: var(--color-text-primary);
    fill: var(--color-text-primary);
}

body .flatpickr-calendar .flatpickr-current-month {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 30px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

body .flatpickr-calendar .flatpickr-current-month span.cur-month {
    margin: 0;
    font-weight: 600;
}

body .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    width: 5.5ch;
}

body .flatpickr-calendar .flatpickr-current-month input.cur-year {
    height: auto;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* the year spinner arrows aren't part of the design */
body .flatpickr-calendar .flatpickr-current-month .numInputWrapper span {
    display: none;
}

body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
body .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 10px;
    background: var(--color-surface-inset);
    color: var(--color-text-secondary);
    fill: var(--color-text-secondary);
    transition: background var(--transition-fast);
}

body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month { left: 0; }
body .flatpickr-calendar .flatpickr-months .flatpickr-next-month { right: 0; }

body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
body .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
    background: var(--color-surface-subtle);
}

body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
body .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--color-brand-gold);
}

body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
body .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
    width: 11px;
    height: 11px;
}

/* ── weekday row + grid ──────────────────────────────────── */
/* 318 − (2 × 18) padding = 282 of usable width. */
body .flatpickr-calendar .flatpickr-weekdays {
    height: 24px;
    margin-bottom: 4px;
    background: transparent;
}

body .flatpickr-calendar span.flatpickr-weekday {
    background: transparent;
    font-size: 11px;
    font-weight: 400;
    color: var(--fptheme-placeholder);
}

body .flatpickr-calendar .flatpickr-days,
body .flatpickr-calendar .dayContainer {
    width: 282px;
    min-width: 282px;
    max-width: 282px;
}

body .flatpickr-calendar .flatpickr-day {
    max-width: none;
    height: 36px;
    line-height: 36px;
    border: none;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 400;
    color: var(--fptheme-day);
    transition: background var(--transition-fast), color var(--transition-fast);
}

body .flatpickr-calendar .flatpickr-day:hover,
body .flatpickr-calendar .flatpickr-day:focus {
    background: var(--color-surface-inset);
    border-color: transparent;
}

body .flatpickr-calendar .flatpickr-day.today {
    box-shadow: inset 0 0 0 1.5px var(--fptheme-today-ring);
    border-color: transparent;
    font-weight: 600;
    color: var(--color-text-primary);
}

body .flatpickr-calendar .flatpickr-day.selected,
body .flatpickr-calendar .flatpickr-day.selected:hover,
body .flatpickr-calendar .flatpickr-day.selected:focus {
    background: var(--color-brand-gold);
    border-color: transparent;
    box-shadow: none;
    font-weight: 600;
    color: var(--color-surface-white);
}

body .flatpickr-calendar .flatpickr-day.flatpickr-disabled,
body .flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
body .flatpickr-calendar .flatpickr-day.prevMonthDay,
body .flatpickr-calendar .flatpickr-day.nextMonthDay {
    background: transparent;
    border-color: transparent;
    color: var(--fptheme-day-muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* The calendar is 318px wide; below that it needs to fit the screen.
   The left/right pin overrides flatpickr's inline positioning: its own
   "rightMost" fallback aligns the panel to the input's right edge, which
   pushes a full-width calendar off the left of the screen. Pages that
   set body { overflow-x: hidden } (this site's variables.css does) would
   otherwise clip it silently. */
@media (max-width: 359.98px) {
    body .flatpickr-calendar {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        left: 8px !important;
        right: auto !important;
        padding: 14px;
    }

    body .flatpickr-calendar .flatpickr-days,
    body .flatpickr-calendar .dayContainer {
        width: calc(100vw - 44px);
        min-width: calc(100vw - 44px);
        max-width: calc(100vw - 44px);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body .flatpickr-calendar * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}