/* ═══════════════════════════════════════════════════════════
   ⚖️ JUSTICE THEME — Navy, Brass & Marble
   ═══════════════════════════════════════════════════════════ */
/* ── Professional fonts (replaces Playfair/Source Serif) ───── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── 1) COLOR PALETTE ─────────────────────────────────────── */
:root {
  --md-primary-fg-color: #14213D;          /* header — deep navy */
  --md-primary-fg-color--light: #1F3251;
  --md-primary-fg-color--dark: #0B1428;
  --md-primary-bg-color: #F8F7F2;          /* header text — ivory */

  --md-accent-fg-color: #C9A227;           /* brass gold */
  --md-accent-fg-color--transparent: rgba(201, 162, 39, 0.12);

  --md-default-bg-color: #FAF9F6;          /* marble white */
  --md-default-fg-color: #1C2534;
  --md-default-fg-color--light: #3D4A5C;

  --md-code-bg-color: #101826;             /* dark slate */
  --md-code-fg-color: #E3C07B;             /* parchment gold */

  --md-footer-bg-color: #0B1428;
}

/* Dark mode — chambers at night */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1F3251;
  --md-primary-fg-color--dark: #14213D;
  --md-default-bg-color: #0E1524;
  --md-default-fg-color: #E8E6DF;
  --md-default-fg-color--light: #B8BFC9;
  --md-code-bg-color: #0A0F1A;
  --md-code-fg-color: #E3C07B;
}

/* ── 2) LAYOUT WIDTH ──────────────────────────────────────── */
.md-grid { max-width: 90rem; }

/* ── 3) TYPOGRAPHY — Professional corporate sans-serif ────── */
body, .md-typeset {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';  /* Inter pro features */
}

.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

.md-typeset h1 { font-size: 2.1rem; font-weight: 700; color: var(--md-primary-fg-color); }
.md-typeset h2 { font-size: 1.55rem; font-weight: 600; color: var(--md-primary-fg-color);
                 border-bottom: 2px solid var(--md-accent-fg-color); padding-bottom: 0.3rem; }
.md-typeset h3 { font-size: 1.25rem; font-weight: 600; }
.md-typeset h4 { font-size: 1.05rem; font-weight: 600; }

.md-typeset a { color: var(--md-primary-fg-color); font-weight: 500; }
.md-typeset a:hover { color: var(--md-accent-fg-color); }

/* ── 4) HEADER & FOOTER — brass trim ──────────────────────── */
.md-header { border-bottom: 3px solid var(--md-accent-fg-color); }
.md-footer { border-top: 3px solid var(--md-accent-fg-color); }

/* ── 5) TABLES — navy bench ───────────────────────────────── */
.md-typeset table {
  font-size: 1rem;
  border: 1px solid #D8D5CC;
  box-shadow: 0 2px 8px rgba(20, 33, 61, 0.08);
}
.md-typeset th {
  font-size: 1.05rem;
  background-color: var(--md-primary-fg-color);
  color: #F3E9C9;
  padding: 0.7em 1em;
}
.md-typeset td { font-size: 1rem; padding: 0.6em 1em; }
.md-typeset tr:nth-child(even) { background-color: rgba(201, 162, 39, 0.06); }

/* ── 6) CODE BLOCKS — slate & parchment ───────────────────── */
.md-typeset pre {
  font-size: 0.95rem;
  line-height: 1.65;
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  border-left: 3px solid var(--md-accent-fg-color);
  border-radius: 4px;
}
.md-typeset pre code { font-size: 0.95rem; background: none; color: inherit; }
.md-typeset code {
  font-size: 0.95em;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', Consolas, monospace;
  background-color: rgba(20, 33, 61, 0.08);
  color: var(--md-primary-fg-color);
  border-radius: 3px;
  padding: 0.15em 0.4em;
}

