/* ==========================================================================
   Swasthy Wellcare — public site
   Phase 1 foundation: layout primitives only. Components arrive with their
   own files under components/ as each module lands.
   ========================================================================== */

/* --- Layout --------------------------------------------------------------- */

.container {
  width: var(--container);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

/* Any wrapper placed around a group of cards MUST re-establish the stack gap.
   A bare <div> silently collapses the rhythm and is treated as a defect. */
.stack {
  display: grid;
  gap: var(--stack);
}

.card-grid {
  display: grid;
  gap: var(--stack);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.prose {
  max-width: var(--measure);
}

/* --- Page shell ----------------------------------------------------------- */

.site {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
}

.site__main {
  flex: 1;
}

.skip-link {
  position: absolute;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) 0;
  background: var(--color-primary);
  color: var(--color-text-invert);
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  color: var(--color-text-invert);
  transform: translateY(0);
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.site-header__inner {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Height-driven so the aspect ratio is held by the intrinsic width/height
   attributes — no layout shift while the SVG loads. */
/* The client's lockup is three lines (mark, wordmark, tagline) at roughly
   2.2:1, not the 3.4:1 of a single-line logo. Sized by height it therefore
   renders far narrower, so the height is raised to give it the same optical
   weight in the header and to keep the tagline legible. */
.brand__logo {
  width: auto;
  height: clamp(46px, 5.4vw, 64px);
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-9);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-5);
}

.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-style: normal;
}

.site-footer__legal {
  max-width: var(--measure);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  min-height: 44px;              /* touch-target floor */
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-invert);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-invert);
}

.btn--secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-primary);
}

.btn--secondary:hover {
  border-color: var(--color-primary);
}

/* --- Typography utilities ------------------------------------------------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.lead {
  font-size: var(--fs-h4);
  line-height: var(--lh-subheading);
  color: var(--color-text-muted);
}

.muted {
  color: var(--color-text-muted);
}

/* --- Header nav ----------------------------------------------------------- */

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: var(--fs-small);
  font-weight: 600;
}

/* `:not(.btn)` matters — this rule scores 0-1-1 and `.btn--primary` scores
   0-1-0, so without it the nav link colour wins on any button inside the
   list. The mega-menu CTA rendered dark ink on dark green (a contrast
   failure, not just a mismatch) while the identical header CTA, which sits
   outside .site-nav__list, kept its correct near-white. Link styling must
   never reach buttons. */
.site-nav__list a:not(.btn) {
  color: var(--color-text);
  text-decoration: none;
  padding-block: var(--space-2);
  border-block-end: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

/* THE PAGE YOU ARE ON — accent underline and primary ink. */
.site-nav__list a:not(.btn)[aria-current="page"] {
  color: var(--color-primary);
  border-block-end-color: var(--color-accent);
}

/* HOVER IS NOT ACTIVE. It used to share the rule above, which meant that on any
   page a visitor could produce a second "current" item just by moving the
   pointer — and next to a genuinely current sibling the two were identical.
   A neutral underline says "this responds to the pointer" without claiming to
   be where you are. */
.site-nav__list a:not(.btn):hover {
  border-block-end-color: var(--color-border);
}

@media (max-width: 720px) {
  .site-nav__list {
    gap: var(--space-4);
    font-size: var(--fs-caption);
  }
}
/* --- Mobile navigation ---------------------------------------------------- */
/* Below the breakpoint the links become an off-canvas panel. Previously they
   wrapped onto a second row, which squashed the logo and broke the header. */

.site-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  align-content: center;
  gap: 5px;
  border-radius: var(--radius-sm);
}

.site-burger__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  transition: translate var(--transition-fast), rotate var(--transition-fast), opacity var(--transition-fast);
}

/* The bars fold into a cross while the panel is open. */
.site-header[data-nav-open="true"] .site-burger__bar:nth-child(1) {
  translate: 0 7px;
  rotate: 45deg;
}

.site-header[data-nav-open="true"] .site-burger__bar:nth-child(2) {
  opacity: 0;
}

.site-header[data-nav-open="true"] .site-burger__bar:nth-child(3) {
  translate: 0 -7px;
  rotate: -45deg;
}

