/* The engine's base stylesheet, served by the host's Propshaft and linked
   first by the kit layout (decision 30).

   Defaults for §8's semantic design tokens. The values mirror the contract's
   monochrome defaults (decision 27c) so an unstyled page is legible; the
   cascade is kit defaults → theme stylesheet → per-tenant <style> overrides
   emitted by the layout from site settings — later wins.

   --font-primary / --font-secondary (decision 40): two generic slots set per
   site (Google/Adobe) or left to the theme's bundled default. Primary defaults
   to body text, secondary to headings, but a theme may apply them anywhere.
   The system stack is the fallback when a site picks no font. */

:root {
  --brand-colour: #000000;
  /* Legible label on the brand fill (issue #81); the per-tenant value is
     recomputed from brand_colour by website_kit_brand_tokens. White pairs with
     the #000000 brand default here. */
  --on-brand-colour: #ffffff;
  --accent-colour: #4b5563;
  --font-system: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-primary: var(--font-system);
  --font-secondary: var(--font-primary);
}

body {
  font-family: var(--font-primary), var(--font-system);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary), var(--font-primary), var(--font-system);
}

/* Custom Page content (E3, decision 48): ActionText renders an operator's body
   wrapped in .trix-content. Give their headings, paragraphs and lists basic
   rhythm — the kit owns this typography (no Tailwind `prose` is built here),
   token-aware so a theme's brand/accent colours carry through. A theme may
   override any of it via its own stylesheet (later wins). */
.trix-content > * + * { margin-top: 1rem; }
.trix-content h1 { font-size: 1.25rem; font-weight: 600; color: var(--brand-colour); }
.trix-content h2 { font-size: 1.125rem; font-weight: 600; color: var(--brand-colour); }
.trix-content a { color: var(--brand-colour); text-decoration: underline; }
.trix-content ul { list-style: disc; padding-left: 1.5rem; }
.trix-content ol { list-style: decimal; padding-left: 1.5rem; }
.trix-content li + li { margin-top: 0.25rem; }
.trix-content blockquote {
  border-left: 3px solid var(--accent-colour);
  padding-left: 1rem;
  font-style: italic;
}

/* Cookie-consent banner (decision 71): once the visitor has decided, the head
   consent-mode init adds .wk-consent-decided to <html> synchronously — from the
   same localStorage read, before the body paints — so the banner is hidden from
   first paint and never flashes on a returning visitor. This stylesheet is
   render-blocking in <head>, so the rule is in force before the banner renders;
   the Stimulus controller only handles the click. New visitors (no class) see it. */
html.wk-consent-decided [data-controller~="consent"] {
  display: none;
}

/* Saved-properties star toggle (Phase 9, decision 79): the theme's star button
   holds two SVGs (.saved-star-outline / .saved-star-filled); the `saved` Stimulus
   controller flips the button's aria-pressed, and this swaps the icon off THAT
   (a Tailwind aria-pressed: variant on the svg would only see its own attribute).
   Kit-owned like the consent rule above, so every theme's star swaps identically
   without per-theme CSS — the markup only needs the two class names. */
.saved-star-filled { display: none; }
[aria-pressed="true"] .saved-star-outline { display: none; }
[aria-pressed="true"] .saved-star-filled { display: block; }
