/* Global base + component styles shared across all dentist sub-pages.
   Loaded as a plain stylesheet (unscoped) so helpers apply to every
   component and slotted page content. Relies on per-variant --c-* vars. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--c-font-body);
  color: var(--c-text);
  background: var(--c-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--c-font-head); color: var(--c-heading); font-weight: 600; }
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* In-prose links must not rely on color alone (WCAG 1.4.1) */
p a, li a { text-decoration: underline; }
img, picture { max-width: 100%; }

/* layout helpers */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section-sm { padding: 56px 0; }
.soft { background: var(--c-soft); }
.surface2 { background: var(--c-surface-2); }
.eyebrow {
  display: inline-block; background: var(--c-accent-soft); color: var(--c-accent);
  font-size: 12px; font-weight: 700; padding: 5px 15px; border-radius: 9999px;
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 16px;
}
.h-lg { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.14; margin: 0 0 16px; }
.h-md { font-size: clamp(25px, 3.2vw, 38px); line-height: 1.2; margin: 0 0 14px; }
.lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--c-muted); line-height: 1.75; margin: 0; }
.muted { color: var(--c-muted); }
.card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px;
  padding: 26px 24px;
}
.card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.10); border-color: var(--c-primary); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--c-primary); color: var(--c-on-primary); font-weight: 700;
  font-size: 15px; padding: 14px 26px; border-radius: 9999px; border: none;
  cursor: pointer; font-family: var(--c-font-body); line-height: 1;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}
.btn:hover { transform: translateY(-2px); background: var(--c-primary-dark); text-decoration: none; color: var(--c-on-primary); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: transparent; color: var(--c-link); font-weight: 700; font-size: 15px;
  padding: 13px 24px; border-radius: 9999px; border: 1.5px solid var(--c-border);
  cursor: pointer; font-family: var(--c-font-body); transition: border-color .2s ease, color .2s ease;
}
.btn-ghost:hover { border-color: var(--c-primary); text-decoration: none; }

/* forms */
label.flabel, .flabel { display: block; font-size: 13px; font-weight: 700; color: var(--c-heading); margin-bottom: 7px; }
.field, input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], input[type=number], select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--c-field-border);
  border-radius: 10px; font-size: 15px; font-family: var(--c-font-body);
  background: var(--c-field); color: var(--c-field-text);
}
select { cursor: pointer; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-ring); }
*:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
::placeholder { color: var(--c-muted); opacity: .85; }

/* skip link + sr-only */
.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 { position:absolute; left:-999px; top:0; z-index:9999; }
.skip:focus { left:8px; top:8px; width:auto; height:auto; padding:10px 16px; background:var(--c-surface); color:var(--c-heading); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.25); font-weight:700; }

/* animations */
@keyframes fadeUp { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform:none; } }
.fade { animation: fadeUp .7s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 760px) {
  .section { padding: 52px 0; }
  .section-sm { padding: 38px 0; }
  .wrap, .wrap-narrow { padding: 0 18px; }
}