/* ==========================================================================
   od-nav - one structure, several header layouts
   Paste into WPCodeBox2 as CSS, or ship it in the theme.

   The same <ul> tree serves desktop and mobile. Nothing below changes the
   markup; a layout is chosen with a modifier on .od-nav, so adding an option
   later means adding a block of CSS, not another walker.

   Reads the theme's own --od-* tokens, with fallbacks so it renders correctly
   even where those are not loaded.
   ========================================================================== */

.od-nav,
.od-nav *,
.od-nav *::before,
.od-nav *::after { box-sizing: border-box; }

.od-nav {
  --odn-gap:      18px;
  --odn-panel:    var(--od-surface-raised, #fff);
  --odn-ink:      var(--od-text-on-hero, #fff);
  --odn-panel-ink:var(--od-text-primary, #303030);
  --odn-accent:   var(--od-text-link, #0077A3);
  --odn-hover:    var(--od-surface-sunken, #f4f1ec);
  --odn-radius:   10px;
  --odn-hit:      44px;
  position: relative;
}

.od-nav__list,
.od-nav__sub { margin: 0; padding: 0; list-style: none; }
.od-nav__item { position: relative; margin: 0; }

.od-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--odn-hit);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  /* Animate colors only; visibility changes must leave links ready for focus. */
  transition: color .16s ease, background-color .16s ease;
}
.od-nav__link:hover { color: var(--odn-accent); }
/* WordPress supplies the current page and its ancestor trail. Style only
   their own controls so the accent does not spread to inactive children. */
.od-nav .od-nav__item:is(.od-nav__item--current, .od-nav__item--ancestor) > :is(.od-nav__link, .od-nav__toggle) {
  color: var(--odn-accent);
}
.od-nav :is(.od-nav__item--current, .od-nav__item--ancestor) > .od-nav__link {
  text-decoration: none;
  font-weight: 600;
}
.od-nav .od-nav__sub .od-nav__item--current > .od-nav__link {
  margin-inline: 6px;
  padding-inline: 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--odn-accent) 10%, transparent);
}

/* The toggle is a sibling of the link, never a wrapper: the parent item has to
   stay clickable as a destination in its own right. */
.od-nav__toggle {
  display: inline-grid;
  place-items: center;
  width: var(--odn-hit);
  height: var(--odn-hit);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.od-nav__chev {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.od-nav__toggle[aria-expanded="true"] .od-nav__chev { transform: translateY(2px) rotate(-135deg); }
.od-nav__toggle:focus-visible,
.od-nav__link:focus-visible,
.od-nav__burger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Submenus are closed by default and opened by [aria-expanded] on the toggle,
   so the state lives in one attribute that assistive tech already reads. */
.od-nav__sub { display: none; }
.od-nav__item--parent > .od-nav__toggle[aria-expanded="true"] + .od-nav__sub { display: block; }

.od-nav__burger {
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: var(--odn-hit);
  padding: 0 .5rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.od-nav__burger-box {
  width: 20px; height: 2px;
  background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}

/* ==========================================================================
   DESKTOP PRESENTATION
   ========================================================================== */
@media (min-width: 1101px) {
  .od-nav--collapsed .od-nav__list { display: block; }
  .od-nav:not(.od-nav--collapsed) .od-nav__list { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--odn-gap); }
  /* Top-level toggles are compact; the 44px hit target is kept for the drawer. */
  .od-nav__list > .od-nav__item > .od-nav__toggle { width: 28px; height: var(--odn-hit); }

  .od-nav__sub {
    position: absolute;
    z-index: 60;
    top: 100%;
    left: 0;
    min-width: 250px;
    padding: .5rem 0;
    background: var(--odn-panel);
    color: var(--odn-panel-ink);
    border-radius: var(--odn-radius);
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
  }
  /* Menus near the right edge would otherwise overhang the viewport. */
  .od-nav__list > .od-nav__item:nth-last-child(-n+3) > .od-nav__sub { left: auto; right: 0; }

  /* Third level opens to the side, not further down. */
  .od-nav__sub .od-nav__sub { top: 0; left: 100%; }
  .od-nav__list > .od-nav__item:nth-last-child(-n+3) .od-nav__sub .od-nav__sub { left: auto; right: 100%; }

  .od-nav__sub .od-nav__item { display: flex; flex-wrap: wrap; align-items: center; }
  /* The link takes the remaining row, never the whole row: at width:100% it
     pushed a nested item's toggle onto its own line under the label. */
  .od-nav__sub .od-nav__link {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: .45rem 1rem;
    font-weight: 400;
  }
  .od-nav__sub .od-nav__link:hover { background: var(--odn-hover); }
  .od-nav__sub .od-nav__toggle { flex: 0 0 auto; width: 32px; height: 32px; margin-right: .25rem; }
  .od-nav__sub .od-nav__item--parent > .od-nav__sub { flex-basis: 100%; }

  /* No-script fallback only. With JavaScript, aria-expanded is authoritative:
     hover/focus CSS must not reopen a dropdown just closed with Escape. */
  @media (hover: hover) and (pointer: fine) {
    .od-nav:not(.od-nav--js):not(.od-nav--collapsed):not(.od-nav--drawer) .od-nav__item--parent:hover > .od-nav__sub,
    .od-nav:not(.od-nav--js):not(.od-nav--collapsed):not(.od-nav--drawer) .od-nav__item--parent:focus-within > .od-nav__sub { display: block; }
    .od-nav:not(.od-nav--js):not(.od-nav--collapsed):not(.od-nav--drawer) .od-nav__item--parent:hover > .od-nav__toggle .od-nav__chev { transform: translateY(2px) rotate(-135deg); }
  }
}

/* ==========================================================================
   MOBILE PRESENTATION - same DOM, drawer + accordion
   ========================================================================== */
@media (max-width: 1100px) {
  .od-nav__burger { display: inline-flex; }

  .od-nav__list {
    position: fixed;
    z-index: 80;
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    padding: 5rem 1.25rem 2rem;
    overflow-y: auto;
    background: var(--odn-panel);
    color: var(--odn-panel-ink);
    transform: translateX(100%);
    transition: transform .24s ease;
  }
  .od-nav--open .od-nav__list { transform: translateX(0); }

  .od-nav__item { border-bottom: 1px solid rgba(0,0,0,.08); }
  .od-nav__item--parent { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .od-nav__item--parent > .od-nav__sub { grid-column: 1 / -1; }
  .od-nav__link { width: 100%; }
  .od-nav__sub { padding-left: 1rem; }
  .od-nav__sub .od-nav__item:last-child { border-bottom: 0; }

  .od-nav__scrim {
    position: fixed;
    z-index: 70;
    inset: 0;
    background: rgba(0,0,0,.45);
  }
}


/* The fit check adds .od-nav--collapsed when the nav would not fit beside the
   logo. These mirror the <=1100px rules so a long menu collapses at ANY width
   instead of wrapping under the brand row. */
.od-nav--collapsed .od-nav__burger { display: inline-flex; }

  .od-nav--collapsed .od-nav__list {
    position: fixed;
    z-index: 80;
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    padding: 5rem 1.25rem 2rem;
    overflow-y: auto;
    background: var(--odn-panel);
    color: var(--odn-panel-ink);
    transform: translateX(100%);
    transition: transform .24s ease;
  }
  .od-nav--collapsed.od-nav--open .od-nav__list { transform: translateX(0); }

  .od-nav--collapsed .od-nav__item { border-bottom: 1px solid rgba(0,0,0,.08); }
  .od-nav--collapsed .od-nav__item--parent { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .od-nav--collapsed .od-nav__item--parent > .od-nav__sub { grid-column: 1 / -1; }
  .od-nav--collapsed .od-nav__link { width: 100%; }
  .od-nav--collapsed .od-nav__sub { padding-left: 1rem; }
  .od-nav--collapsed .od-nav__sub .od-nav__item:last-child { border-bottom: 0; }

  .od-nav--collapsed .od-nav__scrim {
    position: fixed;
    z-index: 70;
    inset: 0;
    background: rgba(0,0,0,.45);
  }

/* ==========================================================================
   LAYOUT OPTIONS - identical markup, different presentation
   ========================================================================== */

/* --mega: one full-width panel instead of a floating dropdown. */
@media (min-width: 1101px) {
  /* The panel spans the nav, so the ITEM goes static and the nav stays
     positioned - that makes the nav the containing block. Two earlier attempts
     got this wrong in ways a visibility check still called "visible":
     making the NAV static dropped the panel a viewport-height below the fold,
     and centring on the item ran a 100vw panel off the left edge. */
  .od-nav--mega .od-nav__list > .od-nav__item { position: static; }
  .od-nav--mega .od-nav__list > .od-nav__item > .od-nav__sub {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    padding: 1.5rem clamp(16px, 4vw, 40px);
    column-count: 3;
    column-gap: 2rem;
    border-radius: 0 0 var(--odn-radius) var(--odn-radius);
  }
  .od-nav--mega .od-nav__list > .od-nav__item:nth-last-child(-n+3) > .od-nav__sub { left: 0; right: 0; }
  .od-nav--mega .od-nav__sub .od-nav__item { break-inside: avoid; }
  .od-nav--mega .od-nav__sub .od-nav__sub { position: static; box-shadow: none; padding: 0 0 0 .75rem; }

  /* --drawer: keep the burger at every width. */
  .od-nav--drawer .od-nav__burger { display: inline-flex; }
  .od-nav--drawer .od-nav__list {
    position: fixed;
    z-index: 80;
    inset: 0 0 0 auto;
    width: min(420px, 92vw);
    display: block;
    padding: 5rem 1.5rem 2rem;
    overflow-y: auto;
    background: var(--odn-panel);
    color: var(--odn-panel-ink);
    transform: translateX(100%);
    transition: transform .24s ease;
  }
  .od-nav--drawer.od-nav--open .od-nav__list { transform: translateX(0); }
  .od-nav--drawer .od-nav__sub { position: static; box-shadow: none; min-width: 0; padding-left: 1rem; }
  .od-nav--drawer .od-nav__item--parent { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .od-nav--drawer .od-nav__item--parent > .od-nav__sub { grid-column: 1 / -1; }

  /* --center: nav splits either side of a centred logo. */
  .od-nav--center .od-nav__list { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .od-nav__list, .od-nav__chev { transition: none; }
}

/* The old builder header was a "transparent-header" layout that pulls <main>
   up underneath it. Left alone, page content intercepts clicks on the burger
   and the utility links. The header must paint above the page.

   Sticky, and it steps out of the way: scrolling down slides it off the top,
   scrolling up brings it back (od-menu.js sets the class). It never hides
   while a panel or the drawer is open, and keyboard focus entering it always
   reveals it - a hidden header that still holds focus is a trap. */
/* Sticky goes on the HOST (#masthead), not on .od-header. A sticky element
   can only travel inside its parent, and .od-header's parent is exactly its
   own height - so it never stuck, in any engine: it scrolled off with the
   page, and on scroll-up the class came back while the element was a screen
   above the viewport. The host's parent is #page, which spans the document. */
.od-header { position: relative; z-index: 90; }
.od-header-host,
.site-header:has(> .od-header) {
  position: sticky;
  top: 0;
  z-index: 90;
  transition: transform .28s ease;
}
.od-header-host.od-header--hidden,
.site-header:has(> .od-header).od-header--hidden { transform: translateY(-100%); }
.od-header-host.od-header--hidden:focus-within,
.site-header:has(> .od-header).od-header--hidden:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) { .od-header-host, .site-header:has(> .od-header) { transition: none; } }

/* A translated host contains the fixed, closed drawer. Clip its offscreen
   width while the header is hidden so scrolling cannot widen the page.
   Keyboard focus reveals the header and restores unrestricted dropdowns. */
.od-header-host.od-header--hidden:not(:focus-within) { overflow: clip; }
/* The width stays clipped when the header comes back too: the class goes at
   once, but the host keeps a transform for the .28s slide, and in that time
   the closed drawer stuck out 343px on a 390px phone. Mobile browsers then
   widened the page (measured 390 to 733px, 844 to 1587px tall) and the
   scroll position jumped, every time a reader scrolled up from the footer.
   Only the width: dropdowns still open downward unclipped. */
/* Phone and tablet drawer only: on desktop a clip on the sticky header host can cut the dropdown at the header's
   bottom edge in Safari, so it looks like the menu goes behind the hero. */
@media (max-width: 1100px) {
  .od-header-host,
  .site-header:has(> .od-header) { overflow-x: clip; }
}

/* Links to a section on the same page glide there instead of jumping, so the
   reader sees which way they went. The browser does it (no script, nothing to
   load); a visitor who asks for less motion still jumps. The section lands
   1rem below the top. od-menu.js adds --od-anchor-offset (the header's
   height) only when the header stays on screen; a header that hides on
   scroll is kept hidden for the trip instead.
   Both rules wait for the visitor's first tap, click, key or wheel
   (od-menu.js adds .od-anchor-scroll). Arriving from another page with #id in
   the address, the browser keeps the section in place while images and the
   calculator grow the page above it; either rule switched that off in Chrome
   and the section ended 868px down /braces/cost/. */
html.od-anchor-scroll { scroll-padding-top: calc(var(--od-anchor-offset, 0px) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html.od-anchor-scroll { scroll-behavior: smooth; } }

/* bare: compact utility row; optional submenus share the normal toggles. */
.od-nav--bare .od-nav__list { position: static; display: flex; flex-wrap: wrap; gap: var(--od-space-5, 1.25rem);
  width: auto; padding: 0; background: transparent; color: inherit; transform: none; transition: none; overflow: visible; }
.od-nav--bare .od-nav__item { border: 0; }

/* ==========================================================================
   STANDARD HEADER
   One grid. .od-drawer is display:contents on desktop so its children place
   themselves into the grid; when the header is collapsed (narrow viewport,
   or the nav will not fit beside the logo) the drawer is the off-canvas
   panel: primary nav, then the utility links continuing the same list, then
   the CTA. The header, not the nav, owns the burger.
   ========================================================================== */
.od-header { position: relative; z-index: 90; }

/* surface option: white | transparent | brand */
.od-header--surface-white       { background: var(--od-surface-page, #fff);  color: var(--od-text-primary, #303030); }
.od-header--surface-brand       { background: var(--od-surface-hero, #0aa);  color: var(--od-text-on-hero, #fff); }
.od-header--surface-transparent { background: transparent;                   color: var(--od-text-on-hero, #fff); }
.od-header--surface-transparent.od-header--scrolled { background: var(--od-surface-page, #fff); color: var(--od-text-primary, #303030); }
.od-header--surface-white .od-nav__link,
.od-header--surface-white .od-utility__phone,
.od-header--surface-white .od-utility__locations .od-nav__link,
.od-header--surface-transparent.od-header--scrolled .od-nav__link,
.od-header--surface-transparent.od-header--scrolled .od-utility__phone,
.od-header--surface-transparent.od-header--scrolled .od-utility__locations .od-nav__link { color: inherit; }

/* On a brand or image surface, keep the contrasting header ink and the
   stronger weight. Dropdown panels use their accent on a light surface. */
.od-header:is(.od-header--surface-brand, .od-header--surface-transparent:not(.od-header--scrolled)) .od-nav__list > :is(.od-nav__item--current, .od-nav__item--ancestor) > :is(.od-nav__link, .od-nav__toggle) { color: inherit; }

/* notice strip: one line above the grid, scrolls and hides with the header */
.od-header__notice { padding: .5rem 1rem; background: var(--od-action-primary-bg, #e21268); color: var(--od-action-primary-text, #fff); text-align: center; font-size: .875rem; font-weight: 600; line-height: 1.35; }
.od-header__notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* The plugin pads the body for the legacy FIXED header. Ours is in flow. */
body.od-standard-header,
body.od-standard-header.has-white-header,
body.od-standard-header.header-transparent { padding-top: 0; }

/* sticky lives on the host (#masthead); see hide-on-scroll notes */
.od-header-host, .site-header:has(> .od-header) { position: sticky; top: 0; z-index: 90; transition: transform .28s ease; }
.od-header-host.od-header--hidden, .site-header:has(> .od-header).od-header--hidden { transform: translateY(-100%); }
.od-header-host.od-header--hidden:focus-within,
.site-header:has(> .od-header).od-header--hidden:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) { .od-header-host, .site-header:has(> .od-header) { transition: none; } }

/* ---- the grid (desktop) ------------------------------------------------ */
/* Four columns so the utility links (row 1) span the flexible track and do
   not size column 1. With three columns they shared column 1 with the logo,
   the auto track grew to the links' 467px, and the logo cell stretched to
   match - which the fit check then read as the logo's width. */
.od-header__grid {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas:
    "ulinks ulinks phones cta"
    "rule   rule   rule   rule"
    "logo   nav    nav    nav";
  align-items: center;
  column-gap: var(--od-space-5, 1.25rem);
}
.od-drawer { display: contents; }
.od-drawer__close, .od-header__burger { display: none; }
.od-header__grid > .od-logo, .od-header__grid > .custom-logo-link { grid-area: logo; justify-self: start; padding-block: 14px; }
.od-header__grid .custom-logo { display: block; height: 48px; width: auto; max-width: 260px; }
.od-header__cta { grid-area: cta; justify-self: end; margin-block: 10px; }
.od-header__rule { grid-area: rule; height: 1px; background: currentColor; opacity: .18; }
.od-drawer > .od-nav--bare  { grid-area: ulinks; padding-block: 12px; }
.od-drawer > .od-nav--bare .od-nav__link { font-size: .875rem; font-weight: 600; min-height: 32px; }
/* The row is measured by the fit check; a link that wrapped mid-word
   ("Learning / Center") would hide the overflow it is meant to report. */
.od-drawer > .od-nav--bare .od-nav__link { white-space: nowrap; }
.od-drawer > .od-nav--bare .od-nav__list { flex-wrap: nowrap; }
.od-drawer > .od-nav--plain { grid-area: nav; justify-self: end; }
.od-nav--plain .od-nav__list { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--odn-gap); }
.od-nav--plain .od-nav__list > .od-nav__item > .od-nav__toggle { width: 28px; height: var(--odn-hit); }
/* The primary links would inherit the fluid body size (16.7px at 1440);
   Freelove's seven items then measure 989px and, with the 245px logo,
   overflow the 1272px content box by 2px - a burger on desktop. Fixed 15px
   keeps about 100px of slack. */
.od-header .od-nav--plain .od-nav__link { font-size: 15px; }

/* ---- offices: the locations component (see header-standard.php) --------
   A nav inside the drawer: od-menu.js runs it, the drawer stacks it. Up to
   the inline maximum it is a row of phone groups; above it, one dropdown.
   Selectors carry .od-utility__locations because components.css `.od-nav a`
   (0,1,1) otherwise sets the size, weight, colour and display of every
   anchor in here. ------------------------------------------------------- */
.od-drawer > .od-utility__locations { grid-area: phones; justify-self: end; padding-block: 12px; }
.od-utility__locations .od-nav__list { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--od-space-4, 1rem); }
.od-utility__locations .od-nav__item { margin: 0; }
.od-utility__locations .od-utility__phone-sms, .od-utility__locations .od-utility__phone-pop { display: none; }
.od-utility__locations .od-utility__phone-pop-link { color: var(--od-text-link, #0077A3); }
.od-utility__locations .od-nav__link { min-height: 32px; }
.od-utility__locations .od-nav__list > .od-nav__item > .od-nav__toggle { width: 28px; height: 32px; }
.od-utility__locations .od-utility__locations-trigger { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.od-utility__locations .od-nav__sub { left: auto; right: 0; min-width: 340px; padding-block: .25rem; }
.od-utility__locations .od-office { display: block; }
.od-utility__locations .od-office__name { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; min-height: 0; padding: .6rem 1rem .15rem; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.od-utility__locations .od-office__addr { display: block; font-size: .75rem; font-weight: 400; opacity: .75; }
.od-utility__locations .od-office__actions { display: flex; gap: .9rem; padding: 0 1rem .65rem; }
.od-utility__locations .od-office__action { display: inline; font-size: .8125rem; font-weight: 600; color: var(--od-text-link, #0077A3); text-decoration: underline; text-underline-offset: 2px; }
.od-utility__locations .od-office__action:hover { color: var(--od-text-link-hover, #005f85); }
.od-utility__locations .od-office + .od-office { border-top: 1px solid var(--od-border-default, #eee); }

/* ---- search: Orthodynamo Site's popup (header-standard.php) -------------
   Desktop: in the utility row, between "Our Locations" and the
   consultation button, a brand circle like the call icon (its own grid column, added only when the button is
   there, so headers without search keep their grid). Phone or drawer: the
   button beside the burger. Both open the same popup. */
.od-search-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.od-search-btn svg { display: block; width: 20px; height: 20px; }
.od-search-btn:hover { background: var(--od-surface-sunken, rgba(0, 0, 0, .06)); }
.od-search-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.od-header__grid:has(.od-header__search-desk) {
  grid-template-columns: auto 1fr auto auto auto;
  grid-template-areas:
    "ulinks ulinks phones search cta"
    "rule   rule   rule   rule   rule"
    "logo   nav    nav    nav    nav";
}
.od-drawer > .od-header__search-desk { grid-area: search; justify-self: end; width: 32px; height: 32px; background: var(--od-surface-brand, #0aa); color: var(--od-text-on-brand, #fff); }
.od-drawer > .od-header__search-desk svg { width: 16px; height: 16px; }
.od-drawer > .od-header__search-desk:hover { background: var(--od-surface-brand, #0aa); filter: brightness(.92); }
.od-header--collapsed .od-drawer > .od-header__search-desk { display: none; }
.od-header__search { display: none; }
.od-header--collapsed .od-header__search { display: inline-grid; width: 44px; height: 44px; margin-block: 12px; margin-left: auto; border: 1px solid var(--od-border-default, rgba(0, 0, 0, .18)); }
.od-header--collapsed .od-header__search + .od-header__burger { margin-left: 8px; }
/* Logo, search and burger share one row on a phone: the logo gives way rather than pushing the burger onto a
   second line (Freelove's 246px logo left 342px of row for 352px of items). */
.od-header--collapsed.od-header--js .od-header__grid:has(> .od-header__search) { flex-wrap: nowrap; }
.od-header--collapsed.od-header--js .od-header__grid:has(> .od-header__search) > .od-logo,
.od-header--collapsed.od-header--js .od-header__grid:has(> .od-header__search) > .custom-logo-link { flex: 0 1 auto; min-width: 0; }
.od-header--collapsed.od-header--js .od-header__grid:has(> .od-header__search) .custom-logo { max-width: 100%; height: auto; max-height: 48px; }

/* office phone: call, or call-and-text (see brand rule in header-standard.php) */
.od-utility__phone-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--od-surface-brand, #0aa); color: var(--od-text-on-brand, #fff); }
.od-utility__phone-body { display: flex; flex-direction: column; line-height: 1.2; }
.od-utility__phone-label { font-size: .75rem; font-weight: 400; opacity: .8; }
.od-utility__phone-number { font-size: .9375rem; font-weight: 700; }
.od-utility__phone-group { position: relative; display: inline-flex; align-items: center; gap: .5rem; }
.od-utility__phone-pop, .od-utility__phone-sms { display: none; }
@media (hover: hover) and (pointer: fine) {
  .od-utility__phone-pop { position: absolute; z-index: 95; top: 100%; left: 0; min-width: 230px; padding: .6rem 0; margin-top: .35rem;
    background: var(--od-surface-raised, #fff); color: var(--od-text-primary, #303030); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
  .od-utility__phone-pop-link { display: block; padding: .4rem 1rem; color: var(--od-text-link, #0077A3); text-decoration: none; white-space: nowrap; }
  .od-utility__phone-pop-link:hover { background: var(--od-surface-sunken, #f4f1ec); }
  .od-utility__phone-group--sms:hover .od-utility__phone-pop, .od-utility__phone-group--sms:focus-within .od-utility__phone-pop { display: block; }
  .od-utility__phone-group--sms::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .4rem; }
}
@media not all and (hover: hover) and (pointer: fine) {
  .od-utility__phone-group--sms .od-utility__phone-sms { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .6rem; border-radius: 999px; border: 1px solid currentColor; color: inherit; font-size: .8125rem; font-weight: 700; text-decoration: none; }
}

/* ---- collapsed: narrow viewport, or the nav does not fit ---------------
   The JS adds .od-header--collapsed (fit check) and .od-header--js. The
   media query is the no-JS baseline. Without JS the drawer is not
   off-canvas at all - it stacks visibly under the logo, so every link stays
   reachable; only the slide-in needs the script. ----------------------- */
.od-header--collapsed .od-header__grid,
.od-header--collapsed .od-drawer { display: block; }
.od-header--collapsed .od-header__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.od-header--collapsed .od-header__rule { display: none; }
.od-header--collapsed .od-header__burger {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--od-brand-strong, #077); color: var(--od-text-on-inverse, #fff); cursor: pointer; margin-block: 12px;
}
.od-header__burger-bars { width: 20px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.od-header__burger:focus-visible, .od-drawer__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.od-header--collapsed .od-drawer { flex-basis: 100%; padding-block: .5rem 1.25rem; }
.od-header--collapsed.od-header--js .od-drawer {
  position: fixed; z-index: 120; inset: 0 0 0 auto; width: min(88vw, 400px);
  overflow-y: auto; padding: 4.5rem 1.25rem 1.5rem;
  /* The deeper brand, not the bright one: white on the bright cyan is 2.9:1,
     so the engine resolves --od-text-on-brand to ink. On --od-brand-strong
     white clears 4.5, which keeps the design's white-on-cyan drawer honest. */
  background: var(--od-brand-strong, #077); color: var(--od-text-on-inverse, #fff);
  visibility: hidden;
  transform: translateX(100%); transition: transform .24s ease;
}
.od-header--collapsed.od-header--js .od-drawer--open { visibility: visible; transform: translateX(0); }
.od-header--collapsed.od-header--js .od-drawer__close {
  display: inline-grid; place-items: center; position: absolute; top: .9rem; right: 1rem; width: 44px; height: 44px;
  border: 0; background: none; color: inherit; font-size: 1.5rem; cursor: pointer;
}
.od-drawer__scrim { position: fixed; z-index: 110; inset: 0; background: rgba(0,0,0,.45); }
/* the theme's floating footers sit above the drawer otherwise */
html.od-drawer-open #odtmMobileFloatingFooter,
html.od-drawer-open #odtmDesktopFloatingFooter { visibility: hidden; }

/* components.css makes .od-nav a flex row; in the drawer that shrink-wraps the
   list and pushes it to the right edge (measured in the 1280px capture). Each
   nav is a full-width block here, and the utility links match the primary
   items so the list reads as one. */
.od-header--collapsed .od-drawer .od-nav { display: block; width: 100%; justify-self: auto; gap: 0; }
.od-header--collapsed .od-drawer .od-nav--bare { padding-block: 0; }
.od-header--collapsed .od-drawer .od-nav--bare .od-nav__link { font-size: 1rem; font-weight: 700; min-height: 44px; }
/* inside the drawer: primary items, then the utility links continue, then the CTA.
   The navs carry od-nav--collapsed, whose standalone rules make EACH list its
   own fixed, off-canvas panel with the panel ink colour - measured: the first
   toggle at x=685 in a 390px viewport, links dark on the brand drawer. Inside
   the header's drawer a list is just a list; reset all of that explicitly. */
.od-header--collapsed .od-drawer .od-nav__list {
  display: block; position: static; inset: auto; width: auto; padding: 0;
  background: transparent; color: inherit; transform: none; transition: none; overflow: visible;
}
.od-header--collapsed .od-drawer .od-nav__list > .od-nav__item > .od-nav__toggle { width: var(--odn-hit); }
.od-header--collapsed .od-drawer .od-nav__item { border: 0; }
.od-header--collapsed .od-drawer .od-nav__item--parent { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.od-header--collapsed .od-drawer .od-nav__item--parent > .od-nav__sub { grid-column: 1 / -1; }
.od-header--collapsed .od-drawer .od-nav__link { width: 100%; min-height: 44px; padding: 0 12px; font-weight: 700; color: inherit; }
.od-header--collapsed .od-drawer .od-nav__sub { position: static; box-shadow: none; min-width: 0; padding: 0 0 .25rem 1rem; background: transparent; color: inherit; }
.od-header--collapsed .od-drawer .od-nav__sub .od-nav__link { font-weight: 500; }
.od-header--collapsed .od-drawer .od-nav__toggle { width: var(--odn-hit); height: 44px; }
/* A darker tint marks the active trail without reducing the contrast of the
   drawer's white text or changing the alignment of its labels. */
.od-header--collapsed .od-drawer .od-nav__item--current > .od-nav__link,
.od-header--collapsed .od-drawer .od-nav__item--ancestor > .od-nav__link { color: inherit; text-decoration: none; margin-inline: 0; padding-inline: 12px; border-radius: 6px; background: rgba(0,0,0,.16); }
.od-header--collapsed .od-drawer :is(.od-nav__item--current, .od-nav__item--ancestor) > .od-nav__toggle { color: inherit; }
.od-header--collapsed .od-drawer .od-nav--bare .od-nav__list { display: block; margin-top: .25rem; }
.od-header--collapsed .od-drawer .od-header__cta { display: flex; justify-content: center; width: 100%; margin-top: 1.5rem; }
/* offices in the drawer: stacked phone groups (inline mode) or an accordion
   row (disclosure); the popover is a hover thing, the Text pill stays */
.od-header--collapsed .od-drawer .od-utility__locations { padding-block: .25rem 0; margin-top: .5rem; border-top: 1px solid rgba(255,255,255,.18); }
.od-header--collapsed .od-drawer .od-utility__locations--desktop-only { display: none; }
.od-header--collapsed .od-drawer .od-utility__locations .od-nav__list { display: block; }
.od-header--collapsed .od-drawer .od-utility__office { padding-block: .35rem; }
.od-header--collapsed .od-drawer .od-utility__phone-pop { display: none !important; }
.od-header--collapsed .od-drawer .od-utility__phone-group--sms .od-utility__phone-sms { display: inline-flex; align-items: center; min-height: 30px; padding: 0 .6rem; border-radius: 999px; border: 1px solid currentColor; color: inherit; font-size: .8125rem; font-weight: 700; text-decoration: none; }
.od-header--collapsed .od-drawer .od-utility__phone-icon { background: rgba(255,255,255,.18); color: inherit; }
.od-header--collapsed .od-drawer .od-utility__phone { color: inherit; }
.od-header--collapsed .od-drawer .od-utility__locations .od-office__name { padding-left: 0; color: inherit; }
.od-header--collapsed .od-drawer .od-utility__locations .od-office__actions { padding-left: 0; }
.od-header--collapsed .od-drawer .od-utility__locations .od-office__action { color: inherit; }
.od-header--collapsed .od-drawer .od-utility__locations .od-office + .od-office { border-top-color: rgba(255,255,255,.18); }

/* no-JS / narrow baseline */
@media (max-width: 1100px) {
  .od-header:not(.od-header--collapsed) .od-header__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .od-header:not(.od-header--collapsed) .od-header__rule { display: none; }
  .od-header:not(.od-header--collapsed) .od-drawer > .od-header__search-desk { display: none; }
  .od-header:not(.od-header--collapsed) .od-header__search { display: inline-grid; margin-left: auto; }
  .od-header:not(.od-header--collapsed) .od-drawer { display: block; flex-basis: 100%; }
  /* Without the script nothing collapses, so the narrow-width nav rules
     would still park each list off-canvas (measured: 5 of 54 links in the
     viewport). Stack them visibly instead - every link stays reachable. */
  .od-header:not(.od-header--collapsed) .od-drawer .od-nav__list {
    display: block; position: static; inset: auto; width: auto; padding: 0;
    background: transparent; color: inherit; transform: none; transition: none; overflow: visible;
  }
  .od-header:not(.od-header--collapsed) .od-drawer .od-nav__sub { position: static; box-shadow: none; min-width: 0; padding-left: 1rem; }
}