/* itbuilder/mega-nav — uses the design tokens from theme-overrides.css
   (--grid-max-width, --grid-gutter, --radius-*, --shadow-*, --ease-*) */

/* Aug 2026 mockups: nav links sit flush to the right edge of the header
   row, opposite the logo — not left-aligned immediately after it. (Was
   `space-between`, which behaves identically to flex-start when
   .mega-nav__list is the only visible child, i.e. on every viewport ≥768px
   where the mobile toggle is hidden — see the max-width:767px block below.) */

.mega-nav {
  align-items: center;
  display: flex;
  gap: var(--space-4, 24px);
  justify-content: flex-end;
  position: relative;
}

/* Sept 2026 client feedback: the pillar-colour underlines (below) sit
   flush against each other with no visible gap, so adjacent colours (e.g.
   Security's pink into Resilience's blue) read as one smudged edge rather
   than the mockup's clearly separated underline segments. The underline
   is an inset box-shadow spanning each item's own padded box (see that
   comment below), so the fix is spacing between the ITEMS themselves —
   gap on the list, not a change to the underline rule. */

.mega-nav__list {
  align-items: stretch;
  display: flex;
  gap: var(--space-2, 8px);
}

.mega-nav__item {
  position: static;
}

.mega-nav__trigger,
.mega-nav__link {
  align-items: center;
  color: inherit;
  display: flex;
  font: inherit;
  gap: var(--space-1, 4px);
  padding: var(--space-3, 16px);
  text-decoration: none;
  transition: box-shadow var(--duration-fast, 150ms) var(--ease-standard, ease);
}

/* Sept 2026: the label is its own element (module.html wraps it in
   .mega-nav__label) specifically so its hover opacity doesn't also fade
   the underline box-shadow below — CSS opacity applies to everything
   painted by an element, box-shadow included, and fading the underline
   toward transparent lightened it instead of darkening it (see that
   rule's own comment). Scoping opacity to just this inner span leaves the
   parent's box-shadow at full strength on hover. */

.mega-nav__label {
  transition: opacity var(--duration-fast, 150ms) var(--ease-standard, ease);
}

.mega-nav__trigger {
  background: none;
  border: none;
  cursor: pointer;
}

.mega-nav__trigger:focus-visible,
.mega-nav__link:focus-visible,
.mega-nav-utility__search-toggle:focus-visible,
.mega-nav-utility__login:focus-visible,
.mega-nav__mobile-toggle:focus-visible {
  outline: 2px solid var(--color-pillar-current, currentColor);
  outline-offset: 2px;
}

/* Sept 2026 fix, round 2: main-menu hover feedback for every item, not
   just the colour-coded pillar ones below (which already carry their own
   permanent underline via the --accent modifier). module.css has no
   theme.* HubL access, so "lighter shade" on the header's dark text is
   done as opacity on the label rather than a computed tint.

   The underline was originally the SAME --nav-item-accent colour as the
   permanent bar, darkened only by inheriting the parent's own hover
   opacity — which faded it toward transparent (i.e. toward the light
   header background), reading as lighter, not darker, exactly backwards
   from the brief. Now uses --nav-item-accent-dark instead: the Identity
   Guidelines' "dark" partner swatch for that pillar (set inline by
   module.html's pillar_color_dark_for() macro), a real distinct darker
   colour rather than an alpha fade of the light one, at full opacity
   since it's on the parent, not the label. A plain (non-pillar) item has
   no --nav-item-accent-dark set, so it falls back to the site's own
   primary navy (--theme-primary-color, #192732) per James's confirmation —
   not the Identity Guidelines' separate "Blue (dark)" swatch (#2F2C88),
   which is a different colour despite the similar name. */

