/* ============================================================
   Respondeo — Dominican theme
   Palette: Dominican black & white with a restrained sanguine accent (the "cappa" red used sparingly for emphasis).
   ============================================================ */

/* Self-hosted webfonts (latin + latin-ext subsets of EB Garamond and Cinzel). Downloaded from
   Google Fonts and served as first-party static assets so they are precached by the PWA service
   worker and render identically offline. font-display: swap keeps text visible while the font
   loads. Paths are relative to this stylesheet (css/), so fonts live one level up in ../fonts/. */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cinzel-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cinzel-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cinzel-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cinzel-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cinzel-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cinzel-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ebgaramond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ebgaramond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ebgaramond-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ebgaramond-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* A real semibold cut so headings and <strong> are not faux-bolded by the browser. Fetched only when used.
   There is deliberately no 700 face: bold (700) requests fall back to this 600 cut without synthesis,
   saving a near-identical download. */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ebgaramond-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ebgaramond-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;
    --ink: #1a1814;
    --ink-soft: #333333;
    --parchment: #ffffff;
    --parchment-hover: #ffffff;
    --paper: #faf9f6;
    --rule: #d9d6cf;
    --accent: #7b1113;
    --accent-ink: #ffffff;
    /* Rubrication: in a manuscript the rubric (literally 'red') marked titles, headings and liturgical
       directions. Our sanguine accent is that cappa red, so --rubric names that role for eyebrows,
       section labels and versicle/response markers — distinct from --accent used for links/interaction. */
    --rubric: var(--accent);
    --gold: #b8902f;
    --gold-bright: #e8c874;
    /* Gold is reserved for *events* \u2014 something sacred or singular is present: a feast day, a
       completed devotion, a canonization, the ceremonial stage plate. Use --gold-event (not --gold
       directly) for these cues so the restraint is self-documenting; never use gold for ordinary UI
       chrome, where it would lose its meaning. */
    --gold-event: var(--gold);
    --shadow: rgba(17, 17, 17, 0.08);
    --code-bg: #f0eee9;
    /* Floating controls (back-to-top, Summa guide): mirror the primary .btn so they stay consistent. */
    --float-btn-bg: var(--ink);
    --float-btn-fg: var(--parchment);
    --float-btn-bg-hover: var(--parchment);
    --float-btn-fg-hover: var(--ink);
    /* Masthead and colophon stay dark in both themes, so they use dedicated tokens. */
    --masthead-bg: #111111;
    --masthead-fg: #ffffff;
    --masthead-fg-soft: #cfcfcf;
    --masthead-rule: #5a5650;
    --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --display: 'Cinzel', 'EB Garamond', Georgia, serif;
    /* Two standard content measures used site-wide. --w-read is the prose/reading column (optimal
       line length for body text); --w-wide is the roomier column for the home page, browse catalogs,
       and layout-driven detail surfaces. --maxw is kept as a back-compat alias for --w-read. */
    --w-read: 46rem;
    --w-wide: 60rem;
    --maxw: var(--w-read);
    /* Shared surface tokens so cards, dialogs, and plates share one radius/elevation vocabulary.
       Values mirror the established Card look so adopting them is visually identical; they build on
       --shadow, which already adapts per theme, so no dark-theme overrides are needed. */
    --radius-sm: 3px;
    --radius: 6px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px var(--shadow);
    --shadow-lift: 0 10px 24px var(--shadow);
    /* One focus-ring definition for keyboard users, so interactive surfaces stay consistent. */
    --focus-ring-width: 2px;
    --focus-ring-color: var(--accent);
    --focus-ring-offset: 2px;
    /* One motion language so every surface feels composed by a single hand: a gentle "turning the
       page" easing and a small duration scale (quick taps -> hover lifts -> entrances). */
    --ease-page: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-1: 0.12s;
    --dur-2: 0.16s;
    --dur-3: 0.3s;
    --dur-4: 0.5s;
    /* Stacking layers, lowest to highest, so overlapping surfaces never fight over magic numbers. */
    --z-raised: 1;
    --z-sticky: 5;
    --z-prompt: 60;
    --z-float: 1000;
    --z-skip: 2000;
    /* Modular type scale (~1.2 ratio) for UI chrome; prose keeps its own rhythm.
       scales .content-body, ledes, skeptic notes and Summa prologues via --reader-scale. */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.2rem;
    --fs-xl: 1.44rem;
    --fs-2xl: 1.728rem;
    /* Liturgical vestment colors. These are fixed by the calendar, not the theme. */
    --lit-violet: #6b4e9e;
    --lit-white: #fdfbf4;
    --lit-green: #2f7d4f;
    --lit-red: #a4303a;
    --lit-rose: #e3a7bc;
    --lit-black: #2a2a2a;
    /* Breakpoints (custom properties cannot be used in @media, so this is the reference list):
       40rem = phone/bottom-sheet layout (the standard mobile breakpoint); 36rem = narrow prose
       tweaks; 58rem = Stage reel wide layout. Nav components use content-driven widths. */
}

