/* ============================================================
   nav.css — site header / navigation (shared by every page)
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 243, 236, 0.82);
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 76px;
  max-width: none;                              /* full-width bar */
  padding-inline: clamp(1.5rem, 4vw, 3.5rem);
}

/* brand sits left; everything else pushed to the right edge */
.brand { margin-right: auto; }

/* ---- Wordmark ---- */
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.brand__logo {
  height: 42px;
  width: auto;
  display: block;
}

/* ---- Primary nav ---- */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.15rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.35rem;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__cta { white-space: nowrap; }

/* ---- Family Law dropdown ---- */
.nav__item--menu { position: relative; }
.nav__link--parent { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.nav__chevron { width: 11px; height: 11px; color: var(--muted); transition: transform .2s ease; }
.nav__item--menu:hover .nav__chevron,
.nav__item--menu:focus-within .nav__chevron { transform: rotate(180deg); }

.nav__submenu {
  position: absolute;
  top: 100%;
  left: -0.5rem;
  min-width: 232px;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 22px 46px -26px rgba(50, 47, 42, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.nav__item--menu:hover .nav__submenu,
.nav__item--menu:focus-within .nav__submenu { opacity: 1; visibility: visible; transform: none; }
.nav__submenu a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nav__submenu a:hover { background: var(--paper-2); color: var(--ink); }
.nav__submenu a[aria-current="page"] { color: var(--blue); }

/* ---- Phone number in the header (desktop) ---- */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: color .2s ease;
}
.header-phone__icon { color: var(--blue); }
.header-phone:hover { color: var(--blue); }

/* ---- Compact tap-to-call icon (mobile only) ---- */
.header-call {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--blue);
  border: 1px solid var(--line);
}

/* ---- Mobile toggle (hidden on desktop) ---- */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--ink);
  transition: transform .3s ease, opacity .2s ease;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav__toggle { display: inline-flex; }
  .header-call { display: inline-flex; }
  .header-phone { display: none; }        /* number moves to the tap-to-call icon */

  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--space-3) clamp(1.25rem, 5vw, 3rem) var(--space-5);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;                          /* out of the tab order when closed */
    pointer-events: none;
    transition: transform .28s ease, opacity .28s ease, visibility .28s;
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .28s ease, opacity .28s ease;   /* visible at once, so site.js can focus into it */
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__link {
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.05rem;
  }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: var(--space-4); width: 100%; }

  /* dropdown becomes an inline, indented list in the mobile menu */
  .nav__chevron { display: none; }
  .nav__submenu,
  .nav__item--menu:hover .nav__submenu,
  .nav__item--menu:focus-within .nav__submenu { visibility: inherit; }   /* follow the menu's open/closed state */
  .nav__submenu {
    position: static;
    opacity: 1;
    transform: none;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 1rem;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .nav__submenu a {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.98rem;
    font-weight: 400;
    border-radius: 0;
  }
  .nav__submenu a:hover { background: transparent; }

  /* toggle → X when open */
  .nav__toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav__toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

@media (max-width: 420px) {
  .brand__logo { height: 34px; }
}