/* ── 7) ADMONITIONS — gavel callouts ──────────────────────── */
.md-typeset .admonition, .md-typeset details {
  font-size: 1rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(20, 33, 61, 0.1);
}
.md-typeset .admonition-title, .md-typeset details summary {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

/* ── 8) MERMAID — full width ──────────────────────────────── */
.md-typeset .mermaid svg {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

/* ── 9) NAV / EXTRAS ──────────────────────────────────────── */
.md-nav__link { font-size: 0.95rem; }
.md-nav__link--active { color: var(--md-primary-fg-color); font-weight: 600; }

::selection { background-color: var(--md-accent-fg-color); color: #0B1428; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--md-default-bg-color); }
::-webkit-scrollbar-thumb { background: #14213D; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #C9A227; }

/* ── 10) MOBILE RESPONSIVENESS ────────────────────────────── */

/* Phones & small tablets */
@media screen and (max-width: 640px) {

  /* Scale down typography */
  .md-typeset      { font-size: 0.95rem; }
  .md-typeset h1   { font-size: 1.75rem; }
  .md-typeset h2   { font-size: 1.35rem; }
  .md-typeset h3   { font-size: 1.15rem; }

  /* Tables: compact + horizontal scroll (Material wraps them) */
  .md-typeset table { font-size: 0.85rem; }
  .md-typeset th    { font-size: 0.9rem;  padding: 0.5em 0.6em; }
  .md-typeset td    { font-size: 0.85rem; padding: 0.5em 0.6em; }

  /* Mermaid / Gantt: scroll sideways instead of shrinking to unreadable */
  .md-typeset .mermaid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .md-typeset .mermaid svg {
    width: auto !important;
    min-width: 48rem;      /* keeps labels readable; swipe to scroll */
  }

  /* Code blocks slightly smaller */
  .md-typeset pre      { font-size: 0.8rem; }
  .md-typeset pre code { font-size: 0.8rem; }

  /* Hero buttons stack full-width */
  .md-typeset .md-button {
    display: block;
    margin: 0.4rem 0;
    text-align: center;
  }

  /* Admonitions tighter padding */
  .md-typeset .admonition, .md-typeset details { font-size: 0.9rem; }
}

/* Medium tablets — gentle in-between sizing */
@media screen and (min-width: 641px) and (max-width: 1024px) {
  .md-typeset h1 { font-size: 2rem; }
  .md-typeset table { font-size: 0.9rem; }
  .md-typeset .mermaid svg { min-width: 40rem; }
}

/* ── 11) ANIMATIONS ───────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes drawLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Hero entrance (staggered) */
.md-content h1                    { animation: fadeUp .7s ease both; }
.md-content h1 + .admonition,
.md-content h1 + p                { animation: fadeUp .7s .15s ease both; }
.md-content .md-button            { animation: fadeUp .7s .25s ease both; }

/* Gold underline draws itself under every H2 */
.md-typeset h2 { border-bottom: none; position: relative; }
.md-typeset h2::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--md-accent-fg-color), transparent);
  transform-origin: left;
  animation: drawLine .9s ease both;
}

/* Scroll-reveal (driven by anim.js) */
[data-reveal] { opacity: 0; }
[data-reveal].is-visible { animation: fadeUp .65s ease both; }

/* Card hover lift + brass glow */
.grid.cards li {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-radius: 6px;
}
.grid.cards li:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 26px rgba(20, 33, 61, .18);
  border-color: var(--md-accent-fg-color);
}

/* Shimmer sweep on primary button */
.md-button--primary {
  background-image: linear-gradient(110deg, #14213D 40%, #2A4370 50%, #14213D 60%);
  background-size: 200% auto;
  transition: background-position .6s ease;
}
.md-button--primary:hover { background-position: right center; }

/* Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; }
}

/* ── 13) Official corporate logo on navy header ─────────── */
.md-header__button.md-logo {
  padding: 0.4rem;
}

.md-header__button.md-logo img {
  height: 42px;
  width: auto;
  background: #FFF8E7;                          /* ivory plate */
  border-radius: 8px;
  padding: 5px 10px;
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.4); /* brass ring */
  transition: transform .25s ease, box-shadow .25s ease;
}

