/* =====================================================
   dc-theme.css — DentCast Unified Design System
   Design tokens + page-level overrides for all
   internal pages. Loaded on every page with dc-topbar.
   index.html has its own inline system (do not touch).
===================================================== */

/* =====================================================
   DESIGN TOKENS — LIGHT MODE
===================================================== */
:root {
  --pr: #022360;     --pr-rgb: 2,35,96;
  --ac: #0b5fff;     --ac-rgb: 11,95,255;

  --bg: #f0f2f5;
  --surface:  #ffffff;
  --surface2: #f4f6fb;
  --surface3: #eaecf5;
  --border:   rgba(2,35,96,.10);
  --border2:  rgba(2,35,96,.06);

  --txt:     #0a1a33;
  --txt2:    #4a5f85;
  --txt3:    #8a9cbe;
  --txt-inv: #ffffff;

  --card-bg:     #ffffff;
  --card-border: rgba(2,35,96,.09);
  --card-sh:  0 1px 3px rgba(2,35,96,.07), 0 4px 14px rgba(2,35,96,.04);
  --card-sh2: 0 4px 18px rgba(2,35,96,.13), 0 1px 4px rgba(2,35,96,.07);

  --chip-bg:  rgba(11,95,255,.08);
  --chip-bd:  rgba(11,95,255,.20);
  --chip-txt: #022360;

  --tr:  .17s cubic-bezier(.4,0,.2,1);
  --tr2: .26s cubic-bezier(.4,0,.2,1);

  --r-sm: 10px;  --r-md: 14px;  --r-lg: 18px;
  --r-xl: 22px;  --r-f:  999px;
}

/* =====================================================
   DESIGN TOKENS — DARK MODE
===================================================== */
[data-theme="dark"] {
  --pr: #5b9cf6;     --pr-rgb: 91,156,246;
  --ac: #5b9cf6;     --ac-rgb: 91,156,246;

  --bg: #0e1621;
  --surface:  #17212b;
  --surface2: #1e2c3a;
  --surface3: #232e3c;
  --border:   rgba(255,255,255,.08);
  --border2:  rgba(255,255,255,.04);

  --txt:  #e8f0ff;
  --txt2: #8aaac8;
  --txt3: #4a6a88;

  --card-bg:     #1e2c3a;
  --card-border: rgba(255,255,255,.07);
  --card-sh:  0 1px 3px rgba(0,0,0,.22), 0 4px 14px rgba(0,0,0,.14);
  --card-sh2: 0 4px 18px rgba(0,0,0,.28);

  --chip-bg:  rgba(91,156,246,.12);
  --chip-bd:  rgba(91,156,246,.24);
  --chip-txt: #8ab4f8;
}

/* =====================================================
   BODY — UNIFIED BACKGROUND & TEXT
   body:has(.dc-topbar) specificity = 0,1,1
   overrides any page-level body { } at 0,0,1
===================================================== */
body:has(.dc-topbar) {
  background: var(--bg);
  color: var(--txt);
  transition: background var(--tr2), color var(--tr2);
}

/* Override gradient backgrounds applied to html too */
html:has(body .dc-topbar) {
  background: var(--bg);
  transition: background var(--tr2);
}

/* =====================================================
   CONTENT BOXES — UNIFIED CARD APPEARANCE
   Targets the common content-wrapper classes used
   across all internal page types:
   notecast/metanotes → .text-box
   glossary           → .content-box
   insight            → .glass-box
   Style.css pages    → .card / .intro / .audio-box
===================================================== */
body:has(.dc-topbar) .text-box,
body:has(.dc-topbar) .content-box,
body:has(.dc-topbar) .glass-box,
body:has(.dc-topbar) .card,
body:has(.dc-topbar) .intro,
body:has(.dc-topbar) .audio-box,
body:has(.dc-topbar) .dc-article-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-sh);
  color: var(--txt);
  /* remove glass / blur effects — not aligned with design system */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-image: none;
  transition: background var(--tr2), border-color var(--tr2),
              box-shadow var(--tr2), color var(--tr2);
}

/* Glossary-specific term container */
body:has(.dc-topbar) .content-box {
  border-radius: var(--r-lg);
}

/* Insight glass boxes — keep full border from general rule above */
body:has(.dc-topbar) .glass-box {
  border-radius: var(--r-lg);
}

/* =====================================================
   HEADINGS — DARK MODE ADAPTION
   Prevent pages' hardcoded heading colours from
   clashing with the dark background in [data-theme=dark]
===================================================== */
[data-theme="dark"] body:has(.dc-topbar) h1,
[data-theme="dark"] body:has(.dc-topbar) h2,
[data-theme="dark"] body:has(.dc-topbar) h3,
[data-theme="dark"] body:has(.dc-topbar) h4,
[data-theme="dark"] body:has(.dc-topbar) h5,
[data-theme="dark"] body:has(.dc-topbar) h6 {
  color: var(--txt);
}

