/* ============================================================================
   KiBo — small custom layer.
   Tailwind utilities (configured from theme/tokens.css) do almost everything;
   this file holds only base typography and a few things utilities can't express.
   NO color/font/radius literals here — always reference the tokens.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

/* Hide Alpine-controlled elements until Alpine initialises (no flash). */
[x-cloak] { display: none !important; }

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}

/* Headings use the Fraunces display face (warm humanist serif). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1, h2 { font-weight: 700; }

/* Section eyebrow label: "COMMENT ÇA MARCHE", "CATÉGORIES" — sans-serif (DM Sans). */
.kibo-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8125rem; /* ~13px */
}

/* Auth form fields — styled once here so Django's built-in forms (password
   reset) match too. All values come from the tokens. */
.kibo-form input[type="text"],
.kibo-form input[type="email"],
.kibo-form input[type="password"],
.kibo-form input[type="number"],
.kibo-form input[type="datetime-local"],
.kibo-form input[type="date"],
.kibo-form input[type="time"],
.kibo-form select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: 0.625rem 1rem;
  font-size: 1rem;
}
.kibo-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: 0.625rem 1rem;
  font-size: 1rem;
}
.kibo-form input:focus,
.kibo-form select:focus,
.kibo-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 25%, transparent);
}
/* File / camera inputs */
.kibo-form .kibo-file {
  width: 100%;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  color: var(--color-muted);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

/* Translucent white border for the email field on the green community band. */
.kibo-band-input {
  border: 1px solid var(--band-input-border);
}
.kibo-band-input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

/* ---------------------------------------------------------------------------
   School calendar — templates/news/_upcoming.html, _date_row.html, _date_meta.html.
   A little relief a parent can read at a glance: each « À ne pas manquer » card
   sits on a solid slab and sinks when tapped, its date is a tear-off calendar
   leaf, and the soonest day turns dark sage (the agenda marks it the same way).
   Utilities cannot express the slab, the leaf or the local colour swap, hence
   this block. Colours: tokens only.
   --------------------------------------------------------------------------- */

/* The strip: slides on a phone (the second card peeks out), three abreast from
   `sm` up. Overflow clips shadows, so the padding leaves room for the slab. */
.kibo-dates {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Snap to the page gutter (the strip's px-5), not to the screen edge. */
  scroll-padding-inline: 1.25rem;
  scrollbar-width: none;
  padding-top: 0.75rem;
  padding-bottom: 1.25rem;
}
.kibo-dates::-webkit-scrollbar { display: none; }

.kibo-date-card {
  --edge: var(--date-edge);
  --glow: var(--date-glow);
  --band: var(--date-leaf-band);
  flex: 0 0 72%;
  min-width: 15rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 5px 0 var(--edge), 0 12px 24px var(--glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kibo-date-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--edge), 0 18px 30px var(--glow);
}
.kibo-date-card:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--edge), 0 4px 10px var(--glow);
}
/* Fewer than three dates: the cards share the width instead of sliding. */
.kibo-date-card--fill { flex: 1 0 15rem; }

.kibo-date-card--next {
  --edge: var(--date-next-edge);
  --glow: var(--date-next-glow);
  --band: var(--date-next-band);
  border-color: transparent;
  background: var(--date-next-bg);
  color: var(--date-next-ink);
}

@media (min-width: 640px) {
  .kibo-dates { overflow-x: visible; }
  .kibo-date-card { flex: 1 1 0; min-width: 0; }
}

/* The tear-off calendar leaf: month band with two binding holes, big day,
   weekday. Tilted a touch; straightens when the card is hovered. */
.kibo-leaf {
  position: relative;
  flex: none;
  width: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: center;
  line-height: 1;
  box-shadow: 0 3px 0 var(--date-edge), 0 6px 12px var(--date-glow);
  transform: rotate(-4deg);
  transition: transform .15s ease;
}
.kibo-date-card:hover .kibo-leaf { transform: rotate(0deg) scale(1.05); }
.kibo-leaf::before,
.kibo-leaf::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
}
.kibo-leaf::before { left: 0.4rem; }
.kibo-leaf::after { right: 0.4rem; }
.kibo-leaf__month {
  display: block;
  padding: 0.3rem 0 0.25rem;
  background: var(--band);
  color: var(--color-surface);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kibo-leaf__day {
  display: block;
  padding-top: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
}
.kibo-leaf__weekday {
  display: block;
  padding: 0.15rem 0 0.4rem;
  color: var(--color-muted);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* « dans 12 jours » — a honey pill on the soonest day. */
.kibo-countdown {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.kibo-countdown--next {
  padding: 0.125rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-honey);
  color: var(--color-ink);
}

/* Who and when: « 🎒 5ème » is THE line a parent looks for. */
.kibo-level {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--date-level-bg);
  color: var(--date-level-ink);
  font-weight: 700;
}
.kibo-when { color: var(--color-ink); }
.kibo-date-card--next .kibo-level { background: var(--date-next-ink); color: var(--date-next-bg); }
.kibo-date-card--next .kibo-when,
.kibo-date-card--next .kibo-date-card__cta { color: var(--date-next-soft); }
.kibo-meta--muted .kibo-level { background: var(--color-bg-alt); color: var(--color-muted); }
.kibo-meta--muted .kibo-when { color: var(--color-faint); }

/* Agenda: the date tile of the soonest day. */
.kibo-day { padding: 0.45rem 0 0.4rem; border-radius: var(--radius-btn); }
.kibo-day--next {
  background: var(--date-next-bg);
  color: var(--date-next-ink);
  box-shadow: 0 3px 0 var(--date-next-edge);
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}