/* 2026-09-18 (corrected): Astra's real header (header.site-header) is no longer removed via PHP —
   it always renders now, including its own working mobile menu. Hide it purely on desktop, where
   the mega-nav takes over instead. Paired with .elevatus-site-header being hidden at <=1080px below. */
@media (min-width: 1081px) {
  header.site-header {
    display: none !important;
  }
}

/**
 * Elevatus Training — Mega Navigation
 * Custom accessible mega-nav for the Astra child theme.
 *
 * FONTS: Update --display and --body to match the site's typography.
 * The values below are placeholders; check Astra Customizer > Typography
 * for the live site's font stack.
 */

/* ========================================
   DESIGN TOKENS
   ======================================== */

:root {
  --elevatus-ink: #0C1629;
  --elevatus-navy: #194C7F;
  --elevatus-blue: #336699;
  --elevatus-blue-bright: #4a7cae;
  --elevatus-gold: #CC9900;
  --elevatus-gold-deep: #b8890a;
  --elevatus-mist: #E7F6FF;
  --elevatus-mist-strong: #d3e7f5;
  --elevatus-paper: #ffffff;
  --elevatus-cloud: #f7fafc;
  --elevatus-line: #d6e1e9;
  --elevatus-muted: #546678;
  --elevatus-shadow: 0 24px 65px rgba(7, 31, 58, .18);
  --elevatus-header-height: 86px;
  --elevatus-display: "Aptos Display", "Trebuchet MS", sans-serif;
  --elevatus-body: "Aptos", "Segoe UI", sans-serif;
}


/* ========================================
   ACCESSIBILITY
   ======================================== */

.elevatus-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.elevatus-skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--elevatus-paper);
  background: var(--elevatus-ink);
  border-radius: 8px;
  font-family: var(--elevatus-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 150ms ease;
}

.elevatus-skip-link:focus {
  transform: translateY(0);
}


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

.elevatus-site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--elevatus-line);
  box-shadow: 0 2px 10px rgba(8, 31, 58, .04);
}

.elevatus-site-header *,
.elevatus-site-header *::before,
.elevatus-site-header *::after {
  box-sizing: border-box;
}

.elevatus-header-shell {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(490px, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  width: min(1480px, calc(100% - 48px));
  height: var(--elevatus-header-height);
  margin: 0 auto;
}

/* -- Wordmark / Logo -- */

.elevatus-wordmark {
  color: #22262b;
  font-family: var(--elevatus-display);
  font-size: clamp(20px, 1.55vw, 28px);
  font-weight: 500;
  letter-spacing: .055em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.elevatus-wordmark .elevatus-accent {
  color: var(--elevatus-blue);
}

.elevatus-wordmark-logo {
  height: 34px;
  width: auto;
  display: block;
}


/* ========================================
   DESKTOP NAVIGATION
   ======================================== */

.elevatus-desktop-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: 100%;
}

.elevatus-nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px clamp(10px, 1vw, 17px);
  color: var(--elevatus-ink);
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--elevatus-body);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.elevatus-nav-trigger::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 4px;
  background: var(--elevatus-blue);
  border-radius: 4px 4px 0 0;
  content: "";
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity 160ms ease, transform 160ms ease;
}

.elevatus-nav-trigger:hover,
.elevatus-nav-trigger:active,
.elevatus-nav-trigger:focus {
  color: var(--elevatus-blue);
  background: transparent;
  outline: none;
  box-shadow: none;
}

.elevatus-nav-trigger[aria-expanded="true"] {
  color: var(--elevatus-blue);
}

.elevatus-nav-trigger[aria-expanded="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.elevatus-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

.elevatus-nav-trigger[aria-expanded="true"] .elevatus-chevron {
  transform: translateY(2px) rotate(225deg);
}

:focus-visible {
  outline: 3px solid #78bfea;
  outline-offset: 3px;
}


/* ========================================
   HEADER UTILITIES (search, login, cart, CTA)
   ======================================== */

.elevatus-header-utilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.elevatus-utility-button,
.elevatus-utility-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--elevatus-ink);
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--elevatus-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.elevatus-utility-button:hover,
.elevatus-utility-link:hover {
  background: var(--elevatus-gold);
	color:#fff;
}

