/* ============================================================
   SYNPETIC THEME — ported from the project's main marketing-site
   CSS (ink + electric purple + cyan). Palette and font stack are
   the same design tokens, remapped onto this site's own variable
   names so every Bootstrap component below keeps working unchanged.
   ============================================================ */
:root {
  --bg-page: #0a0a12;       /* page background — deep ink (was off-white) */
  --bg-panel: #11111c;      /* navbar / hero / footer panel */
  --bg-panel-2: #1f1f30;    /* lighter panel, e.g. dropdowns */
  --text-primary: #ececf5;  /* headings / body text — near-white on dark */
  --text-muted: #8a8aa5;    /* secondary / caption text */
  --text-on-panel-muted: #8a8aa5; /* secondary text on the dark panel (hero) */
  --border-subtle: rgba(255, 255, 255, 0.14); /* subtle dividing borders, visible on dark */
  --bg-card: #161624;       /* card background — callouts, gallery items */

  --accent-cyan: #00F5FF;        /* primary accent — electric cyan */
  --accent-cyan-on-dark: #6bf9ff;/* slightly softer cyan for dropdown hovers etc. */
  --accent-cyan-dim: rgba(0, 245, 255, 0.08);  /* cyan-tinted background (badges etc.) */
  --accent-purple: #8B5CF6;      /* secondary accent */
  --accent-purple-dim: rgba(139, 92, 246, 0.12);
  --accent-amber: #F59E0B;       /* warm accent — used sparingly */
  --accent-amber-dim: rgba(245, 158, 11, 0.12);
  --accent-rust: #c4302b;        /* "stamp red" — danger/warning accent */
  --accent-rust-dim: rgba(196, 48, 43, 0.12);
}

/* --- Typefaces ---
   Same five-font system as the marketing site: IBM Plex Sans for body
   copy, Fraunces for headings, Crimson Pro for long-form reading,
   Caveat for handwritten asides, and the IBM Plex Mono already
   shipped in static/fonts/ (reused rather than vendoring a second
   monospace family) for labels/code. Only the specific weights this
   site actually uses are loaded, as real per-weight files this time
   (the main site's font-face block pointed several declared weights
   at the same underlying file).
*/
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/synpetic/ibm-plex-sans-latin-300-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/synpetic/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/synpetic/ibm-plex-sans-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/synpetic/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/synpetic/fraunces-latin-full-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/synpetic/fraunces-latin-full-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/synpetic/crimson-pro-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/synpetic/crimson-pro-latin-400-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/synpetic/crimson-pro-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/synpetic/caveat-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/synpetic/caveat-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/synpetic/caveat-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexMono-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/IBMPlexMono-Bold.ttf) format('truetype');
}

:root {
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-read: "Crimson Pro", Georgia, serif;
  --font-hand: "Caveat", cursive;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

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: var(--bg-page);
  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; }