/* Self-hosted Inter (latin). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/inter/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/inter/inter-latin-700-normal.woff2') format('woff2'); }

/*
 * Design tokens. Brand colours are sampled from the church logo (sgh_logo.png) — do not invent
 * or "improve" them. Neutrals and status colours follow docs/UI.md.
 *
 * Logo samples (2026-11-01):
 *   #6a3634  wordmark "St George's Headstone" — contrast 9.6:1 on white (AA text OK)
 *   #8c6463  address line                        — contrast 5.1:1 on white (AA text OK)
 *   #ceb18a  saint's halo (gold)                 — fails AA as text: accents/borders only
 * Hover and tint shades are mixes of the brand colour with black/white, not new hues.
 */
:root {
  --sg-brand: #6a3634;
  --sg-brand-rgb: 106, 54, 52;
  --sg-brand-600: color-mix(in srgb, var(--sg-brand) 82%, #000);
  --sg-brand-50: color-mix(in srgb, var(--sg-brand) 6%, #fff);
  --sg-brand-100: color-mix(in srgb, var(--sg-brand) 14%, #fff);
  --sg-brand-soft: #8c6463;
  --sg-gold: #ceb18a;

  --sg-ink: #1f2330;
  --sg-ink-soft: #4a5260;
  --sg-surface: #f7f7f8;
  --sg-border: #e6e6ea;
  --sg-success: #1f8a4c;
  --sg-danger: #c0392b;

  --sg-radius: 10px;
  --sg-shadow: 0 1px 2px rgba(15, 17, 21, 0.06), 0 4px 12px rgba(15, 17, 21, 0.04);

  /* Bootstrap hooks */
  --bs-primary: var(--sg-brand);
  --bs-primary-rgb: var(--sg-brand-rgb);
  --bs-link-color: var(--sg-brand);
  --bs-link-color-rgb: var(--sg-brand-rgb);
  --bs-link-hover-color: var(--sg-brand-600);
  --bs-link-hover-color-rgb: var(--sg-brand-rgb);
  --bs-primary-text-emphasis: var(--sg-brand-600);
  --bs-primary-bg-subtle: var(--sg-brand-50);
  --bs-primary-border-subtle: var(--sg-brand-100);
  --bs-focus-ring-color: rgba(var(--sg-brand-rgb), 0.25);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--sg-ink);
  /* --bs-body-bg stays white: Bootstrap uses it for inputs, dropdowns and tables. The page
     background is set on body below. */
  --bs-border-color: var(--sg-border);
  --bs-border-radius: var(--sg-radius);
  --bs-success: var(--sg-success);
  --bs-danger: var(--sg-danger);
}
/*
 * Overrides on top of Bootstrap + the tokens above. Bootstrap 5.3 compiles component colours into
 * per-component variables (--bs-btn-bg etc.), so those are re-pointed at the tokens here.
 * Our own classes use the `sg-` prefix. Layout spec: docs/UI.md.
 */

body {
  background: var(--sg-surface);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  color: var(--sg-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Bootstrap component variables → brand ---------- */
.btn-primary {
  --bs-btn-bg: var(--sg-brand);
  --bs-btn-border-color: var(--sg-brand);
  --bs-btn-hover-bg: var(--sg-brand-600);
  --bs-btn-hover-border-color: var(--sg-brand-600);
  --bs-btn-active-bg: var(--sg-brand-600);
  --bs-btn-active-border-color: var(--sg-brand-600);
  --bs-btn-disabled-bg: var(--sg-brand);
  --bs-btn-disabled-border-color: var(--sg-brand);
  --bs-btn-focus-shadow-rgb: var(--sg-brand-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--sg-brand);
  --bs-btn-border-color: var(--sg-brand);
  --bs-btn-hover-bg: var(--sg-brand);
  --bs-btn-hover-border-color: var(--sg-brand);
  --bs-btn-active-bg: var(--sg-brand-600);
  --bs-btn-active-border-color: var(--sg-brand-600);
  --bs-btn-disabled-color: var(--sg-brand);
  --bs-btn-disabled-border-color: var(--sg-brand);
  --bs-btn-focus-shadow-rgb: var(--sg-brand-rgb);
}
.btn { border-radius: var(--sg-radius); font-weight: 500; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: rgba(var(--sg-brand-rgb), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--sg-brand-rgb), 0.25);
}
.form-check-input:checked { background-color: var(--sg-brand); border-color: var(--sg-brand); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--sg-brand); }
.nav-link { --bs-nav-link-color: var(--sg-ink-soft); --bs-nav-link-hover-color: var(--sg-ink); }
.form-control, .form-select { border-radius: 8px; }

/* ---------- Navbar ---------- */
.sg-navbar {
  background: #fff;
  border-bottom: 1px solid var(--sg-border);
  min-height: 60px;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.sg-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.sg-brand img { height: 40px; width: auto; }
.sg-brand .sg-dot { color: var(--sg-border); font-weight: 400; }
.sg-brand .sg-accent { color: var(--sg-brand); font-weight: 700; white-space: nowrap; }
@media (max-width: 767.98px) {
  .sg-brand img { height: 32px; }
}
.sg-navbar .nav-link {
  color: var(--sg-ink-soft);
  font-weight: 500;
  padding: 0.5rem 0.85rem !important;
  position: relative;
}
.sg-navbar .nav-link:hover { color: var(--sg-ink); }
.sg-navbar .nav-link.active { color: var(--sg-ink); }
@media (min-width: 992px) {
  .sg-navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: -2px;
    height: 2px;
    background: var(--sg-brand);
    border-radius: 2px;
  }
}
.sg-navbar .navbar-toggler {
  border: 1px solid var(--sg-border);
  border-radius: 8px;
  background: #fff;
}
.sg-navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(var(--sg-brand-rgb), 0.25); }

/* ---------- Cards & tables ---------- */
.sg-card {
  background: #fff;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow);
}
.sg-card > .table { margin-bottom: 0; }
.sg-card .table { --bs-table-bg: transparent; }
.sg-card .table thead th {
  background: var(--sg-surface);
  color: var(--sg-ink-soft);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom-color: var(--sg-border);
  white-space: nowrap;
}
.sg-card .table thead th:first-child { border-top-left-radius: var(--sg-radius); }
.sg-card .table thead th:last-child { border-top-right-radius: var(--sg-radius); }

.sg-hero {
  background: #fff;
  border-bottom: 1px solid var(--sg-border);
}
.sg-hero .lead { color: var(--sg-ink-soft); }
.sg-gold-rule { border: 0; border-top: 3px solid var(--sg-gold); width: 64px; opacity: 1; margin: 1rem 0; }

/* ---------- Week grid ---------- */
.sg-week { font-size: 0.85rem; table-layout: fixed; min-width: 640px; }
.sg-week th.sg-time, .sg-week td.sg-time {
  width: 4.5rem;
  color: var(--sg-ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
  vertical-align: top;
}
.sg-week thead th { text-align: center; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.8rem !important; }
.sg-week thead th.sg-today { color: var(--sg-brand) !important; }
.sg-week td.sg-slot { padding: 0; height: 1.6rem; border-left: 1px solid var(--sg-border); }
.sg-week td.sg-slot > * { display: block; width: 100%; height: 100%; }
.sg-week .sg-free, .sg-legend .sg-free { background: #fff; }
.sg-week a.sg-free:hover, .sg-week a.sg-free:focus-visible { background: var(--sg-brand-50); outline: none; }
.sg-week .sg-busy, .sg-legend .sg-busy {
  background: repeating-linear-gradient(135deg, var(--sg-brand-100), var(--sg-brand-100) 6px, var(--sg-brand-50) 6px, var(--sg-brand-50) 12px);
}
.sg-week .sg-past { background: var(--sg-surface); }
.sg-week .sg-event {
  font-size: 0.72rem;
  line-height: 1.6rem;
  padding: 0 0.35rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  color: var(--sg-ink);
}
.sg-week .sg-ev-pending { background: var(--bs-warning-bg-subtle); }
.sg-week .sg-ev-confirmed { background: var(--bs-success-bg-subtle); }
.sg-week .sg-ev-block { background: var(--bs-secondary-bg-subtle); }
.sg-week tr.sg-hour td { border-top: 1px solid var(--sg-border); }
.sg-legend span { display: inline-block; width: 0.9rem; height: 0.9rem; border: 1px solid var(--sg-border); border-radius: 3px; vertical-align: -2px; margin-right: 0.3rem; }

.sg-footer { color: var(--sg-ink-soft); font-size: 0.85rem; border-top: 1px solid var(--sg-border); background: #fff; }

/* Replacements for inline styles (the CSP forbids them). */
.sg-eyebrow { letter-spacing: .04em; }
.sg-code { letter-spacing: .4em; }
.sg-navbar form { margin: 0; }
.sg-alert-toggles { min-width: 9.5rem; }