/* ==========================================================================
   AMRIT CLINIC PREMIUM — Design tokens, reset and base typography
   ==========================================================================
   Load order: tokens → layout → components → pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {

  /* ---- Brand palette ---------------------------------------------------- */
  --brand:          #94D507;
  --brand-dark:     #6EA600;
  --secondary:      #243447;
  --accent:         #00B8D9;
  --bg:             #F8FAF4;
  --white:          #FFFFFF;
  --heading:        #1F2937;
  --body:           #4B5563;
  --border:         #E5E7EB;
  --success:        #22C55E;

  /*
     Accessible variants.

     #94D507 on white is roughly 1.9:1 — nowhere near readable as text. The
     brand lime is therefore used only as a *fill* (with dark ink on top,
     which measures 7.1:1) and never as text on a light background.

     --brand-ink is the darkened green used wherever brand colour has to
     carry text: 5.6:1 on white, which clears AA for body copy.
  */
  --brand-ink:      #4C7300;
  --brand-tint:     #F1FADC;   /* 8% lime wash — section backgrounds        */
  --brand-tint-2:   #E4F5BE;   /* 18% lime — chips, active states           */
  --secondary-soft: #35485E;
  --secondary-deep: #16212E;
  --accent-ink:     #00758A;   /* Readable cyan for text/links              */
  --accent-tint:    #E0F7FB;

  --muted:          #6B7280;
  --muted-light:    #9CA3AF;
  --surface:        #FFFFFF;
  --surface-2:      #FBFCF8;
  --danger:         #DC2626;
  --danger-tint:    #FEF2F2;
  --warning:        #D97706;
  --warning-tint:   #FFFBEB;
  --success-tint:   #F0FDF4;

  /* ---- Typography -------------------------------------------------------- */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /*
     Fluid type. Each step interpolates between a 360px phone and a 1440px
     desktop, so there are no breakpoint jumps in the type scale at all.
  */
  --fs-xs:   0.75rem;                                   /* 12px — labels     */
  --fs-sm:   0.8125rem;                                 /* 13px — meta       */
  --fs-base: clamp(0.9375rem, 0.92rem + 0.08vw, 1rem);          /* 15→16     */
  --fs-md:   clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);          /* 16→17     */
  --fs-lg:   clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem);     /* 17→19     */
  --fs-xl:   clamp(1.1875rem, 1.11rem + 0.35vw, 1.375rem);      /* 19→22     */
  --fs-2xl:  clamp(1.375rem, 1.25rem + 0.58vw, 1.75rem);        /* 22→28     */
  --fs-3xl:  clamp(1.5rem, 1.31rem + 0.87vw, 2rem);             /* 24→32     */
  --fs-4xl:  clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);            /* 28→40     */

  --lh-tight:  1.14;
  --lh-snug:   1.28;
  --lh-normal: 1.55;
  --lh-relaxed: 1.72;

  --ls-tight:  -0.022em;
  --ls-snug:   -0.014em;
  --ls-wide:    0.02em;
  --ls-caps:    0.09em;

  /* ---- Spacing ----------------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Section rhythm — the single biggest lever on "does this feel premium". */
  --section-y:   clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
  --section-y-sm: clamp(1.75rem, 1.4rem + 1.8vw, 3rem);

  /* ---- Layout ------------------------------------------------------------ */
  --container:      1240px;
  --container-wide: 1440px;
  --container-text: 760px;
  --gutter:         clamp(1.125rem, 0.85rem + 1.22vw, 2.5rem);

  --header-h:        76px;
  --header-h-scroll: 66px;
  --topbar-h:        40px;

  /* ---- Radii ------------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-full: 999px;

  /* ---- Shadows ----------------------------------------------------------- */
  /* Layered rather than single-blur: the close shadow gives the edge, the
     far one gives the float. A single large blur reads as cheap. */
  --sh-xs: 0 1px 2px rgba(31, 41, 55, 0.05);
  --sh-sm: 0 1px 2px rgba(31, 41, 55, 0.05), 0 2px 6px rgba(31, 41, 55, 0.04);
  --sh-md: 0 2px 4px rgba(31, 41, 55, 0.04), 0 8px 20px rgba(31, 41, 55, 0.07);
  --sh-lg: 0 4px 8px rgba(31, 41, 55, 0.04), 0 16px 40px rgba(31, 41, 55, 0.09);
  --sh-xl: 0 8px 16px rgba(31, 41, 55, 0.05), 0 28px 68px rgba(31, 41, 55, 0.13);
  --sh-brand: 0 6px 16px rgba(148, 213, 7, 0.28), 0 2px 4px rgba(110, 166, 0, 0.16);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* ---- Glass ------------------------------------------------------------- */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-bg-2:   rgba(255, 255, 255, 0.55);
  --glass-dark:   rgba(36, 52, 71, 0.62);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur:   saturate(180%) blur(20px);

  /* ---- Motion ------------------------------------------------------------ */
  /* A single easing curve across the whole system. Consistency in motion is
     what separates "designed" from "animated". */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:     140ms;
  --t-base:     240ms;
  --t-slow:     420ms;
  --t-slower:   700ms;

  /* ---- Z-index ----------------------------------------------------------- */
  --z-base:     1;
  --z-sticky:   50;
  --z-header:   100;
  --z-mega:     110;
  --z-dock:     120;
  --z-overlay:  200;
  --z-drawer:   210;
  --z-modal:    300;
  --z-toast:    400;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links land clear of the sticky header. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--body);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol { padding: 0; }

