/* =====================================================================
   Whiskey 7 Backroads Ham Radio Wiki — Material sub-page stylesheet
   Goal: make MkDocs Material sub-pages (xlx159, repeater, allstar,
   monitoring) look like the hand-crafted home page sister site.
   ===================================================================== */

/* === Override Material's CSS variables to match sister === */
[data-md-color-scheme="slate"] {
  /* Colors — match sister palette */
  --md-primary-fg-color:        transparent;
  --md-primary-bg-color:        transparent;
  --md-primary-bg-color--light: transparent;
  --md-primary-bg-color--dark:  transparent;
  --md-accent-fg-color:         #38bdf8;
  --md-accent-fg-color--transparent: rgba(56, 189, 248, 0.18);

  /* Font — kill Roboto */
  --md-text-font:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --md-code-font:    ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --md-default-fg-color:    #ffffff;
  --md-default-bg-color:    #0a0e14;
  --md-default-bg-color--light: rgba(255,255,255,0.04);

  /* Header — transparent, no blue tint */
  --md-header-bg-color:        rgba(10, 14, 20, 0.5);
  --md-header-bg-color--light: rgba(10, 14, 20, 0.5);
  --md-header-fg-color:        #ffffff;
  --md-header-fg-color--light: rgba(255,255,255,0.87);
  --md-tabs-bg-color:          transparent;

  --md-footer-bg-color: rgba(10,14,20,0.85);
  --md-footer-fg-color: #d4dde7;

  --md-typeset-color:    #ffffff;
  --md-typeset-a-color:  #38bdf8;
}

/* === Sister-site CSS variables (shared with home.html) === */
:root {
  --bg: #0a0e14;
  --bg-elev: #11161f;
  --bg-elev-2: #1a2029;
  --border: #2a3340;
  --border-strong: #3a4555;
  --text: #ffffff;
  --text-dim: #d4dde7;
  --text-faint: #aab6c4;
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-glow: rgba(56, 189, 248, 0.18);
  --accent-glow-strong: rgba(56, 189, 248, 0.35);
  --warn: #f59e0b;
  --success: #22c55e;
  --danger: #ef4444;
  --shadow-2: 0 8px 24px rgba(0,0,0,.5);
  --radius: 10px;
  --radius-lg: 14px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --header-height: 64px;
  --container-max: 1180px;
  --container-pad: 1.25rem;

  --bg-image-opacity: 0.40;
  --bg-overlay-top:    rgba(10,14,20,0.25);
  --bg-overlay-mid:    rgba(10,14,20,0.18);
  --bg-overlay-bottom: rgba(10,14,20,0.40);
  --glass-bg:          rgba(10, 14, 20, 0.55);
  --glass-bg-soft:     rgba(10, 14, 20, 0.35);
  --glass-border:      rgba(255, 255, 255, 0.08);
  --glass-border-soft: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] {
  --md-primary-fg-color:        transparent;
  --md-primary-bg-color:        transparent;
  --md-primary-bg-color--light: transparent;
  --md-primary-bg-color--dark:  transparent;
  --md-accent-fg-color:         #0284c7;
  --md-accent-fg-color--transparent: rgba(2, 132, 199, 0.12);
  --md-header-bg-color:        rgba(255, 255, 255, 0.7);
  --md-header-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-header-fg-color:        #0a0e14;
  --md-header-fg-color--light: #0a0e14;
  --md-footer-bg-color: rgba(243, 246, 251, 0.85);
  --md-footer-fg-color: #4b5563;
  --md-default-fg-color:    #0a0e14;
  --md-default-bg-color:    #f3f6fb;
  --md-default-bg-color--light: rgba(255,255,255,0.4);
  --md-typeset-color:    #0a0e14;
  --md-typeset-a-color:  #0284c7;

  --bg: #f3f6fb;
  --bg-elev: #ffffff;
  --bg-elev-2: #e3eaf3;
  --border: #d0d8e3;
  --border-strong: #a8b4c4;
  --text: #0a0e14;
  --text-dim: #4b5563;
  --text-faint: #6b7787;
  --accent: #0284c7;
  --accent-strong: #0369a1;
  --accent-glow: rgba(2, 132, 199, 0.12);
  --accent-glow-strong: rgba(2, 132, 199, 0.35);
  --warn: #b45309;
  --success: #15803d;
  --danger: #b91c1c;
  --shadow-2: 0 8px 24px rgba(0,0,0,.08);

  --bg-image-opacity: 0.28;
  --bg-overlay-top:    rgba(243,246,251,0.45);
  --bg-overlay-mid:    rgba(243,246,251,0.28);
  --bg-overlay-bottom: rgba(243,246,251,0.55);
  --glass-bg:          rgba(255, 255, 255, 0.82);
  --glass-bg-soft:     rgba(255, 255, 255, 0.65);
  --glass-border:      rgba(10, 14, 20, 0.10);
  --glass-border-soft: rgba(10, 14, 20, 0.06);
}

/* ====================================================================
   BASE
   ==================================================================== */
* { box-sizing: border-box; }

html, body, .md-container, .md-main, .md-content { background: transparent !important; }
html { color-scheme: dark light; }

