/* ============================================================
   MEDIUM-BLUE THEME — replaces the earlier near-black/futuristic-font
   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.
   ============================================================ */
:root {
  --bg-page: #2C4A6E;      /* page background — medium slate blue */
  --bg-panel: #3B5B82;     /* navbar / raised panel background */
  --bg-panel-2: #1F3652;   /* slightly darker panel, e.g. dropdowns */
  --text-primary: #FFFFFF; /* headings / body text — plain white */
  --text-muted: #C8D4E8;   /* secondary / caption text — soft light blue-gray */
  --border-subtle: #6688B3;/* subtle dividing borders, visible on medium blue */

  --accent-cyan: #6BF9FF;      /* primary accent — unchanged, still passes contrast */
  --accent-cyan-dim: #1B3A52;  /* cyan-tinted background (badges etc.) */
  --accent-purple: #A786F9;    /* secondary accent */
  --accent-purple-dim: #2A2152;
  --accent-amber: #F59E0B;     /* warm accent — used sparingly */
  --accent-amber-dim: #4A3418;
  --accent-rust: #C4302B;      /* warm accent — used sparingly */
  --accent-rust-dim: #4A1F1C;
}

/* --- Typefaces ---
   Conventional serif stack, replacing the earlier futuristic Audiowide/
   IBM Plex Mono pairing. Garamond and Book Antiqua aren't installed on
   every system, so this stack falls back gracefully: Garamond first,
   then Book Antiqua, then the near-universal Times New Roman, then any
   generic serif as a last resort. No web font files or CDN needed —
   this relies entirely on fonts already present on the visitor's device.
*/
body {
  font-family: Garamond, 'Book Antiqua', 'Times New Roman', Times, serif;
  background-color: var(--bg-page);
  color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: Garamond, 'Book Antiqua', 'Times New Roman', Times, 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); }

/* 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. */
.dropdown-menu {
  background-color: var(--bg-panel-2);
  border-color: var(--border-subtle);
}
.dropdown-item {
  color: var(--text-primary);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--bg-panel);
  color: var(--accent-cyan);
}

/* Muted/secondary text utility, matches Bootstrap's .text-white-50 usage
   in header leads but tuned for this palette. */
.text-white-50 { color: var(--text-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-panel-2);
  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-panel-2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.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;
  border-left: 2px solid var(--border-subtle);
}
.page-sidebar-nav li { margin: 0; }
.page-sidebar-link {
  display: block;
  padding: 0.4rem 0 0.4rem 1rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.3;
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.page-sidebar-link:hover { color: var(--accent-cyan); }
.page-sidebar-nav li.page-sidebar-sub .page-sidebar-link { padding-left: 2rem; font-size: 0.85rem; }
.page-sidebar-link.active {
  color: var(--accent-cyan);
  font-weight: 600;
  border-left-color: var(--accent-cyan);
  background-color: var(--accent-cyan-dim);
}
.page-sidebar-nav li.page-sidebar-top {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.page-sidebar-nav li.page-sidebar-top .page-sidebar-link {
  border-left-color: transparent;
  font-weight: 500;
  color: var(--text-muted);
}
.page-sidebar-nav li.page-sidebar-top .page-sidebar-link:hover { color: var(--accent-cyan); }

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