/* ============================================================================
   SaraPath — MEGA NAVIGATION + CEMENT TEXTURE
   The panels are cement slabs that drop out from under the parapet: textured
   stucco ground, hard cast shadow, mullion-ruled columns. Content is built in
   js/nav.js from the same data the page uses, so the menu shows the real
   scope of the site — all eleven pathologists, every specialty, every PDF.
   ============================================================================ */

/* --------------------------------------------------------- cement surface --
   A photographed white wall from the stock pass, mirror-tiled to 512px so it
   repeats seamlessly. This replaces the drawn fractal-noise stucco: the white
   planes now carry a real surface, the way the building's walls do. */
:root { --tex-stucco: none; }

/* The photographed wall tooth read as noise once type sat on it, so the white
   planes are clean now. Their surface comes from --sheen-light alone: a
   highlight falling off the top edge and weight gathering at the bottom. */
.cement-tex { background-image: var(--sheen-light); }

/* -------------------------------------------------------------- masthead --
   Both bars are one sticky unit pinned to the top: the dark utility rail and
   the white nav band never separate and never scroll away. Both are bound to
   the same frame and the same right edge, so the two rows grid together. */
.masthead {
  position: sticky; top: 0; z-index: var(--z-header);
  box-shadow: var(--soffit-shadow);
}
.masthead .hdr { position: relative; box-shadow: none; }
/* A left gutter so the phone number and the wordmark are not jammed against the
   frame edge (client 2026-09-04). The right stays flush — the coloured end bays
   (Pay Bill, Become a Client) are meant to run to the edge. */
.masthead .util .wrap,
.masthead .hdr__in {
  max-width: var(--frame-max); margin-inline: auto;
  padding-inline: var(--layout-gutter) 0;
}

/* ---------------------------------------------------------------- the nav */
/* NOT positioned. `.mega` is `position: absolute; left: 0; right: 0`, so its
   containing block has to stay `.hdr` — the moment `.nav` was made relative
   the panels sized themselves to the nav instead of the header and every
   column got squeezed. The travelling pane lives in `.hdr` for this reason. */
