/* ==========================================================================
   NOVO CONSISTENCY LAYER (novo-consistency.css)
   Loaded last. Aligns shared tokens and page-scoped components so every
   template uses the same containers, rhythm, CTAs, cards, forms and targets.
   No new colors, typefaces or animations.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
   --novo-navy-hover: #2d3850;
   --ns-radius-sm: 12px;   /* images, media frames, inputs */
   --ns-radius: 16px;      /* cards, panels, callouts, maps */
   --ns-radius-card: 16px;
   --ns-radius-input: 12px;
   --ns-shadow-card: 0 1px 2px rgba(30, 38, 53, .04), 0 8px 24px rgba(30, 38, 53, .05);
   --ns-home-y: 3.5rem;    /* 56px mobile */
   --z-header: 10;
   --z-sticky-cta: 30;
   --z-menu: 40;
   --z-skip: 100;
}
@media (min-width: 48rem) { :root { --ns-home-y: 4.5rem; } }   /* 72px tablet */
@media (min-width: 64rem) { :root { --ns-home-y: 5.5rem; } }   /* 88px desktop */

/* ---------- 2. Containers and gutters ---------- */
/* Page-scoped wrappers share the design-system width so left edges line up. */
html body .pr-wrap, html body .cx-wrap, html body .rl-wrap { max-width: var(--ns-wide); box-sizing: border-box; }

/* Legacy Tailwind px-4 (16px) becomes the 20px system gutter on phones. */
@media (max-width: 35.9375rem) {
   html body main .px-4, html body #nav_wrap > .px-4 { padding-left: var(--ns-gutter); padding-right: var(--ns-gutter); }
}
/* Homepage closing band follows the same gutter token up to tablet. */
@media (max-width: 48rem) {
   html body #home_cta .hc-inner { padding-left: var(--ns-gutter); padding-right: var(--ns-gutter); }
}
/* Homepage legacy bands: same gutter as ns-wrap pages on tablets. */
@media (min-width: 36rem) and (max-width: 63.99rem) {
   html body main > section.home-section { padding-left: var(--ns-gutter); padding-right: var(--ns-gutter); }
}

/* ---------- 3. Section rhythm (homepage legacy bands) ---------- */
html body main > section.home-section:not(#conditions) { padding-top: var(--ns-home-y); padding-bottom: var(--ns-home-y); }
html body #home_cta.hc { padding-top: var(--ns-section-y); padding-bottom: var(--ns-section-y); }

/* ---------- 4. CTAs ---------- */
/* PRIMARY: Novo navy pill on light backgrounds. */
html body .btn-primary, html body .pr-btn, html body .ar-btn, html body .rl-btn, html body .cx-submit {
   background-color: var(--novo-navy);
   border-color: var(--novo-navy);
   color: #fff !important;
   min-height: 52px;
   border-radius: var(--ns-radius-pill, 9999px);
   font-size: 1.0625rem;
   font-weight: 700;
}
html body .btn-primary:hover, html body .pr-btn:hover, html body .ar-btn:hover, html body .rl-btn:hover, html body .cx-submit:hover {
   background-color: var(--novo-navy-hover);
   border-color: var(--novo-navy-hover);
   color: #fff !important;
}
html body .btn-primary:focus-visible, html body .pr-btn:focus-visible, html body .ar-btn:focus-visible, html body .rl-btn:focus-visible, html body .cx-submit:focus-visible {
   outline: 3px solid var(--novo-blue);
   outline-offset: 3px;
}
html body .ns-rail-cta .btn { min-height: 52px; font-size: 1.0625rem; }
html body .ns-prose a.bg-blue { background-color: var(--novo-navy) !important; border-color: var(--novo-navy) !important; }
html body .ns-prose a.bg-blue:hover { background-color: var(--novo-navy-hover) !important; }

/* On navy bands the primary stays Novo blue so it remains visible. */
html body .ns-dark .btn-primary, html body .svc-final .btn-primary, html body #hero_section .btn-primary, html body .bg-blue-dark .btn-primary {
   background-color: var(--novo-blue);
   border-color: var(--novo-blue);
}
html body .ns-dark .btn-primary:focus-visible, html body .svc-final .btn-primary:focus-visible, html body #hero_section .btn-primary:focus-visible { outline-color: var(--novo-focus); }

/* Homepage closing band: same pill geometry as every other CTA. */
html body #home_cta .hc-btn { height: auto; padding-top: 0; padding-bottom: 0; min-height: 52px; border-radius: 9999px; font-size: 1.0625rem; font-weight: 700; }
html body #home_cta .hc-eyebrow { font-size: var(--ns-fs-eyebrow, .8125rem); }

html body .pr-btn, html body .rl-btn, html body .ar-btn { padding-top: .75rem; padding-bottom: .75rem; }

/* TEXT LINKS: 44px targets. */
html body .home-more, html body .testimonials-see-all { display: inline-flex; align-items: center; min-height: 44px; }
html body #blog_teaser_section .blog-list a .home-more { min-height: 0; }

/* ---------- 5. Eyebrows ---------- */
html body .hc-head .ns-eyebrow { color: var(--novo-blue); letter-spacing: .16em; font-size: var(--ns-fs-eyebrow, .8125rem); }
html body .ns-dark .hc-head .ns-eyebrow { color: var(--novo-light-blue); }

