/* Round 14 (chrome): see D:/elite-tmp/r14/brief.md.
   1. The two-line logo trial (header, phone header, footer).
   2. The section row under the header (inc/navigation.php).
   3. The phone and tablet menu (template-parts/components/mega-drawer.php).
   4. The footer address link.
   5. The shared inner hero: tablets, and the phone's navigation layers. */

/* --------------------------------------------------- 1. two-line logo ---
   The two-line artwork is about six times as wide as it is tall, so it is
   sized by width (brand.php adds .brand--wide only for such artwork; the
   stacked logo, media 853, keeps the sizes above it in the cascade). The
   phone widths leave at least 10px between the logo and Call at every width
   from 320px (tools/r13_home_11.js). */
body .site-header .brand.brand--wide img.brand__logo { display: block; width: 270px; height: auto; max-width: none; }

@media (min-width: 80rem) {
  body .site-header .brand.brand--wide img.brand__logo { width: 300px; }
}

@media (max-width: 63.99rem) {
  body .site-header .brand.brand--wide img.brand__logo { width: 132px; }
}
@media (min-width: 23.4375rem) and (max-width: 63.99rem) {
  body .site-header .brand.brand--wide img.brand__logo { width: 138px; }
}
@media (min-width: 24.375rem) and (max-width: 63.99rem) {
  body .site-header .brand.brand--wide img.brand__logo { width: 150px; }
}
@media (min-width: 25.875rem) and (max-width: 63.99rem) {
  body .site-header .brand.brand--wide img.brand__logo { width: 168px; }
}
@media (min-width: 37.5rem) and (max-width: 63.99rem) {
  body .site-header .brand.brand--wide img.brand__logo { width: 236px; }
}

/* The footer: the reversed two-line artwork on the ink. */
body .site-footer .brand.brand--wide img.brand__logo { display: block; width: 272px; max-width: 100%; height: auto; }
@media (max-width: 23.4375rem) {
  body .site-footer .brand.brand--wide img.brand__logo { width: 248px; }
}

/* --------------------------------------------------- 2. section row ---
   The pages of the section being viewed (Why Elite: About the Practice,
   Technology, Reviews, Areas We Serve), as tabs on a white strip under the
   header. The strip scrolls away with the page; the header stays. The page
   being viewed is purple with a bar under it. */
.secnav { position: relative; z-index: 30; background: #fff; border-bottom: 1px solid var(--line); }
.secnav__in { display: flex; align-items: center; gap: 0; min-height: 3.25rem; }
.secnav__label {
  flex: none; display: flex; align-items: center; gap: 1.25rem; margin: 0 1.1rem 0 0;
  font-family: var(--text); font-size: 0.74rem; font-weight: 700; line-height: 1; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ortho); white-space: nowrap;
}
.secnav__label::after { content: ""; flex: none; width: 1px; height: 1.25rem; background: var(--line); }
.secnav__list {
  position: relative; display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; gap: 0 0.15rem;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.secnav__list::-webkit-scrollbar { display: none; }
.secnav__list > li { flex: none; display: flex; margin: 0; padding: 0; }
.secnav__list > li::before, .secnav__list > li::marker { content: none; }
.secnav__link {
  position: relative; display: flex; align-items: center; min-height: 3.25rem; padding: 0 0.8rem;
  font-family: var(--text); font-size: 0.92rem; font-weight: 600; line-height: 1.2; letter-spacing: 0;
  color: var(--body); white-space: nowrap; text-decoration: none;
}
.secnav__link::after {
  content: ""; position: absolute; right: 0.8rem; bottom: 0; left: 0.8rem; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--ortho); transform: scaleX(0); transform-origin: 50% 100%; transition: transform 0.2s ease, opacity 0.2s ease;
}
.secnav__link:hover { color: var(--ink); }
.secnav__link:hover::after { transform: scaleX(1); opacity: 0.3; }
.secnav__link[aria-current] { color: var(--ortho); }
.secnav__link[aria-current]::after { transform: scaleX(1); opacity: 1; }
.secnav__link:focus-visible { outline: 2px solid var(--ortho); outline-offset: -6px; border-radius: 10px; }