.nav { display: flex; align-items: stretch; margin-left: auto;
       flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.nav__item { display: flex; align-items: stretch; min-width: 0; }
/* The drawer-only quick-links block; the desktop rail already carries these. */
.nav__quick { display: none; }

.nav__link {
  display: flex; align-items: center; justify-content: center;
  /* wrapped lines must pack, not spread: without align-content the two words
     get pushed to the top and bottom of the bay */
  flex-wrap: wrap; align-content: center;
  column-gap: 0; row-gap: 0;
  flex: 0 1 auto; min-width: 0;
  padding-inline: clamp(16px, 2.6vw, 34px);
  background: none; border: 0; cursor: pointer;
  /* Lighter (client 2026-09-04): medium weight, and no bay dividers — the
     labels sit on the band instead of in a row of boxes. The travelling glaze
     pane still shows which bay is live. */
  font-family: var(--font-body); font-size: var(--fs-xs);
  font-weight: var(--fw-med); text-transform: uppercase;
  letter-spacing: var(--ls-nav); white-space: nowrap;
  color: var(--c-ink-soft);
  border-left: 0;
  position: relative;
  isolation: isolate;
  transition: color var(--dur-glaze) var(--ease-glaze);
}
/* ONE PANE OF GLASS, AND IT TRAVELS.

   Every bay having its own glaze meant moving between two of them cross-faded
   one out while the other came in — and for those few frames both were
   half-transparent, so the white band flashed through the middle of the
   header. Fading a thing out and another in, in the same place, at the same
   time, always does this.

   So there is exactly one glazed pane for the whole band. It slides to
   whichever bay you are on and resizes to fit it. Nothing ever fades through
   to the ground underneath, because the pane is opaque the entire time it is
   moving — the only fade left is at the ends of the run, where it comes in
   from nothing and goes back to nothing.

   It is a child of `.hdr`, not of `.nav`, because `.nav` may not be a
   positioned element (see above). `js/nav.js` places it against the header's
   own box; it is `aria-hidden` and takes no clicks. */
.hdr__glaze {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 0;
  width: 0; pointer-events: none;
  background-color: var(--c-brand-navy);
  background-image:
    radial-gradient(130% 100% at 20% -20%, rgba(160,205,255,.34), rgba(160,205,255,0) 60%),
    linear-gradient(178deg, rgba(120,165,225,.24) 0%, rgba(0,8,28,.40) 100%);
  box-shadow:
    inset 0 1px 0 rgba(190,220,255,.34),
    inset 0 0 0 1px rgba(150,195,255,.14),
    inset 0 -2px 0 rgba(0,8,26,.62),
    inset 0 -18px 22px -20px rgba(0,6,22,.70);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition:
    transform .34s var(--ease-glaze),
    width     .34s var(--ease-glaze),
    opacity   .20s var(--ease-glaze);
}
/* Arriving and leaving fade; travelling does not. */
.hdr__glaze.is-lit { opacity: 1; }

/* The pane has to be in place before it is allowed to animate, or it flies in
   from the left edge on the first hover. */
.hdr__glaze--placing { transition: none; }

.nav__label {
  position: relative; z-index: 1;
  display: flex; flex-wrap: inherit; align-items: center; justify-content: center;
}

/* The label of whichever bay the pane is under. Desktop only — in the drawer
   there is no pane and the open row styles itself (css/responsive.css). */
@media (min-width: 1101px) {
  .nav__link.is-lit { color: var(--c-white); }
}
@media (max-width: 1100px) {
  .hdr__glaze { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hdr__glaze { transition: opacity .01ms; }
}
.nav__link[aria-current="page"] { background: var(--c-cement-2); color: var(--c-brand-navy); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--line-fin); background: var(--c-gold-3);
}
/* The wordmark carries no page marker — a rule under it lands right above the
   header's own bottom border and the two read as one doubled line. */
.wordmark--current { position: relative; }

/* Forces a line break inside a flex button. A zero-height item at full width
   pushes what follows onto the next flex line; display:block would only make
   a zero-width flex item and open a gap instead. */
.lb { flex: 0 0 100%; width: 100%; height: 0; }

/* The caret rests pointing up and flips down on approach or when its panel
   opens. Hover is gated to pointer devices so a tap does not leave it stuck.

   The band wraps — that is how "Become / a Client" breaks over two lines — so
   a menu bay has to opt out of it explicitly, or its caret wraps under the
   label the moment the label is the widest thing on the line. */
.nav__link--has-menu { flex-wrap: nowrap; }
/* descendant, not child: the caret sits inside `.nav__label` now, which is
   what rides above the glaze layer */
.nav__label .nav__caret { margin-left: 9px; }
.nav__caret {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(1px) rotate(225deg);
  transition: transform var(--dur-glaze) var(--ease-glaze);
}
.nav__link.is-lit .nav__caret,
.nav__link[aria-expanded="true"] .nav__caret { transform: translateY(-2px) rotate(45deg); }

/* Become a Client closes the right end of the band. Pay a Bill used to sit
   beside it; it moved to the utility rail so the five bays are not fighting
   two coloured slabs for the same 1200px. */
.nav__end { display: flex; align-items: stretch; flex: 0 0 auto; }
.nav__cta {
  background-color: var(--c-gold-3);
  background-image:
    radial-gradient(130% 100% at 22% -20%, rgba(255,250,238,.44), rgba(255,250,238,0) 60%),
    linear-gradient(178deg, rgba(255,248,236,.26) 0%, rgba(110,84,44,.26) 100%);
  color: var(--c-white);
  box-shadow:
    inset 0 1px 0 rgba(255,250,236,.55),
    inset 0 -2px 0 rgba(84,60,26,.50),
    inset 0 -18px 22px -20px rgba(70,50,22,.55),
    0 8px 16px -10px rgba(60,42,18,.50);
  border-left-color: var(--c-gold-5);
  transition: background-color var(--dur-glaze) var(--ease-glaze);
  padding-inline: clamp(18px, 2.6vw, 36px);
  text-align: center;
}
/* One line now (client 2026-09-04: "Become a Client" on a single line). */
.nav__cta { line-height: 1.2; white-space: nowrap; }
/* the gold bay is lit already — its own glaze layer stays off */
.nav__cta::before { content: none; }
@media (hover: hover) {
  .nav__cta:hover { background-color: var(--c-gold-2); color: var(--c-white); }
}

/* The navy Downloads slab that sat here from 2026-09-10 is gone. Client
   2026-09-11: "make it part of normal nav, white with caret" — Downloads is
   the fifth bay in `PANELS` (js/nav.js) and takes the plain bay styling above,
   caret and glazed pane included. `.nav__end` now carries the one gold action
   and nothing else. */

/* ------------------------------------------------------------- the panels */
/* Every panel hinges from the same line — the underside of the header band —
   and spans the full width, so the column rules land in identical x positions
   whichever tab you open. Opening is a fade, never a jump. */
/* Light. White ground, one hairline at the head, one gold reveal at the foot,
   and a soft shadow — no navy slab across the bottom and no cast heavy enough
   to read as a second header. */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 5;
  background-color: var(--c-white);
  background-image:
    radial-gradient(90% 60% at 50% -10%, rgba(255,255,255,1), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 62%, #F2F5F8 100%);
  border-top: var(--line-hair) solid var(--c-cement-3);
  border-bottom: var(--line-fin) solid var(--c-brand-gold);
  box-shadow:
    inset 0 12px 20px -14px rgba(16, 25, 42, .40),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(16, 25, 42, .10),
    0 26px 48px -26px rgba(16, 25, 42, .42);
  text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur-glaze) var(--ease-glaze),
              transform var(--dur-glaze) var(--ease-glaze),
              visibility 0s linear var(--dur-glaze);
}
/* A direct panel-to-panel swap does not animate — see `open()` in js/nav.js. */
.nav.is-swapping .mega { transition: none; }