/* ---------- 6. Cards, panels and media ---------- */
html body #who_section .who-grid > div,
html body #treatments_section .treatment-list > div,
html body #process_stepper .stepper-step,
html body #blog_teaser_section .blog-list a,
html body .fq-tiles li, html body .fq-ask-box,
html body .pr-card, html body .cx-card, html body .cx-map { border-radius: var(--ns-radius-card); }
html body .cx { --cx-radius: 16px; }
html body .svc-media { border-radius: var(--ns-radius-sm); }

/* ---------- 7. Forms ---------- */
html body .cx-field input, html body .cx-field textarea { border-radius: var(--ns-radius-input); font-size: 1rem; }
html body .cx-field input { min-height: 52px; }

/* ---------- 8. Header and mobile menu ---------- */
@media (max-width: 63.99em) {
   html body #menu > li.pb-9 { padding-bottom: 1.25rem; }
   html body #menu > li > a { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; }
   html body.menu_open #site_nav { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 5.5rem; padding-bottom: 2rem; align-items: safe center; }
   html body.menu_open #mobile_sticky_cta { display: none; }
   html body #nav_btn { min-width: 44px; min-height: 44px; }
}

/* Header "Book an Exam": the same navy primary pill as the page CTAs. */
@media (min-width: 64em) {
   html body #nav_wrap #site_nav #menu > li:last-child > a {
      display: inline-flex !important; align-items: center; justify-content: center;
      height: 44px !important; padding: 0 1.375rem !important;
      background-color: var(--novo-navy) !important; border: 1px solid var(--novo-navy) !important;
      border-radius: 9999px !important; color: #fff !important;
   }
   html body #nav_wrap #site_nav #menu > li:last-child > a:hover {
      background-color: var(--novo-navy-hover) !important; border-color: var(--novo-navy-hover) !important; color: #fff !important;
   }
   html body #nav_wrap #site_nav #menu > li:last-child > a:focus-visible { outline: 3px solid var(--novo-blue); outline-offset: 3px; }
}
/* Mobile menu "Book an Exam" on the pale menu background. */
html body.menu_open #nav_wrap #site_nav #menu > li:last-child > a { background: var(--novo-navy) !important; border-color: var(--novo-navy) !important; color: #fff !important; }
html body.menu_open #nav_wrap #site_nav #menu > li:last-child > a:hover { background: var(--novo-navy-hover) !important; }
/* The mobile Call/Book bar stays Novo blue: it sits on navy. */

/* ---------- 9. Footer ---------- */
/* Footer gutter, single "Explore" label and accordion live in partials/footer_home.html. */

/* ---------- 11. Exam CTA (partials/exam_cta.html) ---------- */
/* One final conversion module: light, bordered, one navy primary, quiet price and phone lines. */
html body .ex-cta { background: #fff; border-top: 1px solid var(--novo-border); padding: 3.5rem 0 4rem; }
@media (min-width: 48rem) { html body .ex-cta { padding: 4.5rem 0 5rem; } }
html body .ex-box { max-width: 56rem; padding: 1.75rem 1.5rem; border: 1px solid var(--novo-pale-blue-line); border-radius: var(--ns-radius-card); background: var(--novo-pale-blue); box-sizing: border-box; }
@media (min-width: 40rem) { html body .ex-box { padding: 2.5rem 2.75rem; } }
html body .ex-cta .ex-eyebrow, html body .ar-cta .ex-eyebrow { margin: 0 0 .75rem; }
html body .ex-h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; color: var(--novo-text); text-wrap: balance; }
html body .ex-copy { max-width: 42rem; }
html body .ex-copy p { margin: .75rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--novo-text-muted); }
html body .ex-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 1.5rem; }
html body .ex-actions .ex-btn { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.75rem; text-decoration: none; }
html body .ex-link { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; font-weight: 600; color: var(--novo-blue); text-decoration: none; }
html body .ex-link:hover { color: var(--novo-blue-hover); text-decoration: underline; text-underline-offset: .2em; }
html body .ex-link:focus-visible, html body .ex-phone a:focus-visible { outline: 3px solid var(--novo-blue); outline-offset: 3px; border-radius: 4px; }
html body .ex-micro { margin: 1.125rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--novo-text-muted); }
html body .ex-phone { margin: .25rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--novo-text-muted); }
html body .ex-phone a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--novo-text); text-decoration: none; }
html body .ex-phone a:hover { color: var(--novo-blue); text-decoration: underline; }
@media (max-width: 39.99rem) {
   html body .ex-actions { flex-direction: column; align-items: stretch; gap: .5rem; }
   html body .ex-actions .ex-btn { width: 100%; }
   html body .ex-link { justify-content: center; }
}
/* Header CTA: full wording in the mobile menu, short wording in the desktop bar. */
html body .nav-cta-short { display: none; }
@media (min-width: 64em) { html body .nav-cta-long { display: none; } html body .nav-cta-short { display: inline; } }

/* No sticky Call/Book bar on /contact-us: drop the space reserved for it. */
@media (max-width: 47.9375rem) {
   html body.ns-nosticky { padding-bottom: 0 !important; }
   html body.ns-nosticky #site_footer .ft-legal { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Homepage video: hold the 16:9 player space while Plyr/Vimeo load on approach (no layout shift). */
html body .hv-slot { max-width: 34rem; margin: 0 auto; aspect-ratio: 16 / 9; background: var(--novo-surface); }

/* ---------- 10. Motion ---------- */
@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto !important; }
   *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}