/*
  ETECHTICS SOFTWARE SOLUTIONS — Navbar + Services Mega-Menu
  -------------------------------------------------------------
  Desktop: sticky white navbar, single dropdown (Services) as a
  flat multi-column panel — every category is visible at once
  (no tab-click rail/detail-pane), which keeps the panel compact
  and means no category with only 1-2 links ever shows as a large
  empty pane next to a fuller one.
  Mobile (<1024px): hamburger toggle opens a full-width drawer;
  Services becomes an inline accordion grouped by category.

  Depends on css/tokens.css.
*/

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--navbar-height);
  position: relative;
}

/* ---------------------------------------------------------------
   Logo (text placeholder — swap for the real logo asset once
   supplied; markup lives in one place, partials/navbar.html)
--------------------------------------------------------------- */
.navbar__logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  color: var(--color-navy);
  font-weight: var(--font-weight-black);
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.navbar__logo img {
  display: block;
  height: 46px;
  width: auto;
}
@media (max-width: 480px) {
  .navbar__logo img { height: 38px; }
}
.navbar__logo .navbar__logo-accent {
  color: var(--color-orange);
}
.navbar__logo .navbar__logo-sub {
  font-size: 0.6rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---------------------------------------------------------------
   Primary nav (desktop)
--------------------------------------------------------------- */
.navbar__primary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar__link {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-body-text);
  padding: 0.6rem 0.1rem;
  border-bottom: 2px solid transparent;
}
.navbar__link:hover,
.navbar__link:focus-visible {
  color: var(--color-navy);
  text-decoration: none;
}
.navbar__link[aria-current="page"] {
  color: var(--color-navy);
  border-bottom-color: var(--color-orange);
}

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

/* ---------------------------------------------------------------
   Services mega-menu trigger
--------------------------------------------------------------- */
.has-mega {
  position: relative;
  display: flex;
  align-items: center;
}

.mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-body-text);
  cursor: pointer;
  padding: 0.6rem 0.1rem;
  border-bottom: 2px solid transparent;
}
.mega-trigger:hover,
.mega-trigger[aria-expanded="true"] {
  color: var(--color-navy);
}
.mega-trigger .mega-trigger__chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.mega-trigger[aria-expanded="true"] .mega-trigger__chevron {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------
   Mega-menu panel (desktop) — left category rail + right detail
   panel, per the owner's Phase 19 reference screenshot. Only the
   selected category's content renders in the right panel at a
   time; the rail shows all 7 categories at all times so the
   category list itself is never hidden or scrolled.
--------------------------------------------------------------- */
.mega-panel {
  /* Fixed (not absolute) so it centers on the VIEWPORT, not on the
     narrow trigger button. Centering it on the trigger was overflowing
     the page at 1024–1280px viewports — confirmed with an automated
     check — because a wide panel rarely fits centered on a point
     that sits left-of-center in the navbar. */
  position: fixed;
  top: var(--navbar-height);
  left: 50%;
  width: min(1040px, calc(100vw - 2 * var(--container-gutter)));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-mega-menu);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity var(--transition-base), transform var(--transition-base),
    visibility var(--transition-base);
}
.mega-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Fixed (not content-sized) height so the outer panel never jumps
   when switching categories — sized to comfortably fit the tallest
   category (Cloud & Security, 7 items) at this layout's column
   count, measured directly rather than guessed. Rail and content
   both stretch to fill it via the grid default (align-items:
   stretch). The min() keeps a short viewport safe: on a genuinely
   short screen it clamps below the target and
   .mega-panel__content's own overflow-y:auto (below) takes over
   for whichever category needs it — but since the clamp is driven
   by viewport height only, never by content, every category still
   gets the exact same outer height at a given viewport size. */
.mega-panel__body {
  display: grid;
  grid-template-columns: 230px 1fr;
  height: min(408px, calc(100vh - var(--navbar-height) - var(--space-5)));
}

/* Left rail */
.mega-panel__rail {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-alt);
  border-right: 1px solid var(--color-border);
  padding: var(--space-2) 0;
  overflow-y: auto;
}
.mega-panel__rail-item {
  appearance: none;
  border: none;
  background: transparent;
  border-left: 3px solid transparent;
  text-align: left;
  padding: 0.7rem var(--space-3) 0.7rem calc(var(--space-3) - 3px);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-body-text);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mega-panel__rail-item:hover {
  background: rgba(0, 50, 102, 0.05);
  color: var(--color-navy);
}
.mega-panel__rail-item:focus-visible {
  outline: 2px solid var(--color-blue-600);
  outline-offset: -2px;
}
.mega-panel__rail-item.is-active {
  background: var(--color-surface);
  border-left-color: var(--color-orange);
  color: var(--color-navy);
  font-weight: var(--font-weight-semibold);
}

/* Right detail panel */
.mega-panel__content {
  padding: var(--space-3) var(--space-4) var(--space-2);
  overflow-y: auto;
}
.mega-panel__tabpanel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mega-panel__tabpanel[hidden] {
  display: none;
}

.mega-panel__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
}

/* ASP.NET Zero and ABP.IO each carry 7 items (a "Framework" entry
   was added to both), and several of their item descriptions wrap
   to two lines. A tighter row-gap here — row-gap only, column-gap
   unchanged — keeps all 7 items inside the existing fixed panel
   height without changing that height or any other category's
   spacing; every other tabpanel keeps the default gap above. */
[data-mega-tabpanel="asp-net-zero"] .mega-panel__items,
[data-mega-tabpanel="abp-io"] .mega-panel__items {
  row-gap: var(--space-1);
}
.mega-panel__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.3rem 0;
}
.mega-panel__item-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-navy);
}
.mega-panel__item-desc {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  line-height: 1.45;
}
.mega-panel__item:hover .mega-panel__item-title,
.mega-panel__item:focus-visible .mega-panel__item-title {
  color: var(--color-orange-600);
  text-decoration: underline;
}

