/**
 * "Browse classes" navigation panel.
 * Built on native <details>/<summary> (see nav-mega-menu.php); this file
 * only handles look and position, never open/close logic. Shares tokens
 * with the rest of the header.
 *
 * Desktop and mobile share the same trigger (name + chevron, one level
 * open at a time) but not the same expansion: in the drawer the subject
 * list opens in place, pushing the rest of the column down, because
 * there's nothing beside it to disturb. On the wider desktop panel it
 * opens as a floating sub-dropdown instead, so a still-collapsed
 * neighbor card never gets dragged into a taller shape by the one next
 * to it — see the desktop block below for the position: absolute rule
 * that makes that true.
 */

.dg-mega { position: relative; flex-shrink: 0; }

/* Kill the default disclosure triangle in every browser. */
.dg-mega > summary,
.dg-mega-level > summary { list-style: none; }
.dg-mega > summary::-webkit-details-marker,
.dg-mega-level > summary::-webkit-details-marker { display: none; }

.dg-mega__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--dg-space-2);
  padding: 7px var(--dg-space-4);
  border: 1px solid var(--dg-line-strong);
  border-radius: var(--dg-radius-pill);
  background: var(--dg-surface);
  color: var(--dg-ink);
  font-family: var(--dg-font-body);
  font-weight: 700;
  font-size: var(--dg-text-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dg-transition), color var(--dg-transition), border-color var(--dg-transition);
}
.dg-mega__toggle svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.dg-mega__toggle .dg-mega__chevron { width: 13px; height: 13px; stroke-width: 2; transition: transform var(--dg-transition); }

.dg-mega__toggle:hover { border-color: var(--dg-maroon); color: var(--dg-maroon); }
.dg-mega[open] > .dg-mega__toggle {
  background: var(--dg-maroon);
  border-color: var(--dg-maroon);
  color: var(--dg-surface);
}
.dg-mega[open] > .dg-mega__toggle .dg-mega__chevron { transform: rotate(180deg); }

.dg-mega__panel { margin-top: var(--dg-space-3); }

.dg-mega__group + .dg-mega__group {
  margin-top: var(--dg-space-5);
  padding-top: var(--dg-space-5);
  border-top: 1px solid var(--dg-line);
}

.dg-mega__group-head { margin-bottom: var(--dg-space-3); }
.dg-mega__group-title {
  margin: 0 0 3px;
  font-size: var(--dg-text-base);
  color: var(--dg-maroon-deep);
}
.dg-mega__group-types {
  margin: 0;
  color: var(--dg-ink-muted);
  font-size: var(--dg-text-xs);
  line-height: var(--dg-leading-snug);
}

/* align-items: start matters once any group is paired into columns (see
   the desktop 2-up rule below): grid rows stretch every cell in the row to
   match the tallest one by default, so opening one level would otherwise
   drag its still-collapsed neighbor down into a tall, empty box. Starting
   each card at its own natural height keeps that from happening. */
.dg-mega__levels { display: grid; gap: var(--dg-space-2); align-items: start; }

.dg-mega-level {
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius-sm);
  background: var(--dg-surface);
  overflow: hidden;
  transition: border-color var(--dg-transition);
}
.dg-mega-level:hover { border-color: var(--dg-line-strong); }

.dg-mega-level__summary {
  display: flex;
  align-items: center;
  gap: var(--dg-space-2);
  padding: var(--dg-space-3);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--dg-text-sm);
  color: var(--dg-ink);
  transition: background var(--dg-transition);
}
.dg-mega-level__summary:hover { background: var(--dg-maroon-tint-03); }
.dg-mega-level__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--dg-maroon);
}
.dg-mega-level__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.dg-mega-level__name { flex: 1; min-width: 0; }
.dg-mega-level__meta {
  flex-shrink: 0;
  color: var(--dg-ink-faint);
  font-weight: 500;
  font-size: var(--dg-text-2xs);
}
.dg-mega-level__chevron {
  flex-shrink: 0;
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--dg-ink-faint);
  transition: transform var(--dg-transition);
}
.dg-mega-level[open] > .dg-mega-level__summary .dg-mega-level__chevron { transform: rotate(180deg); }
.dg-mega-level[open] > .dg-mega-level__summary { border-bottom: 1px solid var(--dg-line); }

