/* ==========================================================================
   Header mega-menu

   Built on <details>/<summary>, so open/close, keyboard operation and the
   accessible expanded state come from the browser. mega-menu.js only adds
   hover-to-open on pointer devices, Escape and outside-click. With scripting
   off the menu still opens on click — it degrades to a working accordion
   rather than a dead button.

   On mobile the panel is part of the off-canvas drawer flow (static, stacked);
   it only becomes a floating panel at desktop widths.
   ========================================================================== */

.site-nav__item {
  position: relative;
}

.mega__summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-block: var(--space-2);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  /* Reserved, not added on activation. Without the transparent border the
     active summary grew 2px taller than its neighbours, so marking the current
     section nudged that one item down and left its underline sitting lower
     than the underline on the plain links either side of it. Measured at
     1280px: 37px inactive against 39px active. */
  border-block-end: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

/* Safari draws its own disclosure triangle. */
.mega__summary::-webkit-details-marker {
  display: none;
}

/* Chevron, drawn in CSS. Rotates when the panel opens. */
.mega__summary::after {
  content: '';
  inline-size: 6px;
  block-size: 6px;
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast);
}

.mega[open] > .mega__summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.mega__summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 6px);
}

.mega__panel {
  padding-block: var(--space-4);
}

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

.mega__heading {
  margin-block-end: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

/* `:not(.btn)` matters. This rule scores 0-1-1 and the button classes score
   0-1-0, so without the exclusion it wins over `.btn`/`.btn--compact` and
   forces the panel's CTA to display:block at the body font size — which is
   why that button rendered 56px tall and 15px while the identical header
   button rendered 40px and 13px. Link styling must not reach buttons. */
.mega__col a:not(.btn) {
  display: block;
  padding-block: 2px;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.mega__col a:not(.btn):hover {
  color: var(--color-primary);
  transform: translateX(2px);
}

.mega__blurb {
  margin-block-end: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.mega__all {
  display: inline-block;
  margin-block-start: var(--space-3);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--fs-small);
}

/* --- Desktop: floating panel ---------------------------------------------- */

@media (min-width: 1280px) {
  /* The panel is positioned against the HEADER, not against its own nav item.
     Anchoring to the item is what broke it: an 880px panel hung off a menu
     item sitting near the right edge runs off one side or the other, and
     flipping which edge it anchors to only moves the overflow. Spanning the
     header and aligning the contents to the page container means the panel
     can never leave the viewport at any width, and every panel lines up with
     the page grid — which is also what makes it read as designed rather than
     as a floating box. */
  /* `sticky`, NOT `relative`.
     This rule loads after app.css, so declaring `relative` here silently
     overrode the header's `position: sticky` and the bar stopped pinning on
     scroll. Sticky is itself a positioned element, so it serves as the mega
     panel's containing block just as well — there was never a reason to
     trade the sticky away. */
  .site-header {
    position: sticky;
    top: 0;
  }

  /* The item must NOT be a positioned ancestor, or it becomes the panel's
     containing block and `inset-inline: 0` resolves to the width of the menu
     label — an 84px-wide mega-menu. The header has to win. */
  .site-nav__item {
    position: static;
  }

  .mega__panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 60;
    padding-block: clamp(24px, 2.6vw, 36px);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    animation: mega-open var(--transition-fast) both;
  }

  /* Matches the page container so the menu columns sit on the same grid as
     the content beneath them. */
  .mega__grid {
    /* The same --container token the page uses, so the menu columns land on
       exactly the page grid rather than a lookalike of it. */
    inline-size: var(--container);
    margin-inline: auto;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    gap: clamp(28px, 3vw, 56px);
  }

  /* Panels carrying a second list column: the browse column, the list, then
     the feature. `2fr` keeps the specialty grid wide enough to stay three
     across, and the list column is sized to its longest package name rather
     than to a share of the row. */
  .mega__grid--three {
    grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr) minmax(240px, 1fr);
  }

  /* The specialty lists are long; three balanced columns beat one tall one. */
  .mega__col ul {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: var(--space-2) var(--space-4);
  }

  /* …but a single narrow column is one column. Without this the packages and
     articles lists inherit the three-across rule above and each entry gets
     60px of width. */
  .mega__col--list ul {
    grid-template-columns: 1fr;
  }

  .mega__col--feature {
    padding-inline-start: clamp(24px, 2.4vw, 40px);
    border-inline-start: 1px solid var(--color-border);
  }

  .mega__col--feature ul {
    grid-template-columns: 1fr;
  }
}

@keyframes mega-open {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega__panel {
    animation: none;
  }

  .mega__summary::after,
  .mega__col a {
    transition: none;
  }
}

/* The feature column is a grid item, so an inline-flex button still stretches
   to the column width. `justify-self` sizes it to its own content. */
.mega__col--feature .btn {
  justify-self: start;
}

.mega__col--feature {
  display: grid;
  align-content: start;
  gap: 0;
}


