/* ============================================================
   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: 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;
}

:root {
    color-scheme: light;
    --ink: #111111;
    --ink-soft: #333333;
    --parchment: #ffffff;
    --parchment-hover: #ffffff;
    --paper: #faf9f6;
    --rule: #d9d6cf;
    --accent: #7b1113;
    --accent-ink: #ffffff;
    --gold: #b8902f;
    --gold-bright: #e8c874;
    --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: #ffffff;
    --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --display: 'Cinzel', 'EB Garamond', Georgia, serif;
    --maxw: 46rem;
}

/* ---------- 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;
    --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: 2000;
    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 0.15s ease;
}

.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;
}

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;
}

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

a:hover {
    text-decoration: underline;
}

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

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    background: var(--ink);
    color: var(--parchment);
    padding: 0.6rem 1.4rem;
    font-family: var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.85rem;
    border: 1px solid var(--ink);
}

.btn:hover {
    text-decoration: none;
    background: var(--parchment);
    color: var(--ink);
}

/* On small screens the virtual keyboard shrinks the viewport, which pins any position:fixed
   control (the Summa guide button and back-to-top arrow) to a strip just above the keyboard where
   it reads as a stray colored block. Hide those floating controls while a text field is focused. */
@media (max-width: 640px) {
    body:has(input:focus, textarea:focus) .back-to-top,
    body:has(input:focus, textarea:focus) .summa-guide__trigger {
        display: none;
    }
}

/* ---------- Blazor error UI (retained from template) ---------- */
#blazor-error-ui {
    background: #ffe9e9;
    border-top: 3px solid var(--accent);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 22vh auto 1rem auto;
    padding: 0 1rem;
    text-align: center;
    color: var(--ink);
}

.app-loading__mark {
    width: 5rem;
    height: 5rem;
    animation: app-loading-pulse 1.8s ease-in-out infinite;
}

.app-loading__book {
    fill: var(--paper);
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linejoin: round;
}

.app-loading__spine,
.app-loading__lines {
    stroke: var(--ink-soft);
    stroke-width: 1.5;
    stroke-linecap: round;
    fill: none;
}

.app-loading__plume {
    fill: var(--rule);
    stroke: var(--ink-soft);
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.app-loading__rachis {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 1;
    stroke-linecap: round;
}

.app-loading__nib {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
}

.app-loading__caption {
    margin-top: 0.75rem;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--ink-soft);
    /* Cinzel is small-caps by nature; nudge the tracking so the wordmark reads calmly. */
    padding-left: 0.35em;
}

.app-loading__bar {
    position: relative;
    width: 8rem;
    height: 2px;
    margin-top: 1.25rem;
    background: var(--rule);
    overflow: hidden;
}

.app-loading__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--blazor-load-percentage, 0%);
    background: var(--accent);
    transition: width 0.1s ease-in-out;
}

@keyframes app-loading-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading__mark {
        animation: none;
    }

    .app-loading__fill {
        transition: none;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    html, body {
        font-size: 1.05rem;
    }
}

/* ---------- Journey landing pages ---------- */
.landing__title {
    margin: 0 0 0.5rem;
}

.landing__lede {
    font-size: 1.15rem;
    color: var(--ink-soft);
    max-width: 42rem;
}

.landing__placeholder {
    margin-top: 2rem;
    font-style: italic;
    color: var(--ink-soft);
}