/* ============================================================================
   v24-calendar.css — the CALENDAR & TIME archetype: 84 routes.
   75 festival pages and 9 recurring-observance pages.
   ----------------------------------------------------------------------------
   WHAT MAKES THIS ARCHETYPE DIFFERENT FROM A READING PAGE

   A teaching page is read once, from the top. A festival page is CHECKED —
   someone wants the date, the deity and whether their family's practice is
   the one described, and they want it in about four seconds. So the page is
   eight short labelled sections, and the labels are set as small caps rather
   than as headings: at heading size, eight of them in a 760px column read as
   eight separate articles.

   That is the variation the system exists to permit. `.sp-wrap-text h2` is
   the in-prose heading; `.sp-wrap-text.ca h2` is this archetype's section
   label, and both are steps on the token scale.

   WHAT THIS SHEET DELIBERATELY DOES NOT CONTAIN

   The variance notice, the badges, the buttons, the breadcrumb and the
   closing block are all SYSTEM parts used unchanged:

     "Traditions differ"  -> .sp-note .sp-note-vary   (this is the element
                             v24-components.css was written for: it is on all
                             84 of these pages and it is the sentence that
                             keeps a description from reading as a ruling)
     the badge row        -> .sp-tags / .sp-tag-solid / .sp-tag
     "Request this pooja" -> .sp-ask with .sp-cta and .sp-btn
     the page container   -> .sp-wrap-text

   WHY .dates, .dl, .dd, .dn AND .dnext KEEP THEIR NAMES

   They are not styling hooks, they are a GENERATOR CONTRACT.
   tools/regenerate_calendar_surfaces.py rewrites the date list on every build
   by matching `<div class="dates"><p class="dl">…</p><ul>` and it writes
   `<span class="dnext">next</span>` onto the next upcoming date;
   tools/verify_recovered_fixes.py reads the same markup to prove no page is
   badging a date in the past. Renaming them to match a prefix would cost two
   working tools and buy nothing a reader can see.

   THE DEITY COLOURS ARE TOKENS NOW
   They were 84 inline `style="background:#…"` attributes. See the deity block
   in v24-tokens.css for the four that moved when they were measured, and for
   why the colour is never the only carrier.
   ============================================================================ */

/* --- the section label -----------------------------------------------------
   Scoped with the container class as well as the archetype class, so it beats
   `.sp-wrap-text h2` on specificity rather than on load order. A rule that
   wins only because its file comes later is a rule that breaks the first time
   somebody reorders the <link> tags. */
.sp-wrap-text.ca h2 {
  font-family: var(--sp-sc);
  font-size: var(--sp-t-sm);
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  color: var(--sp-accent);
  margin: var(--sp-6) 0 var(--sp-2);
}
.sp-wrap-text.ca h2:first-child { margin-top: 0; }

/* --- the deity badge -------------------------------------------------------
   One attribute, eight tokens, no hex in any page. The badge still says the
   deity's name in words; this only tints it. */
.sp-tag-solid[data-deity="vishnu"]  { background: var(--sp-deity-vishnu);  border-color: var(--sp-deity-vishnu); }
.sp-tag-solid[data-deity="shiva"]   { background: var(--sp-deity-shiva);   border-color: var(--sp-deity-shiva); }
.sp-tag-solid[data-deity="vedic"]   { background: var(--sp-deity-vedic);   border-color: var(--sp-deity-vedic); }
.sp-tag-solid[data-deity="lakshmi"] { background: var(--sp-deity-lakshmi); border-color: var(--sp-deity-lakshmi); }
.sp-tag-solid[data-deity="surya"]   { background: var(--sp-deity-surya);   border-color: var(--sp-deity-surya); }
.sp-tag-solid[data-deity="devi"]    { background: var(--sp-deity-devi);    border-color: var(--sp-deity-devi); }
.sp-tag-solid[data-deity="murugan"] { background: var(--sp-deity-murugan); border-color: var(--sp-deity-murugan); }
.sp-tag-solid[data-deity="ganesha"] { background: var(--sp-deity-ganesha); border-color: var(--sp-deity-ganesha); }

/* --- the dates panel -------------------------------------------------------
   The reason most people open one of these pages. On an observance page it is
   not a short list: Pradoṣam carries 48 dates for 2026–2027, so the rows are
   set tight and the type is the body size rather than a heading size. */
.dates {
  background: var(--sp-raised);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.dates .dl {
  font-family: var(--sp-sc);
  font-size: var(--sp-t-eyebrow);
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  color: var(--sp-ink-3);
  margin: 0 0 var(--sp-2);
}
.dates ul { list-style: none; margin: 0; padding: 0; }
.dates li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  padding: var(--sp-1) 0;
  border-top: 1px solid var(--sp-line);
  margin: 0;
}
.dates li:first-of-type { border-top: 0; }
/* Tabular figures so a column of 48 dates lines up on the numerals. */
.dates .dd {
  font-family: var(--sp-display);
  font-size: var(--sp-t-lg);
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}
.dates .dn { font-size: var(--sp-t-sm); color: var(--sp-ink-3); }
/* The next upcoming date. tools/regenerate_calendar_surfaces.py decides which
   row gets this and re-decides it on every build, because a page that badges
   a date in the past is worse than a page that badges none — and 21 of them
   were doing exactly that before the badge logic was corrected. */
.dates .dnext {
  font-family: var(--sp-sc);
  font-size: var(--sp-t-xs);
  letter-spacing: var(--sp-track-eyebrow);
  text-transform: uppercase;
  background: var(--sp-accent);
  color: var(--sp-ground);
  border-radius: 999px;
  padding: 0 var(--sp-2);
}

/* --- related festivals, and the previous/next pair ------------------------- */
.ca-rel { margin: var(--sp-sec-tight) 0 0; }
.ca-rel a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;          /* SC 2.5.8 — the target, not the text */
  margin: 0 var(--sp-4) var(--sp-2) 0;
  font-size: var(--sp-t-sm);
}

/* --- how this page knows its dates -----------------------------------------
   Every festival and observance page ends by saying where its dates came
   from, that they are computed for one location, and that a date a ceremony
   depends on should be confirmed with Gurukkal. It is the most important
   paragraph on the page and the least likely to be read, so it is set quietly
   and never hidden. */
.ca-src {
  font-size: var(--sp-t-sm);
  color: var(--sp-ink-3);
  border-top: 1px solid var(--sp-line);
  padding-top: var(--sp-4);
  margin-top: var(--sp-sec-tight);
}

@media print {
  /* The dates are the reason anybody prints one of these. */
  .ca-rel { display: none; }
  .dates { border-color: #999; background: transparent; }
}