/* ==========================================================================
   Header layout

   The bar was logo-hard-left, nav-hard-right and a wide dead gap between,
   with no way to act on the page from it. The nav now sits as one group with
   the phone number and the estimate CTA, which balances the bar and gives
   the header a job beyond navigation.
   ========================================================================== */

@media (min-width: 1280px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 28px);
    margin-inline-start: auto;
  }

  /* Smaller and tighter than the body scale so more sections fit on the bar
     as the site grows. 13px is still comfortably above the readable floor at
     this weight, and the row keeps its 44px target height from the padding
     on .mega__summary. */
  .site-nav__list {
    gap: clamp(10px, 1.2vw, 22px);
    flex-wrap: nowrap;
    font-size: 13px;
    letter-spacing: 0.005em;
  }

  /* Labels stay on one line. Without this a two-word item ("Patient
     support") wraps as soon as the bar tightens — which it does in RTL,
     where the switcher and the mirrored chevrons take slightly more room —
     and one nav item becomes two lines tall. */
  .site-nav__list .mega__summary,
  .site-nav__list .site-nav__link {
    white-space: nowrap;
  }

  .site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-inline-start: clamp(14px, 1.6vw, 24px);
    border-inline-start: 1px solid var(--color-border);
  }

  /* Two-line phone block: a quiet label over the number, so the number reads
     as the actionable thing rather than as another nav link. */
  .site-nav__phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
  }

  .site-nav__phone-icon {
    display: none;
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--color-text-muted);
  }

  .site-nav__phone-text {
    display: grid;
    gap: 1px;
  }

  /* Below 1440 the bar carries nine sections and there is no room for 130px
     of digits, so the number collapses to a tap-to-call target. The link keeps
     its accessible name from `aria-label`, the icon is a real 44px target, and
     the number is still printed in the footer and on the contact page. */
  @media (max-width: 1439px) {
    .site-nav__phone {
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border);
    }

    .site-nav__phone-icon {
      display: block;
    }

    .site-nav__phone-text {
      display: none;
    }

    .site-nav__phone:hover .site-nav__phone-icon {
      color: var(--color-primary);
    }
  }

  .site-nav__phone-label {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .site-nav__phone-number {
    color: var(--color-text);
    font-size: var(--fs-small);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: color var(--transition-fast);
  }

  .site-nav__phone:hover .site-nav__phone-number {
    color: var(--color-primary);
  }

  .site-nav__cta {
    white-space: nowrap;
  }
}

/* --- One button size ------------------------------------------------------ */
/* The header CTA, the mega-menu CTA and the hero buttons were each carrying
   their own padding and font-size overrides, so the same label rendered at
   three different sizes on one screen. `.btn--compact` is now the ONLY
   smaller variant and both in-chrome buttons use it, so they are identical
   to each other and consistently smaller than the page-level buttons. */

/* DESKTOP ONLY.
   Unscoped, this 40px button also applied inside the mobile drawer and the
   mobile mega-menu, putting the primary call to action below the 44px touch
   target floor. The compact size exists to fit the desktop header bar; on
   touch it must fall back to the full .btn size. */
@media (min-width: 1280px) {
  .btn--compact {
    min-height: 40px;
    padding-block: 0;
    padding-inline: var(--space-5);
    font-size: 13px;
  }
}

/* Below the mega-menu breakpoint the actions sit at the foot of the drawer,
   stacked and full width, where they are reachable with a thumb. */
@media (max-width: 1279px) {
  .site-nav__actions {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  .site-nav__phone {
    text-decoration: none;
  }

  /* The drawer shows the written "Call us" rows below — never the icon. Its
     20px size lives in the desktop block, so here an unsized inline SVG
     rendered at its intrinsic 100% width: a phone glyph the size of the
     drawer (client-reported, 2026-08-09). */
  .site-nav__phone-icon {
    display: none;
  }

  .site-nav__phone-label {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--fs-caption);
  }

  .site-nav__phone-number {
    font-size: var(--fs-h4);
    font-weight: 700;
  }
}


/* ==========================================================================
   Mobile mega-menu

   Inside the off-canvas drawer the panels must be accordions, not floating
   boxes: stacked, in flow, pushing the list below them. The desktop rules are
   all scoped to (min-width: 1280px), so nothing here has to be undone —
   but the drawer's own list styling assumes plain links, and the <summary>
   rows need to match it or the sections read as a different kind of item.
   ========================================================================== */

