/* ============================================================
   COMPONENTS — shared across pages
   ============================================================ */

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;   /* height spacer only — a real coloured border would be PAINTED OVER by the ::before glass (element borders paint in step 1, negative-z children in step 2, i.e. on top of them). The visible rule is ::after below. */
}
/* glass on a pseudo-element, NOT on .header itself: backdrop-filter on .header would make it
   a containing block for the fixed .header-collapse panel and break the panel's own blur. */
.header::before{
  content: ""; position: absolute; inset: 0 0 -1px; z-index: -1;   /* -1px: the glass extends under the header's border row, so the a10 rule is always backed by the glass (abs-pos inset:0 would stop at the padding box, leaving the border row a see-through hole) */
  background: var(--c-paper-a95);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.header::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;   /* THE one rule under the main menu — sits exactly on the border row, paints ABOVE the glass (positioned → step 8, vs the glass's negative-z step 2), and is backed by it; never toggled, moved or restyled */
  background: var(--c-navy-a10);
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
  padding: 0 var(--s-7);            /* s-7 = 32px по краям */
  gap: var(--s-6);
}
.logo{display: inline-flex; align-items: center; gap: var(--gap-icon)}
/* phone: smaller logo — height 24, width keeps the SVG ratio */
@media (max-width: 599.98px){
  .logo svg{height: 24px; width: auto}
}

nav.main-nav{display: flex; gap: var(--s-7); align-items: center}
nav.main-nav a{
  font-family: var(--ff-primary);
  font-size:   var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-eyebrow);
  color: var(--c-navy);
  padding: var(--s-2) 0;
  position: relative;
  transition: color .15s ease;
}
nav.main-nav a.active::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--c-red);
}

/* Services group — the trigger reads like a nav link; hovering it drops a
   FULL-WIDTH glass bar under the header (same look as the tablet burger dropdown).
   JS toggles .open (bridging the trigger→bar gap); :focus-within keeps it
   keyboard-reachable. On ≤1024 the sub links live in the burger panel instead. */
.nav-sub{position: static}
.nav-sub-trigger{
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-family: var(--ff-primary);
  font-size:   var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-eyebrow);
  color: var(--c-navy);
  padding: var(--s-2) 0;
  position: relative;
  cursor: default;
}
/* parent underline when a sub page is the current one */
.nav-sub-trigger.active::after{content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--c-red)}
/* full-width bar under the header. It's tucked up behind the header and slides DOWN
   out from under it on open (translateY) — so the whole bar, including its bottom rule,
   moves as one piece: the rule is visible immediately, never lags. */
.nav-sub-menu{
  position: fixed; left: 0; right: 0; top: var(--header-h, 77px);   /* rests exactly below the header's border row */
  z-index: -2;   /* the bar is a CHILD of .header, so its z-index resolves INSIDE the header's stacking context — a positive value paints it over the header's glass (::before, z -1) and content. Below -1 it slides under the glass; the header's own z 100 still lifts the whole thing above page content. */
  background: var(--c-paper-a95);   /* border-box (default): the a10 rule sits on the bar's own bg → a plain line, no frosted-glass edge */
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border-bottom: 1px solid var(--c-navy-a10);    /* the sub-menu's single rule — plain a10 */
  transform: translateY(-100%);   /* hidden up behind the header */
  visibility: hidden;
  transition: transform .24s ease, visibility .24s;
}
.nav-sub.open .nav-sub-menu,
.nav-sub:focus-within .nav-sub-menu{transform: translateY(0); visibility: visible}
/* inner row — full width, centred, height matches the header bar.
   links inherit the main-nav size (--fs-small) from `nav.main-nav a`. */
.nav-sub-inner{
  display: flex; align-items: center; justify-content: center; gap: var(--s-7);
  min-height: var(--header-h, 77px);
  padding: 0 var(--s-7);
}
@media (prefers-reduced-motion: reduce){ .nav-sub-menu{transition: none} }

