/* ACS Nav — custom Divi module
   ================================================================
   Layout modes:
     - Desktop: .acs-header.is-desktop (set by JS when the header row
       has enough room to show the inline nav + CTAs without wrapping)
     - Compact: .acs-header is NOT .is-desktop (JS fallback) OR the
       viewport matches @media (max-width: 959px). The compact mode
       hides the inline nav, shows a hamburger, and reveals a
       slide-down panel with staggered item reveal.

   The compact mode is the DEFAULT. JS adds .is-desktop after
   measuring available space, so the nav degrades gracefully if JS
   fails (you get mobile layout) and automatically collapses to
   compact mode even on wide viewports if there are too many nav
   items to fit.
*/

:root {
  --acs-bg: #0a2a3b;
  --acs-bg-2: #0e3449;
  --acs-fg: #ffffff;
  --acs-fg-dim: #cfe3ee;
  --acs-accent: #f15a29;
  --acs-accent-2: #1da1d6;
  --acs-border: rgba(255,255,255,.12);
  --acs-radius: 4px;
  --acs-font: "Helvetica Neue", Arial, sans-serif;
  --acs-header-offset: 0px; /* topped up by .admin-bar rules below */
}

* { box-sizing: border-box; }

/* ---------- header shell ---------- */
.acs-header {
  background: transparent;
  color: var(--acs-fg);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.acs-header.is-scrolled {
  background: var(--acs-bg);
  box-shadow: 0 2px 16px rgba(0,0,0,.3);
}

.acs-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 80px;
}

/* When the wrapping Divi section uses positioning="fixed", we need to
   offset it below the WordPress admin bar. `body.admin-bar` is only
   present for logged-in users with admin-bar support. 32px desktop, 46px mobile. */
body.admin-bar .et_pb_section:has(.acs-header),
body.admin-bar .acs-header {
  top: 32px !important;
}
@media (max-width: 782px) {
  body.admin-bar .et_pb_section:has(.acs-header),
  body.admin-bar .acs-header {
    top: 46px !important;
  }
}
/* And the slide-down panel's padding-top, so its items don't hide
   under the admin bar + header stack. */
body.admin-bar .acs-nav { padding-top: calc(80px + 32px); }
@media (max-width: 782px) {
  body.admin-bar .acs-nav { padding-top: calc(80px + 46px); }
}

/* ================================================================
   COMPACT MODE (default)
   Applies when .acs-header does NOT have .is-desktop class.
   This is also the default before JS runs.
   ================================================================ */

.acs-header { background: var(--acs-bg); }
.acs-nav-toggle,
.acs-nav__cta {
  position: relative;
  z-index: 120;
}
.acs-nav-toggle {
  margin-right: auto;
  order: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 0;
  color: var(--acs-fg);
  padding: .5rem 0;
  cursor: pointer;
  font: inherit;
}

.acs-nav-toggle__bars,
.acs-nav-toggle__bars::before,
.acs-nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: transform .2s, top .2s, bottom .2s, opacity .2s;
}
.acs-nav-toggle__bars::before,
.acs-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.acs-nav-toggle__bars::before { top: -6px; }
.acs-nav-toggle__bars::after  { top:  6px; }
.acs-nav-toggle[aria-expanded="true"] .acs-nav-toggle__bars { background: transparent; }
.acs-nav-toggle[aria-expanded="true"] .acs-nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.acs-nav-toggle[aria-expanded="true"] .acs-nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

.acs-nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  padding-top: 80px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(29,161,214,.25), transparent 60%),
    linear-gradient(180deg, var(--acs-bg) 0%, #061a27 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path .55s cubic-bezier(.77, 0, .175, 1),
              opacity .25s ease;
  pointer-events: none;
  max-height: 100vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0);
}
.acs-nav.is-open {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

/* Kill Divi/theme list defaults */
.acs-nav__list,
.acs-nav__list ul,
.acs-nav__sub,
.acs-nav__list li,
.acs-nav__sub li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
}
.acs-nav__list::before,
.acs-nav__list li::before,
.acs-nav__sub li::before {
  content: none !important;
  display: none !important;
}
.acs-nav__list {
  margin: 0 !important;
  padding: .5rem 0 !important;
}
.acs-nav__sub {
  margin: 0 !important;
  padding-left: 0 !important;
}

.acs-nav__item {
  position: relative;
  border-top: 1px solid var(--acs-border);
  margin: 0 !important;
  padding-left: 0 !important;
  background: none !important;
  /* staggered reveal in compact mode */
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
  transition-delay: 0ms;
}
.acs-nav__item:first-child { border-top: 0; }
.acs-nav.is-open .acs-nav__item {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(160ms + var(--i, 0) * 70ms);
}
.acs-nav__item:nth-child(1) { --i: 0; }
.acs-nav__item:nth-child(2) { --i: 1; }
.acs-nav__item:nth-child(3) { --i: 2; }
.acs-nav__item:nth-child(4) { --i: 3; }
.acs-nav__item:nth-child(5) { --i: 4; }
.acs-nav__item:nth-child(6) { --i: 5; }
.acs-nav__item:nth-child(7) { --i: 6; }
.acs-nav__item:nth-child(8) { --i: 7; }
.acs-nav__item:nth-child(9) { --i: 8; }

