/*
 * LiveTV.eu - hoofdnavigatie: mega menu voor Categories (alle pagina's).
 *
 * Het paneel hangt aan .mainnav (position:relative), zodat het niet wordt afgeknipt door de
 * horizontaal scrollbare navigatierij. Desktop: meerdere kolommen. Mobiel: accordeon
 * (details/summary, door ui.js dichtgezet). Zonder JavaScript blijft "Categories" gewoon een
 * link naar het categorie-overzicht.
 */

.mainnav{position:relative}
.nav-mega{position:static;display:flex;align-items:stretch}
.nav-mega > a{padding-inline-end:6px!important}
.mega-btn{display:inline-grid;place-items:center;width:30px;margin:6px 4px 6px 0;padding:0;border:0;border-radius:8px;
  background:transparent;color:#c7d8f2;cursor:pointer}
.mega-btn .nav-ic{width:16px;height:16px;transition:transform .2s ease}
.mega-btn:hover,.mega-btn[aria-expanded="true"]{color:#fff;background:rgba(47,157,255,.12)}
.mega-btn[aria-expanded="true"] .nav-ic{transform:rotate(180deg)}
.mega-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.mega{position:absolute;inset-inline:0;top:100%;z-index:70;padding:18px clamp(14px,2vw,26px) 14px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);background:rgba(4,10,20,.98);
  box-shadow:0 26px 56px rgba(0,0,0,.6);max-height:min(72vh,640px);overflow-y:auto;white-space:normal}
.mega[hidden]{display:none}
.mega-cols{display:grid;gap:14px 22px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));max-width:1320px;margin:0 auto}
.mega-group summary{list-style:none;margin:0 0 8px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7fe9f7}
.mega-group summary::-webkit-details-marker{display:none}
.mega-group ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.mainnav .mega-group a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 8px!important;
  border:0!important;border-radius:8px!important;font-size:.92rem;color:#dbe7f8;background:none}
.mainnav .mega-group a:hover{background:rgba(47,157,255,.12)!important;color:#fff}
.mainnav .mega-group a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mega-group a span{font-size:.76rem;color:var(--muted)}
.mega-group .mega-sub a{padding-inline-start:18px!important;font-size:.88rem}
.mainnav .mega-all{display:inline-flex;align-items:center;gap:6px;margin:12px auto 0;padding:8px 10px!important;border:0!important;
  font-weight:700;color:#cfe6ff}
.mainnav .mega-all .nav-ic{width:14px;height:14px}

/* Mobiel: accordeon onder de navigatierij */
@media (max-width:759px){
  .mega{padding:10px 14px;max-height:70vh}
  .mega-cols{grid-template-columns:1fr;gap:0}
  .mega-group{border-bottom:1px solid var(--line)}
  .mega-group summary{display:flex;justify-content:space-between;align-items:center;min-height:46px;margin:0;font-size:.8rem;cursor:pointer}
  .mega-group summary::after{content:"+";font-size:1.1rem;color:#c7d8f2}
  .mega-group[open] summary::after{content:"\2212"}
  .mega-group ul{padding-bottom:8px}
}
@media (min-width:760px){
  .mega-group summary{pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  .mega-btn .nav-ic{transition:none}
}
.mega-group .is-featured > a{font-weight:700;color:#fff}