.elevatus-utility-label {
  margin-left: 7px;
}

.elevatus-utility-separator {
  width: 1px;
  height: 28px;
  margin: 0 3px;
  background: var(--elevatus-line);
}

.elevatus-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.elevatus-cart-button {
  position: relative;
}

.elevatus-cart-count {
  position: absolute;
  top: 7px;
  right: 4px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: var(--elevatus-paper);
  background: var(--elevatus-blue);
  border: 2px solid var(--elevatus-paper);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
}

.elevatus-header-cta,
.elevatus-gold-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 15px;
  color: #1d2430;
  background: var(--elevatus-gold);
  border: 1px solid var(--elevatus-gold);
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(215, 152, 0, .18);
  font-family: var(--elevatus-body);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  font-size:16px;

  background: var(--elevatus-navy);
  border: 1px solid var(--elevatus-navy);
  color:#fff !important;
}

.elevatus-header-cta:hover,
.elevatus-gold-button:hover,
.elevatus-header-cta:active,
.elevatus-gold-button:active {
  background: #ffc83b;
  box-shadow: 0 8px 20px rgba(215, 152, 0, .24);
  transform: translateY(-1px);
  background: #cc9900;
  border-color:#cc9900;
  color:#fff !important;
}


/* ========================================
   SCRIM (overlay behind open menus)
   ======================================== */

.elevatus-menu-scrim {
  position: fixed;
  z-index: 70;
  inset: var(--elevatus-header-height) 0 0;
  background: rgba(4, 26, 49, .42);
  backdrop-filter: blur(2px);
}


/* ========================================
   MEGA MENU PANELS
   ======================================== */

.elevatus-mega-menu {
  position: fixed;
  z-index: 90;
  top: calc(var(--elevatus-header-height) - 1px);
  left: 50%;
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - var(--elevatus-header-height) - 24px);
  overflow: auto;
  background: var(--elevatus-paper);
  border: 1px solid var(--elevatus-line);
  border-radius: 0 0 14px 14px;
  box-shadow: var(--elevatus-shadow);
  transform: translateX(-50%);
  animation: elevatus-reveal-menu 170ms ease-out;
}

.elevatus-mega-menu *,
.elevatus-mega-menu *::before,
.elevatus-mega-menu *::after {
  box-sizing: border-box;
}

.elevatus-mega-menu::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: linear-gradient(var(--elevatus-blue), var(--elevatus-gold));
  content: "";
}

@keyframes elevatus-reveal-menu {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* -- Featured banner (flagship program) -- */

.elevatus-mega-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: 40px 40px 22px 46px;
  color: #fff;
  background: linear-gradient(135deg, #194C7F, #0C1629);
  border-bottom: 1px solid var(--elevatus-line);
}

.elevatus-mega-feature .elevatus-mf-text {
  max-width: 660px;
}

.elevatus-mega-feature .elevatus-mf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  color: #1d2430;
  background: var(--elevatus-gold);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.elevatus-mega-feature h2 {
  margin: 11px 0 4px;
  font-family: var(--elevatus-display);
  font-size: 20px;
  line-height: 1.15;
  color: #fff;
  font-family: 'libre franklin';
  font-weight:700;
}

.elevatus-mega-feature p {
  margin: 0;
  color: #d3e4f2;
  font-size: 14px;
}

.elevatus-mega-feature .elevatus-gold-button {
  min-height: 48px;
  white-space: nowrap;
}

/* -- Grid layout -- */

.elevatus-mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, .92fr);
  gap: 0;
  padding: 36px 40px 30px 46px;
}

.elevatus-menu-column {
  padding: 0 34px;
  border-right: 1px solid var(--elevatus-line);
}

.elevatus-menu-column:first-child {
  padding-left: 0;
}

.elevatus-menu-column:nth-child(2) {
  border-right: 0;
}

/* -- Column kicker & heading -- */

.elevatus-menu-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--elevatus-blue);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0em;
  text-transform: capitalize;
}

.elevatus-menu-kicker::before {
  width: 18px;
  height: 3px;
  background: var(--elevatus-gold);
  border-radius: 3px;
  content: "";
}

