/* ==================================================
   SITE HEADER & NAVIGATION
   Purpose:
   The sticky masthead — announcement bar, brand lockup,
   desktop navigation with mega menus, search trigger,
   primary CTA and the full-screen mobile navigation
   panel. Behaviour lives in js/navigation.js.
================================================== */

/* ==================================================
   ANNOUNCEMENT BAR
   Thin utility strip above the header carrying the
   phone number and service area.
================================================== */

.announcement-bar {
  background-color: var(--ink-900);
  color: var(--color-on-dark-muted);
  font-size: var(--fs-xs);
}

.announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 40px;
  padding-block: var(--s-2);
}

.announcement-bar__message {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.announcement-bar__actions {
  display: none;
  align-items: center;
  gap: var(--s-5);
}

.announcement-bar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--color-on-dark-muted);
  white-space: nowrap;
}

.announcement-bar__link:hover { color: #FFFFFF; }

.announcement-bar__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: var(--brand-400);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

@media (min-width: 768px) {
  .announcement-bar__actions { display: flex; }
}

/* ==================================================
   HEADER SHELL
================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal),
              background-color var(--transition-normal);
}

/* Applied by js/navigation.js once the page scrolls past the header. */
.site-header.is-stuck {
  background-color: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  /* Positioning context for the mega menus. They anchor to the header row
     rather than to their trigger: a three-column panel centred on a nav item
     that sits near the left edge hangs off the side of the viewport. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-height);
  transition: min-height var(--transition-normal);
}

.site-header.is-stuck .site-header__inner {
  min-height: var(--header-height-compact);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}

/* ==================================================
   PRIMARY NAVIGATION (desktop)
   Hidden below 1100px, where the mobile panel takes over.
================================================== */

.primary-nav { display: none; }

@media (min-width: 1100px) {
  .primary-nav { display: block; }
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

/* Static so the mega menu resolves its position against .site-header__inner. */
.primary-nav__item { position: static; }

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
  white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.primary-nav__link:hover,
.primary-nav__item.is-open > .primary-nav__link {
  color: var(--brand-600);
  background-color: var(--brand-50);
}

/* Current section indicator. */
.primary-nav__link[aria-current="page"],
.primary-nav__link.is-active {
  color: var(--brand-700);
  font-weight: var(--fw-semibold);
}

.primary-nav__chevron {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  mask: url("../assets/icons/ui/chevron-down.svg") no-repeat center / contain;
  -webkit-mask: url("../assets/icons/ui/chevron-down.svg") no-repeat center / contain;
  transition: transform var(--transition-fast);
}

.primary-nav__item.is-open .primary-nav__chevron { transform: rotate(180deg); }

/* ==================================================
   MEGA MENU
   Multi-column panel for Services, Technologies,
   Industries and Locations. Opens on hover for pointer
   users and on click/Enter for keyboard users.
================================================== */

.mega-menu {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  transform: translateY(8px);
  z-index: var(--z-dropdown);
  width: max-content;
  max-width: min(1080px, calc(100vw - 3rem));
  padding: var(--s-5);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-normal),
              transform var(--transition-normal),
              visibility var(--transition-normal);
}

.primary-nav__item.is-open > .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Menus anchored to the right edge of the header row instead of the left. */
.mega-menu--end {
  left: auto;
  right: 0;
}

.mega-menu__grid {
  display: grid;
  gap: var(--s-5) clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  grid-template-columns: repeat(var(--mega-columns, 3), minmax(172px, 1fr));
}

/* Column count is set per menu: the services catalogue runs three across so
   its six categories form a tidy two-row block. */
.mega-menu--cols-2 { --mega-columns: 2; }
.mega-menu--cols-3 { --mega-columns: 3; }
.mega-menu--cols-4 { --mega-columns: 4; }

/* Wider menus get more room before the viewport clamp kicks in. */
.mega-menu--cols-3,
.mega-menu--cols-4 { max-width: min(880px, calc(100vw - 3rem)); }

/* The desktop navigation only exists above 1100px, so this covers the single
   awkward band between there and 1240px, where four columns at the 190px
   minimum would no longer fit inside the viewport gutter. */
@media (max-width: 1240px) {
  .mega-menu--cols-4 { --mega-columns: 3; }
}

.mega-menu__column-title {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--color-border);
}

.mega-menu__list { display: grid; gap: 0; }

.mega-menu__link {
  display: block;
  padding: 0.4rem var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink-600);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mega-menu__link:hover {
  background-color: var(--brand-50);
  color: var(--brand-700);
}

/* Promotional rail inside the mega menu. */
.mega-menu__feature {
  padding: var(--s-5);
  border-radius: var(--radius-md);
  background: var(--gradient-night);
  color: var(--color-on-dark-muted);
  min-width: 240px;
}

.mega-menu__feature-title {
  font-size: var(--fs-h4);
  color: #FFFFFF;
  margin-bottom: var(--s-3);
}

.mega-menu__feature-text {
  font-size: var(--fs-xs);
  line-height: 1.6;
  margin-bottom: var(--s-5);
}

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

/* ==================================================
   ICON BUTTONS (search, menu toggle)
================================================== */

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.icon-button:hover {
  background-color: var(--surface-sunken);
  color: var(--brand-600);
}

.icon-button__glyph {
  width: 22px;
  height: 22px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.header-cta { display: none; }

@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
}

.menu-toggle { display: grid; }

@media (min-width: 1100px) {
  .menu-toggle { display: none; }
}

/* ==================================================
   MOBILE NAVIGATION PANEL
   Full-height slide-in drawer with disclosure sections
   mirroring the desktop mega menus.
================================================== */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-slow), visibility var(--transition-slow);
  overscroll-behavior: contain;
}

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

