/* Programs / Challenges mega-menu — Figma Frame 1984079073 */

@media (min-width: 1024px) {
  .hv3-item--programs-mega {
    /* Popover caret — mega-menu-caret.svg artboard 28×11 (override if Figma export differs) */
    --hv3-mega-gap: 16px;
    --hv3-mega-caret-visual-h: 11px;
    --hv3-mega-cap-h: 16px;
    --hv3-mega-caret-left: 56px;
    /*
     * Figma Rectangle 16495: 1px #FFF @ 16%, inner, all sides.
     * cap-panel-top / cap-border-y: viewBox coords (see syncMegaTopCap in nav-v3.js).
     */
    --hv3-mega-line: 1;
    --hv3-mega-border: rgba(255, 255, 255, 0.16);
    --hv3-mega-panel-bg: #070400;
    --hv3-mega-radius: 16px;
    --hv3-mega-desc-hover: #ffbe7b99;
    --hv3-mega-row-hover-bg: #ffcb961a;
    --hv3-mega-icon-bg: #ffcb9629;
    --hv3-mega-icon-hover-bg: #ffcb9629;
    --hv3-mega-cap-panel-top: 11;
    /* Center of 1px inner top stroke (panelTop + line/2) — matches inset bottom band */
    --hv3-mega-cap-border-y: calc(var(--hv3-mega-cap-panel-top) + var(--hv3-mega-line) / 2);
  }

  /* Single fade for caret + panel (avoids arrow/menu disappearing out of sync). */
  .hv3-item--programs-mega .hv3-mega-popover {
    position: absolute;
    top: 100%;
    left: 0;
    width: min(960px, calc(100vw - 2 * var(--hv3-page-pad, 40px)));
    margin-top: var(--hv3-mega-gap);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease, visibility 0.14s ease;
    z-index: 20;
    isolation: isolate;
  }

  .hv3-item--programs-mega:hover .hv3-mega-popover,
  .hv3-item--programs-mega.is-open .hv3-mega-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .hv3-item--programs-mega .hv3-mega-popover::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--hv3-mega-gap));
    left: 0;
    right: 0;
    height: var(--hv3-mega-gap);
  }

  .hv3-item--programs-mega .hv3-mega-popover .hv3-dropdown--mega {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 0;
    min-width: 0;
    width: 100%;
    padding: 24px 28px 28px;
    overflow: visible;
    background: var(--hv3-mega-panel-bg);
    border: none;
    border-radius: var(--hv3-mega-radius);
    /* Inset edges follow radius; top edge is hv3-mega-top-cap SVG */
    box-shadow:
      inset 1px 0 0 0 var(--hv3-mega-border),
      inset -1px 0 0 0 var(--hv3-mega-border),
      inset 0 -1px 0 0 var(--hv3-mega-border),
      0 24px 48px rgba(0, 0, 0, 0.55);
    z-index: auto;
    gap: 0;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    /* Inherit from .hv3-mega-popover so closed popover does not leave a huge hit target. */
    pointer-events: inherit;
    transition: none !important;
  }

  .hv3-item--programs-mega .hv3-mega-popover .hv3-dropdown--mega::before,
  .hv3-item--programs-mega .hv3-mega-popover .hv3-dropdown--mega::after {
    display: none;
  }

  /* Top edge + caret: fill and stroke share one coordinate system (nav-v3.js). */
  .hv3-dropdown--mega .hv3-mega-top-cap {
    position: absolute;
    top: calc(-1 * var(--hv3-mega-caret-visual-h));
    left: 0;
    width: 100%;
    height: var(--hv3-mega-cap-h);
    z-index: 5;
    pointer-events: none;
    overflow: visible;
    shape-rendering: geometricPrecision;
  }

  .hv3-mega-top-cap-fill {
    fill: var(--hv3-mega-panel-bg);
    stroke: none;
  }

  .hv3-mega-top-cap-stroke {
    fill: none;
    stroke: var(--hv3-mega-border);
    stroke-width: var(--hv3-mega-line);
    vector-effect: non-scaling-stroke;
    stroke-linejoin: miter;
    stroke-miterlimit: 2;
    stroke-linecap: butt;
  }

  .hv3-mega {
    display: grid;
    gap: 0 8px;
    align-items: start;
  }

  .hv3-mega--cols-1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .hv3-mega--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hv3-mega--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hv3-mega-col {
    position: relative;
    padding: 0 20px;
    min-width: 0;
  }

  .hv3-mega-col + .hv3-mega-col::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
  }

  .hv3-mega-kicker {
    margin: 0 0 12px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
  }

  .hv3-mega-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .hv3-mega-link {
    display: block;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.18s ease;
  }

  .hv3-mega-item {
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 11px;
    background: transparent;
  }

  /* Figma mega row: no default nav dropdown glow */
  .hv3-mega-item.hv3-drop-item::before,
  .hv3-mega-item.hv3-drop-item::after {
    display: none;
  }

  .hv3-mega-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .hv3-mega-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
  }

  .hv3-mega-desc {
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
  }

  /* Figma — row hover: #FFCB961A fill, no border */
  .hv3-mega-link:hover,
  .hv3-mega-link:focus-visible {
    background: var(--hv3-mega-row-hover-bg);
  }

  .hv3-mega-link:hover .hv3-mega-title,
  .hv3-mega-link:focus-visible .hv3-mega-title {
    color: var(--hv3-brand, #f98715);
  }

  .hv3-mega-link:hover .hv3-mega-desc,
  .hv3-mega-link:focus-visible .hv3-mega-desc {
    color: var(--hv3-mega-desc-hover);
  }

  .hv3-item--programs-mega .hv3-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--hv3-mega-icon-bg);
    border: none;
    color: var(--hv3-brand, #f98715);
    transition: none;
  }

  /* Figma: 40×40 icon box, 20×20 orange glyph (sprite paths are white in asset) */
  .hv3-item--programs-mega .hv3-icon-box img,
  .hv3-item--programs-mega .hv3-icon-box svg.hv3-nav-sub-icon,
  .hv3-item--programs-mega .hv3-icon-box .iconfont {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }

  .hv3-item--programs-mega .hv3-icon-box .iconfont {
    color: var(--hv3-brand, #f98715);
  }

  .hv3-item--programs-mega .hv3-nav-sub-icon [fill="#FFFFFF"],
  .hv3-item--programs-mega .hv3-nav-sub-icon [fill="#fff"],
  .hv3-item--programs-mega .hv3-nav-sub-icon [fill="white"] {
    fill: currentColor;
  }

  /* Figma — icon box default + hover: #FFCB9629 (overrides .hv3-drop-link:hover .hv3-icon-box) */
  .hv3-item--programs-mega .hv3-mega-link:hover .hv3-icon-box,
  .hv3-item--programs-mega .hv3-mega-link:focus-visible .hv3-icon-box {
    background: var(--hv3-mega-icon-hover-bg);
    border: none;
    color: var(--hv3-brand, #f98715);
    box-shadow: none;
  }

  .hv3-item--programs-mega .hv3-mega-link:hover .hv3-icon-box .iconfont,
  .hv3-item--programs-mega .hv3-mega-link:focus-visible .hv3-icon-box .iconfont {
    color: var(--hv3-brand, #f98715);
  }
}

/* Mobile mega groups */
.hv3-acc-panel--mega {
  gap: 16px;
}

.hv3-mega-mobile-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hv3-mega-mobile-group .hv3-mega-kicker {
  margin: 8px 0 4px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

.hv3-acc-link--mega {
  align-items: flex-start;
  gap: 12px;
}

.hv3-acc-link--mega .hv3-icon-box {
  background: #ffcb9629;
  border: none;
}

.hv3-acc-link--mega .hv3-mega-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hv3-acc-link--mega .hv3-mega-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.hv3-acc-link--mega .hv3-mega-desc {
  font-size: 12px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.45);
}

.hv3-acc-link--mega:hover,
.hv3-acc-link--mega:focus-visible {
  background: #ffcb961a;
}

.hv3-acc-link--mega:hover .hv3-mega-desc,
.hv3-acc-link--mega:focus-visible .hv3-mega-desc {
  color: var(--hv3-mega-desc-hover, #ffbe7b99);
}

.hv3-acc-link--mega:hover .hv3-icon-box,
.hv3-acc-link--mega:focus-visible .hv3-icon-box {
  background: #ffcb9629;
  border: none;
}