/* ---------------------------------------------------------------
   admin-overrides.css
   Written by the Rose Dental Care of Tyler admin panel.
   Linked last inside each page's <helmet>, after the inline
   <style> block, so rules here win on document order.
   Safe to edit by hand; the panel appends, and replaces only
   the blocks marked @admin:<name>.
   --------------------------------------------------------------- */

/* @admin:prose start — panel-managed, replaced whole on each save */
.rd-prose { font-size: 17px; line-height: 1.75; color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.rd-prose > :first-child { margin-top: 0; }
.rd-prose > :last-child { margin-bottom: 0; }
.rd-prose p { margin: 0 0 22px; }
.rd-prose h3 { margin: 52px 0 16px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15;
  letter-spacing: -0.025em; color: var(--color-text); }
.rd-prose h4 { margin: 32px 0 12px; font-size: 18px; letter-spacing: -0.015em; color: var(--color-text); }
.rd-prose ul, .rd-prose ol { margin: 0 0 22px; padding-left: 24px; }
.rd-prose li { margin: 0 0 10px; }
.rd-prose li::marker { color: var(--color-accent-700); font-weight: 700; }
.rd-prose strong { font-weight: 700; color: var(--color-text); }
.rd-prose a { color: var(--color-accent-700); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rd-prose a:hover { background: var(--color-accent-100); }
.rd-prose figure { margin: 40px 0; }
.rd-prose figure img { display: block; width: 100%; height: auto; }
/* A post's lead paragraph, set slightly larger — the first <p> only,
   and only when it really is first, so a figure cannot inherit it. */
.rd-prose > p:first-of-type { font-size: 19px; line-height: 1.65; color: var(--color-text); }
/* @admin:prose end */

/* ---------------------------------------------------------------
   Small-screen layout. Inline styles on the pages win on
   specificity, so the overrides that have to beat them use
   !important. Everything else just stops the page scrolling
   sideways and lets images, maps and tables fit the screen.
   --------------------------------------------------------------- */
html, body { overflow-x: clip; }
img, video, iframe, embed, object { max-width: 100%; }
table, pre { max-width: 100%; }

@media (max-width: 1079px) {
  .rd-hero-panel {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  #top { min-height: 0 !important; }
  .rd-pagehero { padding-top: 148px !important; }
  .rd-hero-actions,
  .rd-pagehero .btn { max-width: 100%; }
  .rd-hero-actions { align-items: stretch; }
  .rd-hero-actions .btn,
  .rd-pagehero .btn {
    width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .rd-stat-row { grid-template-columns: 1fr !important; }
  .rd-stat-row > div {
    border-left: 0 !important;
    padding: 18px 0 0 !important;
  }
  .rd-sticky { position: static !important; }
  .rd-hero-tabs { gap: 8px !important; }
  .rd-hero-tabs button { min-width: 0; }
  .rd-hero-foot { padding-bottom: 36px !important; }
  header .nav { gap: 10px !important; }
  header .nav > .btn { padding: 12px 14px !important; gap: 10px !important; }
}

@media (max-width: 420px) {
  h1 { font-size: clamp(32px, 10vw, 44px) !important; }
  .rd-hero-tabs span { font-size: 12px !important; }
}