.elevatus-menu-heading {
  margin: 0;
  font-family: var(--elevatus-display);
  font-size: 24px;
  font-weight:700;
  line-height: 1.2;
	font-family: 'libre franklin';
}

/* -- Menu links -- */

.elevatus-menu-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 52px;
  padding: 9px 10px;
  color: var(--elevatus-ink);
  border-bottom: 1px solid #e8eff4;
  border-radius: 3px;
  font-weight: 700;
  text-decoration: none;
}

.elevatus-menu-link:hover {
  color: var(--elevatus-blue);
  background: var(--elevatus-mist);
}

.elevatus-menu-link .elevatus-arrow {
  color: var(--elevatus-blue);
  font-size: 22px;
  transform: translateX(0);
  transition: transform 150ms ease;
}

.elevatus-menu-link:hover .arrow {
  transform: translateX(4px);
}

.elevatus-menu-link small {
  display: block;
  margin-top: 2px;
  color: var(--elevatus-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

/* -- Guide card (right column) -- */

.elevatus-guide-card {
  align-self: stretch;
  margin-left: 34px;
  padding: 28px;
  background:
    radial-gradient(circle at 90% 5%, rgba(39, 123, 184, .16), transparent 34%),
    var(--elevatus-mist);
  border: 1px solid var(--elevatus-mist-strong);
  border-radius: 3px;
}

.elevatus-guide-symbol {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 17px;
  place-items: center;
  color: var(--elevatus-paper);
  background: var(--elevatus-blue);
  border-radius: 50%;
  font-family: var(--elevatus-display);
  font-size: 21px;
  font-weight: 800;
}

.elevatus-guide-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.2;
  font-family: 'libre franklin';
  font-weight: 700;
}

.elevatus-guide-card p {
  margin: 0 0 20px;
}

.elevatus-guide-card .elevatus-gold-button {
  width: 100%;
  min-height: 46px;
}

/* -- Panel footer -- */

.elevatus-mega-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 14px 40px 14px 46px;
  background: var(--elevatus-cloud);
  border-top: 1px solid var(--elevatus-line);
}

.elevatus-mega-footer-note {
  color: var(--elevatus-muted);
  font-size: 14px;
}

.elevatus-view-all {
  color: var(--elevatus-blue);
  font-weight: 800;
  text-decoration: none;
}

.elevatus-view-all:hover {
  text-decoration: underline;
}


/* ========================================
   SEARCH PANEL
   ======================================== */

.elevatus-search-panel {
  position: fixed;
  z-index: 110;
  top: calc(var(--elevatus-header-height) - 1px);
  right: max(24px, calc((100vw - 1480px) / 2));
  width: min(440px, calc(100vw - 48px));
  padding: 20px;
  background: var(--elevatus-paper);
  border: 1px solid var(--elevatus-line);
  border-radius: 0 0 12px 12px;
  box-shadow: var(--elevatus-shadow);
}

.elevatus-search-panel *,
.elevatus-search-panel *::before,
.elevatus-search-panel *::after {
  box-sizing: border-box;
}

.elevatus-search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.elevatus-search-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  color: var(--elevatus-ink);
  background: var(--elevatus-cloud);
  border: 1px solid #b9cbd8;
  border-radius: 7px;
  font-family: var(--elevatus-body);
  font-size: 16px;
}

.elevatus-search-form button {
  min-height: 48px;
  padding: 0 18px;
  color: var(--elevatus-paper);
  background: var(--elevatus-blue);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-family: var(--elevatus-body);
  font-weight: 800;
}


/* ========================================
   MOBILE NAVIGATION
   ======================================== */

.elevatus-mobile-toggle {
  display: none;
}

.elevatus-mobile-drawer {
  display: none;
}

/* [hidden] override for JS show/hide */
[hidden].elevatus-mega-menu,
[hidden].elevatus-menu-scrim,
[hidden].elevatus-search-panel,
[hidden].elevatus-mobile-drawer {
  display: none !important;
}


/* ========================================
   RESPONSIVE — Tablet / narrow desktop
   ======================================== */

