/* =================================================================
 * base.css — resets, typography, layout primitives (modern)
 * ============================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* overflow-x: clip contains the off-canvas mobile drawer without
 * creating a scroll container (so the sticky header keeps working). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-extra);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }

p { margin: 0 0 var(--space-4); }

a { color: var(--color-primary-600); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-700); }

img, video, svg, iframe { max-width: 100%; display: block; }
img, video { height: auto; }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }

strong { color: var(--color-ink); font-weight: var(--fw-semibold); }

/* ---- LAYOUT HELPERS ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 820px; }

.section { padding-block: var(--space-9); position: relative; }
.section--alt { background: var(--color-bg-alt); }
.section--tight { padding-block: var(--space-8); }
.section--mesh { background-image: var(--grad-mesh); }

.section-head { max-width: 720px; margin: 0 auto var(--space-7); text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head p { color: var(--color-text-soft); font-size: var(--fs-lg); margin-bottom: 0; }

/* eyebrow pill */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-primary-soft); color: var(--color-primary-700);
  font-family: var(--font-head); font-weight: var(--fw-semibold);
  font-size: var(--fs-xs); letter-spacing: 0.02em;
  padding: 6px 14px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }

.lead { font-size: var(--fs-lg); color: var(--color-text-soft); }

/* gradient text accent */
.text-grad {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- GRID ---- */
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

/* ---- ACCESSIBILITY ---- */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -200px; z-index: var(--z-modal);
  background: var(--color-primary); color: #fff;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* ---- SCROLL REVEAL ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--transition-slow), transform var(--transition-slow); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- UTILITIES ---- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.muted { color: var(--color-text-soft); }
.stack > * + * { margin-top: var(--space-4); }

@media (max-width: 768px) {
  .footer-grid-top {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-4) !important;
  }
  .footer-brand { order: 1 !important; grid-column: 1 / -1 !important; }
  .footer-col-clinic { order: 2 !important; }
  .footer-col-info { order: 3 !important; }
  .footer-icons { order: 4 !important; display: flex !important; grid-column: 1 / -1 !important; }
  .footer-brand-icons { display: none !important; }
  .footer-bottom { flex-direction: column !important; align-items: center !important; text-align: center !important; }
}