.mega-nav__trigger:hover,
.mega-nav__trigger:focus-visible,
.mega-nav__link:hover,
.mega-nav__link:focus-visible {
  box-shadow: inset 0 -3px 0 0 var(--nav-item-accent-dark, var(--theme-primary-color, #192732));
}

.mega-nav__trigger:hover .mega-nav__label,
.mega-nav__trigger:focus-visible .mega-nav__label,
.mega-nav__link:hover .mega-nav__label,
.mega-nav__link:focus-visible .mega-nav__label {
  opacity: 0.6;
}

/* Pillar colour-coding — Aug 2026 Figma mockups show each outcome-pillar
   nav item with its own coloured underline. --nav-item-accent is set inline
   per item by module.html's pillar_color_for() macro (only for items whose
   label matches one of the five pillar names); everything else is
   unaffected. Uses an inset box-shadow instead of border-bottom so it
   doesn't shift the item's box size/padding. */

.mega-nav__trigger--accent,
.mega-nav__link--accent {
  box-shadow: inset 0 -3px 0 0 var(--nav-item-accent, transparent);
}

.mega-nav__column-heading--accent {
  box-shadow: inset 0 -2px 0 0 var(--nav-item-accent, transparent);
  padding-bottom: var(--space-1, 4px);
}

.mega-nav__chevron {
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  height: 6px;
  transform: rotate(45deg);
  transition: transform var(--duration-fast, 150ms) var(--ease-standard, ease);
  width: 6px;
}

.mega-nav__trigger[aria-expanded="true"] .mega-nav__chevron {
  transform: rotate(-135deg);
}

/* Flyout panel */

.mega-nav__panel {
  background: #fff;
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
  box-shadow: var(--shadow-lg);
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 40;
}

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

.mega-nav__panel-inner {
  display: flex;
  gap: var(--space-6, 48px);
  padding: var(--space-6, 48px) var(--grid-gutter, 24px);
}

.mega-nav__columns {
  display: grid;
  flex: 1;
  gap: var(--space-5, 32px);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.mega-nav__column-heading {
  color: inherit;
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-3, 16px);
  text-decoration: none;
}

/* Sept 2026 fix: same sitewide a:hover bug as the other card/title links in
   this theme (see theme-overrides.css's a:hover header comment) — this
   dropdown panel's column headings and links were losing their bold weight
   and flashing the theme's generic blue Links colour on hover. */

a.mega-nav__column-heading:hover,
a.mega-nav__column-heading:focus-visible {
  filter: brightness(0.85);
  text-decoration: underline;
}

.mega-nav__column-links li + li {
  margin-top: var(--space-2, 8px);
}

.mega-nav__column-links a {
  color: inherit;
  text-decoration: none;
}

.mega-nav__column-links a:hover,
.mega-nav__column-links a:focus-visible {
  filter: brightness(0.85);
  text-decoration: underline;
}

.mega-nav__featured {
  border-radius: var(--radius-md, 8px);
  color: inherit;
  display: block;
  flex: 0 0 240px;
  overflow: hidden;
  text-decoration: none;
}

/* Sept 2026 fix: same sitewide a:hover bug as this panel's column links
   above — this card's heading inherits its colour from this anchor, so
   without its own hover rule it had no darkening at all once excluded from
   the generic rule (see theme-overrides.css's a:hover header comment). */

.mega-nav__featured:hover,
.mega-nav__featured:focus-visible {
  filter: brightness(0.85);
}

.mega-nav__featured-img {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md, 8px);
  display: block;
  object-fit: cover;
  width: 100%;
}

.mega-nav__featured-heading {
  display: block;
  font-weight: 700;
  margin-top: var(--space-2, 8px);
}

/* Utility bar — separate top-level element, sits above the logo+nav row
   (see module.html comment + _header.css for the grid placement). Dark on
   the theme's primary colour per the Aug 2026 mockups. */

.mega-nav-utility {
  background-color: var(--theme-primary-color, #192732);
  color: #fff;
}

.mega-nav-utility__inner {
  align-items: center;
  display: flex;
  gap: var(--space-4, 24px);
  justify-content: flex-end;
  padding: var(--space-2, 8px) var(--grid-gutter, 24px);
  position: relative;
}

.mega-nav-utility__phone {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: var(--space-1, 4px);
  text-decoration: none;
  white-space: nowrap;
}

{# Sept 2026 fix: footer-mega.module's own contact links (phone/email in
   its "Contact" column) already underline on hover/focus — confirmed
   directly against that module's own CSS during the footer-hover colour
   fix elsewhere in this file (see that fix's own header comment for the
   full footer-mega investigation). This matches that same treatment on
   the header utility bar's phone link for consistency between the two
   click-to-dial numbers on the site. #}

.mega-nav-utility__phone:hover,
.mega-nav-utility__phone:focus-visible {
  text-decoration: underline;
}

.mega-nav-utility__login {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-sm, 4px);
  color: inherit;
  display: inline-flex;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-3, 16px);
  text-decoration: none;
  transition: border-color var(--duration-fast, 150ms) var(--ease-standard, ease),
    background-color var(--duration-fast, 150ms) var(--ease-standard, ease);
  white-space: nowrap;
}