@media (max-width: 1400px) {
  .elevatus-header-shell {
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    width: calc(100% - 32px);
  }

  .elevatus-wordmark { font-size: 18px; }

  .elevatus-desktop-nav { justify-content: flex-start; }

  .elevatus-nav-trigger { padding-inline: 7px; font-size: 13px; }

  .elevatus-utility-label { display: none; }

  .elevatus-utility-link { min-width: auto; padding-inline: 8px; font-size: 13px; }

  .elevatus-header-utilities { gap: 0; }

  .elevatus-header-cta { padding-inline: 12px; font-size: 13px; }
}


/* ========================================
   RESPONSIVE — Mobile (< 1100px)
   ======================================== */

@media (max-width: 1080px) {
  /* 2026-09-18: matched to Astra's real configured header breakpoint (1080px), not the old 1100px.
     Mega-nav is now fully hidden below this width; Astra's own native mobile header (kept active
     in functions.php) takes over. The rules below this point that build the old custom mobile
     drawer/toggle are now dead code (harmless, kept for reference) since .elevatus-site-header
     itself is hidden — not deleted here to keep this a minimal, low-risk change. */
  .elevatus-site-header {
    display: none !important;
  }

  :root {
    --elevatus-header-height: 74px;
  }

  .elevatus-desktop-nav,
  .elevatus-header-utilities {
    display: none;
  }

  .elevatus-header-shell {
    grid-template-columns: 1fr auto;
    height: var(--elevatus-header-height);
  }

  .elevatus-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--elevatus-ink);
    background: var(--elevatus-mist);
    border: 1px solid var(--elevatus-mist-strong);
    border-radius: 9px;
    cursor: pointer;
  }

  /* Hide desktop-only panels on mobile (scrim + mega panels).
     Search panel is NOT listed here — the JS toggles it via the
     hidden attribute, and [hidden] already provides display:none.
     Forcing it off here would block the mobile search button. */
  .elevatus-menu-scrim,
  .elevatus-mega-menu {
    display: none !important;
  }

  /* Search panel: full-width overlay at mobile sizes */
  .elevatus-search-panel {
    position: fixed;
    top: var(--elevatus-header-height);
    right: 0;
    left: 0;
    width: 100%;
    border-radius: 0;
  }

  .elevatus-mobile-drawer {
    position: fixed;
    z-index: 120;
    inset: var(--elevatus-header-height) 0 0;
    display: block;
    overflow: auto;
    padding: 16px 20px 36px;
    background: var(--elevatus-paper);
  }

  .elevatus-mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }

  .elevatus-mobile-actions a,
  .elevatus-mobile-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 12px;
    color: var(--elevatus-ink);
    background: var(--elevatus-cloud);
    border: 1px solid var(--elevatus-line);
    border-radius: 8px;
    font-family: var(--elevatus-body);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
  }

  .elevatus-mobile-accordion {
    border-top: 1px solid var(--elevatus-line);
  }

  .elevatus-mobile-section {
    border-bottom: 1px solid var(--elevatus-line);
  }

  .elevatus-mobile-section > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 0;
    color: var(--elevatus-ink);
    background: transparent;
    border: 0;
    font-family: var(--elevatus-body);
    font-size: 17px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }

  .elevatus-mobile-section > button span:last-child {
    color: var(--elevatus-blue);
    font-size: 24px;
  }

  .elevatus-mobile-links {
    display: grid;
    gap: 4px;
    padding: 0 0 16px 14px;
  }

  .elevatus-mobile-links a {
    min-height: 44px;
    padding: 10px 12px;
    color: var(--elevatus-blue);
    background: var(--elevatus-mist);
    border-radius: 7px;
    font-weight: 700;
    text-decoration: none;
  }

  .elevatus-mobile-cta {
    width: 100%;
    margin-top: 18px;
  }
}


/* ========================================
   RESPONSIVE — Small mobile (< 640px)
   ======================================== */

@media (max-width: 640px) {
  .elevatus-header-shell {
    width: min(100% - 32px, 1480px);
  }

  .elevatus-wordmark { font-size: 19px; }

  .elevatus-mobile-actions { grid-template-columns: 1fr; }
}


/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .elevatus-site-header *,
  .elevatus-site-header *::before,
  .elevatus-site-header *::after,
  .elevatus-mega-menu *,
  .elevatus-mega-menu *::before,
  .elevatus-mega-menu *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}