body {
  margin: 0;
  font-family: var(--font-sans) !important;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s ease, color 0.2s ease;
}

/* ====================================================================
   FIXED WATERMARK BACKGROUND — same as sister home
   ==================================================================== */
.md-bg-image {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.md-bg-image img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  opacity: var(--bg-image-opacity);
  transition: opacity 0.2s ease;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--bg-overlay-top) 0%,
    var(--bg-overlay-mid) 50%,
    var(--bg-overlay-bottom) 100%);
  transition: background 0.2s ease;
}
.md-main, .md-content { position: relative; z-index: 1; }

/* ====================================================================
   KILL MATERIAL CHROME — sidebar, TOC, repo link
   ==================================================================== */
.md-sidebar,
.md-sidebar--primary,
.md-sidebar--secondary,
.md-nav--primary,
.md-nav--secondary {
  display: none !important;
}

.md-content__inner {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding-top: 1.5rem !important;
}

/* ====================================================================
   HEADER — match sister sticky translucent
   ==================================================================== */
.md-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  height: var(--header-height) !important;
  background: var(--md-header-bg-color) !important;
  backdrop-filter: saturate(140%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: none !important;
}
[data-theme="light"] .md-header {
  background: var(--md-header-bg-color) !important;
  border-bottom-color: var(--glass-border) !important;
}

.md-header__inner,
.md-header__button { height: var(--header-height) !important; background: transparent !important; }

/* Header title — white in dark, dark in light */
.md-header__title { color: var(--md-header-fg-color) !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: -0.01em; }
.md-header__title .md-header__title__name,
.md-header__title a { color: var(--md-header-fg-color) !important; text-decoration: none !important; }
.md-header__title a:hover { color: var(--accent) !important; }

/* Tabs — match sister nav */
.md-tabs { background: transparent !important; color: var(--text-dim) !important; }
.md-tabs__link { color: var(--text-dim) !important; }
.md-tabs__link:hover { color: var(--text) !important; }
.md-tabs__link--active { color: var(--accent) !important; }

/* Search */
.md-search__form {
  background: var(--glass-bg-soft) !important;
  border-radius: var(--radius) !important;
}
.md-search__form:hover { background: rgba(255, 255, 255, 0.12) !important; }
[data-theme="light"] .md-search__form { background: rgba(0, 0, 0, 0.06) !important; }
.md-search__input + .md-search__icon,
.md-search__input::placeholder { color: var(--text-faint) !important; }

/* ====================================================================
   ARTICLE — match sister glass panel
   ==================================================================== */
.md-typeset { color: var(--text); }

