/* Calvary Lutheran Church — design v2 (experiment).
   Additive override layer loaded only when ?design=v2 is active, after the
   five base stylesheets, so these rules win the cascade without forking the
   base files. Implements the higher-leverage moves from docs/design-analysis.md:
   a serif reading face, a tighter measure, squarer corners, and small-caps
   rubrics. The homepage also lifts the service times above the hero (handled in
   home.blade.php). Scoped under html.design-v2 so the intent is self-documenting. */

html.design-v2 {
  /* Old-style serif reading face for long-form prose, distinct from the
     system-sans UI face. The biggest "this is a confessional parish" signal. */
  --clce-font-reading: "Iowan Old Style", "Hoefler Text", Charter, Georgia,
    "Times New Roman", Times, serif;

  /* Pull the measure back toward the classic 66–75ch reading optimum. */
  --clce-content-max: 72ch;

  /* Squarer corners read "engraved invitation" rather than friendly-modern. */
  --radius-2: 2px;
  --radius-3: 2px;
}

/* Reading body: serif, a touch more leading for the longer doctrinal pages. */
html.design-v2 .prose {
  font-family: var(--clce-font-reading);
  line-height: var(--font-lineheight-4);
}

/* Heading authority comes from size + old-style letterforms, not synthesised
   weight on a system serif. */
html.design-v2 h1,
html.design-v2 h2,
html.design-v2 h3,
html.design-v2 h4 {
  font-weight: var(--font-weight-4);
}

/* Real small caps for rubric-style labels instead of the modern uppercase +
   tracking substitute. font-variant-caps falls back gracefully to normal
   lowercase where the face has no small-cap glyphs. */
html.design-v2 .eyebrow {
  text-transform: none;
  letter-spacing: 0.02em;
  font-variant-caps: all-small-caps;
}

/* Square the photo + figure corners to match the tightened radius vocabulary. */
html.design-v2 figure img,
html.design-v2 .photo {
  border-radius: 0;
}

/* Service times sit above the hero in v2 (see home.blade.php). Make the banner
   carry more weight as the first thing a visitor reads: a hair more vertical
   room. Hairline color is the season accent (set in the season block below). */
html.design-v2 .sunday-schedule {
  margin-block: 0 var(--size-7);
  padding-block: var(--size-6);
}

/* --- Vertical rhythm in prose (docs/design-analysis.md MINOR §1) ---------
   The base scale spaces paragraphs, subsections, and sections almost
   identically: uniform 1rem bottom margins with no space above headings, so
   a heading sits equidistant from the text before and after it and belongs to
   neither. Re-establish distinct levels, each roughly 1.5x apart:
   paragraph 1rem  <  list block 1.25rem  <  subsection (h3) 1.75rem  <
   section (h2) 3rem. A heading hugs the text it introduces (small space below)
   and opens with generous space above only when it breaks from running prose,
   so an opening heading next to a floated side image stays tight to the top. */
html.design-v2 .prose > :first-child { margin-top: 0; }

html.design-v2 .prose h2,
html.design-v2 .prose h3 { margin-bottom: var(--size-2); }
html.design-v2 .prose h4 { margin-bottom: var(--size-1); }

html.design-v2 .prose :is(p, ul, ol, blockquote) + h2 { margin-top: var(--size-8); }
html.design-v2 .prose :is(p, ul, ol, blockquote) + h3 { margin-top: var(--size-6); }
html.design-v2 .prose :is(p, ul, ol, blockquote) + h4 { margin-top: var(--size-5); }

/* List blocks read as a distinct level from body paragraphs, with the items
   given room to breathe rather than crowding at the paragraph line-height. */
html.design-v2 .prose :is(ul, ol) { margin-block: var(--size-4); }
html.design-v2 .prose li + li { margin-top: var(--size-2); }

html.design-v2 .prose hr { margin-block: var(--size-8); }

/* --- Warm status colors (docs/design-analysis.md MINOR) ------------------
   The base success/notice colors (#e8f5e9 + #2e7d32 green, #fef3c7 + #f59e0b
   amber) are cool, saturated, and hardcoded rather than tokenised: they read
   as foreign against the warm cream and break the project's "no ad-hoc colors"
   rule. Route them through warm, lower-saturation tokens that sit with the
   burgundy + cream palette. (.auth-errors already uses burgundy tokens, so it
   needs no change.) */
html.design-v2 {
  --clce-success-bg: #edf0e3;     /* warm pale sage */
  --clce-success-accent: #55692f; /* warm moss green */
  --clce-notice-bg: #f5e7d2;      /* warm parchment */
  --clce-notice-accent: #9a5a22;  /* burnt sienna */
}
html.design-v2 .auth-success {
  background: var(--clce-success-bg);
  border-left-color: var(--clce-success-accent);
}
html.design-v2 .lectionary-gap-warning {
  background: var(--clce-notice-bg);
  border-color: var(--clce-notice-accent);
}
html.design-v2 .liturgical-missing-marker { background: var(--clce-notice-accent); }
html.design-v2 .liturgical-entry.is-missing { border-left-color: var(--clce-notice-accent); }

/* --- Season accent (docs/design-analysis.md MAJOR §2) --------------------
   The church-year engine already knows the season; v2 expresses it as one
   restrained accent in the current paramentcolor. PHP (App\Liturgical\
   ParamentColor) emits data-parament on <html> for this week's color and on
   each calendar row/season heading; the hex values live here, with the rest of
   the palette, rather than in PHP. "White" line accents render as festal gold so
   they read on the cream ground; the white vestment cloth is handled separately
   (an ivory cloth with a gold band) in the vestment block below. */