.mega-nav-utility__login:hover,
.mega-nav-utility__login:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

{#
  Sept 2026 fix: this is a plain <button> with no other class, so it was
  silently picking up this file's own sitewide button:hover/button:focus
  rule (§ Buttons, above — theme.json's global button hover treatment,
  meant for real CTA buttons like .button/.hs-button). That rule adds a
  hover background AND border via , and going
  from this button's own border:none at rest to an actual border-width on
  hover changes the button's own box size — with justify-content: flex-end
  on the utility bar's flex row, that size change reflows every sibling to
  its left (the phone number), which is the "jerky resize" bug James
  flagged. box-sizing: border-box alone doesn't fix this: the border still
  adds to the CONTENT the button needs to fit, so the fix is to give this
  button its own explicit, higher-specificity hover/focus rule (a class
  selector beats the sitewide element selector regardless of source order)
  that reproduces the nice white-box framing James wants to keep, but
  without ever changing border-width or padding — background-color is the
  only property allowed to change between rest and hover here.
#}

.mega-nav-utility__search-toggle {
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm, 4px);
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  padding: var(--space-2, 8px);
  transition: background-color var(--duration-fast, 150ms) var(--ease-standard, ease),
    color var(--duration-fast, 150ms) var(--ease-standard, ease);
}

.mega-nav-utility__search-toggle:hover,
.mega-nav-utility__search-toggle:focus-visible {
  background-color: #fff;
  border-color: transparent;
  color: var(--theme-primary-color, #192732);
}

.mega-nav-utility__search {
  background: #fff;
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
  box-shadow: var(--shadow-lg);
  color: initial;
  position: absolute;
  right: var(--grid-gutter, 24px);
  top: 100%;
  z-index: 50;
}

.mega-nav-utility__search[hidden] {
  display: none;
}

.mega-nav-utility__search-form {
  align-items: center;
  display: flex;
  padding: var(--space-2, 8px);
}

.mega-nav__mobile-toggle {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2, 8px);
}

.mega-nav__mobile-toggle-bar {
  background: currentColor;
  border-radius: var(--radius-pill, 999px);
  display: block;
  height: 2px;
  width: 22px;
}

/* Mobile drawer */

.mega-nav-mobile {
  background: #fff;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: var(--header-height, 64px);
  z-index: 60;
}

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

.mega-nav-mobile__toggle {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: var(--space-3, 16px) var(--space-4, 24px);
  text-align: left;
  width: 100%;
}

.mega-nav-mobile__toggle-icon {
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  height: 6px;
  transform: rotate(45deg);
  transition: transform var(--duration-fast, 150ms) var(--ease-standard, ease);
  width: 6px;
}

.mega-nav-mobile__toggle[aria-expanded="true"] .mega-nav-mobile__toggle-icon {
  transform: rotate(-135deg);
}

.mega-nav-mobile__submenu[hidden] {
  display: none;
}

.mega-nav-mobile__submenu {
  padding-left: var(--space-4, 24px);
}

.mega-nav-mobile__link {
  color: inherit;
  display: block;
  padding: var(--space-3, 16px) var(--space-4, 24px);
  text-decoration: none;
}

/* Pillar colour-coding, mobile — a left accent bar reads better than an
   underline in a vertical list. */

.mega-nav-mobile__toggle--accent,
.mega-nav-mobile__link--accent {
  box-shadow: inset 3px 0 0 0 var(--nav-item-accent, transparent);
}

@media (max-width: 767px) {
  .mega-nav__list {
    display: none;
  }

  .mega-nav__mobile-toggle {
    display: flex;
  }

  .mega-nav-utility__inner {
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-3, 16px);
  }
}

@media (min-width: 768px) {
  .mega-nav-mobile,
  .mega-nav__mobile-toggle {
    display: none;
  }
}