.md-content article,
.md-typeset article {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 2rem 2.25rem !important;
  box-shadow: var(--shadow-2) !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Article wrapper — match the article element directly regardless of how it's classed */
.md-content > .md-content__inner,
article.md-content__inner,
article.md-typeset {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 2rem 2.25rem !important;
  box-shadow: var(--shadow-2) !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Make sure the article is rendered as a card */
.md-typeset {
  background: transparent !important;
}

.md-typeset h1 { color: var(--text) !important; font-weight: 800 !important; margin-top: 0 !important; }
.md-typeset h2 { color: var(--text) !important; font-weight: 700 !important; padding-bottom: 0.4em; border-bottom: 1px solid var(--glass-border); margin-top: 1.5em; }
.md-typeset h3 { color: var(--accent) !important; font-weight: 700 !important; }
.md-typeset h4 { color: var(--text-dim) !important; font-weight: 700 !important; }
.md-typeset p, .md-typeset li { color: var(--text-dim); }
.md-typeset strong { color: var(--text); }
.md-typeset a { color: var(--accent); }
.md-typeset a:hover { color: var(--accent-strong); }

/* ====================================================================
   BUTTONS — match sister
   ==================================================================== */
.md-button {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: background 0.12s ease, transform 0.06s ease, box-shadow 0.12s ease;
  cursor: pointer;
  font-family: inherit !important;
  line-height: 1.2 !important;
}
.md-button:hover { text-decoration: none !important; }
.md-button:active { transform: translateY(1px); }

.md-button--primary {
  background: var(--accent) !important;
  color: #061018 !important;
}
.md-button--primary:hover {
  background: var(--accent-strong) !important;
  color: #061018 !important;
  box-shadow: 0 6px 24px var(--accent-glow-strong) !important;
}

.md-button:not(.md-button--primary) {
  background: var(--bg-elev-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.md-button:not(.md-button--primary):hover {
  background: var(--bg-elev) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

/* ====================================================================
   TABLES, CODE, ADMONITIONS — match sister
   ==================================================================== */
.md-typeset code {
  background: var(--accent-glow) !important;
  color: var(--accent-strong);
  padding: 0.1em 0.4em !important;
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.88em !important;
}
[data-theme="light"] .md-typeset code { color: #0369a1 !important; background: rgba(2, 132, 199, 0.10) !important; }
.md-typeset pre {
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: var(--radius) !important;
}
[data-theme="light"] .md-typeset pre { background: rgba(0, 0, 0, 0.85) !important; }
.md-typeset pre code { background: transparent !important; color: #e5e7eb; }

.md-typeset table:not([class]) {
  background: var(--glass-bg-soft);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-border-soft);
  font-size: 0.92rem;
}
.md-typeset table:not([class]) th {
  background: var(--accent-glow);
  color: var(--text);
  font-weight: 700;
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--glass-border);
}
.md-typeset table:not([class]) td {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--glass-border-soft);
  color: var(--text-dim);
}
.md-typeset table:not([class]) tr:last-child td { border-bottom: none; }
.md-typeset table:not([class]) tr:hover td { background: var(--accent-glow); color: var(--text); }

.md-typeset .admonition,
.md-typeset details {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  color: var(--text-dim) !important;
  padding: 1rem 1.25rem !important;
}
.md-typeset .admonition-title { background: transparent !important; color: var(--text) !important; }
.md-typeset .admonition.note,
.md-typeset .admonition.info { border-left: 4px solid #3b82f6 !important; }
.md-typeset .admonition.warning { border-left: 4px solid var(--warn) !important; }
.md-typeset .admonition.tip { border-left: 4px solid var(--success) !important; }

/* ====================================================================
   FOOTER
   ==================================================================== */
.md-footer {
  background: var(--md-footer-bg-color) !important;
  border-top: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s ease;
}
.md-footer-meta { background: rgba(0, 0, 0, 0.3) !important; }
.md-footer, .md-footer a { color: var(--md-footer-fg-color) !important; }
.md-footer a:hover { color: var(--accent) !important; }

/* ====================================================================
   MOBILE
   ==================================================================== */
@media (max-width: 768px) {
  .md-content article,
  .md-typeset article { padding: 1.25rem 1.5rem !important; }
}

/* ====================================================================
   THEME TOGGLE BUTTON (JS-injected on Material pages)
   ==================================================================== */
.md-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 0.5rem;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-soft);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.06s;
  font-family: inherit;
  vertical-align: middle;
}
.md-theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-glow);
  background: var(--bg-elev);
}
.md-theme-toggle:active { transform: translateY(1px); }
.md-theme-toggle svg { width: 18px; height: 18px; }
.md-theme-toggle .sun { display: none; }
.md-theme-toggle .moon { display: block; }
[data-theme="light"] .md-theme-toggle .sun { display: block; }
[data-theme="light"] .md-theme-toggle .moon { display: none; }

/* =====================================================================
   ULTRA-SPECIFIC SISTER OVERRIDES — loaded last in cascade to beat
   anything Material might set. Even if Material's JS re-renders,
   these rules apply to elements based on their identity.
   ===================================================================== */
html body .md-sidebar--primary,
html body .md-sidebar--secondary,
html body .md-sidebar,
html body [class*="md-sidebar"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -99999px !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html body .md-content,
html body main.md-main,
html body [class*="md-content"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

html body .md-content__inner,
html body [class*="md-content__inner"] {
  max-width: 1180px !important;
  margin: 1.5rem auto !important;
  padding: 0 1.25rem !important;
}

html body article.md-content__inner.md-typeset,
html body article[class*="md-typeset"] {
  display: block !important;
  background: rgba(10, 14, 20, 0.55) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 2rem 2.25rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
}

html body .md-header__inner .md-search,
html body [class*="md-search"]:not(.md-search__form) {
  display: none !important;
}

html body .md-header__button.md-icon[href*="github"],
html body [class*="md-header__button"][href*="github"] {
  display: none !important;
}

/* Article inner content typography — match sister */
html body article.md-typeset h1 {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  margin-top: 0 !important;
  padding-bottom: 0.5em !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body article.md-typeset h2 {
  color: #ffffff !important;
  font-weight: 700 !important;
  padding-bottom: 0.4em !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: 1.5em !important;
}
html body article.md-typeset h3 {
  color: #38bdf8 !important;
  font-weight: 700 !important;
}
html body article.md-typeset p,
html body article.md-typeset li {
  color: #d4dde7 !important;
}
html body article.md-typeset a {
  color: #38bdf8 !important;
}

/* Light theme overrides */
[data-theme="light"] html body .md-sidebar--primary,
[data-theme="light"] html body .md-sidebar--secondary,
[data-theme="light"] html body .md-sidebar,
[data-theme="light"] html body [class*="md-sidebar"] {
  display: none !important;
}

[data-theme="light"] html body article.md-content__inner.md-typeset,
[data-theme="light"] html body article[class*="md-typeset"] {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(10, 14, 20, 0.10) !important;
  color: #0a0e14 !important;
}
[data-theme="light"] html body article.md-typeset h1,
[data-theme="light"] html body article.md-typeset h2 {
  color: #0a0e14 !important;
  border-bottom-color: rgba(10, 14, 20, 0.10) !important;
}
[data-theme="light"] html body article.md-typeset h3 {
  color: #0284c7 !important;
}
[data-theme="light"] html body article.md-typeset p,
[data-theme="light"] html body article.md-typeset li {
  color: #4b5563 !important;
}
[data-theme="light"] html body article.md-typeset a {
  color: #0284c7 !important;
}