/* ════════════════════════════════════════════════════════════════
   Bliss branded date picker theme (Flatpickr)
   ----------------------------------------------------------------
   Scoped entirely under .bliss-fp, a class added to the calendar
   container at init time (see js/bliss-flatpickr.js). Nothing here
   touches the input fields themselves, so the existing .form-input
   and .bliss-input appearance, focus ring, and spacing are preserved.

   Loaded only on pages that have a date field (Connect, Quiz),
   layered on top of the vendored flatpickr.min.css base.

   Palette (Bliss brand, with hex fallbacks so it works on both the
   main stylesheet and the self-contained quiz page). Calibrated for
   editorial restraint: Blush is the warmth accent (hover only), not
   the panel.
     Panel surface   Paper     var(--bliss-paper) = #FFF9F1 (Bliss White, shared token)
     Text            Evergreen #035332
     Selected        Cream bg + Evergreen ring + Evergreen text (intentional, not loud)
     Hover bg        Blush     #FBC8B3  (Blush remains the warmth signal)
     Today           Garnet    #892E25  outline (distinct from the evergreen selected ring)
     Border          Evergreen ~18% (oklch matches --bliss-cookie-border)
   No black, no default blue, no gradients. Shadow capped at the
   existing Bliss card shadow (0 4px 16px oklch(0% 0 0 / 0.16)).
   ════════════════════════════════════════════════════════════════ */

