/* Legal pages — East Bay Center for Dental Excellence */

@font-face { font-family:'Inter'; font-weight:400; font-display:swap; src:url('../fonts/font_4.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-display:swap; src:url('../fonts/font_5.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap; src:url('../fonts/font_8.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-display:swap; src:url('../fonts/font_9.woff2') format('woff2'); }

:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --navy-deep: #0b2c4e;
  --navy:      #123c66;
  --teal:      #2aa6bd;
  --cyan:      #2cb8d8;
  --sky:       #eaf4fb;
  --body:      #363636;
  --mute:      #898989;
  --hairline:  #d8d8d8;
  --canvas:    #ffffff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--navy-deep); }
body { font-family: var(--font-sans); background: var(--canvas); color: var(--body); -webkit-font-smoothing: antialiased; line-height: 1.7; }
a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--teal); }

/* ── Nav ─────────────────────────────────────────────────────── */
.legal-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  padding: 0 40px;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
}
.legal-nav-logo img { height: 48px; width: auto; display: block; }
.legal-nav-back {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 14px/1 var(--font-sans);
  color: var(--navy); text-decoration: none;
  padding: 9px 18px; border-radius: 8px;
  border: 1.5px solid var(--hairline);
  transition: border-color .15s, background .15s;
}
.legal-nav-back:hover { border-color: var(--navy); background: var(--sky); }

/* ── Hero banner ─────────────────────────────────────────────── */
.legal-hero {
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, #16456f 100%);
  padding: 64px 40px 56px;
  text-align: center;
}
.legal-hero p { font: 500 13px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.legal-hero h1 { font: 700 38px/1.15 var(--font-sans); color: #fff; margin-bottom: 16px; }
.legal-hero small { font: 400 14px/1 var(--font-sans); color: rgba(255,255,255,.5); }

/* ── Layout ──────────────────────────────────────────────────── */
.legal-wrap { max-width: 800px; margin: 0 auto; padding: 64px 40px 96px; }

/* ── Table of contents ───────────────────────────────────────── */
.legal-toc {
  background: var(--sky); border: 1px solid #cfe3f1; border-radius: 12px;
  padding: 28px 32px; margin-bottom: 52px;
}
.legal-toc h2 { font: 600 14px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); margin-bottom: 14px; }
.legal-toc ol { padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.legal-toc ol li a { font: 400 14px/1.4 var(--font-sans); color: var(--navy); text-decoration: none; }
.legal-toc ol li a:hover { color: var(--teal); text-decoration: underline; }

/* ── Sections ────────────────────────────────────────────────── */
.legal-section { margin-bottom: 48px; scroll-margin-top: 80px; }
.legal-section h2 {
  font: 600 20px/1.3 var(--font-sans); color: var(--navy-deep);
  padding-bottom: 10px; margin-bottom: 18px;
  border-bottom: 2px solid var(--cyan);
  display: flex; align-items: center; gap: 10px;
}
.legal-section h2 .sec-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy-deep); color: #fff;
  font: 700 12px/1 var(--font-sans); flex-shrink: 0;
}
.legal-section h3 { font: 600 16px/1.4 var(--font-sans); color: var(--navy); margin: 22px 0 8px; }
.legal-section p { font: 400 15px/1.75 var(--font-sans); color: var(--body); margin-bottom: 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul, .legal-section ol { padding-left: 22px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 7px; }
.legal-section li { font: 400 15px/1.65 var(--font-sans); color: var(--body); }

/* ── SMS highlight box ───────────────────────────────────────── */
.sms-box {
  background: var(--sky); border-left: 4px solid var(--cyan);
  border-radius: 0 10px 10px 0; padding: 20px 24px; margin: 20px 0;
}
.sms-box strong { display: block; font: 600 13px/1 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; }
.sms-box p { font: 400 14px/1.7 var(--font-sans); color: var(--body); margin: 0; }
.sms-box p + p { margin-top: 8px; }

/* ── Footer ──────────────────────────────────────────────────── */
.legal-footer {
  background: var(--navy-deep);
  padding: 40px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.legal-footer-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.legal-footer-links a { font: 400 13px/1 var(--font-sans); color: rgba(255,255,255,.45); text-decoration: none; }
.legal-footer-links a:hover { color: rgba(255,255,255,.8); }
.legal-footer p { font: 400 13px/1.5 var(--font-sans); color: rgba(255,255,255,.3); }

@media (max-width: 600px) {
  .legal-nav { padding: 0 20px; }
  .legal-hero { padding: 48px 20px 40px; }
  .legal-hero h1 { font-size: 28px; }
  .legal-wrap { padding: 40px 20px 72px; }
  .legal-toc { padding: 20px; }
}