.md-header__button.md-logo:hover img {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.7);
}

/* ── 14) App store badges ───────────────────────────────── */
.md-typeset img.app-badge {
  height: 52px;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(20, 33, 61, 0.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.md-typeset img.app-badge:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 18px rgba(20, 33, 61, 0.28);
}

/* ── 15) Hover dropdown for top-level nav tabs ──────────── */
.md-tabs__list {
  position: relative;
}

/* Parent tab with children */
.md-tabs__item--nested {
  position: relative;
}

/* Dropdown menu (hidden by default) */
.md-tabs__item--nested .md-tabs__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(20, 33, 61, 0.18);
  padding: 0.5rem 0;
  z-index: 100;
  margin-top: 0.5rem;
}

/* Show dropdown on hover */
.md-tabs__item--nested:hover .md-tabs__dropdown {
  display: block;
}

/* Dropdown links */
.md-tabs__dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--md-default-fg-color);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.md-tabs__dropdown a:hover {
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-primary-fg-color);
}

/* Arrow indicator for tabs with children */
.md-tabs__item--nested > .md-tabs__link::after {
  content: " ⌄";
  opacity: 0.6;
  font-size: 0.8em;
  margin-left: 0.3em;
}

/* ═══════════════════════════════════════════════════════════
   🌙 DARK MODE — Chambers at Night (High Contrast)
   Replaces the previous [data-md-color-scheme="slate"] block
   ═══════════════════════════════════════════════════════════ */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1F3251;
  --md-primary-fg-color--dark: #14213D;
  --md-default-bg-color: #0E1524;
  --md-default-fg-color: #F5F1E4;              /* ← brighter (was #E8E6DF) */
  --md-default-fg-color--light: #D4CEBF;       /* ← brighter (was #B8BFC9) */
  --md-default-fg-color--lighter: #9AA0A6;
  --md-code-bg-color: #0A0F1A;
  --md-code-fg-color: #F3D87A;                 /* ← brighter gold */
  --md-accent-fg-color: #E6C04E;               /* ← brighter brass */
}

/* Explicit element overrides for dark mode */
[data-md-color-scheme="slate"] body,
[data-md-color-scheme="slate"] .md-typeset {
  color: #F5F1E4;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #FFF8E7;                              /* ivory headings */
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: #E6C04E;                              /* bright brass links */
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #F3D87A;
}

/* Tables in dark mode */
[data-md-color-scheme="slate"] .md-typeset table {
  border-color: #2A3A5C;
}
[data-md-color-scheme="slate"] .md-typeset th {
  background-color: #1F3251;
  color: #FFF8E7;
}
[data-md-color-scheme="slate"] .md-typeset td {
  color: #F5F1E4;
  border-color: #2A3A5C;
}
[data-md-color-scheme="slate"] .md-typeset tr:nth-child(even) {
  background-color: rgba(245, 241, 228, 0.04);
}

/* Code blocks in dark mode */
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: rgba(245, 241, 228, 0.1);
  color: #FFF8E7;
}
[data-md-color-scheme="slate"] .md-typeset pre {
  background-color: #0A0F1A;
  color: #F3D87A;
  border-left-color: #E6C04E;
}

/* Admonitions in dark mode */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: rgba(31, 50, 81, 0.4);
  border-color: #2A3A5C;
  color: #F5F1E4;
}
[data-md-color-scheme="slate"] .md-typeset .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details summary {
  background-color: rgba(230, 192, 78, 0.15);
  color: #FFF8E7;
}

/* Nav sidebar in dark mode */
[data-md-color-scheme="slate"] .md-nav__link {
  color: #D4CEBF;
}
[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #E6C04E;
}

/* Footer in dark mode */
[data-md-color-scheme="slate"] .md-footer {
  background-color: #0A0F1A;
  color: #D4CEBF;
}

/* Scrollbar in dark mode */
[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: #0E1524;
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: #2A3A5C;
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: #E6C04E;
}

