/* ============================================================
   Master CMS — Mega menu (optional, Admin -> Settings -> Mega menu)
   A wide panel under the header for any top-level menu link that has
   sub-links: cards with an icon and a short description, an optional
   column of quick links and an optional highlighted box with a button.
   Colours come from the active theme; a theme can restyle every part
   (see theme-syllabus.css for an example). Phones get a simple list.
   ============================================================ */

.mega-panel { --mega-bg: var(--color-background); --mega-ink: var(--color-dark); }

@media (min-width: 901px) {
  .nav-item-mega { position: static; }
  .nav-item-mega > .nav-parent-link { position: relative; display: inline-flex; align-items: center; gap: .35em; }
  .nav-item-mega > .nav-parent-link::after { display: none; }
  /* hover bridge: keeps the panel open while the pointer moves down to it */
  .nav-item-mega > .nav-parent-link::before { content: ''; position: absolute; left: -1rem; right: -1rem; top: 100%; height: 2.2rem; }
  .mega-chev { transition: transform .2s; }
  .nav-item-mega:hover .mega-chev, .nav-item-mega:focus-within .mega-chev, .nav-item-mega.mega-menu-open .mega-chev { transform: rotate(180deg); }

  .mega-panel {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 120;
    padding: .6rem max(1.25rem, calc((100% - 1240px) / 2)) 0;
    opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .nav-item-mega:hover > .mega-panel,
  .nav-item-mega:focus-within > .mega-panel,
  .nav-item-mega.mega-menu-open > .mega-panel {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s;
  }
  .nav-item-mega.mega-menu-closed > .mega-panel { opacity: 0; visibility: hidden; pointer-events: none; }

  .mega-panel-inner {
    background: var(--mega-bg); color: var(--mega-ink);
    border: 1px solid var(--color-line); border-radius: var(--radius-md, 18px);
    box-shadow: 0 24px 60px rgba(0,0,0,.16);
    padding: 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.8rem;
    text-align: left;
  }
  .mega-panel-inner:not(:has(.mega-aside)) { grid-template-columns: minmax(0, 1fr); }
  .mega-heading { margin: 0 0 .9rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
  .mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .6rem; }

  .main-nav .mega-panel .mega-card {
    display: flex; gap: .9rem; align-items: flex-start; padding: .9rem 1rem;
    border-radius: var(--radius-xs, 12px); border: 1px solid var(--color-line);
    background: color-mix(in srgb, var(--mega-bg) 40%, #fff);
    color: var(--mega-ink); font-weight: 400; text-decoration: none;
    transition: border-color .15s, transform .15s, background .15s;
  }
  .main-nav .mega-panel .mega-card:hover, .main-nav .mega-panel .mega-card:focus-visible {
    border-color: var(--mega-ink); transform: translateY(-2px); color: var(--mega-ink);
  }
  .mega-card-icon {
    flex: none; width: 2.6rem; height: 2.6rem; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-highlight); color: var(--mega-ink);
  }
  .mega-card-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
  .mega-card-title { font-weight: 700; font-size: .98rem; line-height: 1.3; }
  .mega-card-desc { font-size: .86rem; line-height: 1.45; opacity: .75; }

  .mega-aside { display: flex; flex-direction: column; gap: 1.3rem; }
  .mega-side { display: flex; flex-direction: column; gap: .55rem; }
  .main-nav .mega-panel .mega-side a { color: var(--mega-ink); font-weight: 600; font-size: .98rem; text-decoration: none; }
  .main-nav .mega-panel .mega-side a:hover { color: var(--color-primary); }
  .mega-feature {
    background: var(--mega-ink); color: #fff; border-radius: var(--radius-xs, 14px);
    padding: 1.3rem; display: flex; flex-direction: column; gap: .55rem; margin-top: auto;
  }
  .mega-feature-heading { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
  .mega-feature-text { margin: 0; font-size: .9rem; line-height: 1.5; opacity: .85; }
  .main-nav .mega-panel .mega-feature-btn {
    align-self: flex-start; margin-top: .3rem; padding: .6rem 1.1rem; font-size: .9rem;
    background: var(--color-highlight); color: var(--mega-ink); border-radius: var(--radius-sm, 999px);
  }
  .main-nav .mega-panel .mega-feature-btn:hover { color: var(--mega-ink); transform: translateY(-1px); }
}

/* ---- Phones and small tablets: a plain list inside the mobile menu ---- */
@media (max-width: 900px) {
  .mega-chev { display: none; }
  .nav-item-mega { width: 100%; }
  .mega-panel { display: none; }
  .nav-item-mega.mega-menu-open > .mega-panel { display: block; }
  .mega-panel-inner { display: block; padding: .2rem 0 .8rem; }
  .mega-heading, .mega-card-desc, .mega-card-icon { display: none; }
  .main-nav .mega-panel a { display: block; padding: .65rem 1.5rem .65rem 2.4rem; font-weight: 500; }
  .mega-card-text { display: block; }
  .mega-aside { border-top: 1px solid rgba(127,127,127,.2); margin-top: .4rem; padding-top: .4rem; }
  .mega-feature { padding: .6rem 1.5rem .2rem 2.4rem; }
  .mega-feature-heading { margin: 0 0 .2rem; font-weight: 700; }
  .mega-feature-text { margin: 0 0 .5rem; font-size: .9rem; opacity: .8; }
  .main-nav .mega-panel .mega-feature-btn { display: inline-block; padding: .55rem 1.1rem; margin: 0 0 .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mega-panel, .mega-chev, .main-nav .mega-panel .mega-card { transition: none; }
}