/*
  Church Helm brand: the look of every page on all three sites.

  Loaded by base.html right after Bootstrap, it restyles Bootstrap with the
  brand kit's values (app/static/brand/, from the "Church Helm Brand Kit",
  Option D): the Sora font, the colours, corner radii and buttons. Pages
  keep using ordinary Bootstrap classes (btn-primary, card, alert...) and
  get the brand automatically. Brand-only pieces (the navbar, eyebrow
  labels, gold call-to-action buttons) have ch- classes, below.

  Brand rules worth knowing when building pages (full guide in the kit's README):
    - Mostly cream and white with forest text; forest for headers and dark
      sections; gold sparingly, for the single most important action.
    - Gold is never body text on a light background (use bronze for accent
      text on light). No gradients. Touch targets at least 44px tall.
    - Logos are never recoloured, stretched or given effects.
  No inline styles anywhere (the Content-Security-Policy blocks them):
  add classes here or in a page's own stylesheet.
*/

/* ---- The font (Sora, SIL Open Font License: app/static/brand/fonts/OFL.txt) ---- */
@font-face { font-family: "Sora"; src: url("../brand/fonts/Sora-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../brand/fonts/Sora-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../brand/fonts/Sora-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../brand/fonts/Sora-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- Brand tokens (the kit's tokens.css) and Bootstrap's own settings mapped onto them ---- */
:root {
  --ch-forest: #1E3A2F;
  --ch-forest-deep: #17302A;
  --ch-forest-mid: #4E7A66;
  --ch-cream: #F7F3EA;
  --ch-sand: #EDE7D8;
  --ch-white: #FFFFFF;
  --ch-warm-white: #F2EEE3;
  --ch-gold: #E0B04A;
  --ch-gold-deep: #C9952E;
  --ch-bronze: #7A5C18;
  --ch-success: #2E6B4E;
  --ch-text-muted: #4A5A52;
  --ch-text-muted-on-dark: #CCD5CC;
  --ch-border: #E3DDCD;
  --ch-border-strong: #D8D1BF;
  --ch-font: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bootstrap: page, text, links, borders, corners, focus ring. */
  --bs-body-font-family: var(--ch-font);
  --bs-body-bg: var(--ch-cream);
  --bs-body-bg-rgb: 247, 243, 234;
  --bs-body-color: var(--ch-forest);
  --bs-body-color-rgb: 30, 58, 47;
  --bs-body-line-height: 1.6;
  --bs-emphasis-color: var(--ch-forest);
  --bs-secondary-color: var(--ch-text-muted);
  --bs-secondary-bg: var(--ch-sand);
  --bs-tertiary-bg: var(--ch-sand);
  --bs-tertiary-bg-rgb: 237, 231, 216;
  --bs-heading-color: var(--ch-forest);
  --bs-link-color: var(--ch-forest);
  --bs-link-color-rgb: 30, 58, 47;
  --bs-link-hover-color: var(--ch-bronze);
  --bs-link-hover-color-rgb: 122, 92, 24;
  --bs-border-color: var(--ch-border);
  --bs-border-color-translucent: rgba(30, 58, 47, 0.12);
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 10px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: 18px;
  --bs-border-radius-pill: 999px;
  --bs-focus-ring-color: rgba(224, 176, 74, 0.45);
  --bs-primary: var(--ch-forest);
  --bs-primary-rgb: 30, 58, 47;
  --bs-primary-text-emphasis: var(--ch-forest);
  --bs-primary-bg-subtle: #E4ECE7;
  --bs-primary-border-subtle: #B9CCC2;
  --bs-secondary-rgb: 74, 90, 82;
  --bs-success: var(--ch-success);
  --bs-success-rgb: 46, 107, 78;
  --bs-warning: var(--ch-gold);
  --bs-warning-rgb: 224, 176, 74;
  --bs-light-rgb: 247, 243, 234;
  --bs-dark-rgb: 30, 58, 47;
  /* Red: a deeper shade than Bootstrap's #dc3545, which is only 4.1:1 on
     cream; this one is 5.9:1 on cream, and white text on it 6.5:1 (WCAG AA). */
  --bs-danger: #B02A37;
  --bs-danger-rgb: 176, 42, 55;
}

/* Bootstrap's red buttons have their colours built in, so give them the deeper red too. */
.btn-danger {
  --bs-btn-bg: #B02A37; --bs-btn-border-color: #B02A37;
  --bs-btn-hover-bg: #8F222D; --bs-btn-hover-border-color: #8F222D;
  --bs-btn-active-bg: #7A1D26; --bs-btn-active-border-color: #7A1D26;
  --bs-btn-disabled-bg: #B02A37; --bs-btn-disabled-border-color: #B02A37;
}
.btn-outline-danger {
  --bs-btn-color: #B02A37; --bs-btn-border-color: #B02A37;
  --bs-btn-hover-bg: #B02A37; --bs-btn-hover-border-color: #B02A37;
  --bs-btn-active-bg: #8F222D; --bs-btn-active-border-color: #8F222D;
  --bs-btn-disabled-color: #B02A37; --bs-btn-disabled-border-color: #B02A37;
}

/* Text muted means the brand's muted green-grey everywhere. */
.text-body-secondary, .text-muted { color: var(--ch-text-muted) !important; }

/* ---- Headings: SemiBold with the brand's tight tracking ---- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.lead { font-weight: 400; }

/* ---- Buttons: forest primary with cream text; 44px touch targets ---- */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 12px;
  --bs-btn-padding-y: 0.6rem;
  --bs-btn-padding-x: 1.1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.btn-sm {
  --bs-btn-border-radius: 10px;
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-padding-x: 0.8rem;
  min-height: 36px;
}
/* Link-style buttons (e.g. "Take off", "Back") keep their text size and no minimum height. */
.btn-link { min-height: 0; display: inline; }
.btn-primary {
  --bs-btn-color: var(--ch-cream);
  --bs-btn-bg: var(--ch-forest);
  --bs-btn-border-color: var(--ch-forest);
  --bs-btn-hover-color: var(--ch-cream);
  --bs-btn-hover-bg: var(--ch-forest-deep);
  --bs-btn-hover-border-color: var(--ch-forest-deep);
  --bs-btn-active-color: var(--ch-cream);
  --bs-btn-active-bg: var(--ch-forest-deep);
  --bs-btn-active-border-color: var(--ch-forest-deep);
  --bs-btn-disabled-color: var(--ch-cream);
  --bs-btn-disabled-bg: var(--ch-forest-mid);
  --bs-btn-disabled-border-color: var(--ch-forest-mid);
  --bs-btn-focus-shadow-rgb: 224, 176, 74;
}
.btn-outline-primary, .btn-outline-secondary {
  --bs-btn-color: var(--ch-forest);
  --bs-btn-border-color: var(--ch-border-strong);
  --bs-btn-hover-color: var(--ch-forest);
  --bs-btn-hover-bg: var(--ch-sand);
  --bs-btn-hover-border-color: var(--ch-forest);
  --bs-btn-active-color: var(--ch-forest);
  --bs-btn-active-bg: var(--ch-sand);
  --bs-btn-active-border-color: var(--ch-forest);
  --bs-btn-disabled-color: var(--ch-text-muted);
  --bs-btn-disabled-border-color: var(--ch-border);
  --bs-btn-focus-shadow-rgb: 224, 176, 74;
  border-width: 1.5px;
}
.btn-outline-success {
  --bs-btn-color: var(--ch-success);
  --bs-btn-border-color: var(--ch-success);
  --bs-btn-hover-bg: var(--ch-success);
  --bs-btn-hover-border-color: var(--ch-success);
  border-width: 1.5px;
}
/* The highlight call to action: gold with forest text (once per screen). */
.btn-gold, .ch-btn-gold {
  --bs-btn-color: var(--ch-forest);
  --bs-btn-bg: var(--ch-gold);
  --bs-btn-border-color: var(--ch-gold);
  --bs-btn-hover-color: var(--ch-forest);
  --bs-btn-hover-bg: #D3A23C;
  --bs-btn-hover-border-color: #D3A23C;
  --bs-btn-active-color: var(--ch-forest);
  --bs-btn-active-bg: #C9952E;
  --bs-btn-active-border-color: #C9952E;
  --bs-btn-disabled-color: var(--ch-forest);
  --bs-btn-disabled-bg: var(--ch-gold);
  --bs-btn-disabled-border-color: var(--ch-gold);
  --bs-btn-focus-shadow-rgb: 224, 176, 74;
}
/* A secondary button on a dark (forest) background. */
.btn-outline-on-dark {
  --bs-btn-color: var(--ch-warm-white);
  --bs-btn-border-color: #6E857A;
  --bs-btn-hover-color: var(--ch-forest);
  --bs-btn-hover-bg: var(--ch-warm-white);
  --bs-btn-hover-border-color: var(--ch-warm-white);
  --bs-btn-active-color: var(--ch-forest);
  --bs-btn-active-bg: var(--ch-warm-white);
  border-width: 1.5px;
}

/* ---- Cards, forms, tables, alerts, badges ---- */
.card {
  --bs-card-border-color: var(--ch-border);
  --bs-card-border-radius: 16px;
  --bs-card-inner-border-radius: 15px;
  --bs-card-bg: var(--ch-white);
  --bs-card-cap-bg: var(--ch-cream);
}
/* The brand uses hairline borders, not heavy shadows. */
.card.shadow-sm, .card.shadow { box-shadow: none !important; }
.form-control, .form-select {
  border-color: var(--ch-border-strong);
  border-radius: 10px;
  min-height: 44px;
}
.form-control-sm, .form-select-sm { min-height: 36px; }
textarea.form-control { min-height: 0; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--ch-forest);
  box-shadow: 0 0 0 0.2rem rgba(224, 176, 74, 0.45);
}
.form-check-input:checked { background-color: var(--ch-forest); border-color: var(--ch-forest); }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(30, 58, 47, 0.04); }
.alert { --bs-alert-border-radius: 12px; }
.alert-success { --bs-alert-color: var(--ch-success); --bs-alert-bg: #E3EFE7; --bs-alert-border-color: #C2DCCB; }
.alert-info { --bs-alert-color: var(--ch-forest); --bs-alert-bg: #E8EEEA; --bs-alert-border-color: #C9D7CF; }
.alert-warning { --bs-alert-color: #5C4410; --bs-alert-bg: #FBF0D6; --bs-alert-border-color: #F0D9A0; }
.alert-secondary { --bs-alert-color: var(--ch-forest); --bs-alert-bg: var(--ch-sand); --bs-alert-border-color: var(--ch-border-strong); }
.badge { font-weight: 600; letter-spacing: 0.01em; }
.text-bg-primary { color: var(--ch-cream) !important; background-color: var(--ch-forest) !important; }
.text-bg-warning { color: var(--ch-forest) !important; background-color: var(--ch-gold) !important; }
.text-bg-light { color: var(--ch-forest) !important; background-color: var(--ch-sand) !important; }
/* Table paging (bootstrap-table) and the rows-per-page button. */
.pagination { --bs-pagination-color: var(--ch-forest); --bs-pagination-hover-color: var(--ch-forest); --bs-pagination-hover-bg: var(--ch-sand);
  --bs-pagination-active-bg: var(--ch-forest); --bs-pagination-active-border-color: var(--ch-forest); --bs-pagination-active-color: var(--ch-cream);
  --bs-pagination-border-color: var(--ch-border); --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(224, 176, 74, 0.45);
  --bs-pagination-disabled-bg: var(--ch-cream); --bs-pagination-disabled-color: var(--ch-text-muted); }
.btn-secondary { --bs-btn-color: var(--ch-forest); --bs-btn-bg: var(--ch-sand); --bs-btn-border-color: var(--ch-border-strong);
  --bs-btn-hover-color: var(--ch-forest); --bs-btn-hover-bg: var(--ch-border); --bs-btn-hover-border-color: var(--ch-border-strong);
  --bs-btn-active-color: var(--ch-forest); --bs-btn-active-bg: var(--ch-border); --bs-btn-active-border-color: var(--ch-forest); }
.list-group { --bs-list-group-border-color: var(--ch-border); --bs-list-group-action-hover-bg: var(--ch-cream); --bs-list-group-border-radius: 12px; }
:focus-visible { outline: 2px solid var(--ch-gold-deep); outline-offset: 2px; }
/* Code-style text (references such as HR-01042, file names): bronze, the brand's accent text, not Bootstrap's pink. */
code { color: var(--ch-bronze); }

/* ---- The brand navbar (customer sites): cream, forest text, hairline below ---- */
.ch-navbar {
  --bs-navbar-color: var(--ch-forest);
  --bs-navbar-hover-color: var(--ch-bronze);
  --bs-navbar-active-color: var(--ch-forest);
  --bs-navbar-brand-color: var(--ch-forest);
  --bs-navbar-brand-hover-color: var(--ch-forest);
  --bs-navbar-toggler-border-color: var(--ch-border-strong);
  background: var(--ch-cream);
  border-bottom: 1px solid var(--ch-border);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.ch-navbar .nav-link { font-size: 0.9375rem; }
/* The menu panel that slides in from the right on small screens
   (_navbar.html; Bootstrap offcanvas below "lg"): most of a phone's width,
   cream like the bar, with the links as big rows that are easy to tap and
   the open page's row shaded. On big screens none of this applies, as
   Bootstrap shows the links in the bar. */
@media (max-width: 991.98px) {
  /* Above the floating Help button (z-index 1080, css/help-widget.css), with a plain
     hairline edge; no focus outline on the panel itself when it opens (its links
     still show theirs). */
  .ch-nav-panel { --bs-offcanvas-width: min(320px, 85vw); --bs-offcanvas-bg: var(--ch-cream);
                  --bs-offcanvas-zindex: 1090; --bs-offcanvas-border-color: var(--ch-border-strong); }
  .ch-nav-panel:focus, .ch-nav-panel:focus-visible { outline: none; }
  .offcanvas-backdrop { z-index: 1085; }
  .ch-nav-panel .offcanvas-header { border-bottom: 1px solid var(--ch-border); }
  .ch-nav-panel .navbar-nav { gap: 0.25rem !important; }
  .ch-nav-panel .nav-link { font-size: 1.0625rem; padding: 0.75rem 1rem; border-radius: 10px; }
  .ch-nav-panel .nav-link.active { background: var(--ch-sand); }
  .ch-nav-panel .nav-link:hover { background: var(--ch-warm-white); }
  /* Log out (or Start free trial) at the bottom, full width, after a line. */
  .ch-nav-logout { margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--ch-border); }
  .ch-nav-logout form, .ch-nav-logout .btn { display: block; width: 100%; }
  .ch-nav-logout .btn { padding: 0.6rem 1rem; font-size: 1rem; }
}
/* The brand mark: the compass symbol and the live-text wordmark. */
.ch-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ch-brand-symbol { height: 40px; width: auto; display: block; }
.ch-wordmark { font-size: 1.375rem; letter-spacing: -0.03em; line-height: 1; color: inherit; }
.ch-wordmark-light { font-weight: 300; }
.ch-wordmark-bold { font-weight: 600; }

/* ---- The admin site's navbar: dark forest with a gold strip, so it is never mistaken for a customer site ---- */
.ch-admin-navbar {
  --bs-navbar-color: var(--ch-text-muted-on-dark);
  --bs-navbar-hover-color: var(--ch-warm-white);
  --bs-navbar-active-color: var(--ch-warm-white);
  --bs-navbar-brand-color: var(--ch-warm-white);
  --bs-navbar-brand-hover-color: var(--ch-warm-white);
  background: var(--ch-forest);
  border-top: 4px solid var(--ch-gold);
}
.ch-admin-navbar .navbar-text { color: var(--ch-text-muted-on-dark); }
/* Admin brand mark a touch smaller, and section links that never wrap. */
.ch-admin-navbar .ch-brand-symbol { height: 34px; }
.ch-admin-navbar .ch-wordmark { font-size: 1.2rem; }
.ch-admin-navbar .nav-link { white-space: nowrap; font-size: 0.9375rem; }
@media (min-width: 1200px) {
  .ch-admin-sections { margin-left: 1rem; gap: 0.15rem; }
}
.ch-admin-account { background: none; border: 0; }
/* The dropdowns: brand corners and hover. */
.dropdown-menu { --bs-dropdown-border-color: var(--ch-border); --bs-dropdown-border-radius: 12px; --bs-dropdown-link-hover-bg: var(--ch-cream);
  --bs-dropdown-link-active-bg: var(--ch-forest); --bs-dropdown-link-color: var(--ch-forest); --bs-dropdown-bg: var(--ch-white); }
.dropdown-item.btn { min-height: 0; display: block; text-align: start; border: 0; border-radius: 0; font-weight: 400; padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x); }
.ch-badge-admin { background: var(--ch-gold); color: var(--ch-forest); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- Small brand pieces used by pages ---- */
/* Eyebrow labels above headings: uppercase, wide tracking, bronze on light / gold on dark. */
.ch-eyebrow { margin: 0; font-size: 0.8125rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ch-bronze); }
.ch-dark .ch-eyebrow { color: var(--ch-gold); }
/* A dark (forest) section. */
.ch-dark { background: var(--ch-forest); color: var(--ch-warm-white); --bs-heading-color: var(--ch-warm-white); }
.ch-dark .text-body-secondary { color: var(--ch-text-muted-on-dark) !important; }
/* A "Coming soon" tag for features not built yet. */
.ch-soon { display: inline-block; background: var(--ch-sand); color: var(--ch-bronze); border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ch-dark .ch-soon { background: rgba(224, 176, 74, 0.15); color: var(--ch-gold); }

/* ---- The footer on customer sites ---- */
.ch-footer { background: var(--ch-forest-deep); color: var(--ch-text-muted-on-dark); }
.ch-footer a { color: var(--ch-text-muted-on-dark); }
.ch-footer a:hover { color: var(--ch-warm-white); }

/* ---- Centred auth pages (login, password reset) with the stacked logo ---- */
.ch-auth-logo { width: 180px; height: auto; display: block; margin: 0 auto 1.5rem; }

/* ---- User levels and the Account page (app/members.py; account/_layout.html) ---- */
/* Level badges: Owner in forest, Admin in gold, Standard in sand (all pass WCAG AA contrast). */
.ch-level { border-radius: 999px; padding: 0.3em 0.75em; }
.ch-level-owner { background: var(--ch-forest); color: var(--ch-cream); }
.ch-level-admin { background: var(--ch-gold); color: var(--ch-forest-deep); }
.ch-level-standard { background: var(--ch-sand); color: var(--ch-forest); border: 1px solid var(--ch-border-strong); }
/* The Account page's tabs: brand colours, and they scroll sideways on small
   phones instead of wrapping into a tall stack. */
.ch-account-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; border-bottom-color: var(--ch-border-strong); }
.ch-account-tabs .nav-link { white-space: nowrap; color: var(--ch-text-muted); font-weight: 500; }
.ch-account-tabs .nav-link:hover { color: var(--ch-forest); border-color: transparent; }
.ch-account-tabs .nav-link.active { color: var(--ch-forest); font-weight: 600; background: var(--ch-white); border-color: var(--ch-border-strong) var(--ch-border-strong) var(--ch-white); }
/* Tables shown as cards on phones (js/tables.js): hide anything that only
   stood in for a column hidden on small screens, as the cards show every
   column (e.g. the email under a user's name). */
.bootstrap-table .card-view .ch-hide-in-cards { display: none !important; }
/* How full the address book is (Plan and billing tab; account/billing.html):
   a native <progress> bar in the brand's colours, with a border that shows in
   both themes (WCAG 1.4.11: 3:1 against the card). */
.ch-usage { height: 0.9rem; border: 1px solid var(--ch-border-strong); border-radius: 999px; overflow: hidden;
  background: var(--bs-secondary-bg); accent-color: var(--bs-primary); appearance: none; }
.ch-usage::-webkit-progress-bar { background: var(--bs-secondary-bg); }
.ch-usage::-webkit-progress-value { background: var(--bs-primary); }
.ch-usage::-moz-progress-bar { background: var(--bs-primary); }
/* The open page's navbar link. */
.ch-navbar .nav-link.active { font-weight: 600; }

/* ---- The church website editor (app/templates/website/) ---- */
/* Small previews of the logo and sharing picture. */
.ch-site-thumb { max-height: 64px; width: auto; max-width: 160px; object-fit: contain; border: 1px solid var(--ch-border-strong); border-radius: .375rem; background: var(--ch-white); padding: .25rem; }
/* A page's picture, as big as the form allows. */
.ch-site-preview-img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: .5rem; }
/* Square, finger-sized buttons (e.g. move up/down). */
.ch-tap { min-width: 44px; min-height: 44px; }
/* How a page could look in Google's results. */
.ch-serp { border: 1px solid var(--ch-border-strong); border-radius: .5rem; padding: .75rem 1rem; background: var(--ch-white); }
.ch-serp-title { color: #1a0dab; font-size: 1.1rem; line-height: 1.3; margin: .15rem 0; }
.ch-pre-wrap { white-space: pre-wrap; }

/* ==========================================================================
   Dark mode (every Church Helm site; chosen with the Light / Dark / Device
   switch, _theme_switch.html, which static/js/theme.js turns into
   data-bs-theme="dark" on <html>).

   How it works: the brand tokens that only ever play one part (surfaces,
   borders, muted text, accent text) are given dark values, so every rule
   above that uses them follows on its own. Forest and cream play two parts
   (forest is both the text colour and the colour of dark sections; cream
   is both the page and the text on forest buttons), so they keep their
   values and the rules that use them as text or page colour are redone
   here, one by one.
   Everything is scoped to html[data-bs-theme="dark"], not just
   [data-bs-theme="dark"], so the admin navbar (always dark, with its own
   data-bs-theme="dark") is not changed in light mode.
   Colours chosen for WCAG AA contrast: text #EDE7D8 on the page #13231C,
   muted #AEBDB3, links and accents in the brand's gold.
   ========================================================================== */
:root[data-bs-theme="dark"] {
  color-scheme: dark;
  /* The dark palette. */
  --ch-dark-page: #13231C;
  --ch-dark-surface: #1B2E26;
  --ch-dark-raised: #243A31;
  --ch-dark-text: #EDE7D8;
  --ch-dark-heading: #F7F3EA;

  /* Single-purpose brand tokens, given their dark values. */
  --ch-white: var(--ch-dark-surface);          /* cards, dropdowns, panels */
  --ch-sand: var(--ch-dark-raised);            /* shaded areas, hovers, light badges */
  --ch-border: #30493E;
  --ch-border-strong: #426152;
  --ch-text-muted: #AEBDB3;
  --ch-bronze: var(--ch-gold);                 /* accent text: gold reads on dark, bronze doesn't */

  /* Bootstrap's settings (brand.css's :root block above sets them for light). */
  --bs-body-bg: var(--ch-dark-page);
  --bs-body-bg-rgb: 19, 35, 28;
  --bs-body-color: var(--ch-dark-text);
  --bs-body-color-rgb: 237, 231, 216;
  --bs-emphasis-color: var(--ch-dark-heading);
  --bs-secondary-color: var(--ch-text-muted);
  --bs-secondary-bg: var(--ch-dark-raised);
  --bs-tertiary-bg: var(--ch-dark-surface);
  --bs-tertiary-bg-rgb: 27, 46, 38;
  --bs-heading-color: var(--ch-dark-heading);
  --bs-link-color: var(--ch-dark-heading);
  --bs-link-color-rgb: 247, 243, 234;
  --bs-link-hover-color: var(--ch-gold);
  --bs-link-hover-color-rgb: 224, 176, 74;
  --bs-border-color: var(--ch-border);
  --bs-border-color-translucent: rgba(237, 231, 216, 0.14);
  --bs-primary-text-emphasis: #B9D3C5;
  --bs-primary-bg-subtle: #1F3A2F;
  --bs-primary-border-subtle: #36594A;
}

/* ---- Buttons ---- */
/* Primary: turned round to cream with forest text, the brightest thing on a dark page. */
html[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: var(--ch-forest);
  --bs-btn-bg: var(--ch-cream);
  --bs-btn-border-color: var(--ch-cream);
  --bs-btn-hover-color: var(--ch-forest);
  --bs-btn-hover-bg: var(--ch-warm-white);
  --bs-btn-hover-border-color: var(--ch-warm-white);
  --bs-btn-active-color: var(--ch-forest);
  --bs-btn-active-bg: #E5DFCF;
  --bs-btn-active-border-color: #E5DFCF;
  --bs-btn-disabled-color: var(--ch-forest);
  --bs-btn-disabled-bg: #9FB1A7;
  --bs-btn-disabled-border-color: #9FB1A7;
}
/* Outline and secondary buttons: light text, hairline border, shaded on hover. */
html[data-bs-theme="dark"] .btn-outline-primary, html[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--ch-dark-text);
  --bs-btn-hover-color: var(--ch-dark-heading);
  --bs-btn-hover-border-color: var(--ch-dark-text);
  --bs-btn-active-color: var(--ch-dark-heading);
  --bs-btn-active-border-color: var(--ch-dark-text);
}
html[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #7FC4A0; --bs-btn-border-color: #5FA883; }
html[data-bs-theme="dark"] .btn-secondary {
  --bs-btn-color: var(--ch-dark-text);
  --bs-btn-hover-color: var(--ch-dark-heading);
  --bs-btn-active-color: var(--ch-dark-heading);
  --bs-btn-active-border-color: var(--ch-dark-text);
}
/* On forest sections the light button's hover stays as it was: cream with forest text. */
html[data-bs-theme="dark"] .btn-outline-on-dark { --bs-btn-hover-color: var(--ch-forest); --bs-btn-active-color: var(--ch-forest); }

/* ---- Red and green text: lighter shades on dark (red and green
   backgrounds, e.g. badges with white text, keep their deep colours) ---- */
html[data-bs-theme="dark"] .text-danger { color: #EF8A93 !important; }
html[data-bs-theme="dark"] .text-success { color: #7FC4A0 !important; }
html[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #EF8A93; --bs-btn-border-color: #EF8A93;
  --bs-btn-hover-color: #fff; --bs-btn-disabled-color: #EF8A93; --bs-btn-disabled-border-color: #EF8A93; }
/* Forest borders (e.g. a highlighted card) would vanish on dark: the mid forest instead. */
html[data-bs-theme="dark"] .border-primary { border-color: var(--ch-forest-mid) !important; }

/* ---- Cards, forms, tables, alerts, badges ---- */
html[data-bs-theme="dark"] .card { --bs-card-cap-bg: var(--ch-dark-raised); }
html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] .form-check-input:focus { border-color: var(--ch-gold-deep); }
/* Ticked boxes: the mid forest, so the white tick still shows. */
html[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--ch-forest-mid); border-color: var(--ch-forest-mid); }
html[data-bs-theme="dark"] .table { --bs-table-hover-bg: rgba(237, 231, 216, 0.05); --bs-table-color: var(--ch-dark-text); }
html[data-bs-theme="dark"] .alert-success { --bs-alert-color: #A9DDBF; --bs-alert-bg: #183A2A; --bs-alert-border-color: #2A5A42; }
html[data-bs-theme="dark"] .alert-info { --bs-alert-color: var(--ch-dark-text); --bs-alert-bg: #1C3329; --bs-alert-border-color: #34544A; }
html[data-bs-theme="dark"] .alert-warning { --bs-alert-color: #F3D894; --bs-alert-bg: #3A2F12; --bs-alert-border-color: #6A5520; }
html[data-bs-theme="dark"] .alert-secondary { --bs-alert-color: var(--ch-dark-text); }
html[data-bs-theme="dark"] .text-bg-light { color: var(--ch-dark-text) !important; }
html[data-bs-theme="dark"] .ch-level-standard { color: var(--ch-dark-text); }
/* Paging and lists. */
html[data-bs-theme="dark"] .pagination { --bs-pagination-color: var(--ch-dark-text); --bs-pagination-hover-color: var(--ch-dark-heading);
  --bs-pagination-bg: var(--ch-dark-surface); --bs-pagination-active-bg: var(--ch-forest-mid); --bs-pagination-active-border-color: var(--ch-forest-mid);
  --bs-pagination-disabled-bg: var(--ch-dark-surface); }
html[data-bs-theme="dark"] .list-group { --bs-list-group-action-hover-bg: var(--ch-dark-raised); }
/* Dropdowns (outside the admin navbar, which keeps its own look). */
html[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-link-color: var(--ch-dark-text); --bs-dropdown-link-hover-color: var(--ch-dark-heading);
  --bs-dropdown-link-hover-bg: var(--ch-dark-raised); --bs-dropdown-link-active-bg: var(--ch-forest-mid); }
/* The close button (×): Bootstrap's dark version, a light cross. */
html[data-bs-theme="dark"] .btn-close { filter: var(--bs-btn-close-white-filter); }

/* ---- The customer navbar and its phone menu panel ---- */
html[data-bs-theme="dark"] .ch-navbar {
  --bs-navbar-color: var(--ch-dark-text);
  --bs-navbar-hover-color: var(--ch-gold);
  --bs-navbar-active-color: var(--ch-dark-heading);
  --bs-navbar-brand-color: var(--ch-dark-heading);
  --bs-navbar-brand-hover-color: var(--ch-dark-heading);
  background: var(--ch-dark-surface);
}
@media (max-width: 991.98px) {
  html[data-bs-theme="dark"] .ch-nav-panel { --bs-offcanvas-bg: var(--ch-dark-surface); --bs-offcanvas-color: var(--ch-dark-text); }
  html[data-bs-theme="dark"] .ch-nav-panel .nav-link:hover { background: var(--ch-dark-raised); }
}

/* ---- Logos: the forest version on light pages, the reversed (light) one in dark mode ---- */
.ch-on-dark { display: none !important; }
html[data-bs-theme="dark"] .ch-on-light { display: none !important; }
html[data-bs-theme="dark"] .ch-on-dark { display: block !important; }

/* ---- The Account page's tabs ---- */
html[data-bs-theme="dark"] .ch-account-tabs .nav-link:hover,
html[data-bs-theme="dark"] .ch-account-tabs .nav-link.active { color: var(--ch-dark-heading); }

/* ---- The website editor's Google results preview: Google's dark-mode link blue ---- */
html[data-bs-theme="dark"] .ch-serp-title { color: #8AB4F8; }

/* ---- The Light / Dark / Device switch (_theme_switch.html) ---- */
/* The chosen button: filled, so it's clear which one is on. */
.ch-theme-switch .btn-outline-on-dark.active { --bs-btn-active-bg: var(--ch-warm-white); --bs-btn-active-color: var(--ch-forest); }
.ch-theme-switch .btn-outline-secondary.active { --bs-btn-active-bg: var(--ch-forest); --bs-btn-active-color: var(--ch-cream); --bs-btn-active-border-color: var(--ch-forest); }
html[data-bs-theme="dark"] .ch-theme-switch .btn-outline-secondary.active { --bs-btn-active-bg: var(--ch-cream); --bs-btn-active-color: var(--ch-forest); --bs-btn-active-border-color: var(--ch-cream); }

/* ---- "Skip to content" (base.html): hidden until a keyboard user tabs to it,
   then a clear button at the top left, above everything (WCAG 2.4.1) ---- */
.ch-skip:focus { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 2000; padding: 0.6rem 1rem; border-radius: 10px;
  background: var(--ch-forest); color: var(--ch-cream); font-weight: 600; text-decoration: none; }

/* ---- Less movement for people who ask their device for it (WCAG 2.3.3):
   no smooth scrolling, sliding panels or fades ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}