/* Mermaid diagrams in dark mode */
[data-md-color-scheme="slate"] .md-typeset .mermaid svg {
  background-color: rgba(31, 50, 81, 0.3);
}

/* ── 15) Back-to-previous-page button ──────────────────────── */
.back-button {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border: 2px solid var(--md-accent-fg-color);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(20, 33, 61, 0.25);
  transition: all .25s ease;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.back-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-button:hover {
  background: var(--md-accent-fg-color);
  color: var(--md-primary-fg-color--dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(201, 162, 39, 0.4);
}

.back-button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hide on very small screens (let the browser back button handle it) */
@media screen and (max-width: 480px) {
  .back-button { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   16) COMPACT PROFESSIONAL SIZING (overrides earlier sizes)
   ═══════════════════════════════════════════════════════════ */

/* Shrink the whole UI base from 20px → 18px */
html { font-size: 112.5%; }

/* Body & headings */
.md-typeset      { font-size: 0.92rem; line-height: 1.65; }   /* ≈16.5px */
.md-typeset h1   { font-size: 1.85rem; }                      /* ≈33px */
.md-typeset h2   { font-size: 1.4rem;  }                      /* ≈25px */
.md-typeset h3   { font-size: 1.15rem; }
.md-typeset h4   { font-size: 1rem; }

/* Tables */
.md-typeset table { font-size: 0.86rem; }
.md-typeset th    { font-size: 0.9rem; }
.md-typeset td    { font-size: 0.86rem; padding: 0.5em 0.9em; }

/* Code */
.md-typeset pre      { font-size: 0.82rem; }
.md-typeset pre code { font-size: 0.82rem; }
.md-typeset code     { font-size: 0.85em; }

/* Admonitions & cards */
.md-typeset .admonition,
.md-typeset details  { font-size: 0.92rem; }

/* Sidebar + TOC */
.md-nav__link        { font-size: 0.78rem; }                  /* ≈14px */

/* Buttons */
.md-typeset .md-button {
  font-size: 0.8rem;
  padding: 0.55em 1.3em;
}

/* Back button slightly smaller */
.back-button { padding: 10px 18px; font-size: 0.8rem; }

/* ── 17) MOBILE RESPONSIVE (compact-safe) ─────────────────── */

/* Tablets & below */
@media screen and (max-width: 76.1875em) {
  .md-typeset h1 { font-size: 1.6rem; }
  .md-typeset h2 { font-size: 1.25rem; }
  .md-typeset h3 { font-size: 1.05rem; }
}

/* Phones */
@media screen and (max-width: 640px) {
  .md-typeset            { font-size: 0.88rem; line-height: 1.6; }
  .md-typeset table      { font-size: 0.8rem; }
  .md-typeset th         { font-size: 0.84rem; }
  .md-typeset td         { font-size: 0.8rem; padding: 0.45em 0.6em; }
  .md-typeset pre,
  .md-typeset pre code   { font-size: 0.75rem; }

  /* Mermaid / Gantt: swipe sideways instead of shrinking to blur */
  .md-typeset .mermaid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .md-typeset .mermaid svg {
    width: auto !important;
    min-width: 44rem;
  }

  /* Hero buttons stack full-width for thumbs */
  .md-typeset .md-button {
    display: block;
    margin: 0.4rem 0;
    text-align: center;
  }

  /* Back button: smaller, tucked into the corner */
  .back-button {
    bottom: 16px;
    right: 16px;
    padding: 8px 14px;
    font-size: 0.75rem;
  }

  /* Tighten card padding */
  .grid.cards li { padding: 0.8rem; }
}

/* ── 18) Embedded YouTube video (responsive 16:9) ─────────── */
.video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1rem 0 0.5rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--md-accent-fg-color);
  box-shadow: 0 4px 16px rgba(20, 33, 61, 0.25);
  background: #000;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Slight glow on hover, like the cards */
.video-container:hover {
  box-shadow: 0 6px 22px rgba(201, 162, 39, 0.35);
}

/* Mobile tweak */
@media screen and (max-width: 640px) {
  .video-container { border-radius: 6px; }
}