/*
 * Any component that sets its own `display` (cards, grid items, gallery
 * tiles, etc.) otherwise silently overrides the browser's built-in
 * `[hidden] { display: none }` default, since an author rule always wins
 * over a user-agent one at equal specificity. The JS filter modules rely on
 * toggling the `hidden` attribute, so this has to hold everywhere.
 */
[hidden] { display: none !important; }

a {
  color: var(--brand-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--t-fast) var(--ease);
}

a:hover { color: var(--secondary); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-10) 0;
}

/* Focus: visible, on-brand, and never removed. Keyboard users on a medical
   site are frequently the ones who most need the site to work. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--brand-tint-2);
  color: var(--secondary-deep);
}

/* --------------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); font-weight: 700; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); letter-spacing: var(--ls-snug); }
h4 { font-size: var(--fs-lg); letter-spacing: var(--ls-snug); }
h5 { font-size: var(--fs-md); }
h6 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--muted);
}

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--secondary-soft);
}

strong, b { font-weight: 600; color: var(--heading); }

small { font-size: var(--fs-sm); }

blockquote {
  margin: var(--sp-8) 0;
  padding: var(--sp-6) var(--sp-8);
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-md);
  color: var(--secondary);
}

blockquote p:last-child { margin-bottom: 0; }

code, kbd, samp, pre {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  font-size: 0.9em;
}

code {
  background: var(--brand-tint);
  padding: 0.15em 0.4em;
  border-radius: var(--r-xs);
  color: var(--brand-ink);
}

/* --------------------------------------------------------------------------
   4. UTILITIES
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--tight { padding-block: var(--sp-10); }

.section--tint  { background: var(--brand-tint); }
.section--soft  { background: var(--surface-2); }
.section--white { background: var(--white); }
.section--dark {
  background: var(--secondary);
  color: rgba(255, 255, 255, 0.82);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--white); }

/* Screen-reader-only, but focusable when tabbed to (skip links). */
.screen-reader-text,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus,
.sr-only:focus {
  position: fixed !important;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: var(--z-toast);
  width: auto;
  height: auto;
  clip: auto;
  padding: var(--sp-3) var(--sp-5);
  background: var(--secondary);
  color: var(--white);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  text-decoration: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: var(--sp-3);
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--brand);
  border-radius: var(--r-full);
}

.section-head--center .eyebrow { justify-content: center; }

.text-highlight {
  background: linear-gradient(180deg, transparent 62%, var(--brand-tint-2) 62%);
  padding: 0 0.12em;
}

.text-center { text-align: center; }
.text-muted  { color: var(--muted); }
.text-brand  { color: var(--brand-ink); }

.list-check {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}

.list-check li {
  position: relative;
  padding-left: 2rem;
}

.list-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--brand-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C7300' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--sp-6);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.table-scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: var(--fs-sm);
}

.table-scroll th,
.table-scroll td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.table-scroll th {
  background: var(--brand-tint);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--secondary);
  white-space: nowrap;
}

.table-scroll tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   5. SCROLL REVEAL
   --------------------------------------------------------------------------
   Elements start slightly offset and settle into place. Applied by JS adding
   .is-visible, so content is never hidden if JS fails to run. */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--t-slower) var(--ease-out),
    transform var(--t-slower) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal-delay="5"] { transition-delay: 400ms; }

/* --------------------------------------------------------------------------
   6. REDUCED MOTION
   --------------------------------------------------------------------------
   Vestibular disorders are common enough in any patient population that this
   is a clinical courtesy, not a checkbox. */

@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   7. PRINT
   --------------------------------------------------------------------------
   Patients genuinely print treatment pages to take to a second opinion.
   Make that useful: drop the chrome, expose link targets. */

@media print {

  .site-header,
  .site-footer,
  .sticky-dock,
  .whatsapp-float,
  .breadcrumbs,
  .mega,
  .search-panel,
  .related-treatments,
  .cta-band,
  [data-reveal] { animation: none; }

  .site-header,
  .site-footer,
  .sticky-dock,
  .whatsapp-float,
  .search-panel,
  .cta-band { display: none !important; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }

  .section { padding-block: 12pt; }

  h2, h3 { break-after: avoid; }
  .card, .faq__item { break-inside: avoid; }
}