.toggle{
  position: relative;
  display: flex; padding: var(--s-1);
  background: var(--c-navy-a06);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-pill);
}
/* sliding active indicator — width & position set by JS to hug the active label */
.toggle-thumb{
  position: absolute;
  top: var(--s-1); bottom: var(--s-1);
  left: 0; width: 0;
  background: var(--c-navy);
  border-radius: var(--r-pill);
  transition: left .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
}
.toggle a{
  position: relative; z-index: 1;
  white-space: nowrap;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-family: var(--ff-primary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-navy-a45);
  transition: color .2s ease;
}
.toggle a.on{color: var(--c-white)}
.toggle a:hover{color: var(--c-navy)}
.toggle a.on:hover{color: var(--c-white)}
@media (prefers-reduced-motion: reduce){
  .toggle-thumb{transition: none}
}

.header-actions{display: flex; align-items: center; gap: var(--s-4)}
/* contact block — only shown inside the mobile burger panel (see media query); hidden on desktop */
.header-contact{display: none}

/* nav + toggle wrapper. On desktop it's transparent (display:contents) so nav and
   the toggle become direct children of .header-inner again → logo | nav | toggle
   spread by its space-between (nav stays centred). On mobile it becomes a real
   dropdown panel (see media query below). */
.header-collapse{display: contents}

/* burger trigger — hidden on desktop, animates to an ✕ when open */
.burger{display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: var(--r-md)}
.burger span{display: block; width: 22px; height: 2px; background: var(--c-navy); border-radius: var(--r-pill); transition: transform .25s ease, opacity .2s ease}
.header.nav-open .burger span:nth-child(1){transform: translateY(7px) rotate(45deg)}
.header.nav-open .burger span:nth-child(2){opacity: 0}
.header.nav-open .burger span:nth-child(3){transform: translateY(-7px) rotate(-45deg)}
@media (prefers-reduced-motion: reduce){ .burger span{transition: none} }


/* ============================================================
   BUTTONS
   ============================================================ */
/* base + default L size (56 / s-7 / 16px) */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--gap-icon);
  height: 56px;
  padding: 0 var(--s-7);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--ff-primary);
  font-size: var(--t-l-button-b-size);
  font-weight: var(--t-l-button-b-weight);
  line-height: var(--t-l-button-b-line);
  transition: transform .15s ease;
}
/* lift only on devices that truly hover (no sticky state on touch) */
@media (hover: hover){
  .btn:hover{transform: translateY(-1px)}
}
/* sizes — L = default .btn */
.btn-sm{height: 48px; padding: 0 var(--s-6); font-size: var(--t-m-button-b-size)}   /* M */
.btn-s {height: 40px; padding: 0 var(--s-4); font-size: var(--t-m-button-b-size)}   /* S — шрифт как M */
.btn-xs{height: 32px; padding: 0 var(--s-4); font-size: var(--t-s-button-b-size)}   /* XS */
/* meet the 44px touch-target minimum on touch devices */
@media (pointer: coarse){
  .btn-s,.btn-xs{min-height: 44px}
}
/* icon-only — square at any size (width follows the size class height) */
.btn-icon{padding: 0; aspect-ratio: 1; border-color: var(--c-rule)}

.btn-primary{background: var(--c-navy);   color: var(--c-white)}
.btn-purple {background: var(--c-purple); color: var(--c-white)}
.btn-red    {background: var(--c-red);    color: var(--c-white)}
.btn-white  {background: var(--c-white);  color: var(--c-navy)}
.btn-outline{background: transparent; border-color: var(--c-rule); color: var(--c-navy); font-weight: var(--fw-medium)}
.btn-ghost  {background: transparent; border-color: var(--c-white-a40); color: var(--c-white); font-weight: var(--fw-medium)}

.icon   {width: 24px; height: 24px; flex-shrink: 0; max-width: none; color: inherit}
.icon-sm{width: 20px; height: 20px}

/* button-link — text link with button typography + icon (pair with .icon-sm for 20×20) */
.btn-link{
  display: inline-flex; align-items: center;
  gap: var(--gap-icon-link);
  font-family: var(--ff-primary);
  font-size:   var(--t-m-button-m-size);
  font-weight: var(--t-m-button-m-weight);
  line-height: var(--t-m-button-m-line);
}

