/* Claims Saathi — Site chrome
   Single owner for the sticky header, primary nav, mega menu, mobile drawer
   and mobile action bar. Loaded last so nothing else can fight it.

   One breakpoint switches the whole system:
     < 1080px  → logo + compact CTA + hamburger drawer
     >= 1080px → utility bar + full horizontal nav + mega menu

   Rules are written mobile-first at equal specificity, so the desktop block
   simply wins by source order. No !important is required anywhere.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  /* Must stay visible so the Services mega menu can drop below the bar. */
  overflow: visible;
  transition: box-shadow var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-header);
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(255, 255, 255, 0.94);
}

/* Shared inner rail — keeps the header aligned with page containers. */
.utility-bar__inner,
.header-main__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Utility bar (desktop only)
   -------------------------------------------------------------------------- */

.utility-bar {
  display: none;
  background: var(--gradient-dark);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-xs);
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--utility-h);
}

.utility-bar__tagline {
  margin: 0;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.utility-bar__contacts {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-shrink: 0;
}

.utility-bar__contacts a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease);
}

.utility-bar__contacts a:hover {
  color: var(--cyan-400);
}

.utility-bar__contacts .icon {
  flex-shrink: 0;
  opacity: 0.75;
}

.utility-bar__contacts a:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Header main row
   -------------------------------------------------------------------------- */

.header-main__inner {
  position: relative; /* positioning context for the mega menu */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 4rem;
  transition: min-height var(--duration) var(--ease);
}

.header-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.header-logo img {
  display: block;
  width: auto;
  height: 38px;
  max-width: min(190px, 46vw);
  object-fit: contain;
  transition: height var(--duration) var(--ease);
}

.site-header.is-scrolled .header-logo img {
  height: 34px;
}

.header-logo:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Compact call pill sits between the logo and the hamburger on phones. */
.header-actions__call {
  display: none;
  gap: var(--space-2);
}

.header-actions__cta {
  display: none;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Hamburger
   -------------------------------------------------------------------------- */

.header-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--navy-900);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.header-toggle:hover {
  background: var(--surface-100);
  border-color: var(--blue-500);
}

.header-toggle:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

.header-toggle__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.header-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duration) var(--ease),
    opacity var(--duration-fast) var(--ease), top var(--duration) var(--ease);
}

.header-toggle__bars span:nth-child(1) {
  top: 0;
}

.header-toggle__bars span:nth-child(2) {
  top: 6px;
}

.header-toggle__bars span:nth-child(3) {
  top: 12px;
}

/* Morph to an X while the drawer is open. */
.header-toggle[aria-expanded="true"] .header-toggle__bars span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.header-toggle[aria-expanded="true"] .header-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.header-toggle[aria-expanded="true"] .header-toggle__bars span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Primary nav (desktop only)
   -------------------------------------------------------------------------- */

.header-nav {
  display: none;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.1rem, 0.6vw, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list__item {
  display: flex;
  align-items: center;
}

/* Static so the mega menu anchors to .header-main__inner, not the item. */
.nav-item--mega {
  position: static;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  padding: 0.5rem clamp(0.4rem, 0.9vw, 0.75rem);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: clamp(0.8125rem, 0.72rem + 0.16vw, 0.9375rem);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-600);
  transform: translateX(-50%);
  transition: width var(--duration) var(--ease);
}

.nav-link:hover,
.nav-link[aria-expanded="true"] {
  color: var(--blue-700);
}

.nav-link:hover::after,
.nav-link[aria-expanded="true"]::after,
.nav-link.is-active::after,
.nav-link[aria-current="page"]::after {
  width: calc(100% - 1rem);
}

.nav-link.is-active,
.nav-link[aria-current="page"] {
  color: var(--blue-700);
  font-weight: var(--fw-semibold);
}

.nav-link:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

.nav-link__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.65;
  transition: transform var(--duration) var(--ease);
}

.nav-link[aria-expanded="true"] .nav-link__caret {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Mega menu
   -------------------------------------------------------------------------- */

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-xl);
}

/* Invisible bridge overlay to prevent mouseleave gap between trigger and menu */
.mega-menu::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  height: 1rem;
  background: transparent;
}

