/**
 * Kanisa CMS house brand — royal blue and gold.
 *
 * WHY THIS IS AN OVERRIDE FILE AND NOT A REWRITE
 *
 * Every page in this project already defines its own palette as CSS custom
 * properties on :root — --bg, --panel, --border, --text, --muted, --accent,
 * --accent-dark, --gold, --gold-dark — and then uses those variables
 * throughout its rules. That is the whole reason a re-skin is possible
 * without touching a single page's markup or its layout CSS: redefine the
 * variables, and every rule that referenced them follows.
 *
 * So this file is linked AFTER each page's own <style> block. Same
 * specificity, later wins. Nothing is marked !important, because a page that
 * genuinely needs a different value for something should still win — and
 * because !important here would be impossible to undo later without editing
 * this file again.
 *
 * WHAT IT DELIBERATELY DOES NOT DO
 *
 * It does not restyle components. No new padding, radii, shadows or layout.
 * A colour change cannot break a working page; a layout change very easily
 * can, and several of these pages are in daily use during live services.
 * Anything a page hard-codes as a hex value rather than a variable keeps its
 * old colour — that is a partial re-skin by design, not an oversight. Those
 * are worth converting to variables one page at a time, with eyes on the
 * result, rather than in a sweep.
 *
 * The portal (/) and the KMS landing page carry this palette natively and do
 * not link this file.
 */

:root {
  /* The brand itself */
  --royal: #233B96;
  --royal-dark: #182A6E;
  --royal-light: #3E56B8;
  --gold: #D9A11B;
  --gold-dark: #B3820E;
  --gold-light: #F0C55C;

  /* Surfaces and text — the names each page already uses */
  --bg: #F8F8F6;
  --panel: #FFFFFF;
  --card: #F8F8F6;
  --border: #E7E7E2;
  --line: #E7E7E2;
  --line-soft: #F0F0EC;
  --text: #111528;
  --ink: #111528;
  --muted: #4B5169;
  --ink2: #4B5169;
  --ink3: #8A8FA3;

  /* Action colours. Pages call this --accent; the brand calls it royal. */
  --accent: #233B96;
  --accent-dark: #182A6E;

  /* Left as they were: red still has to read as a warning, and green as
     success. Recolouring those to brand tones is how a delete button stops
     looking like one. */
  --danger: #b91c1c;
  --error: #C5221F;
  --success: #1E8E5A;
}

/* Headings in the brand serif, body in Inter — matching the landing page.
   Both are already loaded by most pages; where they are not, the fallbacks
   are ordinary system fonts, so nothing depends on this arriving. */
@import url('/assets/fonts.css?v=r51');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.01em;
}

/* ── The branded header band ──────────────────────────────────────────────
 *
 * OPT-IN, via class="brand-header" on the element. It used to be a blanket
 * `header { background-color: navy }` and that was a mistake I made and
 * shipped: most of these pages style their header text DARK, because their
 * header sits on the light page background. Painting the band navy without
 * also setting the foreground left dark text on a dark band — unreadable on
 * Verse of the Moment, Global Songs, Transcribe and the Reading Plan.
 *
 * Two lessons baked in here. The band now sets its foreground alongside its
 * background — the two belong together and must never be set apart. And it
 * is opt-in, so a page with its own header treatment (the Transcript
 * Archive's toolbar, for one) is not silently repainted by a rule written
 * for somebody else's page.
 */
.brand-header {
  background: var(--royal-dark);
  color: #fff;
  /* Thinner than the originals: these bands were 36px tall on some pages
     and pushed the actual content below the fold on a phone. */
  padding: 14px 18px 12px;
  border-bottom: 3px solid var(--gold);

  /* ── The part that actually makes the text readable ──────────────────
   * Each page styles its own header text with rules like
   *   header p.tag     { color: var(--muted) }
   *   header .visitors { color: var(--muted) }
   * which are MORE SPECIFIC than anything sensible this file could write
   * for a descendant — `header p.tag` (0,1,2) beats `.brand-header p`
   * (0,1,1). Trying to out-specify every page would be a losing race, and
   * !important would make the pages impossible to adjust later.
   *
   * So instead of overriding the rules, this re-points the VARIABLES those
   * rules already read. Custom properties cascade by INHERITANCE, not
   * specificity: redefining --muted here means every descendant rule using
   * var(--muted) resolves to the light value inside the band and is
   * completely unaffected outside it. No specificity war, nothing to undo.
   */
  --muted: #C3CBE4;
  --text: #FFFFFF;
  --ink: #FFFFFF;
  --ink2: #C3CBE4;
  --ink3: #A8B2D4;
  --accent: #F0C55C;
  --accent-dark: #F0C55C;
  --border: rgba(255,255,255,.28);
}
.brand-header h1,
.brand-header h2,
.brand-header h3 {
  color: #fff;
  font-size: clamp(18px, 3.4vw, 24px);
  margin: 0 0 3px;
}
/* Everything else in the band is secondary text: readable, not shouting. */
.brand-header p,
.brand-header small,
.brand-header span,
.brand-header div,
.brand-header .muted,
.brand-header .sub {
  color: #C7CEE6;
}
.brand-header a { color: #fff; }
/* Thinner still on a phone, where the band was eating the top fifth of the
   screen before any content appeared — the sub-line wraps to two or three
   lines at this width, so trimming its size and leading is worth more than
   trimming the padding. */
@media (max-width: 480px) {
  .brand-header { padding: 11px 16px 10px; }
  .brand-header h1, .brand-header h2, .brand-header h3 { margin-bottom: 2px; }
  .brand-header p, .brand-header small, .brand-header .sub { font-size: 12.5px; line-height: 1.38; }
}
/* Links and buttons sitting in the band need a visible edge against navy. */
.brand-header button:not(.primary) {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
}