/* Primary headings keep accent tint in both modes */
[data-theme="dark"] body:has(.dc-topbar) h1 {
  color: var(--pr);
}

/* =====================================================
   LINKS — CONTENT AREAS ONLY
   Exclude all navigation / topbar / radar elements
===================================================== */
body:has(.dc-topbar) article a,
body:has(.dc-topbar) main a,
body:has(.dc-topbar) .text-box a,
body:has(.dc-topbar) .content-box a,
body:has(.dc-topbar) .glass-box a,
body:has(.dc-topbar) .intro a,
body:has(.dc-topbar) .card a,
body:has(.dc-topbar) .wrap > ul a,
body:has(.dc-topbar) .wrap > ol a {
  color: var(--ac);
  transition: color var(--tr);
}

body:has(.dc-topbar) article a:hover,
body:has(.dc-topbar) main a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================
   MUTED / SECONDARY TEXT
===================================================== */
body:has(.dc-topbar) .muted,
body:has(.dc-topbar) [class*="muted"],
body:has(.dc-topbar) small {
  color: var(--txt3);
  transition: color var(--tr2);
}

/* =====================================================
   FOOTER — UNIFIED ACROSS ALL INTERNAL PAGES
   Matches index.html footer style:
   simple, text-only look with top border
===================================================== */
body:has(.dc-topbar) footer,
body:has(.dc-topbar) .dc-site-footer {
  color: var(--txt3) !important;
  border-top: 1px solid var(--border2) !important;
  background: transparent !important;
  text-align: center !important;
  font-size: .82rem !important;
  line-height: 1.9 !important;
  padding: 22px 18px 90px !important;   /* 90px bottom = room above toggle btn */
  margin-top: 40px !important;
  transition: color var(--tr2), border-color var(--tr2);
  /* Reset any gradient/dark background some pages set */
  background-image: none !important;
}

/* Copyright line */
body:has(.dc-topbar) footer .footer-copy,
body:has(.dc-topbar) footer .footer-copy strong,
body:has(.dc-topbar) footer > div:last-child,
body:has(.dc-topbar) footer > p:last-child {
  color: var(--txt3) !important;
  font-size: .78rem !important;
}

body:has(.dc-topbar) footer .footer-copy strong {
  color: var(--ac) !important;
}

/* ── BACK / HOME BUTTON ── */
body:has(.dc-topbar) footer .btn-home,
body:has(.dc-topbar) .btn-home,
body:has(.dc-topbar) footer a[href="/"],
body:has(.dc-topbar) footer a[href="/index.html"],
body:has(.dc-topbar) footer a[href="index.html"],
body:has(.dc-topbar) footer a[href="../"],
body:has(.dc-topbar) footer a[href="../../"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  border-radius: var(--r-f) !important;
  background: var(--pr) !important;
  color: #ffffff !important;
  border: none !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(var(--pr-rgb),.28) !important;
  transition: all var(--tr) !important;
  margin: 6px 4px !important;
}

body:has(.dc-topbar) footer .btn-home:hover,
body:has(.dc-topbar) footer a[href="/"]:hover,
body:has(.dc-topbar) footer a[href="/index.html"]:hover,
body:has(.dc-topbar) footer a[href="index.html"]:hover {
  opacity: .88 !important;
  transform: translateY(-1px) !important;
}

/* ── ABOUT BUTTON ── */
body:has(.dc-topbar) footer .btn-about,
body:has(.dc-topbar) .btn-about,
body:has(.dc-topbar) footer a[href="/about.html"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  border-radius: var(--r-f) !important;
  background: var(--surface2) !important;
  color: var(--txt2) !important;
  border: 1px solid var(--border) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: var(--card-sh) !important;
  transition: all var(--tr) !important;
  margin: 6px 4px !important;
}

body:has(.dc-topbar) footer .btn-about:hover,
body:has(.dc-topbar) footer a[href="/about.html"]:hover {
  background: var(--surface3) !important;
  color: var(--pr) !important;
}

/* ── GLOSSARY .btn back button ── */
body:has(.dc-topbar) footer .btn,
body:has(.dc-topbar) .term-footer .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  border-radius: var(--r-f) !important;
  background: var(--surface2) !important;
  color: var(--txt2) !important;
  border: 1px solid var(--border) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: var(--card-sh) !important;
  transition: all var(--tr) !important;
  margin: 6px 4px !important;
}

body:has(.dc-topbar) footer .btn:hover,
body:has(.dc-topbar) .term-footer .btn:hover {
  background: var(--surface3) !important;
  color: var(--pr) !important;
}