/* UA [hidden] is display:none !important — keep !important so the open
   state wins even if the attribute and class briefly overlap. */
.mega-menu.is-open,
.mega-menu.is-open[hidden] {
  display: block !important;
  animation: mega-in var(--duration) var(--ease-out) both;
}

@media (min-width: 1080px) {
  .nav-item--mega:hover .mega-menu,
  .nav-item--mega:focus-within .mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
}

@keyframes mega-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.mega-menu__col-title {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mega-menu__list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-menu__list a {
  display: block;
  padding: 0.45rem var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    padding-left var(--duration-fast) var(--ease);
}

.mega-menu__list a:hover,
.mega-menu__list a:focus-visible {
  background: var(--surface-100);
  color: var(--blue-700);
  padding-left: var(--space-4);
  outline: none;
}

.mega-menu__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.mega-menu__footer p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Mobile drawer + overlay
   Kept rendered but off-canvas so open/close can animate. The [hidden]
   attribute stays in sync via JS for assistive tech and no-CSS fallback.
   -------------------------------------------------------------------------- */

.nav-overlay,
.nav-overlay[hidden] {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(4, 23, 47, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease),
    visibility var(--duration) var(--ease);
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav,
.mobile-nav[hidden] {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(21rem, 88vw);
  padding: var(--space-4) var(--space-5) var(--space-6);
  background: var(--white);
  box-shadow: -20px 0 50px rgba(4, 23, 47, 0.22);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--duration) var(--ease),
    visibility var(--duration) var(--ease);
}

.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

body.nav-open {
  overflow: hidden;
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.mobile-nav__logo {
  display: inline-flex;
  line-height: 0;
}

.mobile-nav__logo img {
  display: block;
  width: auto;
  height: 36px;
  max-width: 160px;
  object-fit: contain;
}

.mobile-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--navy-900);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease);
}

.mobile-nav__close:hover {
  background: var(--surface-100);
  border-color: var(--blue-500);
}

.mobile-nav__close:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

.mobile-nav__list {
  display: grid;
  gap: 0.1rem;
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.mobile-nav__item {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.mobile-nav__item:hover,
.mobile-nav__item:focus-visible {
  background: var(--surface-100);
  color: var(--blue-700);
  outline: none;
}

.mobile-nav__item.is-active,
.mobile-nav__item[aria-current="page"] {
  background: var(--surface-100);
  color: var(--blue-700);
  font-weight: var(--fw-semibold);
  box-shadow: inset 3px 0 0 var(--blue-600);
}

/* --------------------------------------------------------------------------
   Drawer submenus
   Mirror the desktop mega menu so every service page is reachable on a phone.
   -------------------------------------------------------------------------- */

.mobile-nav__group {
  display: grid;
}

.mobile-nav__toggle {
  width: 100%;
  justify-content: space-between;
  gap: var(--space-3);
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.mobile-nav__caret {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--duration-fast) var(--ease);
}

.mobile-nav__group.is-open > .mobile-nav__toggle {
  background: var(--surface-100);
  color: var(--blue-700);
}

.mobile-nav__group.is-open .mobile-nav__caret {
  transform: rotate(-135deg);
}

.mobile-nav__panel {
  padding: var(--space-2) 0 var(--space-3) var(--space-3);
  margin-left: var(--space-3);
  border-left: 2px solid var(--border);
}

.mobile-nav__panel[hidden] {
  display: none;
}

.mobile-nav__sub-title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mobile-nav__sub-title:first-child {
  margin-top: 0;
}

.mobile-nav__sub {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.mobile-nav__sub a:hover,
.mobile-nav__sub a:focus-visible {
  background: var(--surface-100);
  color: var(--blue-700);
  outline: none;
}

.mobile-nav__sub a[aria-current="page"] {
  background: var(--surface-100);
  color: var(--blue-700);
  font-weight: var(--fw-semibold);
}

.mobile-nav__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.mobile-nav__contact {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
}

.mobile-nav__contact a {
  color: var(--text-secondary);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Mobile sticky action bar
   -------------------------------------------------------------------------- */

.mobile-action-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-mobile-bar);
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(4, 23, 47, 0.12);
}

.mobile-action-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: var(--mobile-bar-h);
  padding: var(--space-2) var(--space-1);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  text-align: center;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease),
    background-color var(--duration-fast) var(--ease);
}