/* ── Panel ──────────────────────────────────────────────────────── */
.bliss-fp.flatpickr-calendar {
  background: var(--bliss-paper, #FFF9F1);
  border: 1px solid oklch(0.30 0.09 155 / 0.18);   /* Evergreen ~18% */
  border-radius: var(--bn-radius-md, 8px);
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.16);     /* matches card shadow */
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  color: var(--bliss-evergreen, #035332);
}

/* Pointer triangle: match the paper panel fill + the evergreen-tint border */
.bliss-fp.flatpickr-calendar.arrowTop::before { border-bottom-color: oklch(0.30 0.09 155 / 0.18); }
.bliss-fp.flatpickr-calendar.arrowTop::after  { border-bottom-color: var(--bliss-paper, #FFF9F1); }
.bliss-fp.flatpickr-calendar.arrowBottom::before { border-top-color: oklch(0.30 0.09 155 / 0.18); }
.bliss-fp.flatpickr-calendar.arrowBottom::after  { border-top-color: var(--bliss-paper, #FFF9F1); }

/* ── Month / year header ────────────────────────────────────────── */
.bliss-fp .flatpickr-months,
.bliss-fp .flatpickr-month {
  background: transparent;
  color: var(--bliss-evergreen, #035332);
  fill: var(--bliss-evergreen, #035332);
}
.bliss-fp .flatpickr-current-month .cur-month,
.bliss-fp .flatpickr-current-month input.cur-year {
  color: var(--bliss-evergreen, #035332);
  font-weight: 600;
}
.bliss-fp .flatpickr-current-month input.cur-year { font-weight: 600; }

/* Nav arrows */
.bliss-fp .flatpickr-prev-month svg,
.bliss-fp .flatpickr-next-month svg { fill: var(--bliss-evergreen, #035332); }
.bliss-fp .flatpickr-prev-month:hover svg,
.bliss-fp .flatpickr-next-month:hover svg { fill: var(--bliss-garnet, #892E25); }
.bliss-fp .flatpickr-prev-month:focus-visible,
.bliss-fp .flatpickr-next-month:focus-visible {
  outline: var(--bn-focus-ring, 2px solid #035332);
  outline-offset: -2px;
  border-radius: var(--bn-radius-sm, 4px);
}

/* Year stepper arrows */
.bliss-fp .numInputWrapper span.arrowUp::after { border-bottom-color: var(--bliss-evergreen, #035332); }
.bliss-fp .numInputWrapper span.arrowDown::after { border-top-color: var(--bliss-evergreen, #035332); }
.bliss-fp .numInputWrapper:hover { background: oklch(0.30 0.09 155 / 0.06); }

/* ── Weekday row ────────────────────────────────────────────────── */
.bliss-fp .flatpickr-weekdays { background: transparent; }
.bliss-fp span.flatpickr-weekday {
  background: transparent;
  color: var(--bliss-evergreen, #035332);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Days area ──────────────────────────────────────────────────── */
/* Flatpickr packs the first row flush against the top (only 1px headroom),
   clipping the top of the today/selected rings — a little top padding fixes it.
   Horizontally, .flatpickr-innerContainer (overflow:hidden) trims ~1px off each
   side of the day grid, clipping the LEFT/RIGHT border of edge-column cells; make
   it visible so those render in full. The month-change slide stays clipped by
   .flatpickr-days (still overflow:hidden), so the animation is unaffected. */
.bliss-fp .flatpickr-innerContainer { overflow: visible; }
.bliss-fp .flatpickr-days {
  padding-top: 4px;
}

/* ── Day cells ──────────────────────────────────────────────────── */
.bliss-fp .flatpickr-day {
  color: var(--bliss-evergreen, #035332);
  border: 1px solid transparent;
  border-radius: var(--bn-radius-sm, 4px);
  font-weight: 500;
}
.bliss-fp .flatpickr-day:hover {
  background: var(--bliss-blush, #FBC8B3);   /* Blush: the warmth signal, now on hover */
  color: var(--bliss-evergreen, #035332);
  border-color: transparent;
}
/* Focus ring: keyboard only (:focus-visible), so opening the calendar by mouse
   or programmatically shows NO ring on a pre-focused day. Drawn as an INSET
   box-shadow (not an offset outline) so it can never be clipped at the panel
   edges. The non-visible :focus case is cleared so no stray UA outline shows. */
.bliss-fp .flatpickr-day:focus { outline: none; }
.bliss-fp .flatpickr-day:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--bliss-evergreen, #035332);
  background: var(--bliss-blush, #FBC8B3);
  border-color: transparent;
}
/* Today: Garnet outline. The selected state is also an outline now (see below),
   so Today uses Garnet (an existing brand color, here at low weight) to stay
   clearly distinct from the evergreen selected ring. */
.bliss-fp .flatpickr-day.today {
  border-color: var(--bliss-garnet, #892E25);
}
.bliss-fp .flatpickr-day.today:hover,
.bliss-fp .flatpickr-day.today:focus-visible {
  background: var(--bliss-blush, #FBC8B3);
  color: var(--bliss-evergreen, #035332);
}
/* Selected: cream surface + evergreen ring + evergreen text. Intentional,
   not loud (calibrated from the previous garnet fill for editorial restraint).
   Border stays 1px, so there is no layout shift. */
.bliss-fp .flatpickr-day.selected,
.bliss-fp .flatpickr-day.selected:hover,
.bliss-fp .flatpickr-day.selected:focus,
.bliss-fp .flatpickr-day.selected:focus-visible {
  background: var(--bliss-cream, #FEF1E5);
  color: var(--bliss-evergreen, #035332);
  border-color: var(--bliss-evergreen, #035332);
}
/* Adjacent-month days: muted but still WCAG AA on the Cream panel.
   These cells are interactive in single-month mode (clicking one selects
   that date), so the text must clear 4.5:1. A solid evergreen-toward-cream
   mix stays on-brand and legible; lighter weight conveys "secondary". */
.bliss-fp .flatpickr-day.prevMonthDay,
.bliss-fp .flatpickr-day.nextMonthDay {
  color: color-mix(in srgb, var(--bliss-evergreen, #035332) 88%, var(--bliss-cream, #FEF1E5));
  font-weight: 400;
}
/* Disabled / out-of-range: low-emphasis, non-interactive */
.bliss-fp .flatpickr-day.flatpickr-disabled,
.bliss-fp .flatpickr-day.flatpickr-disabled:hover {
  color: oklch(0.30 0.09 155 / 0.28);
  background: transparent;
  cursor: default;
}
/* Range styles (not used in single-date mode) neutralised so no default
   blue continuity shadow can ever appear if range mode is enabled later. */
.bliss-fp .flatpickr-day.inRange,
.bliss-fp .flatpickr-day.startRange,
.bliss-fp .flatpickr-day.endRange {
  box-shadow: none;
}
.bliss-fp .flatpickr-day.inRange {
  background: var(--bliss-cream, #FEF1E5);
  border-color: transparent;
}

/* Respect reduced-motion: kill Flatpickr's open animation. The Connect page
   gets this from the global reset in styles.css; the self-contained quiz page
   does not load styles.css, so cover both here. */
@media (prefers-reduced-motion: reduce) {
  .bliss-fp.flatpickr-calendar.animate.open { animation: none; }
}