/* 1279px, matching the mega-menu breakpoint in mega-menu.css. The two must
   stay equal — the drawer and the mega-menu are one component. It was 860px
   once, which left a broken band where the burger was hidden but the
   mega-menu's desktop rules had not kicked in, so the panels rendered as
   inline accordions inside the bar.

   WHY IT MOVED FROM 1023 TO 1279 (2026-08-08). It was measured, not guessed.
   With the desktop bar active at 1024px the header was overflowing the
   viewport by 134px — document.scrollWidth 1158 against a 1024 viewport —
   before the About section was added at all. §54.12 forbids exactly that, and
   §12 forbids solving it by squashing. Eight sections plus the language
   switcher, the phone and the estimate button need about 1130px of bar, and
   1024–1279 does not have it. Above 1280 the bar fits with room to spare;
   below it, the drawer is the honest answer and is a fully designed menu
   rather than a fallback. Verified across 1024/1100/1200/1280/1366/1440/1920. */
@media (max-width: 1279px) {
  .site-burger {
    display: grid;
  }

  .site-header__inner {
    min-height: 64px;
    gap: var(--space-3);
  }

  .site-nav {
    position: fixed;
    z-index: var(--z-drawer);
    inset-block: 64px 0;
    inset-inline: 0;
    padding: var(--space-6) var(--gutter);
    background: var(--color-surface);
    translate: 0 -8px;
    opacity: 0;
    visibility: hidden;
    transition: translate var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
    overflow-y: auto;
  }

  .site-header[data-nav-open="true"] .site-nav {
    translate: none;
    opacity: 1;
    visibility: visible;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
    font-size: var(--fs-h4);
  }

  .site-nav__list li + li {
    border-block-start: 1px solid var(--color-border);
  }

  .site-nav__list a {
    display: block;
    padding-block: var(--space-4);
    border-block-end: 0;
  }

  /* The logo must never be squeezed to fit a wrapping nav. */
  .brand__logo {
    height: 46px;
  }
}
/* --- Footer columns ------------------------------------------------------- */