.mobile-action-bar a:hover,
.mobile-action-bar a:focus-visible {
  background: var(--surface-100);
  color: var(--blue-700);
  outline: none;
}

.mobile-action-bar__icon {
  display: inline-flex;
  color: var(--blue-700);
}

.mobile-action-bar a:nth-child(2) .mobile-action-bar__icon {
  color: #25d366;
}

.mobile-action-bar a:nth-child(3) .mobile-action-bar__icon {
  color: var(--green-600);
}

/* Reserve room so the bar never covers footer content or floating controls. */
body.has-mobile-bar {
  padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
}

body.has-mobile-bar .back-to-top,
body.has-mobile-bar .toast-region {
  bottom: calc(var(--mobile-bar-h) + var(--space-4) + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   >= 480px — room for the compact call pill
   -------------------------------------------------------------------------- */

@media (min-width: 480px) {
  .utility-bar__inner,
  .header-main__inner {
    padding-inline: var(--space-5);
  }

  .header-logo img {
    height: 42px;
    max-width: 210px;
  }

  .site-header.is-scrolled .header-logo img {
    height: 38px;
  }

  .header-actions__call {
    display: inline-flex;
  }

  .mobile-action-bar a {
    font-size: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   >= 768px — tablet: show the full CTA, drawer still in charge
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .utility-bar__inner,
  .header-main__inner {
    padding-inline: var(--space-8);
    min-height: 4.5rem;
  }

  .header-logo img {
    height: 46px;
    max-width: 230px;
  }

  .site-header.is-scrolled .header-logo img {
    height: 40px;
  }

  .header-actions {
    gap: var(--space-3);
  }

  .header-actions__cta {
    display: inline-flex;
  }

  .mobile-nav,
  .mobile-nav[hidden] {
    width: min(24rem, 62vw);
  }
}

/* --------------------------------------------------------------------------
   >= 1080px — desktop: utility bar + horizontal nav, no drawer
   -------------------------------------------------------------------------- */

@media (min-width: 1080px) {
  .utility-bar {
    display: block;
  }

  .header-nav {
    display: flex;
  }

  .header-toggle {
    display: none;
  }

  /* The utility bar already shows the phone number. */
  .header-actions__call {
    display: none;
  }

  .header-main__inner {
    justify-content: flex-start;
    gap: var(--space-6);
    min-height: var(--header-h);
  }

  .site-header.is-scrolled .header-main__inner {
    min-height: var(--header-h-scrolled);
  }

  .header-actions {
    margin-left: auto;
  }

  .header-logo img {
    height: 48px;
    max-width: 240px;
  }

  .site-header.is-scrolled .header-logo img {
    height: 42px;
  }

  /* Drawer, overlay and action bar are desktop-irrelevant. */
  .mobile-nav,
  .mobile-nav[hidden],
  .nav-overlay,
  .nav-overlay[hidden],
  .mobile-action-bar {
    display: none;
  }

  body.has-mobile-bar {
    padding-bottom: 0;
  }

  body.has-mobile-bar .back-to-top,
  body.has-mobile-bar .toast-region {
    bottom: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   >= 1280px — breathing room once the nav comfortably fits
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  .utility-bar__inner,
  .header-main__inner {
    padding-inline: var(--space-10);
  }

  .nav-list {
    gap: var(--space-1);
  }

  .mega-menu {
    padding: var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .header-logo img,
  .header-main__inner,
  .header-toggle__bars span,
  .nav-link,
  .nav-link::after,
  .nav-link__caret,
  .mega-menu__list a,
  .mobile-nav,
  .mobile-nav[hidden],
  .nav-overlay,
  .nav-overlay[hidden],
  .mobile-action-bar a {
    transition: none;
  }

  .mega-menu.is-open {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header {
    position: static;
    box-shadow: none;
  }

  .header-toggle,
  .header-actions,
  .mobile-nav,
  .mobile-nav[hidden],
  .nav-overlay,
  .nav-overlay[hidden],
  .mobile-action-bar,
  .mega-menu {
    display: none;
  }

  body.has-mobile-bar {
    padding-bottom: 0;
  }
}