.mega.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-glaze) var(--ease-glaze),
              transform var(--dur-glaze) var(--ease-glaze),
              visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mega, .mega.is-open { transition: opacity .01ms, visibility 0s; transform: none; }
}
.mega a, .mega span, .mega ul, .mega li { text-align: left; }
.mega__in {
  max-width: var(--frame-max); margin-inline: auto;
  padding: var(--sp-8) var(--layout-gutter) var(--sp-7);
}
/* Four equal bays, every panel, every time. Separated by air rather than by
   rules — the columns used to be butted on hairlines and the whole panel read
   as a table. minmax(0,·) so a long form title can never push a bay wider. */
.mega__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 64px);
  align-items: start;
}
.mega__col {
  background: none; padding: 0; border: 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
  min-width: 0;
}

/* Heads always occupy one line, even when a column continues the previous
   one, so every column's first row sits on the same baseline. */
.mega__h {
  display: block;
  font-size: var(--fs-xs); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-4);
  height: 1.35em; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-brand-gold);
  box-shadow: 0 3px 0 var(--c-cement-2);
}
/* No bullets. A link is a line of text with room around it; the marker was
   the last thing making these columns feel like a directory listing. */
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; }
.mega__list a {
  display: block; position: relative;
  padding: 10px 0;
  font-size: var(--fs-sm); font-weight: var(--fw-med);
  color: var(--c-ink-soft); line-height: 1.4;
  white-space: normal; text-transform: none; letter-spacing: 0;
  border-bottom: var(--line-hair) solid transparent;
}
.mega__list a:hover { color: var(--c-brand-navy); border-bottom-color: var(--c-gold-2); }

.mega__more {
  display: inline-block; margin-top: var(--sp-3);
  font-size: var(--fs-2xs); font-weight: var(--fw-black);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  color: var(--c-gold-4);
}
.mega__more:hover { color: var(--c-brand-navy); }

/* the roster grid — a square portrait per pathologist */
.mega__roster { display: grid; grid-template-columns: 1fr; gap: 2px; align-content: start; }
.mega__doc-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 8px 8px 0; min-width: 0; min-height: 84px;
  border-left: 0;
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.mega__doc-card:hover { background: transparent; }
.mega__portrait {
  flex: 0 0 62px; width: 62px;
  border: 2px solid var(--c-white);
  box-shadow: var(--cast-1);
}
.mega__doc-id { min-width: 0; display: flex; flex-direction: column; }
.mega__doc-nm {
  font-family: var(--font-display); font-size: var(--fs-sm);
  font-weight: var(--fw-bold); color: var(--c-brand-navy); line-height: 1.2;
  text-transform: none; letter-spacing: 0; white-space: normal;
}
.mega__doc-fx {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--c-muted);
  letter-spacing: .02em; text-transform: none;
  line-height: 1.35; white-space: normal;
}

