/* All rem values follow BB Theme's html { font-size: 10px } base — 1.8rem = 18px. */

/* Strip BB's default row padding / module margin around the navbar so it sits
   flush with the top of the page — and so the header row leaves no trailing
   space above the hero. BB's defaults add 20px row padding-bottom + 20px
   module margin-bottom, which showed up as a 40px gap on every page. */
.fl-row-content-wrap:has(.cs-navbar) {
  padding-block: 0;
}
.fl-module-content:has(.cs-navbar) {
  margin-block: 0;
}

.cs-navbar {
  /* Break out of the BB Themer row's content-width constraint so the navbar
     can use the full viewport (capped by --cs-container on .cs-navbar__inner). */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* At rest, blend with the page background; turn white when the Themer
     sticky header kicks in (see rule below). */
  background: var(--cs-off-white);
  transition: background-color 300ms ease;
  font-family: var(--cs-font-body);
}

.fl-theme-builder-header-sticky .cs-navbar {
  background: var(--cs-white);
}

.cs-navbar__inner {
  max-width: var(--cs-container);
  margin: 0 auto;
  padding: 1.6rem var(--cs-gutter);
  display: flex;
  align-items: center;
  gap: var(--cs-space-lg);
}

.cs-navbar__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--cs-ink);
}

.cs-navbar__logo img {
  display: block;
  max-height: 64px;
  width: auto;
}