/* ── GENERIC BACK LINK IN FOOTER (notecast/insight inline style links) ──
   Targets the first <a> in a <footer> that goes "back"
   (href doesn't start with # or mailto and isn't /about.html)
   We can't use :not() with compound selectors in older engines,
   so we style ALL footer a's then override the about one above.
── */
body:has(.dc-topbar) footer a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  border-radius: var(--r-f) !important;
  background: var(--surface2) !important;
  color: var(--txt2) !important;
  border: 1px solid var(--border) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: var(--card-sh) !important;
  transition: all var(--tr) !important;
  margin: 6px 4px !important;
  /* Reset all inline-style colours */
  background-color: var(--surface2) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:has(.dc-topbar) footer a:hover {
  background: var(--surface3) !important;
  color: var(--pr) !important;
  transform: translateY(-1px) !important;
}

/* ── Footer copyright / about-link text ── */
body:has(.dc-topbar) .term-footer .about-link,
body:has(.dc-topbar) footer .about-link {
  font-size: .80rem !important;
  color: var(--txt3) !important;
  margin-top: 10px !important;
}

body:has(.dc-topbar) footer strong {
  color: var(--txt2) !important;
  font-weight: 700 !important;
}

/* =====================================================
   SECTION LIST ITEMS — Chairside / Notecast / etc.
===================================================== */
body:has(.dc-topbar) .wrap > ul li,
body:has(.dc-topbar) .wrap > ol li {
  color: var(--txt);
  transition: color var(--tr2);
}

/* =====================================================
   SELECTION
===================================================== */
::selection { background: rgba(11,95,255,.15); }

/* =====================================================
   DARK / LIGHT MODE FLOAT TOGGLE BUTTON
   Matches index.html: bottom:76px left:14px
   (76px clears any bottom browser UI bar on mobile)
===================================================== */
#dc-theme-toggle {
  position: fixed !important;
  bottom: 76px !important;
  left: 14px !important;
  right: auto !important;
  top: auto !important;
  z-index: 250;
  width: 42px;
  height: 42px;
  border-radius: var(--r-f);
  background: #17212b;
  color: #e8f0ff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  transition: all var(--tr);
}

[data-theme="dark"] #dc-theme-toggle {
  background: #1e2c3a;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 4px 16px rgba(0,0,0,.36);
}

#dc-theme-toggle:active {
  transform: scale(.86);
}

/* =====================================================
   JUMP / SCROLL BUTTON (used in Chairside, etc.)
===================================================== */
body:has(.dc-topbar) .dc-jump,
body:has(.dc-topbar) #dcJumpBtn {
  position: fixed;
  bottom: 126px;   /* above theme toggle (76px + 42px + 8px) */
  left: 14px;
  z-index: 249;
  width: 42px;
  height: 42px;
  border-radius: var(--r-f);
  background: var(--surface2);
  color: var(--txt3);
  border: 1px solid var(--border);
  box-shadow: var(--card-sh);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--tr);
}

body:has(.dc-topbar) .dc-jump:active,
body:has(.dc-topbar) #dcJumpBtn:active {
  transform: scale(.88);
}

body:has(.dc-topbar) #dcJumpBtn svg {
  width: 20px;
  height: 20px;
  fill: var(--txt3);
}

/* =====================================================
   CONTENT PAGE WRAPPER — MAX-WIDTH STANDARDIZATION
   Max-width follows index.html spirit:
   articles ≤ 720px, listings ≤ 860px
===================================================== */
body:has(.dc-topbar) .wrap {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
  background: transparent;
}

/* Narrower for single-article pages */
body:has(.dc-topbar) main.page,
body:has(.dc-topbar) main.article-page {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================
   SMOOTH PAGE TRANSITIONS
===================================================== */
body:has(.dc-topbar),
body:has(.dc-topbar) *:not(img):not(video) {
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

/* =====================================================
   GLOBAL SEARCH BOX — DARK MODE
   (global-search.css uses hardcoded whites)
===================================================== */
[data-theme="dark"] #dcGlobalBox.dc-global-filter-box {
  background: var(--surface);
  border-color: var(--border);
  color: var(--txt);
}

[data-theme="dark"] #dcGlobalBox .dc-global-filter-title {
  color: var(--txt);
}

[data-theme="dark"] #dcGlobalBox .dc-search-input {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--txt);
}

[data-theme="dark"] #dcGlobalBox .dc-filter-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--txt2);
}

[data-theme="dark"] #dcGlobalBox .dc-filter-btn.active {
  background: rgba(91,156,246,.15);
  border-color: rgba(91,156,246,.35);
  color: var(--ac);
}

[data-theme="dark"] #dcGlobalBox .dc-results-box,
[data-theme="dark"] #dcGlobalBox .dc-result-item {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--txt);
}

[data-theme="dark"] #dcGlobalBox .dc-result-title {
  color: var(--ac);
}

[data-theme="dark"] #dcGlobalBox .dc-result-meta {
  color: var(--txt3);
}