@media (max-width: 1279px) {
  .mega__summary {
    padding-block: var(--space-4);
    font-size: var(--fs-h4);
    font-weight: 600;
    justify-content: space-between;
  }

  /* Indented and quieter than the section rows above it, so the hierarchy is
     obvious without a border for every item. */
  .mega__panel {
    padding-block: 0 var(--space-4);
    padding-inline-start: var(--space-3);
  }

  .mega__grid {
    gap: var(--space-4);
  }

  .mega__heading {
    margin-block: var(--space-3) var(--space-2);
  }

  .mega__col ul {
    gap: 0;
  }

  .mega__col a:not(.btn) {
    /* 44px touch target, per the accessibility floor. Buttons excluded for
       the same specificity reason as the desktop rule above. */
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding-block: var(--space-2);
    font-size: var(--fs-small);
  }

  /* The drawer draws a divider between top-level rows. Nested links must not
     inherit it or every specialty gets a rule. */
  .mega__col li + li {
    border-block-start: 0;
  }

  .mega__col--feature {
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border);
  }

  .mega__col--feature .btn {
    inline-size: 100%;
  }
}


/* --- Plain nav links must match the dropdown rows -------------------------- */
/* "Specialties" is a direct link, not a <details>, so it was inheriting the
   drawer's generic link padding and sat a few pixels above the <summary>
   rows either side of it — the one item on the bar that looked misaligned.
   It now uses the same box as .mega__summary, minus the chevron. */

.site-nav__link {
  display: flex;
  align-items: center;
  padding-block: var(--space-2);
  font-weight: 600;
  text-decoration: none;
}

@media (min-width: 1280px) {
  /* The drawer rule gives every nav anchor a transparent bottom border and
     block display; on the bar that reintroduces the offset. */
  .site-nav__list .site-nav__link {
    display: flex;
    padding-block: var(--space-2);
    border-block-end: 0;
  }
}

/* The mega-menu summaries were the only top-level nav entries with no active
   state, so on a treatment, doctor, hospital or service page nothing in the
   header showed where the visitor was. Matches the underline the plain links
   already use, so the two read as one system rather than two. */
/* THE PAGE YOU ARE ON. Accent underline plus the primary ink, and this
   combination is used for NOTHING else in the bar. */
.mega__summary.is-current {
  color: var(--color-primary);
  border-block-end-color: var(--color-accent);
}

/* HOVER AND OPEN ARE NOT ACTIVE, AND MUST NOT LOOK LIKE IT.

   They did. A hovered or open summary was given the same accent underline as
   the current section, so on a specialty page the header showed "Specialties"
   underlined because it IS the section and "Treatments" underlined because the
   pointer happened to be over it — three things reading as current at once, and
   no way to tell which one the page actually was. Reported by the client
   2026-08-07 with a screenshot; the defect was introduced the same day.

   Hover now gets a NEUTRAL underline and no colour change. It says "this
   responds to the pointer", which is all it should ever have said. */
.mega__summary:hover,
.mega[open] > .mega__summary {
  border-block-end-color: var(--color-border);
}

/* …and the current section keeps its accent even while its own panel is open,
   because the rule above would otherwise overwrite it at equal specificity. */
.mega[open] > .mega__summary.is-current {
  border-block-end-color: var(--color-accent);
}

/* The entry inside a panel that IS the page you are on.

   Without this the open panel showed thirteen identical links with no clue
   which one you were already reading — worst on mobile, where the panel fills
   the screen and the page heading is scrolled away behind it. */
.mega__panel a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}

/* A marker rather than colour alone: colour is not information for anyone who
   cannot distinguish it, and this is the one cue telling a visitor where they
   are. `border-inline-start` so it sits on the correct side in Arabic. */
.mega__panel a[aria-current="page"]::before {
  content: '';
  display: inline-block;
  inline-size: 3px;
  block-size: 1em;
  margin-inline-end: 8px;
  border-radius: 2px;
  background: var(--color-accent);
  vertical-align: -0.15em;
}


/* ==========================================================================
   Header search

   <details>/<summary>, exactly like the mega-menus, so it works with no
   script. The toggle matches the collapsed phone target — same 44px box,
   same border, same radius — so the actions cluster reads as one family.
   ========================================================================== */

.site-search {
  position: relative;
}

.site-search__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

/* Safari renders a disclosure marker on any summary unless told not to. */
.site-search__toggle::-webkit-details-marker {
  display: none;
}

.site-search__toggle:hover,
.site-search[open] > .site-search__toggle {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.site-search__icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.site-search__form {
  display: flex;
  gap: var(--space-2);
}

.site-search__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.site-search__input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* On the bar, the panel floats below the toggle like a mega panel — aligned
   to the inline-end edge so it grows toward the page, never off-screen. */
@media (min-width: 1280px) {
  /* Icon-only on the bar; the aria-label carries the accessible name. */
  .site-search__toggle-label {
    display: none;
  }

  .site-search__panel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + 10px);
    width: min(360px, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    z-index: 30;
  }
}

/* In the drawer the panel is in flow, full width, above the other actions. */
@media (max-width: 1279px) {
  .site-search__toggle {
    width: 100%;
    min-height: 44px;
    height: auto;
    justify-content: flex-start;
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }

  .site-search__toggle-label {
    color: var(--color-text);
    font-size: var(--fs-small);
    font-weight: 600;
  }

  .site-search__panel {
    padding-block: var(--space-3);
  }
}