.mega-panel__tabfooter {
  /* margin-top: auto (flex) pushes this to the bottom of the fixed-
     height tabpanel regardless of how many items sit above it, so
     the footer link stays visually anchored near the bottom of the
     panel across every category instead of trailing the content. */
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
}
.mega-panel__tabfooter a {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  /* color-blue-600, not color-blue: see the comment on the base `a`
     rule in base.css — color-blue fails the 4.5:1 AA minimum at this
     text size. */
  color: var(--color-blue-600);
}

/* Below 1280px, single-column item list rather than a cramped
   2-column grid. The trigger itself is hidden below 1025px anyway
   (mobile drawer takes over), so this only affects 1025–1279px. */
@media (max-width: 1279px) {
  .mega-panel {
    width: min(760px, calc(100vw - 2 * var(--container-gutter)));
  }
  .mega-panel__body {
    grid-template-columns: 200px 1fr;
    /* Single-column items (below) means each category takes more
       vertical rows than the 2-column layout above, so this range
       needs its own, taller fixed height — sized to fit Cloud &
       Security's 7 stacked items, measured directly at this width. */
    height: min(640px, calc(100vh - var(--navbar-height) - var(--space-5)));
  }
  .mega-panel__items {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------
   Mobile nav toggle
--------------------------------------------------------------- */
.navbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.navbar__toggle-icon,
.navbar__toggle-icon::before,
.navbar__toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 1px;
  position: relative;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.navbar__toggle-icon::before {
  content: "";
  position: absolute;
  top: -6px;
}
.navbar__toggle-icon::after {
  content: "";
  position: absolute;
  top: 6px;
}
.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon {
  background: transparent;
}
.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------
   Mobile drawer
--------------------------------------------------------------- */
.mobile-drawer {
  display: none;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  max-height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  padding: var(--space-2) var(--container-gutter) var(--space-3);
}
.mobile-drawer.is-open {
  display: flex;
}

.mobile-drawer__link,
.mobile-services-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  padding: 0.85rem 0.1rem;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-body-text);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}
.mobile-drawer__link:hover {
  color: var(--color-navy);
  text-decoration: none;
}

.mobile-services-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-3) var(--space-1);
  border-bottom: 1px solid var(--color-border);
}
.mobile-services-panel.is-open {
  display: flex;
}

.mobile-services-group__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.5rem;
}
.mobile-services-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mobile-services-group__list a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-body-text);
}
.mobile-services-group__list a:hover {
  color: var(--color-navy);
}

.mobile-drawer__cta {
  margin-top: var(--space-3);
}

/* ---------------------------------------------------------------
   Breakpoint: at/below 1024px, switch to mobile nav.
   The cutoff is 1024px (not 1023px) because at exactly 1024px the
   full desktop row (8 nav links + Services trigger + Contact +
   CTA button) does not fit and overflows the viewport by ~83px —
   confirmed with an automated check across all required breakpoints.
   Desktop nav only renders once there is enough room, at 1025px+.
--------------------------------------------------------------- */
@media (max-width: 1024px) {
  .navbar__primary {
    display: none;
  }
  .navbar__toggle {
    display: inline-flex;
  }
}

@media (min-width: 1025px) {
  .mobile-drawer {
    display: none !important;
  }
}

/* Category description at the top of each mega-menu panel */
.mega-panel__lead {
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-muted);
}
.mega-panel__lead strong { color: var(--color-navy); margin-right: 6px; }
.mobile-services-group__list--all { margin-top: 8px; }
.mobile-services-group__list--all a { font-weight: var(--font-weight-semibold); }
/* Panel height grows slightly to fit the category description line */
.mega-panel__body { height: min(452px, calc(100vh - var(--navbar-height) - var(--space-5))); }
.mega-panel__items { row-gap: 14px; }
[data-mega-tabpanel="asp-net-zero"] .mega-panel__items,
[data-mega-tabpanel="engineering"] .mega-panel__items,
[data-mega-tabpanel="cloud-security"] .mega-panel__items { row-gap: 10px; }
@media (max-width: 1279px) {
  .mega-panel__body { height: min(720px, calc(100vh - var(--navbar-height) - var(--space-5))); }
}

/* Category description sits under each category name in the left rail */
.mega-panel__body { grid-template-columns: 290px 1fr; height: min(470px, calc(100vh - var(--navbar-height) - var(--space-5))); }
.mega-panel__rail-item { display: flex; flex-direction: column; gap: 3px; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.mega-panel__rail-title { font-size: var(--font-size-sm); }
.mega-panel__rail-desc {
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-muted);
}
.mega-panel__rail-item.is-active .mega-panel__rail-desc { color: var(--color-body-text); }
@media (max-width: 1279px) {
  .mega-panel__body { grid-template-columns: 250px 1fr; height: min(720px, calc(100vh - var(--navbar-height) - var(--space-5))); }
}
.mega-panel__body { height: min(484px, calc(100vh - var(--navbar-height) - var(--space-5))); }
@media (max-width: 1279px) {
  .mega-panel__body { height: min(720px, calc(100vh - var(--navbar-height) - var(--space-5))); }
}

/* Top-menu "Start a Project": theme blue with white text */
.navbar__actions .btn-primary,
.mobile-drawer__cta.btn-primary {
  background: var(--color-blue-600);
  color: #ffffff;
}
.navbar__actions .btn-primary:hover,
.navbar__actions .btn-primary:focus-visible,
.mobile-drawer__cta.btn-primary:hover,
.mobile-drawer__cta.btn-primary:focus-visible {
  background: var(--color-navy);
  color: #ffffff;
}