.dg-mega-level__body { padding: var(--dg-space-3); background: var(--dg-surface-alt); }

.dg-mega-level__viewall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--dg-space-2);
  font-weight: 600;
  font-size: var(--dg-text-sm);
  text-decoration: none;
}
.dg-mega-level__viewall:hover { text-decoration: underline; text-underline-offset: 3px; }
.dg-mega-level__viewall svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dg-transition);
}
.dg-mega-level__viewall:hover svg { transform: translateX(2px); }

.dg-mega-level__subjects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--dg-space-3);
  list-style: none;
  margin: 0; padding: 0;
}
.dg-mega-level__subjects a {
  display: block;
  padding: 5px 0;
  font-size: var(--dg-text-sm);
  text-decoration: none;
  color: var(--dg-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dg-transition);
}
.dg-mega-level__subjects a:hover { color: var(--dg-maroon); }

.dg-mega-level__empty { margin: 0; color: var(--dg-ink-muted); font-size: var(--dg-text-sm); }

/* ---------- Desktop: full curriculum panel ---------- */
@media (min-width: 1081px) {
  /* .dg-mega sits inside .dg-nav__actions, which is right-aligned — open
     the panel right-edge-aligned to the button so a wide panel can never
     overflow the viewport. */
  .dg-mega__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    left: auto;
    z-index: var(--dg-z-drawer);
    width: min(860px, 92vw);
    max-height: calc(100vh - var(--dg-header-height) - var(--dg-space-6));
    overflow-y: auto;
    padding: var(--dg-space-6);
    background: var(--dg-surface);
    border: 1px solid var(--dg-line);
    border-radius: var(--dg-radius-lg);
    box-shadow: var(--dg-shadow-lg);
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 0 var(--dg-space-6);
    animation: dg-mega-in var(--dg-transition-slow) both;
  }
  @keyframes dg-mega-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dg-mega__panel { animation: none; }
  }

  .dg-mega__group + .dg-mega__group {
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--dg-space-6);
    border-top: 0;
    border-left: 1px solid var(--dg-line);
  }

  /* Matric & Intermediate has four levels, so it runs two tiles across;
     O/A Level has two and stays in one column. */
  .dg-mega__group:first-child .dg-mega__levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dg-space-3);
  }

  /* Same accordion trigger as the drawer (bordered card, chevron), but the
     subject list opens as a true sub-dropdown — absolutely positioned, so
     it floats above the panel instead of pushing the grid around. That's
     what makes a neighboring level's card stay put (same height, same
     shape) no matter which level is open, on a 900px-wide panel where
     "just let it push the layout" was never necessary in the first place. */
  .dg-mega-level { position: relative; overflow: visible; }
  .dg-mega-level__body {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 5;
    width: max(100%, 280px);
    max-width: 320px;
    border: 1px solid var(--dg-line);
    border-radius: var(--dg-radius);
    box-shadow: var(--dg-shadow-lg);
  }
  .dg-mega-level__subjects { grid-template-columns: minmax(0, 1fr); }
  .dg-mega-level__viewall { font-size: var(--dg-text-xs); }
}

/* ---------- Mobile / tablet: panel sits inside the drawer ---------- */
@media (max-width: 1080px) {
  .dg-mega { order: -1; width: 100%; }
  .dg-mega__toggle {
    width: 100%;
    justify-content: space-between;
    padding: var(--dg-space-3) var(--dg-space-4);
  }
  .dg-mega__toggle > span:first-of-type { margin-right: auto; margin-left: var(--dg-space-2); }
  .dg-mega__panel {
    position: static;
    width: 100%;
    max-height: none;
    margin-top: var(--dg-space-2);
    padding: var(--dg-space-4);
    box-shadow: none;
    border: 1px solid var(--dg-line);
    border-radius: var(--dg-radius);
    background: var(--dg-surface-alt);
  }
  .dg-mega-level__subjects { grid-template-columns: minmax(0, 1fr); }
  .dg-mega-level__summary { min-height: 46px; }
}


/* Touch targets in the drawer. The subject links are ~19px as text, which
   is the smallest tappable thing on a phone and sits in a dense list —
   exactly where a mis-tap is most likely. Desktop is unaffected: the panel
   there is a pointer surface and the tighter rhythm reads better. */
@media (max-width: 1080px) {
  .dg-mega-level__list a { display: block; padding-block: 9px; }
}