/*
  SITE-WIDE DESIGN PRESETS
  Change only site-design.json to select a preset for the entire website.
*/

/* Section typography is generated from site-design.json during the Astro build. */
body { font-family: var(--font-body); font-size: var(--size-body); }
.site-header,
.site-header nav,
.site-header button,
.services-mega-menu,
.service-areas-mega-menu { font-family: var(--font-navigation); font-size: var(--size-navigation); }
.hero .eyebrow { font-family: var(--font-hero-eyebrow); font-size: var(--size-hero-eyebrow); }
.hero h1,
.hero .hero-title { font-family: var(--font-hero-heading); font-size: var(--size-hero-heading) !important; }
.hero .hero-description,
.hero .hero-message,
.hero .hero-message p,
.hero .appointment-highlight,
.hero .trust-list,
.hero .trust-list li { font-family: var(--font-hero-text); font-size: var(--size-hero-text) !important; }
.button,
button { font-family: var(--font-buttons); font-size: var(--size-buttons); }
.section-heading h2,
.content-section h2,
.service-highlight h2,
.section > .container > h2 { font-family: var(--font-section-heading); font-size: var(--size-section-heading) !important; }
.section-heading p,
.content-section p,
.service-highlight p,
.section p { font-family: var(--font-section-text); font-size: var(--size-section-text); }
.site-footer,
.site-footer a,
.site-footer button { font-family: var(--font-footer); font-size: var(--size-footer); }

@media (max-width: 699px) {
  .hero h1,
  .hero .hero-title { font-size: clamp(32px, 10vw, var(--size-hero-heading)) !important; }
  .section-heading h2,
  .content-section h2,
  .service-highlight h2,
  .section > .container > h2 { font-size: clamp(26px, 8vw, var(--size-section-heading)) !important; }
}

/* The custom color is generated from site-design.json during the Astro build. */

/* Component style choices */
html[data-style="soft"] { --radius: 18px; --shadow: 0 18px 45px rgba(17, 32, 51, 0.12); }
html[data-style="sharp"] { --radius: 4px; --shadow: 0 10px 24px rgba(17, 32, 51, 0.14); }
html[data-style="minimal"] { --radius: 0px; --shadow: none; --border: #cfd5dc; }
html[data-style="sharp"] .button { border-radius: var(--button-radius); }
html[data-style="minimal"] .button { border-radius: var(--button-radius); box-shadow: none; }

/* All site buttons share one configurable corner radius. */
.button,
.hero-offer-actions .button,
.hero-offer-actions .hero-flip-badge-face { border-radius: var(--button-radius); }

/* Layout choices */
html[data-layout="wide"] { --container-width: 1380px; --page-gutter: 40px; --hero-space: 70px; --hero-gap: 56px; }
html[data-layout="standard"] { --container-width: 1160px; --page-gutter: 36px; --hero-space: 58px; --hero-gap: 42px; }
html[data-layout="compact"] { --container-width: 980px; --page-gutter: 28px; --hero-space: 42px; --hero-gap: 30px; }

@media (max-width: 640px) {
  :root { --page-gutter: 24px; --hero-space: 36px; --hero-gap: 28px; }
}