.site-footer__columns {
  display: grid;
  gap: var(--space-8) var(--space-7);
  padding-block-end: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.site-footer__brand {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.site-footer__logo {
  width: auto;
  max-width: 190px;
  height: auto;
}

.site-footer__pitch {
  max-width: 30ch;
}

.site-footer__heading {
  margin-block-end: var(--space-4);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.site-footer__col ul {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer__col a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer__col a:hover {
  color: var(--color-primary);
}

/* Scoped to the CONTACT column on purpose. The same component renders
   twice: stacked inside its column here, and as a one-line bar inside
   .site-footer__inner. An unscoped grid here used to win over the bar's
   flex row (equal specificity, later in the file) and stacked the bottom
   bar into a tower — client-reported, 2026-08-10. */
.site-footer__col .site-footer__contact {
  display: grid;
  gap: var(--space-3);
  font-style: normal;
}

/* Qualified with `.site-footer__col` deliberately.
   `.site-footer__col ul` sets `display: grid` and scores 0-1-1; a bare
   `.site-footer__social` scores 0-1-0 and loses, which stacked every social
   icon in a vertical column instead of a row. Matching the specificity is
   the fix — raising it with !important would just move the problem. */
.site-footer__col ul.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  margin-block-start: var(--space-5);
  list-style: none;
}

.site-footer__social a {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.site-footer__social a:hover {
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.site-footer__inner {
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
}

/* --- Record images -------------------------------------------------------- */
/* The photograph attached to a specialty, treatment, hospital, destination or
   service. One component, three frames: full-bleed on a card, a square thumb
   beside a row, and a banner on a detail page.

   `aspect-ratio` on the image itself — together with the width/height the
   component always emits — means the space is reserved before the file
   arrives, so a slow image never shifts the layout under a reader. */

.record-image {
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-muted);
}

.record-image__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

/* The credit line a CC-BY image obliges us to show. Deliberately quiet: it is
   a legal requirement, not part of the composition. */
.record-image__credit {
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

/* Square thumbnail beside a list row. */
.record-image--thumb {
  flex: none;
  inline-size: clamp(76px, 18vw, 116px);
  border-radius: var(--radius-md);
}

.record-image--thumb .record-image__img {
  aspect-ratio: 1 / 1;
}

.record-image--thumb .record-image__credit {
  display: none;
}

/* --- Media cards ---------------------------------------------------------- */
/* A card whose image runs edge to edge: the padding moves off the card and
   onto the text block, so the photograph meets the border with no gutter. */

.card--media {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.card--media .record-image {
  border-radius: 0;
}

.card--media .card__text {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: clamp(20px, 2vw, 28px);
}

/* Slow push-in on hover. Transform only — no layout cost, and it reads as
   depth rather than decoration. */
.card--media:hover .record-image__img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .record-image__img,
  .card--media:hover .record-image__img {
    transition: none;
    transform: none;
  }
}


/* --- Credit line ---------------------------------------------------------- */
/* Rendered over the foot of the photograph rather than in the flow.
   In-flow it took a full text block: on the specialties grid a two-line
   Flickr title pushed the heading down and left one tile a head taller than
   its neighbours. It still has to be legible — CC-BY requires the credit be
   shown, so it is quietened, never clipped or hidden. */

.record-image {
  position: relative;
}

.record-image__credit {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 6px 10px;
  color: rgb(255 255 255 / 0.78);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  background: linear-gradient(to top, rgb(11 22 33 / 0.72), transparent);
  text-wrap: pretty;
}

/* --- Feature lead tile ---------------------------------------------------- */
/* The lead tile spans two rows, so its image has to grow into the extra
   height. Without this the image kept its own aspect ratio and left a block
   of empty white below the text. */

@media (min-width: 900px) {
  .feature-tile--lead {
    grid-template-rows: 1fr auto;
  }

  .feature-tile--lead .feature-tile__media {
    block-size: 100%;
    min-block-size: 0;
  }

  .feature-tile--lead .feature-tile__media .record-image__img {
    aspect-ratio: auto;
    block-size: 100%;
    object-fit: cover;
  }
}


/* ==========================================================================
   Tap targets (§45) — the one deliberate pass, 2026-08-09.
   Scoped to COARSE pointers on 2026-08-10 (client-reported): the 44px floor
   exists for fingers, and applying it to mouse desktops blew the footer and
   sitemap apart visually. Touch keeps every 44px target below; fine
   pointers get the compact spacing plus a 24px floor (WCAG 2.5.8).
   ========================================================================== */

/* All devices: standalone stacked links keep a 24px minimum. */
.site-footer__col a,
.site-footer__contact a,
.sitemap-page__list a,
.sitemap-page__subheading a {
  display: inline-block;
  padding-block: 4px;
}

.site-footer__contact {
  align-items: center;
}

/* Icon-only targets keep the full square everywhere — 44px looks the same
   as the old 40px circle and never needs to shrink. */
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
}

@media (pointer: coarse) {
  /* Measured at 320px before this block: footer list links 18px, footer
     contact links 25px, card title links 22px, "read more" links 24px. The
     floor is 44px, met with REAL padding. Negative margin is allowed ONLY
     to trim whitespace against non-interactive neighbours (a card's own
     body text); it is never used between two targets, which would make
     adjacent links swallow each other's taps. List gaps shrink so the
     visual rhythm stays close to what it was. */

  .site-footer__col ul {
    gap: 2px;
  }

  .site-footer__col a,
  .site-footer__contact a {
    padding-block: 14px;
  }

  .card__title a,
  .treatment-row__name a,
  .package-card__title a,
  .article-card__title a {
    display: inline-block;
    padding-block: 12px;
    margin-block: -6px;
  }

  .link-more {
    padding-block: 10px;
  }

  /* Inline links inside banners, fact lists and contact blocks. Each sits
     beside NON-interactive text, so trimming the growth with negative
     margin cannot overlap another target. Measured 16–26px before this. */
  .breadcrumb a,
  .hero__contact dd a,
  .contact-detail__list a,
  .treatment-row__facts a,
  .fact-strip dd a,
  .form__consent label a,
  .legal-body__contact a,
  .faq-layout__more {
    display: inline-block;
    padding-block: 14px;
    margin-block: -10px;
  }

  /* The HTML sitemap is stacked link lists, like the footer columns: REAL
     padding and a collapsed gap — negative margin between stacked targets
     would make neighbours swallow each other's taps. */
  .sitemap-page__list {
    gap: 2px;
  }

  .sitemap-page__list a,
  .sitemap-page__subheading a {
    padding-block: 12px;
  }
}