.chips{display: flex; flex-wrap: wrap; gap: var(--gap-stack)}
.chip{
  display: inline-flex; align-items: center;
  height: 40px;
  padding: 0 var(--s-4);
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-pill);
  color: var(--c-navy);
  /* text style: m-button-m */
  font-family: var(--ff-primary);
  font-size:   var(--t-m-button-m-size);
  font-weight: var(--t-m-button-m-weight);
  line-height: var(--t-m-button-m-line);
}
/* phone: smaller chip all round — height 32, padding s-3, font 12, tighter gap */
@media (max-width: 599.98px){
  .chips{gap: var(--s-2)}
  .chip{height: 32px; padding: 0 var(--s-3); font-size: var(--t-s-button-b-size)}
}


/* ============================================================
   FOOTER
   ============================================================ */
footer{background: var(--c-ink); color: var(--c-navy-40); padding: var(--s-11) var(--section-px)}
.footer-wrap{max-width: var(--container-max); margin: 0 auto}   /* width cap + centre only; horizontal inset owned by footer via --section-px (matches .wrap/.section) */
.footer-grid{display: grid; grid-template-columns: 1fr; gap: var(--s-6); margin-bottom: var(--s-9)}
@media (min-width: 600px){ .footer-grid{grid-template-columns: 1fr 1fr} }
@media (min-width: 905px){ .footer-grid{grid-template-columns: repeat(4,1fr)} }
.footer-col h5{color: var(--c-white); margin-bottom: var(--s-4)}   /* text style: .t-eyebrow */
.footer-col ul{display: flex; flex-direction: column; gap: var(--s-1)}
.footer-col li{font-size: var(--fs-small); line-height: var(--lh-small)}
.footer-brand .logo{margin-bottom: var(--s-6)}
.footer-brand p{font-size: var(--fs-small); line-height: var(--lh-small); margin-bottom: var(--s-6)}
.footer-contact{display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-small)}
.footer-contact .row{display: flex; align-items: center; gap: var(--gap-icon)}
.footer-contact svg{color: var(--c-navy-40)}
.footer-bottom{display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); font-size: var(--fs-small); padding-top: var(--s-6); border-top: 1px solid var(--c-white-a08)}
.footer-legal{text-decoration: underline; text-underline-offset: 3px}


/* ============================================================
   RADIOLOGY / HEARTCARE SWITCHER (.svc-tabs)
   Used on About ("What we do") and the booking form.
   Switcher build (track with an s-1 inset, pill tabs, no gap between them) but the
   tabs are sized like M buttons (48 / s-6) with the L button text (16), not the small
   Patient/Referrer toggle. Only the switcher's own s-1 track inset — no extra paddings/gap.
   Colours stay this switcher's own: white track, navy inactive, brand active pill.
   ============================================================ */
.svc-tabs{display: inline-flex; padding: var(--s-1); background: var(--c-white); background-clip: padding-box; border: 1px solid var(--c-rule); border-radius: var(--r-pill)}
.svc-tab{
  height: 48px; padding: 0 var(--s-6);   /* M button metrics (48 / 24) */
  border-radius: var(--r-pill);
  white-space: nowrap;
  font-family: var(--ff-primary);
  font-size: var(--t-l-button-m-size); font-weight: var(--fw-medium);   /* 16 / medium (L text) */
  color: var(--c-navy);
  transition: background .2s ease, color .2s ease;
}
.svc-tab.is-active{color: var(--c-white)}
.svc-tab.rad.is-active{background: var(--c-purple)}
.svc-tab.heart.is-active{background: var(--c-red)}


/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Section paddings & grids are adaptive at their own sources (semantic tokens
   + mobile-first grids in page CSS). Below 1024px the nav + toggle collapse
   into a burger-triggered dropdown panel. */