html.design-v2 {
  --parament-violet: #5e3f7e;
  --parament-white:  #82670f; /* white/gold paraments -> festal gold on cream */
  --parament-green:  #41603f;
  --parament-red:    #9c2b27;
  --parament-black:  #2b2b2b;
}

/* Resolve any data-parament (on <html> for the site-wide current season, or on
   a calendar row / season heading) into one inherited paint variable. */
html.design-v2[data-parament="violet"], html.design-v2 [data-parament="violet"] { --season-paint: var(--parament-violet); }
html.design-v2[data-parament="white"],  html.design-v2 [data-parament="white"]  { --season-paint: var(--parament-white); }
html.design-v2[data-parament="green"],  html.design-v2 [data-parament="green"]  { --season-paint: var(--parament-green); }
html.design-v2[data-parament="red"],    html.design-v2 [data-parament="red"]    { --season-paint: var(--parament-red); }
html.design-v2[data-parament="black"],  html.design-v2 [data-parament="black"]  { --season-paint: var(--parament-black); }

/* Home: the current season tints the schedule hairlines and the Upcoming
   Sunday card's top edge. Burgundy fallback if no season var resolved. */
html.design-v2 .sunday-schedule { border-color: var(--season-paint, var(--clce-accent)); }
html.design-v2 .upcoming-sunday { border-top: 3px solid var(--season-paint, var(--clce-accent)); }

/* Season vestment: a small cloth lappet in the current paramentcolor draped
   over the Upcoming Sunday card's top-right corner. Folds are pleat-style
   tonal striping derived from the season color in OKLCH (so one recipe works
   for every paramentcolor); the hem is a single clip-path point. Decorative
   and aria-hidden. Gated on clip-path: path() so unsupported browsers simply
   omit it rather than showing a bare rectangle. */
@supports (clip-path: path("M0 0 L1 1")) and (background: oklch(from red l c h)) {
  html.design-v2 .upcoming-sunday { position: relative; }
  /* Keep a long title from running under the hanging cloth. Must clear the
     vestment's full footprint: right offset (--size-4) + width (56px) + a gap,
     or a word tail lands under the opaque cloth and is clipped. */
  html.design-v2 .upcoming-sunday > h2 { padding-right: calc(var(--size-4) + 56px + var(--size-2)); }

  html.design-v2 .vestment {
    position: absolute;
    top: -4px;            /* sits at the rod; a few px of fold-over shows above */
    right: var(--size-4);
    width: 56px;
    height: 80px;
    pointer-events: none;
    /* Lighting derived in OKLCH by moving LIGHTNESS while keeping (and at the
       crest, boosting) CHROMA, so lit cloth stays saturated rather than washing
       toward grey. Base matches the rod exactly. */
    --cloth-base: var(--season-paint, var(--clce-accent));
    --cloth-hi:   oklch(from var(--cloth-base) calc(l + 0.13) calc(c + 0.03) h);
    --cloth-mid:  oklch(from var(--cloth-base) calc(l + 0.06) calc(c + 0.02) h);
    --cloth-lo:   oklch(from var(--cloth-base) calc(l - 0.12) c h);
    --cloth-lo2:  oklch(from var(--cloth-base) calc(l - 0.22) c h);
    --cloth-dark: oklch(from var(--cloth-base) calc(l - 0.30) c h);
    /* Gold galloon trim — the one element shared by every paramentcolor. */
    --galloon: #a9842f;
    --galloon-hi: #e7cf85;
    filter: drop-shadow(-1px 2px 2px oklch(20% 0.02 60 / 0.16));
  }
  /* Base cloth: vertical lighting — dark where it folds over the rod, brightest
     across the middle face, settling to base then a touch dim at the hem. */
  html.design-v2 .vestment-fall {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      var(--cloth-dark) 0,
      var(--cloth-lo) 4%,
      var(--cloth-mid) 11%,
      var(--cloth-hi) 21%,
      var(--cloth-hi) 40%,
      var(--cloth-base) 78%,
      var(--cloth-lo) 100%);
    clip-path: path('M0,0 L56,0 L56,58 L28,74 L0,60 Z');
  }

  /* Gold galloon band across every cloth — the universal vestment trim. */
  html.design-v2 .vestment-fall::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg,
      transparent 56%, var(--galloon) 59%, var(--galloon-hi) 63%, var(--galloon) 67%, transparent 70%);
  }
  /* White/gold festivals: an actual ivory cloth (form carried by its grey
     fold-over shadow + cast shadow) rather than an all-gold field. The line
     accents stay gold (--parament-white) so they read on the cream ground. */
  html.design-v2[data-parament="white"] .vestment,
  html.design-v2 [data-parament="white"] .vestment { --cloth-base: #fbfaf4; }
}

/* Calendar: each Sunday's title carries its own paramentcolor and each season
   heading its dominant color, so the page reads as the paraments actually
   change through the year. The "today" frame + marker follow the current
   season. is-missing rows keep their sienna gap border (set above). */
html.design-v2 .liturgical-season { color: var(--season-paint, inherit); }
html.design-v2 .liturgical-entry-title { color: var(--season-paint, inherit); }
html.design-v2 .liturgical-entry.is-today { border-color: var(--season-paint, var(--clce-burgundy-7)); }
html.design-v2 .liturgical-entry.is-today:last-child { border-bottom-color: var(--season-paint, var(--clce-burgundy-7)); }
html.design-v2 .liturgical-today-marker { background: var(--season-paint, var(--clce-burgundy-7)); }