/* ============================================================
   OFF-WHITE THEME — replaces the earlier medium-blue theme. Colors
   chosen and verified against WCAG AA contrast minimums (4.5:1 for
   body text, 3:1 for large text/UI) rather than by eye. The navbar,
   hero banner, and footer keep a dark neutral panel (instead of
   fading into the page) so the existing white nav/hero text stays
   legible without having to touch every page's markup.
   ============================================================ */
:root {
  --bg-page: #F7F5EF;      /* page background — warm off-white */
  --bg-panel: #23262B;     /* navbar / hero / footer panel — dark neutral */
  --bg-panel-2: #33373D;   /* lighter dark panel, e.g. dropdowns — lifted off near-black */
  --text-primary: #1A1A1A; /* headings / body text — near-black */
  --text-muted: #5B5B54;   /* secondary / caption text on the light page */
  --text-on-panel-muted: #C7C7C2; /* secondary text on the dark panel (hero) */
  --border-subtle: #D9D5C7;/* subtle dividing borders, visible on off-white */
  --bg-card: #EFEBDD;      /* light card background — callouts, gallery items */

  --accent-cyan: #0B6E86;      /* primary accent — darkened for AA on off-white */
  --accent-cyan-on-dark: #6BF9FF; /* brighter cyan for use on dark panels (navbar, dropdowns) */
  --accent-cyan-dim: #E4EEF0;  /* cyan-tinted background (badges etc.) */
  --accent-purple: #6C4FCF;    /* secondary accent */
  --accent-purple-dim: #ECE7FA;
  --accent-amber: #B5720A;     /* warm accent — used sparingly */
  --accent-amber-dim: #FBEFDA;
  --accent-rust: #A6261F;      /* warm accent — used sparingly */
  --accent-rust-dim: #F8E4E2;
}

/* --- Typefaces ---
   System sans-serif stack, replacing the earlier serif (Garamond/Book
   Antiqua/Times) pairing. No web font files or CDN needed — this
   relies entirely on fonts already present on the visitor's device,
   falling back gracefully across macOS, Windows, and Linux/Android.
*/
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-primary);
}

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }

/* Navbar + hero banner both use the panel color. */
.bg-dark { background-color: var(--bg-panel) !important; }
.bg-hero { background-color: var(--bg-panel); }

/* Dropdown toggles are <button> elements (not <a href="#">) for reliable,
   consistent click behavior across browsers — Bootstrap's own guidance,
   since anchor-based toggles depend on JS beating the browser's native
   link handling, which some Chromium forks (Brave, Opera, Edge) race
   differently. Strip the native button chrome so it still looks and
   sits exactly like the other .nav-link items. */
.navbar-nav button.nav-link {
  background: none;
  border: none;
  font: inherit;
}

/* Body-copy links get the cyan accent. Nav links / dropdown items are more
   specific selectors and keep Bootstrap's navbar-dark treatment untouched. */
a { color: var(--accent-cyan); }
a:hover { color: var(--accent-cyan); text-decoration: underline; }

/* Dropdown menus default to a light Bootstrap background — override so
   they match the rest of the theme instead of flashing white. Text uses
   the light-panel color, not --text-primary, since --text-primary is
   near-black and this menu sits on a dark panel background. */
.dropdown-menu {
  background-color: var(--bg-panel-2);
  border-color: var(--border-subtle);
}
.dropdown-item {
  color: #FFFFFF;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--bg-panel);
  color: var(--accent-cyan-on-dark);
}

/* Hover-to-open dropdowns on desktop (pointer devices only — touchscreens
   keep click-to-open, since there's no hover state to rely on there). */
@media (hover: hover) and (pointer: fine) {
  .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Muted/secondary text utility, matches Bootstrap's .text-white-50 usage
   in header leads. This only ever sits on the dark hero panel, so it uses
   the panel-muted variable (not the page's --text-muted, which is tuned
   for the light page background instead). */
.text-white-50 { color: var(--text-on-panel-muted) !important; }

/* CALLOUT boxes */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-subtle);
  border-left-width: .25rem;
  border-radius: .25rem;
  background-color: var(--bg-card);
  color: var(--text-primary);
}
.bd-callout h4 { margin-bottom: 1.25rem; color: var(--text-primary); }
.bd-callout p:last-child { margin-bottom: 0 }
.bd-callout code { border-radius: .25rem }
.bd-callout+.bd-callout { margin-top: -.25rem }
.bd-callout-info { border-left-color: var(--accent-cyan); background-color: var(--accent-cyan-dim); }
.bd-callout-warning { border-left-color: var(--accent-amber); background-color: var(--accent-amber-dim); }
.bd-callout-danger { border-left-color: var(--accent-rust); background-color: var(--accent-rust-dim); }

/* --- Photo galleries (reusable across pages) ---
   Usage: <div class="photo-gallery" id="some-unique-id"> containing one
   <figure class="gallery-item"> per photo, each with an <img class="gallery-thumb">
   and a <figcaption class="gallery-caption"> (leave as a single space " " for
   photos with no caption yet, so the row height stays consistent).
   5 thumbnails per row on desktop, fewer on smaller screens.
*/
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 992px) {
  .photo-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
}
.gallery-item {
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.4rem;
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}
.gallery-caption {
  margin: 0.4rem 0 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.2em;
}

/* --- Section sidebar navigation (see static/sidebar-nav.js) --- */
#page-sidebar-col { position: sticky; align-self: flex-start; }
.page-sidebar-label {
  margin: 0 0 0.5rem 0;
  padding-left: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
ul.page-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.page-sidebar-nav li { margin: 0; }
.page-sidebar-link {
  display: block;
  padding: 0.45rem 1rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.3;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
}
.page-sidebar-link:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}
.page-sidebar-nav li.page-sidebar-sub .page-sidebar-link { margin-left: 1rem; font-size: 0.8rem; }
.page-sidebar-link.active {
  color: #FFFFFF;
  font-weight: 600;
  border-color: var(--accent-cyan);
  background-color: var(--accent-cyan);
}
.page-sidebar-nav li.page-sidebar-top {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.page-sidebar-nav li.page-sidebar-top .page-sidebar-link {
  font-weight: 500;
  color: var(--text-muted);
  background-color: transparent;
  border-color: transparent;
}
.page-sidebar-nav li.page-sidebar-top .page-sidebar-link:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }