@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Semi+Condensed:wght@600;700&display=swap");
/* Design tokens — theme "faithful" defaults, overridden by the publisher's brand. Restyle here or in the theme's rules below; never in content. */
:root {
  --accent-fill: linear-gradient(90deg, #00b6ed, #0067be);
  --answer-bg: #ffffff;
  --brand-blue: #165590;
  --brand-cyan: #00b6ed;
  --brand-green: #63a164;
  --brand-navy: #022c53;
  --card-bg: #ffffff;
  --card-blur: none;
  --card-border: 1px solid var(--color-surface-border);
  --card-shadow: none;
  --color-accent: #0067be;
  --color-accent-contrast: #ffffff;
  --color-bar: #165590;
  --color-bar-text: #ffffff;
  --color-bg: #ffffff;
  --color-heading: #003d78;
  --color-logo: light-dark(#022c53, #ffffff);
  --color-muted: #5b6b7c;
  --color-ok: #63a164;
  --color-rule: #dde6ee;
  --color-surface: #f5f8fa;
  --color-surface-border: #dde6ee;
  --color-text: #1b2430;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-heading: 'Barlow', system-ui, sans-serif;
  --font-label: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --font-size: 1.0625rem;
  --hover-wash: rgb(0 103 190 / 0.06);
  --line-height: 1.55;
  --measure: 56rem;
  --page-bg: #f5f8fa;
  --painting-bg: #dde6ee;
  --radius: 14px;
  --scheme: light;
  --shadow-card: 0 8px 24px rgb(2 44 83 / 0.09);
  --title-fill: linear-gradient(var(--color-heading), var(--color-heading));
}

/* Theme "faithful" — brand take 1: the school as a full member of the
   Time To Revive family. The mid-blue nav bar runs edge to edge, cards
   are white with a thin blue-grey line, headings are navy, the flame
   cyan marks what is active. Dark scheme: the brand navy. */

h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; }

/* The nav bar: full width, brand blue, white type. */
[data-region="masthead"] {
  max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  padding: 0.75rem max(1rem, calc((100% - var(--measure)) / 2));
  background: var(--color-bar); color: var(--color-bar-text);
}
[data-region="masthead"] [data-brand] { color: var(--color-bar-text); font-weight: 700; }
[data-region="masthead"] > [data-region="drawer"] [data-region="site-nav"] a { color: var(--color-bar-text); opacity: 1; font-weight: 600; }
[data-region="masthead"] > [data-region="drawer"] [data-region="site-nav"] a:hover { background: rgb(255 255 255 / 0.12); color: #00b6ed; }
[data-region="masthead"] > [data-region="drawer"] [data-region="site-nav"] a[aria-current="page"] { background: #ffffff; color: #003d78; }
[data-region="masthead"] [data-region="account"],
[data-region="masthead"] [data-region="account"] a { color: var(--color-bar-text); }
[data-region="masthead"] [data-action] { border-color: rgb(255 255 255 / 0.45); color: var(--color-bar-text); }
/* In the drawer the links sit on the page colour again. */
[data-region="drawer"]:popover-open,
[data-region="drawer"]:popover-open [data-region="site-nav"] a,
[data-region="drawer"]:popover-open [data-region="account"],
[data-region="drawer"]:popover-open [data-action="menu-close"] { color: var(--color-text); }
[data-region="drawer"]:popover-open [data-region="account"] a { color: var(--color-accent); }
[data-region="drawer"]:popover-open [data-action="menu-close"] { border-color: var(--color-surface-border); }

/* Labels: Barlow Semi Condensed capitals, as the brand's eyebrows. */
[data-role="crumb"], [data-role="course-progress"], [data-role="pager"] small,
[data-component] > h2, [data-card] > h2, [data-role="eyebrow"], [data-region="appearance"] legend {
  font-family: var(--font-label); font-weight: 700; letter-spacing: 0.14em;
}
[data-component] > h2, [data-card] > h2 { color: var(--color-accent); opacity: 1; }

/* Cards lift a little on hover, the line turns flame cyan. */
@media (hover: hover) {
  [data-role="series-nav"] a:hover, [data-role="pager"] a:hover { border-color: #00b6ed; box-shadow: var(--shadow-card); }
}

/* Pills and buttons: solid brand blue, white type. */
[data-button="primary"] { background: var(--color-accent); border-color: var(--color-accent); }

/* Scripture and quotes: a pale blue panel, no side rule. */
[data-role="devotional-scripture"], [data-role="body"] blockquote {
  padding: 0.9rem 1.1rem; border-left: 0; border-radius: 10px;
  background: #eef4f9; color: #31465c; opacity: 1;
}

[data-region="footer"] { background: #022c53; color: #c4dcef; }

/* Dark scheme: the brand navy, the cards a step lighter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --scheme: dark;
    --color-bg: #022c53;
    --color-surface: #06355f;
    --color-surface-border: #1d4f80;
    --color-text: #eef4fa;
    --color-muted: #a9cbe8;
    --color-heading: #ffffff;
    --color-accent: #00b6ed;
    --color-accent-contrast: #022c53;
    --color-rule: #1d4f80;
    --color-bar: #011e3a;
    --page-bg: #022c53;
    --card-bg: #06355f;
    --shadow-card: 0 8px 24px rgb(0 0 0 / 0.3);
    --hover-wash: rgb(255 255 255 / 0.07);
    --answer-bg: #011e3a;
    --painting-bg: #011e3a;
    --accent-fill: linear-gradient(90deg, #00b6ed, #63a164);
  }
  :root:not([data-theme="light"]) [data-role="devotional-scripture"],
  :root:not([data-theme="light"]) [data-role="body"] blockquote { background: rgb(0 182 237 / 0.1); color: #d6ecfa; }
  :root:not([data-theme="light"]) [data-region="footer"] { background: #011e3a; }
}
:root[data-theme="dark"] {
  --scheme: dark;
  --color-bg: #022c53;
  --color-surface: #06355f;
  --color-surface-border: #1d4f80;
  --color-text: #eef4fa;
  --color-muted: #a9cbe8;
  --color-heading: #ffffff;
  --color-accent: #00b6ed;
  --color-accent-contrast: #022c53;
  --color-rule: #1d4f80;
  --color-bar: #011e3a;
  --page-bg: #022c53;
  --card-bg: #06355f;
  --shadow-card: 0 8px 24px rgb(0 0 0 / 0.3);
  --hover-wash: rgb(255 255 255 / 0.07);
  --answer-bg: #011e3a;
  --painting-bg: #011e3a;
  --accent-fill: linear-gradient(90deg, #00b6ed, #63a164);
}
:root[data-theme="dark"] [data-role="devotional-scripture"],
:root[data-theme="dark"] [data-role="body"] blockquote { background: rgb(0 182 237 / 0.1); color: #d6ecfa; }
:root[data-theme="dark"] [data-region="footer"] { background: #011e3a; }