/* Sticky header, primary navigation, dropdowns and mobile menu */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(20, 34, 54, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

/* Desktop: logo 20% | nav 60% | actions 20% */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
}
.site-header__inner > .site-logo { flex: 0 0 20%; }
.site-header__inner > .site-nav { flex: 1 1 60%; }
.site-header__actions { flex: 0 0 20%; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.site-logo { display: inline-flex; }
.site-logo img { height: 44px; width: auto; }

/* Navigation list */
.nav-list { display: flex; align-items: center; justify-content: center; gap: 32px; }
.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 2px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}
.nav-link:hover, .nav-item--parent:hover > .nav-link, .nav-item--parent:focus-within > .nav-link { color: var(--color-text-light); }
.nav-link[aria-current="page"] { color: var(--color-text-light); }

/* Header phone CTA */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  color: var(--color-text-light);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.header-cta:hover { background-color: var(--color-primary); }
.header-cta .icon { color: var(--color-primary); transition: color 0.2s ease; }
.header-cta:hover .icon { color: var(--color-text-light); }

/* Dropdown panels (desktop) */
.submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 228px;
  padding: 10px;
  background-color: var(--color-charcoal);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 48px rgba(2, 6, 14, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.submenu .nav-link { display: flex; width: 100%; padding: 10px 14px; border-radius: 8px; }
.submenu .nav-link:hover { background-color: rgba(23, 105, 255, 0.12); color: var(--color-text-light); }
.submenu--nested {
  top: 0;
  left: calc(100% + 10px);
  transform: translate(8px, 0);
  min-width: 172px;
}

.nav-item--parent:hover > .submenu,
.nav-item--parent:focus-within > .submenu,
.nav-item--parent.is-open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-item--parent:hover > .submenu--nested,
.nav-item--parent:focus-within > .submenu--nested,
.nav-item--parent.is-open > .submenu--nested { transform: translate(0, 0); }

.nav-link__chevron { width: 1em; height: 1em; opacity: 0.55; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-item--parent:hover > .nav-link .nav-link__chevron,
.nav-item--parent:focus-within > .nav-link .nav-link__chevron,
.nav-item--parent.is-open > .nav-link .nav-link__chevron { transform: rotate(180deg); opacity: 1; }

.submenu-toggle { display: none; }

/* Mobile menu toggle button */
.nav-toggle { display: none; padding: 8px; border-radius: 8px; color: var(--color-text-light); }
.nav-toggle .icon { width: 26px; height: 26px; }
.nav-toggle .icon--close { display: none; }
.site-header.is-nav-open .nav-toggle .icon--menu { display: none; }
.site-header.is-nav-open .nav-toggle .icon--close { display: block; }

/* Collapsed navigation: header spans the row, menu stacks below */
@media (max-width: 960px) {
  .site-header__inner { justify-content: space-between; }
  .site-header__inner > .site-logo { flex: 0 1 auto; }
  .site-header__actions { flex: 0 0 auto; }
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 24px;
    background-color: var(--color-slate-dark);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 24px 48px rgba(2, 6, 14, 0.45);
  }
  .site-header.is-nav-open .site-nav { display: block; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--color-border); }
  .nav-link { flex: 1 1 auto; padding: 15px 0; font-size: 1.0625rem; }

  .submenu {
    position: static;
    display: none;
    flex-basis: 100%;
    transform: none;
    min-width: 0;
    padding: 0 0 10px 14px;
    background: none;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }
  .submenu .nav-link { padding: 11px 12px; }
  .submenu--nested { transform: none; padding-left: 12px; }
  .nav-item--parent.is-open > .submenu { display: block; }
  .nav-link__chevron { display: none; }

  .submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    color: var(--color-text-muted);
    border-radius: 8px;
  }
  .submenu-toggle:hover { color: var(--color-text-light); }
  .submenu-toggle[aria-expanded="true"] { color: var(--color-primary); }
  .submenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
}

@media (max-width: 640px) {
  .header-cta { padding: 10px 14px; }
  .header-cta__number { display: none; }
}