/* =============================================================
   Skydent — Base: resets, typography, base elements
   ============================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sk-font-base);
  font-size: 17px;            /* design body size */
  line-height: 1.6;
  color: var(--sk-text);
  background: var(--sk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--sk-primary);
  text-decoration: none;
  transition: color var(--sk-dur) var(--sk-ease);
}
a:hover { color: var(--sk-primary-dark); }

/* Hello Elementor's theme.css underlines EVERY `.page-content a`, which bleeds
   onto our buttons, cards and treatment titles. Reset it — keep the underline
   only for real prose (blog/article body). */
.page-content a { text-decoration: none; }
.sk-prose a { text-decoration: underline; text-underline-offset: 2px; }

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sk-font-head);
  font-weight: 600;
  line-height: 1.15;           /* design: tight, balanced headings */
  color: var(--sk-navy);
  margin: 0 0 var(--sk-space-4);
  text-wrap: balance;
}
h1 { font-size: var(--sk-fs-4xl); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: var(--sk-fs-3xl); font-weight: 700; letter-spacing: -.015em; }
h3 { font-size: var(--sk-fs-2xl); }
h4 { font-size: var(--sk-fs-xl); }
h5 { font-size: var(--sk-fs-lg); }
h6 { font-size: var(--sk-fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--sk-text-soft); }

p { margin: 0 0 var(--sk-space-4); }
strong, b { font-weight: var(--sk-fw-semi); }

ul, ol { margin: 0 0 var(--sk-space-4); padding-left: 1.35rem; }
li { margin-bottom: var(--sk-space-2); }

blockquote {
  margin: var(--sk-space-5) 0;
  padding: var(--sk-space-4) var(--sk-space-5);
  border-left: 4px solid var(--sk-primary-light);
  background: var(--sk-surface);
  border-radius: var(--sk-radius-sm);
  color: var(--sk-text-soft);
}

hr { border: 0; border-top: 1px solid var(--sk-border); margin: var(--sk-space-6) 0; }

:focus-visible { outline: 3px solid var(--sk-primary-light); outline-offset: 2px; }

/* --- Responsive type --- */
@media (max-width: 1024px) {
  :root { --sk-fs-4xl: 2.5rem; --sk-fs-3xl: 2rem; }
}
@media (max-width: 640px) {
  :root { --sk-fs-4xl: 2.05rem; --sk-fs-3xl: 1.7rem; --sk-fs-2xl: 1.45rem; }
  body { font-size: 16px; }
}