/* PDF rows */
.mega__doc {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: var(--line-hair) solid var(--c-cement-2);
}
.mega__doc:last-child { border-bottom: 0; }
.mega__doc-ico { flex: 0 0 auto; display: block; }
.mega__doc-name { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-brand-navy); line-height: 1.25; text-transform: none; letter-spacing: 0; }
.mega__doc-meta { display: block; font-size: var(--fs-2xs); color: var(--c-muted); }
.mega__doc:hover .mega__doc-ico { background: var(--c-gold-3); }

/* jobs + news inside a panel */
.mega__jobs, .mega__newslist { display: grid; gap: var(--sp-2); min-width: 0; }
.mega__job, .mega__news {
  display: block; min-width: 0; padding: var(--sp-4) var(--sp-5);
  background: var(--c-gold-wash);
  border-left: var(--line-fin) solid var(--c-gold-2);
  transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.mega__job:hover, .mega__news:hover { border-left-color: var(--c-brand-gold); background: #F6EFE2; }
.mega__job-title, .mega__news-title {
  display: block; font-family: var(--font-display); font-size: var(--fs-sm);
  font-weight: var(--fw-bold); color: var(--c-brand-navy); line-height: 1.25;
  text-transform: none; letter-spacing: 0; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mega__job-meta, .mega__news-date { display: block; font-size: var(--fs-label); color: var(--c-muted); text-transform: none; letter-spacing: 0; white-space: normal; }
.mega__news-tag {
  display: block; font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-gold-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The strip that closes every panel. One line, one action, full frame width,
   on the gold wash — the same shape in all four panels. */
.mega__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
  margin-top: var(--sp-7);
  padding: var(--sp-6) var(--sp-7);
  background-image:
    radial-gradient(110% 90% at 14% -20%, rgba(255,255,255,.9), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #FCF9F3 0%, #F5EEE2 100%);
  border-top: var(--line-hair) solid var(--c-gold-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              inset 0 -1px 0 rgba(110,88,54,.10),
              0 1px 2px rgba(16,25,42,.06);
}
.mega__foot-txt {
  font-size: var(--fs-sm); font-weight: var(--fw-med);
  color: var(--c-ink-soft); line-height: 1.45;
  text-transform: none; letter-spacing: 0;
}
.mega__foot-cta { flex: none; }

.mega__btn {
  display: inline-block; margin-top: var(--sp-4); align-self: flex-start;
  background: var(--c-brand-navy); color: var(--c-white);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-2xs); font-weight: var(--fw-black);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  box-shadow: var(--cast-1);
}
.mega__btn:hover { background: var(--c-glass-2); color: var(--c-white); }

/* ------------------------------------------------------------- responsive */
/* Four columns all the way down to the drawer (1101px). Two-by-two ran
   every panel 1,030px deep at 1200px, taller than the screen (Steve
   2026-09-25: "aired out"). Narrower bays, tighter air instead. */
@media (max-width: 1240px) {
  .mega__grid { gap: var(--sp-5); }
  .mega__in { padding-top: var(--sp-6); padding-bottom: var(--sp-5); }
}
@media (max-width: 1100px) {
  .nav.is-open { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; }
  .nav__item { flex-direction: column; }
  .nav__link { justify-content: flex-start; border-left: 0; border-top: var(--line-hair) solid var(--c-cement-3); padding: var(--sp-4) var(--layout-gutter); }
  .nav__end { margin-left: 0; flex-direction: column; align-items: stretch; }
  .mega { position: static; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; display: none; }
  .mega.is-open { display: block; }
  .mega__in { padding: var(--sp-5) var(--layout-gutter); }
  .mega__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .mega__col { border-left: 0; }

}

/* ============================================================================
   DROPDOWN ROLLOVERS
   Every element inside a panel answers to the pointer, in the same language as
   the rest of the site: a quiet ground shift, the gold accent arriving, and a
   small nudge along the reading direction.
   ============================================================================ */

/* list links — the label steps in and the rule under it arrives in gold.

   NEVER ANIMATE A PROPERTY THAT CHANGES LAYOUT. This used to move on
   `padding-left`, which narrows the text box: a two-line label rewrapped to
   three on approach, the column grew, and every row under it jumped. Movement
   is `transform` — it paints, it does not reflow. */
.mega__list a {
  transition: color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.mega__list a:hover { transform: translateX(6px); }

/* pathologist cards — portrait lifts, rule turns gold */
.mega__doc-card { transition: background var(--dur-hover) var(--ease),
                              border-color var(--dur-hover) var(--ease); }
.mega__portrait { transition: transform var(--dur-hover) var(--ease),
                              box-shadow var(--dur-hover) var(--ease); }
.mega__doc-card:hover .mega__portrait { transform: translateY(-2px); box-shadow: var(--cast-2); }
.mega__doc-nm { transition: color var(--dur-hover) var(--ease); }
.mega__doc-card:hover .mega__doc-nm { color: var(--c-glass-2); }

/* PDF rows — the sheet lifts off the stack and the title warms.

   Same rule as above: this moved on `padding-left` and a three-line title
   ("IHC & Hematopathology Brochure") rewrapped on approach, shunting every
   row below it. The row now holds a fixed box and the reveal is drawn with an
   inset shadow, which costs no layout at all. */
.mega__doc {
  transition: background-color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease);
  padding-inline: var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  box-shadow: inset 0 0 0 rgba(186,151,101,0);
}
.mega__doc:hover {
  background-color: var(--c-gold-wash);
  box-shadow: inset 3px 0 0 var(--c-brand-gold);
}
.mega__doc .pdf-ico { transition: transform var(--dur-hover) var(--ease), filter var(--dur-hover) var(--ease); }
.mega__doc:hover .pdf-ico { transform: translateY(-2px) rotate(-2deg); filter: drop-shadow(0 3px 5px rgba(16,25,42,.22)); }
.mega__doc-name { transition: color var(--dur-hover) var(--ease); }
.mega__doc:hover .mega__doc-name { color: var(--c-glass-2); }

/* job + news blocks — the left reveal grows and the block eases right */
.mega__job, .mega__news {
  transition: background var(--dur-hover) var(--ease),
              border-left-color var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.mega__job:hover, .mega__news:hover { transform: translateX(3px); }
.mega__job-title, .mega__news-title { transition: color var(--dur-hover) var(--ease); }
.mega__job:hover .mega__job-title,
.mega__news:hover .mega__news-title { color: var(--c-glass-2); }

/* the closing strip — its action is a button and behaves like one */
.mega__foot-cta { transition: transform var(--dur-hover) var(--ease); }
.mega__foot:hover .mega__foot-cta { transform: translateX(2px); }

/* the in-panel button */
.mega__btn { transition: background var(--dur-hover) var(--ease),
                         transform var(--dur-hover) var(--ease),
                         box-shadow var(--dur-hover) var(--ease); }
.mega__btn:hover { transform: translateY(-2px); box-shadow: var(--cast-2); }

@media (prefers-reduced-motion: reduce) {
  .mega__list a:hover { transform: none; }
  .mega__doc:hover, .mega__job:hover, .mega__news:hover,
  .mega__btn:hover, .mega__foot:hover .mega__foot-cta { transform: none; }
  .mega__doc-card:hover .mega__portrait,
  .mega__doc:hover .pdf-ico { transform: none; }
}

/* ============================================================================
   CALL THE PRACTICE — PHONE ONLY
   The number sits in the utility rail, once, with a handset beside it. On a
   phone the rail scrolls away, so this button stays in the sticky white band
   as the handset alone, the same size and weight as Menu; the number goes to
   the accessible name. Above 1100px it is not drawn at all — the band spends
   its whole width on the five bays.
   ============================================================================ */
.hdr__call { display: none; }
.hdr__call-ico { width: 19px; height: 19px; flex: none; fill: var(--c-green-1);
  transition: fill var(--dur-hover) var(--ease); }
.hdr__call-num { display: none; }