@media (min-width: 1100px) {
  .mobile-nav { display: none; }
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--container-gutter);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.mobile-nav__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-5) var(--container-gutter) var(--s-8);
  -webkit-overflow-scrolling: touch;
}

.mobile-nav__section + .mobile-nav__section {
  border-top: 1px solid var(--color-border);
}

.mobile-nav__link {
  display: block;
  padding: var(--s-4) 0;
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-800);
}

/* Disclosure trigger for grouped sections. */
.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) 0;
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-800);
}

.mobile-nav__toggle-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: var(--ink-400);
  mask: url("../assets/icons/ui/chevron-down.svg") no-repeat center / contain;
  -webkit-mask: url("../assets/icons/ui/chevron-down.svg") no-repeat center / contain;
  transition: transform var(--transition-fast);
}

.mobile-nav__toggle[aria-expanded="true"] .mobile-nav__toggle-icon {
  transform: rotate(180deg);
}

.mobile-nav__panel {
  display: grid;
  gap: 2px;
  padding-bottom: var(--s-4);
}

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

.mobile-nav__panel-link {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  background-color: var(--surface-muted);
  font-size: var(--fs-sm);
  color: var(--ink-600);
}

.mobile-nav__panel-link:hover {
  background-color: var(--brand-50);
  color: var(--brand-700);
}

.mobile-nav__panel-group-title {
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-400);
}

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

.mobile-nav__footer {
  flex-shrink: 0;
  padding: var(--s-5) var(--container-gutter);
  border-top: 1px solid var(--color-border);
  background-color: var(--surface-muted);
}

.mobile-nav__footer .btn + .btn { margin-top: var(--s-3); }

/* Dimmed backdrop behind the drawer. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-mobile-nav) - 1);
  background-color: rgba(6, 12, 31, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

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

/* ==================================================
   STICKY MOBILE CALL BAR
   Persistent call / WhatsApp actions on small screens.
================================================== */

.mobile-call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-border);
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 768px) {
  .mobile-call-bar { display: none; }
}

.mobile-call-bar__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 56px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-800);
}

.mobile-call-bar__action + .mobile-call-bar__action {
  border-left: 1px solid var(--color-border);
}

.mobile-call-bar__action--primary { color: var(--brand-600); }

.mobile-call-bar__icon {
  width: 19px;
  height: 19px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}