.cs-navbar__logo-text {
  font-weight: 700;
  font-size: var(--cs-text-body);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- NAV: 2-row CSS grid on desktop ---------- */
.cs-navbar__nav {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  column-gap: var(--cs-space-sm); /* 16px, was 24 — part of the T6.2 refit */
  row-gap: 0.6rem;
  align-items: center;
  margin-left: auto;
}

.cs-navbar__menu {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: flex;
  align-items: center;
  /* 16px, was 20 — see the font note below; the two together are what let
     the nav fit inside the container again (client, change request
     2026-09-13 T6.2). */
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cs-navbar__menu li {
  position: relative;
}

/* Doubled-up class specificity plus :link/:visited, the same guard the hero
   CTA uses: BB Global Styles emits `.fl-builder-content a:not(.fl-builder-submenu-link)`
   into every per-layout stylesheet at 0,2,1, which outranks a plain
   `.cs-navbar__menu a` (0,1,1) and was silently repainting these links. */
.cs-navbar .cs-navbar__menu a,
.cs-navbar .cs-navbar__menu a:link,
.cs-navbar .cs-navbar__menu a:visited {
  color: var(--cs-primary-text);
  font-weight: 500;
  /* 16px. A pre-launch adjustment raised this to 18px, which made the nav's
     min-content (~1175px) wider than the container ever gets — from 1280px
     up to ~1544px viewports the CTA + phone overflowed to the raw screen
     edge (the client's "too close to the top-right corner", change request
     2026-09-13 T6.2). At 16px the nav fits inside the container at every
     desktop width, so the contact block right-aligns with the page edge,
     mirroring the logo. The 1280–1399 tier below still drops to 14px. */
  font-size: 1.6rem;
  line-height: var(--cs-line-tight);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease;
}

/* Hover/focus. The underline is offset off the baseline so it clears the
   descenders in labels like "Couples Therapy" instead of cutting through them.
   .cs-navbar__menu is repeated for the same reason the CTA repeats its class:
   BB's `a:not(...):hover` rule is 0,3,1 and would otherwise tie these
   selectors and win on source order. */
.cs-navbar .cs-navbar__menu.cs-navbar__menu a:hover,
.cs-navbar .cs-navbar__menu.cs-navbar__menu a:focus-visible {
  color: var(--cs-primary-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.6rem; /* 6px */
}

/* Current page. This used to be a colour shift alone — --cs-primary-text to
   --cs-primary-strong, 4.57:1 vs 5.45:1 on the bar — which is far too small a
   step to read as "you are here", and colour as the only state cue fails WCAG
   1.4.1 regardless. It now carries a permanent underline, one step heavier
   than the hover line so the two states stay distinguishable when you hover
   the page you are already on. Ancestor classes are included so a child page
   still marks its parent in the nav. */
.cs-navbar .cs-navbar__menu.cs-navbar__menu .current-menu-item > a,
.cs-navbar .cs-navbar__menu.cs-navbar__menu .current_page_item > a,
.cs-navbar .cs-navbar__menu.cs-navbar__menu .current-menu-ancestor > a,
.cs-navbar .cs-navbar__menu.cs-navbar__menu .current-page-ancestor > a {
  color: var(--cs-primary-strong);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.6rem; /* 6px */
}

/* Submenus (depth 2) — dropped 1rem below the item so the panel clears the
   parent link's underline (6px offset + 2px thickness overhangs the li box) */
.cs-navbar__menu .sub-menu {
  position: absolute;
  top: calc(100% + 1rem);
  left: 0;
  min-width: 220px;
  background: var(--cs-white);
  list-style: none;
  margin: 0;
  padding: 0.8rem 0;
  border-radius: var(--cs-radius-sm);
  box-shadow: 0 12px 32px rgba(27, 83, 134, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 50;
}

/* Invisible bridge over the 1rem gap so hover doesn't drop while the pointer
   travels from the parent link down into the panel */
.cs-navbar__menu .sub-menu::before {
  content: "";
  position: absolute;
  top: -1.2rem;
  left: 0;
  right: 0;
  height: 1.2rem;
}

.cs-navbar__menu li:hover > .sub-menu,
.cs-navbar__menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cs-navbar__menu .sub-menu a {
  display: block;
  padding: 0.8rem 1.6rem;
  font-size: 1.8rem;
}

.cs-navbar__divider {
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  height: 21px;
  background: var(--cs-blue-soft);
  margin: 0 0.4rem;
  align-self: center;
}

.cs-navbar .cs-navbar__cta,
.cs-navbar .cs-navbar__cta:link,
.cs-navbar .cs-navbar__cta:visited {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  display: inline-block;
  background: var(--cs-primary);
  color: var(--cs-white);
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 1.4rem; /* 14px */
  line-height: 1.5;
  text-decoration: none;
  padding: 0.8rem 2.8rem;
  border-radius: var(--cs-radius-sm);
  letter-spacing: -0.03em;
  white-space: nowrap;
  transition: background 200ms ease, transform 200ms ease;
}

/* The class is repeated to buy a class-level (0,4,0). BB Global Styles emits
   `.fl-builder-content a:not(.fl-builder-submenu-link):hover` at 0,3,1, which
   outranks the 0,3,0 this rule would otherwise have and repaints the label its
   own dark navy (#073677) on hover — 1.90:1 on the blue fill, illegible. The
   label must stay white in every state; only the fill reacts to hover. */
.cs-navbar .cs-navbar__cta.cs-navbar__cta:hover,
.cs-navbar .cs-navbar__cta.cs-navbar__cta:focus-visible {
  background: var(--cs-primary-strong);
  color: var(--cs-white);
  text-decoration: none;
  transform: translateY(-1px);
}

.cs-navbar__phone {
  grid-column: 3;
  grid-row: 2;
  justify-self: center;
  align-self: start;
  display: inline-flex;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--cs-blue);
  font-size: var(--cs-text-fine);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cs-navbar__phone-label,
.cs-navbar__phone-number {
  text-decoration: inherit;
}

.cs-navbar__phone:hover,
.cs-navbar__phone:focus-visible {
  color: var(--cs-blue-dark);
}

/* Bar actions (CTA + phone rendered directly in the bar, next to the
   hamburger). Desktop keeps the originals inside the nav grid, so this
   block only exists below 1280px — see the media query. */
.cs-navbar__actions {
  display: none;
}

.cs-navbar__menu-empty {
  margin: 0;
  color: var(--cs-blue-dark);
  font-style: italic;
  opacity: 0.7;
}

/* ---------- Mobile toggle (hamburger) ---------- */
.cs-navbar__toggle {
  display: none;
  margin-left: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

/* Doubled class to outrank BB Theme's customizer skin (`.fl-page button` and
   its :hover/:focus variants at 0,2,1), which painted the toggle as a filled
   blue pill with a 1px border. The border also broke the close icon: it
   shaved the flex content box from 24px to 22px, so the two rotated bars'
   translateY(±11px) landed 2px apart and the X never crossed at one point.
   `display` is deliberately NOT set here — it must stay at 0,1,0 so the
   media query below can flip it. */
.cs-navbar .cs-navbar__toggle.cs-navbar__toggle,
.cs-navbar .cs-navbar__toggle.cs-navbar__toggle:hover,
.cs-navbar .cs-navbar__toggle.cs-navbar__toggle:focus {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 10px;
}

.cs-navbar .cs-navbar__toggle.cs-navbar__toggle:focus-visible {
  outline: 2px solid var(--cs-blue-dark, #1B5386);
  outline-offset: 2px;
}

.cs-navbar__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--cs-blue-dark, #1B5386);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease;
}

.cs-navbar__toggle[aria-expanded="true"] .cs-navbar__toggle-bar:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}
.cs-navbar__toggle[aria-expanded="true"] .cs-navbar__toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.cs-navbar__toggle[aria-expanded="true"] .cs-navbar__toggle-bar:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

/* ---------- Responsive ---------- */
/* Intermediate tier (1280–1399px) — shrink menu font to 14px and tighten gap
   so the full nav still fits without overflow. Above 1400px we stay at 16px. */
@media (max-width: 1399px) and (min-width: 1280px) {
  .cs-navbar__menu {
    gap: 1.6rem; /* 16px */
  }
  .cs-navbar__menu a {
    font-size: 1.4rem; /* 14px */
  }
}

/* Hamburger below 1280px. Higher than the typical 1024px threshold because
   the 7 long menu items + CTA + phone need ~1280px to fit cleanly. If the
   client agrees to shorter menu labels later, this threshold can drop. */
@media (max-width: 1279px) {
  .cs-navbar {
    position: relative;
    /* Keeps the (fixed, sticky) header painting above the page content it
       grows over when the menu expands. */
    z-index: 100;
  }

  /* The expanded header is one tall surface (bar + menu + actions); the
     shadow marks its bottom edge against the page it pushed down / covers. */
  .cs-navbar.cs-is-open {
    box-shadow: 0 16px 32px rgba(27, 83, 134, 0.12);
  }

  /* Three stacked rows: bar (logo + hamburger), collapsible menu, actions
     row (CTA + phone). Grid areas set the visual order; the menu expands IN
     FLOW between the bar and the actions row, so opening it pushes the
     actions row (and, when the header isn't sticky-fixed, the page) down —
     closing it lets them slide back up. */
  .cs-navbar__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo    toggle"
      "nav     nav"
      "actions actions";
    align-items: center;
    gap: 0 var(--cs-space-lg); /* row-gap must stay 0 — the closed menu row is
                                  0px tall and any row-gap would double up
                                  between the three rows. */
  }

  .cs-navbar__logo {
    grid-area: logo;
  }

  .cs-navbar__toggle {
    display: flex;
    grid-area: toggle;
  }

  /* Override desktop grid: stack vertically inside the collapsible menu.
     No longer absolutely positioned — it must occupy flow so it can push
     the actions row. Inherits the navbar surface, so no own background. */
  .cs-navbar__nav {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cs-space-sm);
    margin-left: 0;
    max-height: 0;
    overflow: hidden;
    padding-block: 0;
    transition: max-height 280ms ease, padding 280ms ease;
  }

  /* Cap the open menu to the visible viewport and let it scroll internally —
     with the header sticky on mobile/tablet the bar is fixed at the top, so
     an uncapped menu would run past the bottom edge and the last items
     became unreachable. 16rem ≈ bar row (96px) + actions row (~52px) +
     breathing room. */
  .cs-navbar.cs-is-open .cs-navbar__nav {
    max-height: calc(100vh - 16rem);
    max-height: calc(100dvh - 16rem);
    overflow-y: auto;
    padding-block: var(--cs-space-md);
  }

  .cs-navbar__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .cs-navbar__menu li {
    border-bottom: 1px solid var(--cs-blue-pale);
  }

  /* The parent li already draws a divider below its sub-list — the last
     sub-item's own border sat right above it, reading as a doubled line. */
  .cs-navbar__menu .sub-menu li:last-child {
    border-bottom: 0;
  }

  .cs-navbar__menu a {
    display: block;
    padding: 1.4rem 0;
    font-size: 1.7rem; /* 17px */
  }

  .cs-navbar__menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    /* The desktop dropdown's white panel reads as floating cards on the
       in-flow menu surface — flatten it. */
    background: transparent;
    border-radius: 0;
    padding: 0 0 0.8rem 1.6rem;
  }

  .cs-navbar__menu .sub-menu::before {
    display: none; /* desktop hover bridge — irrelevant in the stacked drawer */
  }

  .cs-navbar__divider {
    display: none; /* not needed in vertical stack */
  }

  /* The CTA and phone now live in the bar itself (below), so their drawer
     copies are redundant — hide them and let the drawer be menu-only.
     Three classes: the CTA's base rule includes `:link` (0,2,1), which a
     two-class hide rule would lose to. */
  .cs-navbar .cs-navbar__nav .cs-navbar__cta,
  .cs-navbar .cs-navbar__nav .cs-navbar__phone,
  .cs-navbar .cs-navbar__nav .cs-navbar__divider {
    display: none;
  }

  /* Actions row: the two buttons side by side, centered, always visible
     under the bar. The menu row above expands between the bar and this row. */
  .cs-navbar__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;      /* 16px between the two buttons */
    margin-top: 1.6rem; /* 8px base + 8px row gap off the logo/hamburger row */
    min-width: 0;
  }

  .cs-navbar .cs-navbar__actions .cs-navbar__cta {
    padding: 0.8rem 2rem;
    font-size: 1.4rem;
  }

  /* "Give us a Call" as an outlined pill button, matching the CTA's shape.
     Same 3-class + :link/:visited guard as the CTA: BB Global Styles'
     `a:not(...)` rule (0,2,1) would otherwise repaint the label. Padding is
     1px tighter than the CTA to offset the border, so both pills render the
     same height. */
  .cs-navbar .cs-navbar__actions .cs-navbar__phone,
  .cs-navbar .cs-navbar__actions .cs-navbar__phone:link,
  .cs-navbar .cs-navbar__actions .cs-navbar__phone:visited {
    /* The desktop grid rule sets align-self: start — re-center it. */
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: transparent;
    border: 1px solid var(--cs-primary);
    color: var(--cs-primary-text);
    font-family: var(--cs-font-display);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: -0.03em;
    text-decoration: none;
    text-underline-offset: 0;
    padding: 0.7rem 2rem;
    border-radius: var(--cs-radius-sm);
    white-space: nowrap;
  }

  .cs-navbar .cs-navbar__actions .cs-navbar__phone:hover,
  .cs-navbar .cs-navbar__actions .cs-navbar__phone:focus-visible {
    color: var(--cs-primary-strong);
    border-color: var(--cs-primary-strong);
    text-decoration: none;
  }
}

/* Tablets (600–1279px): the two buttons fit in the top row, so they slot in
   between the logo and the hamburger instead of taking a second row. The
   ~600px floor is where logo + both pills + toggle + gaps stop fitting;
   below it the phone-width two-row layout above takes over. */
@media (min-width: 600px) and (max-width: 1279px) {
  .cs-navbar__inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "logo actions toggle"
      "nav  nav     nav";
  }

  .cs-navbar__actions {
    justify-content: flex-end;
    margin-top: 0;
  }
}