/* ─── Maui Pediatric Dentistry: framework adaptation layer ─────────────────
   PER-BRAND FILE. reader.js/search.js are framework (verbatim, never edited)
   and their injected styles assume a dark palette + Space Grotesk/Inter.
   This file re-skins them for a LIGHT, warm brand by out-specifying the
   injected rules (html-prefixed selectors win on specificity, so load order
   doesn't matter). Framework files stay untouched — this is the sanctioned
   seam. Load on every page that loads reader.js/search.js. */

/* Warm rounded type over the framework's defaults */
html .dn-head, html .dn-gbtn, html .doc-back, html .dn-toggle,
html .dn-sitenav a, html .rail-slot .rs-cta,
html .doc-view-body h1, html .doc-view-body h2, html .doc-view-body blockquote,
html .doc-view-body .btn, html .doc-view-body .buy, html .doc-view-body .tier b,
html .doc-view-body .lv-h, html .doc-view-body .lv-card h3,
html .tsk-chip, html .tsk-card .t, html .tsk-hit b, html .tsk-viewall {
  font-family: 'Fredoka', 'Trebuchet MS', sans-serif;
}
html .dn-root, html .dn-search, html .doc-view-body, html .tsk-input {
  font-family: 'Nunito', 'Segoe UI', sans-serif;
}

/* Light-theme highlight: dark ink on seafoam, instead of ink-on-teal */
html .doc-view-body h1 em,
html .doc-view-body .artmeta b,
html .doc-view-body .figures b {
  background: linear-gradient(transparent 10%, #BFE7DD 10%, #BFE7DD 90%, transparent 90%);
  color: var(--ink, #1E3A47);
}

/* Badges & buttons keep white text on the lagoon teal */
html .tsk-hit .badge { color: #fff; }

/* Hover/current tints tuned for a light canvas (framework assumes dark) */
html .dn-list a:hover { background: rgba(30, 58, 71, .06); }
html .dn-sitenav a:hover { background: rgba(30, 58, 71, .06); }
html .dn-list a.current { background: linear-gradient(90deg, rgba(13, 113, 104, .12), transparent); }

/* Softer drawer shadow on light theme */
@media (max-width: 1000px) {
  html .docs-side { box-shadow: 0 24px 70px -24px rgba(30, 58, 71, .35); }
}

/* ── Mobile header: compact + calm (≤640px) ─────────────────────────────
   The framework's drawer toggle goes icon-only; the wordmark drops the
   KEIKI SMILES chip and wraps to a tight two-line lockup; the call pill
   condenses to "Call". html-prefixed to out-specify page styles and the
   framework's injected toggle rules. */
@media (max-width: 640px) {
  html .dn-toggle span { display: none; }
  html .dn-toggle { padding: 8px 10px; margin-right: 0; border-radius: 10px; }
  html header.top { gap: 10px; padding-top: 12px; padding-bottom: 10px; }
  html header.top .logo { flex: 1 1 auto; min-width: 0; }
  html header.top .logo .lt { font-size: .94rem; line-height: 1.14; letter-spacing: 0; white-space: normal; display: block; }
  html header.top .logo .ls { display: none; }
  html header.top .searchbtn { width: 32px; height: 32px; flex-shrink: 0; }
  html header.top .begin { font-size: 0; padding: 9px 16px; line-height: 1; }
  html header.top .begin::after { content: "Call"; font-size: .84rem; font-family: 'Fredoka', sans-serif; font-weight: 600; }
}