@media (max-width: 1024px){
  .header-inner{padding-inline: var(--s-6)}   /* logo, burger & close at s-6 from the edge */
  .burger{display: flex}
  .header-collapse{
    display: flex;
    position: fixed; left: 0; right: 0; top: var(--header-h, 77px);   /* starts exactly below the header's border row — unfurls from under it */
    height: calc(100vh - var(--header-h, 77px));
    height: calc(100dvh - var(--header-h, 77px));
    flex-direction: column; align-items: stretch; gap: var(--s-5);
    padding: var(--s-6) var(--section-px) var(--s-7);   /* horizontal inset = page blocks' inset (matches header & sections) */
    background: var(--c-paper);
    overflow-y: auto;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);   /* unfurl from under the header (not a transform that rides over it) */
    transition: clip-path .24s ease, visibility .24s;
  }
  .header.nav-open .header-collapse{opacity: 1; visibility: visible; clip-path: inset(0 0 0 0)}
  /* opaque header bar while the menu is open: the 90% glass otherwise lets the page
     bleed through behind the burger and at the seam — reads as a pixel gap and makes
     the close icon look like it's mixing with the menu icon. */
  .header.nav-open::before{background: var(--c-paper); -webkit-backdrop-filter: none; backdrop-filter: none}
  .header-collapse .main-nav{flex-direction: column; align-items: flex-start; gap: var(--s-2); width: 100%}
  .header-collapse .main-nav a{padding: var(--s-3) 0; font-size: var(--fs-body)}
  .header-collapse .main-nav a.active::after{bottom: 1px}   /* links have bigger padding here (12 vs 8) → raise the underline so the text→underline gap matches desktop (~6) */
  /* burger has room for every page — flatten the Services/About groups so each sub link
     becomes a normal flat nav item (no hover-only trigger, no indent, no dropdown box). */
  .nav-sub, .nav-sub-menu, .nav-sub-inner{display: contents}
  .nav-sub-menu{visibility: inherit}   /* the desktop bar hides via visibility, which INHERITS into the links even though display:contents removes the box itself — re-route it here or the flattened items vanish. `inherit` (not `visible`) so the links keep following the PANEL's open/closed visibility like every other nav item. */
  .nav-sub-trigger{display: none}
  .header-collapse .header-actions{width: 100%}   /* full-width row; toggle stays content-width, left-aligned */
  /* contacts pinned to the bottom of the panel — same look as the Visit contact list (.contact-item):
     fs-body, gap-stack between rows, gap-icon icon↔text, full navy icons */
  .header-collapse .header-contact{display: flex; flex-direction: column; gap: var(--gap-stack); margin-top: auto; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-navy)}
  .header-contact .row{display: flex; align-items: center; gap: var(--gap-icon)}
  .header-contact svg{color: var(--c-navy)}
}
/* tablet (600–1024) — more room: the Patient/Referrer switcher moves up into the bar (JS),
   so the dropdown holds just nav (two columns) + contacts, with a divider between them.
   Phone (<600) keeps the vertical stack with the switcher inside the panel. */
@media (min-width: 600px) and (max-width: 1024px){
  .header-collapse{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "nav     nav"
                         "contact contact";
    align-content: start; row-gap: var(--gap-block);
    height: auto;                          /* dropdown — not a full-screen overlay (enough room on tablet) */
    padding: var(--s-8);                   /* fixed 48 on every side across the whole tablet range — no 48→60 jump, matches the divider gaps */
    background: var(--c-paper-a95); background-clip: padding-box;   /* bg stops at the padding box → the bottom rule composites over the page, darkening the content */
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);   /* glass — same as the header bar */
    opacity: 1;   /* keep fully opaque so backdrop-filter works (opacity<1 disables it) */
    border-bottom: 1px solid var(--c-navy-a10);   /* the panel's single rule — outward, over the content below */
    overflow-y: visible;
    /* reveal by unfurling top→down via clip-path (no transform → never overlaps the header's
       bottom border; no opacity → backdrop-filter stays on). */
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .24s ease, visibility .24s;
  }
  .header.nav-open .header-collapse{clip-path: inset(0 0 0 0)}
  .header-collapse .main-nav{
    grid-area: nav;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;   /* fill top-to-bottom per column: col1 = Home + Services group + For Referrers + Doctors, col2 = the rest */
    column-gap: var(--gap-block); row-gap: var(--s-2); width: 100%;
    margin-block: calc(var(--s-3) * -1);   /* cancel the links' top/bottom padding (12) at the nav edges → real gap to panel top & divider = 48, not 60 */
  }
  .header-collapse .main-nav a{justify-self: start}   /* link hugs its text → active underline = text width, not the column */
  .header-collapse .header-contact{grid-area: contact; flex-direction: row; flex-wrap: wrap; column-gap: var(--gap-block); row-gap: var(--gap-stack); margin-top: 0; border-top: 1px solid var(--c-rule); padding-top: var(--gap-block)}   /* divider between nav and contacts */
  /* switcher relocated into the bar (JS): pinned to the right, next to the burger */
  .header-inner > .header-actions{margin-left: auto}
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce){
  .header-collapse{transition: none}
}