/* Phones: the tabs alone, edge to edge, in one row that scrolls sideways;
   the row fades at an edge while tabs are hidden past it (site.js). The
   hidden name still names the row for screen readers (aria-labelledby reads
   a hidden element's text). */
@media (max-width: 47.99rem) {
  .secnav__in { padding-inline: 0; min-height: 3rem; }
  .secnav__label { display: none; }
  .secnav__list { padding-inline: calc(var(--gut) - 0.7rem); scroll-padding-inline: var(--gut); }
  .secnav__link { min-height: 3rem; padding: 0 0.7rem; font-size: 0.9rem; }
  .secnav__link::after { right: 0.7rem; left: 0.7rem; }
  .secnav__list.is-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent); }
  .secnav__list.is-more-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.75rem); mask-image: linear-gradient(to right, transparent, #000 2.75rem); }
  .secnav__list.is-more-start.is-more-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2.75rem, #000 calc(100% - 2.75rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 2.75rem, #000 calc(100% - 2.75rem), transparent);
  }
}
@media (min-width: 37.5rem) and (max-width: 47.99rem) {
  .secnav__link { padding: 0 0.6rem; }
  .secnav__link::after { right: 0.6rem; left: 0.6rem; }
  .secnav__list { padding-inline: calc(var(--gut) - 0.6rem); }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .secnav__label { gap: 1rem; margin-right: 0.6rem; }
  .secnav__link { padding: 0 0.6rem; font-size: 0.9rem; }
  .secnav__link::after { right: 0.6rem; left: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .secnav__link::after { transition: none; }
}

/* The heroes fill the first view below the page's chrome (--chrome-h,
   revision-5.css); with the row under the header, the chrome is that much
   taller, so the hero and its photograph still end inside the first view. */
body.has-secnav { --chrome-h: calc(61px + 3rem + 1px); }
@media (min-width: 48rem) {
  body.has-secnav { --chrome-h: calc(61px + 3.25rem + 1px); }
}
@media (min-width: 64rem) {
  body.has-secnav { --chrome-h: calc(127px + 3.25rem + 1px); }
}
@media print {
  .secnav { display: none; }
}

/* ------------------------------------------- 3. phone and tablet menu ---
   Round 14: the top row keeps Call and Directions beside the close button;
   every group has a round chevron; the two booking buttons close the list. */
@media (max-width: 63.99rem) {
  .dnav .dnav__head { gap: 0.75rem; }
  .dnav__quick { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
  .dnav__q {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1rem 0 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; background: rgba(255, 255, 255, 0.08);
    font-family: var(--text); font-size: 0.95rem; font-weight: 600; line-height: 1; color: #fff; text-decoration: none; white-space: nowrap;
  }
  .dnav__q svg { flex: none; width: 19px; height: 19px; color: var(--cyan, #3aecf1); }
  .dnav__q:hover, .dnav__q:active { background: rgba(255, 255, 255, 0.16); color: #fff; }
  .dnav .dnav__close { flex: none; min-width: 44px; min-height: 44px; border-radius: 50%; }
  .dnav .dnav__close:hover { background: rgba(255, 255, 255, 0.1); }

  /* A group: its name, and a round chevron that turns when it opens. */
  body.mh2 .dnav__toggle { min-height: 56px; gap: 1rem; }
  .dnav__t { min-width: 0; }
  .dnav__chevwrap {
    flex: none; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; margin-right: 0.1rem;
    border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 50%; color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .dnav__chevwrap .dnav__chev { width: 12px; height: 12px; margin: 0; }
  .dnav__toggle[aria-expanded="true"] .dnav__chevwrap { border-color: #fff; background: #fff; color: var(--ortho); }
  body.mh2 .dnav__group.current-menu-ancestor > .dnav__toggle .dnav__chevwrap { border-color: var(--cyan, #3aecf1); }
  body.mh2 .dnav__group.current-menu-ancestor > .dnav__toggle[aria-expanded="true"] .dnav__chevwrap { background: var(--cyan, #3aecf1); color: var(--ortho); }

  /* The doctors, with their photographs. */
  .dnav-link__face { overflow: hidden; border-radius: 50%; }
  body.mh2 .dnav-link__face { background: rgba(255, 255, 255, 0.14); }
  .dnav-link__face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
  .dnav-link__initial { font-weight: 700; font-size: 0.85rem; }
  body.mh2 .dnav-link[aria-current] .dnav-link__face { background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 2px var(--cyan, #3aecf1); }

  /* The booking buttons: short labels, one line each. */
  .dnav .dnav__books { gap: 0.6rem; margin-top: 1.5rem; }
  .dnav__books .btn.btn--stacked.btn--stacked { justify-content: center; min-height: 54px; padding: 0.6rem 0.9rem; font-size: 0.98rem; text-align: center; }
  .dnav__books .btn.btn--stacked .btn__wrap { justify-content: center; }
}
@media (max-width: 23.4375rem) {
  .dnav__books .btn.btn--stacked.btn--stacked { padding-inline: 0.75rem; font-size: 0.94rem; }
}
/* Side by side once both labels fit on one line each. */
@media (min-width: 44rem) and (max-width: 63.99rem) {
  .dnav .dnav__books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .dnav__chevwrap { transition: none; }
}

/* ---------------------------------------------- 4. footer address link --- */
.site-footer .footer__addr { color: inherit; text-decoration: none; }
.site-footer .footer__addr:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.site-footer .footer__addr:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

/* The office card in the Why Elite panel: the address links to Google Maps too. */
.mega-card__addr { color: inherit; text-decoration: none; }
.mega-card__addr:hover { color: var(--ortho); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ------------------------------------------------- 5. shared inner hero ---
   Tablets (48 to 64rem, round 14 review P11): the hero no longer stretches
   to the height of the screen. On a portrait tablet that left about 150px of
   empty band above the breadcrumb and below the photo; the hero now takes
   its content's height with an even margin above and below (plus room for
   the upper half of the facts strip). The team wall (r10-people.css), the
   compact heroes and the not-found page keep their own spacing. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  body.premium-inner .ihero:not(.ihero--compact, .teamshot, .nf-hero),
  body.premium-inner .ihero:not(.ihero--compact, .teamshot, .nf-hero):has(+ .wrap > .facts) {
    min-height: 0; padding-top: clamp(2.25rem, 5vw, 3rem); padding-bottom: clamp(2.25rem, 5vw, 3rem);
  }
  body.premium-inner .ihero:not(.ihero--compact, .teamshot, .nf-hero):has(+ .wrap > .facts) {
    padding-bottom: calc(clamp(2.25rem, 5vw, 3rem) + var(--facts-h) / 2);
  }
}

/* Phones (round 14 review CHR-6): where the section row is shown, it already
   lists the section's pages and marks this one, and the breadcrumb under it
   gives the way back (and matches the BreadcrumbList data). The hero's three
   full-width "jump" buttons were a third layer of navigation in the first
   screen, so a phone leaves them out; the sections they pointed to follow
   right below. Tablets and desktops keep them. Without them the hero is
   shorter: it ends so that the whole facts strip is in the first view,
   rather than leaving an empty band around the photograph. */
@media (max-width: 47.99rem) {
  body.has-secnav .ihero .ihero__jumps { display: none; }
  :root body.premium-inner.has-secnav .ihero:not(.ihero--compact):has(> .wrap > .ihero__in > .ihero__visual):has(> .wrap > .ihero__in > .ihero__copy > .ihero__jumps):has(+ .wrap > .facts) {
    min-height: calc(100vh - var(--chrome-h) - var(--facts-h) / 2);
    min-height: calc(100svh - var(--chrome-h) - var(--facts-h) / 2);
  }
}