/* ---------- Reader text size ---------- */
/* Scales only article/page content (.content-body), never the UI chrome. */
html[data-textsize="large"] {
    --reader-scale: 1.125;
}

html[data-textsize="larger"] {
    --reader-scale: 1.25;
}

html[data-textsize="largest"] {
    --reader-scale: 1.4;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
    color-scheme: dark;
    --ink: #ece9e1;
    --ink-soft: #b8b4a9;
    --parchment: #1e1c17;
    --parchment-hover: #26241d;
    --paper: #15140f;
    --rule: #3a372f;
    --accent: #c6474a;
    --accent-ink: #15140f;
    --rubric: var(--accent);
    --gold: #c9a54e;
    --gold-bright: #f0d488;
    --shadow: rgba(0, 0, 0, 0.5);
    --code-bg: #26241d;
    /* Floating controls: mirror the primary .btn so they stay consistent across themes. */
    --float-btn-bg: var(--ink);
    --float-btn-fg: var(--parchment);
    --float-btn-bg-hover: var(--parchment);
    --float-btn-fg-hover: var(--ink);
    --masthead-bg: #0e0d0a;
    --masthead-fg: #ece9e1;
    --masthead-fg-soft: #b8b4a9;
    --masthead-rule: #3a372f;
}

* {
    box-sizing: border-box;
}

/* Skip link: hidden until focused, then pinned to the top-left for keyboard users. */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -3rem;
    z-index: var(--z-skip);
    background: var(--ink);
    color: var(--parchment);
    padding: 0.55rem 1rem;
    font-family: var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: top var(--dur-2) var(--ease-page);
}

.skip-link:focus {
    top: 0.5rem;
    text-decoration: none;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Blazor's FocusOnNavigate moves focus to the <h1> on navigation, which shows the default focus ring.
    Hide it for programmatic/mouse focus while keeping a visible ring for keyboard users. */
:focus:not(:focus-visible) {
    outline: none;
}

/* The <main> landmark (tabindex="-1") is only ever focused programmatically; on a fresh page load
    browsers treat that focus as :focus-visible and draw a ring whose top edge shows under the masthead. */
#content:focus,
#content:focus-visible {
    outline: none;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.125rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* Lean into EB Garamond's book typography: common + discretionary ligatures and old-style
       (text) figures that sit on the baseline like a printed missal. Contexts that need aligned
       numerals (Summa citations, fact tables) re-assert tabular/lining figures locally. */
    font-variant-ligatures: common-ligatures discretionary-ligatures;
    font-variant-numeric: oldstyle-nums;
}

/* On installed PWAs with viewport-fit=cover, the viewport extends into the device safe areas
   (Android gesture bar, iOS home indicator). The root shows through wherever a child box does not
   reach the edge, so paint it with the page color — matching the body and the full-screen loading
   state so the initial load looks normal. The dark footer paints into the bottom inset itself via
   its safe-area padding, so there is no mismatched strip once the app is loaded. */
html {
    background: var(--paper);
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Summa citations (links into the summa/ corpus) read as a single reference unit: keep the whole
   citation on one line and use lining tabular figures so the numerals align uniformly, overriding the
   site-wide old-style default. Applied globally so every content pillar — inquiry, articles, miracles,
   prayers, devotions — renders them identically. */
a[href^="summa/"] {
    font-variant-numeric: lining-nums tabular-nums;
}

/* Visually hidden but available to screen readers (labels and live-region announcements). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
}