.acs-nav__item > a {
  color: var(--acs-fg);
  text-decoration: none;
  display: block;
  padding: 1.1rem 1.5rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.acs-nav__item > a:hover,
.acs-nav__item > a:focus-visible { background: rgba(255,255,255,.06); }

/* mobile sub-toggle (chevron button beside parent link) */
.acs-sub-toggle {
  position: absolute;
  right: .75rem;
  top: 0;
  height: 3.88rem;
  width: 44px;
  background: transparent;
  border: 0;
  color: var(--acs-fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acs-sub-toggle::before {
  content: "";
  display: block;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.acs-sub-toggle[aria-expanded="true"]::before { transform: rotate(-135deg) translate(-2px, -2px); }

/* ----- THE BUG FIX: collapsed submenu ----- */
/* Old version set max-height:0 + background; the background still
   painted a dark stripe and the content peeked through. We now use
   display:none when closed and display:block when .is-open.
   Loses the max-height transition but removes the visual glitch. */
.acs-nav__sub {
  display: none;
  background: rgba(0,0,0,.2);
  overflow: hidden;
}
.acs-has-sub.is-open > .acs-nav__sub {
  display: block;
}
.acs-nav__sub a {
  display: block;
  padding: .75rem 2.5rem;
  color: var(--acs-fg-dim);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
}
.acs-nav__sub a:hover,
.acs-nav__sub a:focus-visible { background: rgba(255,255,255,.06); color:#fff; }

/* CTAs in compact mode — stay visible in the header row */
.acs-nav__cta {
  display: flex;
  gap: .4rem;
  margin-left: auto;
  flex-wrap: nowrap;
}
.acs-nav__cta .acs-btn {
  padding: .6rem .75rem;
  font-size: .68rem;
  letter-spacing: .1em;
}

.acs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.35rem;
  border-radius: 0;
  text-decoration: none;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.acs-btn:hover,
.acs-btn:focus-visible { transform: translateY(-1px); }

.acs-btn--primary { background: var(--acs-accent); color: #fff; }
.acs-btn--primary:hover,
.acs-btn--primary:focus-visible { background: #d94a1c; }

.acs-btn--join { background: var(--acs-accent-2); color: #fff; }
.acs-btn--join:hover,
.acs-btn--join:focus-visible { background: #1787b5; }

.acs-btn--ghost { background: #ffffff; color: var(--acs-bg); }
.acs-btn--ghost:hover,
.acs-btn--ghost:focus-visible { background: #e9eef2; }

/* ================================================================
   DESKTOP MODE
   Applies ONLY when .acs-header.is-desktop is set by JS after it
   measures the natural width of nav + CTAs and finds they fit.
   ================================================================ */

.acs-header.is-desktop { background: transparent; }
.acs-header.is-desktop.is-scrolled {
  background: var(--acs-bg);
  box-shadow: 0 2px 16px rgba(0,0,0,.3);
}

.acs-header.is-desktop .acs-header__inner {
  padding: 1rem 1.5rem;
}

.acs-header.is-desktop .acs-nav-toggle { display: none; }

.acs-header.is-desktop .acs-nav {
  position: static;
  max-height: none;
  overflow: visible;
  background: transparent;
  display: flex;
  align-items: center;
  transform: none;
  pointer-events: auto;
  box-shadow: none;
  margin-right: auto;
  margin-left: 0;
  padding-top: 0;
  clip-path: none;
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.acs-header.is-desktop .acs-nav__item {
  opacity: 1;
  transform: none;
  transition: none;
  border-top: 0;
}
.acs-header.is-desktop .acs-nav__item > a::before { display: none; }

.acs-header.is-desktop .acs-nav__list {
  display: flex;
  padding: .5rem 1rem !important;
  gap: .25rem;
  background: var(--acs-bg);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
.acs-header.is-desktop.is-scrolled .acs-nav__list {
  background: transparent;
  box-shadow: none;
}
.acs-header.is-desktop .acs-nav__item > a {
  padding: 1.25rem 1rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: normal;
}
.acs-header.is-desktop .acs-nav__item > a:hover,
.acs-header.is-desktop .acs-nav__item:focus-within > a {
  background: rgba(255,255,255,.08);
}

.acs-header.is-desktop .acs-has-sub > a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: .5rem;
}

.acs-header.is-desktop .acs-sub-toggle { display: none; }

.acs-header.is-desktop .acs-nav__sub {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--acs-bg-2);
  max-height: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  border-top: 2px solid var(--acs-accent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
  padding: .5rem 0 !important;
}
.acs-header.is-desktop .acs-has-sub:hover > .acs-nav__sub,
.acs-header.is-desktop .acs-has-sub:focus-within > .acs-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.acs-header.is-desktop .acs-nav__sub a {
  padding: .65rem 1.25rem;
  font-size: .9rem;
  font-weight: 500;
}

.acs-header.is-desktop .acs-nav__cta {
  padding: 0;
  border: 0;
  margin-left: 0;
  gap: .5rem;
  flex-wrap: nowrap;
  background: transparent;
}
.acs-header.is-desktop .acs-nav__cta .acs-btn {
  padding: .85rem 1.35rem;
  font-size: .78rem;
  letter-spacing: .14em;
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .acs-nav,
  .acs-nav__item {
    transition-duration: .15s;
    transition-delay: 0ms;
  }
}

/* ---------- current page state ---------- */
.acs-nav__item > a[aria-current="page"],
.acs-nav__sub a[aria-current="page"] {
  color: var(--acs-accent);
}

/* ---------- focus visibility ---------- */
:focus-visible {
  outline: 2px solid var(--acs-accent-2);
  outline-offset: 2px;
}