/* ==========================================================================
   Quarter King — mega menu (Seybert's layout, QK colours). 2026-09-03
   Markup from inc/qk-mega-menu.php:
     .menu.qk-menu > li.qk-has-mega > a + button.qk-mega-toggle + .qk-mega
       .qk-mega-secs > li.qk-mega-all | li.qk-mega-sec > .qk-mega-h + ul.qk-mega-list
   Desktop: hover panel spanning from the nav list to the container's right edge,
   gold hairline border, sections stacked with gold uppercase headings over
   4-column lists (Seybert's: black panel, 1px orange border, 14/28 padding,
   heading 21px/700, 4 CSS columns, 35px rows, hairline between sections).
   Mobile: full-screen slide-in drawer from the right, 3-level tap accordion.
   ========================================================================== */

/* ---------- desktop (>1024px) ---------- */
.nav .container{position:relative;min-height:72px}
.nav .menu.qk-menu{position:static}
.nav .menu.qk-menu > li{position:static;display:flex;align-items:center}
.nav .menu.qk-menu > li > a{display:flex;align-items:center;height:72px;position:relative;z-index:710}
.nav .menu.qk-menu > li.qk-has-mega:hover > a,
.nav .menu.qk-menu > li.qk-has-mega:focus-within > a{color:var(--gold)}
/* no chevrons on top labels (Seybert's has none) */
.nav .menu.qk-menu > li > a::after{content:none}
/* tab connector: gold underline + black notch that breaks the panel's top border */
.nav .menu.qk-menu > li.qk-has-mega:hover > a::before,
.nav .menu.qk-menu > li.qk-has-mega:focus-within > a::before{content:"";position:absolute;left:-10px;right:-10px;bottom:0;border-bottom:5px solid var(--gold)}
.nav .menu.qk-menu > li.qk-has-mega:hover > a::after,
.nav .menu.qk-menu > li.qk-has-mega:focus-within > a::after{content:"";position:absolute;left:-10px;right:-10px;bottom:-1px;border-bottom:4px solid #000;margin:0}
.qk-mega-toggle{display:none}

.qk-mega{display:none;position:absolute;top:100%;left:var(--qk-mega-left,0);right:0;z-index:700;
  background:#000;border:1px solid var(--gold);padding:14px 28px 18px;box-shadow:0 26px 60px rgba(0,0,0,.75);
  max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
  font-family:var(--f-head);text-transform:none;letter-spacing:0;font-weight:400;text-align:left;cursor:default}
.nav .menu.qk-menu > li.qk-has-mega:hover > .qk-mega,
.nav .menu.qk-menu > li.qk-has-mega:focus-within > .qk-mega{display:block}
.qk-mega-in{width:100%}
.qk-mega-secs{list-style:none;margin:0;padding:0;display:block}
.qk-mega-secs > li{display:block;position:static}
.qk-mega-all{padding:2px 0 10px}
.qk-mega-all a{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-weight:500;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#fff}
.qk-mega-all a i{font-size:11px;color:var(--gold)}
.qk-mega-all a:hover{color:var(--gold)}
.qk-mega-sec{border-top:1px solid rgba(255,255,255,.35);padding-top:12px}
.qk-mega-h{display:block;width:100%;margin:0;padding:6px 0;background:none;border:0;text-align:left;
  font-family:var(--f-head);font-weight:600;font-size:16px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);cursor:default}
a.qk-mega-h,.nav .menu.qk-menu a.qk-mega-h{cursor:pointer;color:var(--gold)}
a.qk-mega-h:hover,.nav .menu.qk-menu a.qk-mega-h:hover{color:#fff}
.qk-mega-list{list-style:none;margin:0 0 20px;padding:0;columns:4;column-gap:32px}
.qk-mega-list li{display:block;break-inside:avoid;padding:0;margin:0;position:static}
.qk-mega-list a{display:block;padding:5px 0;font-family:var(--f-head);font-weight:400;font-size:16px;line-height:1.35;color:#f2f2f2;white-space:normal;letter-spacing:.35px;text-transform:none}
.qk-mega-list a:hover{color:var(--gold)}
.qk-drawer-head,.qk-drawer-foot{display:none}
/* Panels can be tall (Cues); keep the header above the page while open */
.nav{z-index:650;position:relative}

/* ---------- mobile / tablet (≤1024px): full-screen drawer + accordion ---------- */
@media (max-width:1024px){
  /* both selectors so mobile.css's `body.qk-nav-open .nav .menu{position:absolute;top:100%…}` can't win */
  .nav .menu.qk-menu,body.qk-nav-open .nav .menu.qk-menu{display:block !important;position:fixed;top:0;right:-102%;bottom:0;left:auto;
    width:100%;max-width:100%;height:auto;max-height:none;margin:0;padding:14px 20px 40px;z-index:10000;background:rgba(0,0,0,.96);
    border:0;border-left:1px solid var(--gold);border-radius:0;box-shadow:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transition:right .3s ease;text-align:left;visibility:hidden}
  body.qk-nav-open .nav .menu.qk-menu{right:0;visibility:visible}
  .nav .menu.qk-menu{transition:right .3s ease,visibility 0s linear .3s}
  body.qk-nav-open .nav .menu.qk-menu{transition:right .3s ease,visibility 0s}
  body.qk-nav-open{overflow:hidden}
  .qk-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:2px 0 12px;margin-bottom:4px;
    border-bottom:1px solid var(--gold);font-family:var(--f-head);text-transform:uppercase;letter-spacing:2px;font-size:13px;color:#9a9a9a}
  .qk-drawer-close{background:none;border:0;color:#fff;font-size:36px;line-height:1;padding:0 2px;cursor:pointer;min-width:44px;min-height:44px}
  .nav .menu.qk-menu > li{display:block;position:relative;border-bottom:1px solid #1e1e1e;align-items:stretch}
  .nav .menu.qk-menu > li > a{display:block;height:auto;padding:15px 52px 15px 0;font-family:var(--f-head);font-size:19px;
    line-height:1.15;text-transform:uppercase;letter-spacing:1px;color:#fff;z-index:auto}
  .nav .menu.qk-menu > li > a::after,.nav .menu.qk-menu > li > a::before{content:none !important}
  .nav .menu.qk-menu > li.open > a{color:var(--gold)}
  .qk-mega-toggle{display:block;position:absolute;top:0;right:-6px;width:56px;height:56px;background:none;border:0;padding:0;cursor:pointer}
  .qk-mega-toggle::before{content:'\f054';font-family:'Font Awesome 6 Free';font-weight:900;font-size:14px;color:#fff;
    position:absolute;right:16px;top:50%;transform:translateY(-50%);transition:transform .25s,color .25s}
  .nav .menu.qk-menu > li.open > .qk-mega-toggle::before{transform:translateY(-50%) rotate(90deg);color:var(--gold)}
  .nav .menu.qk-menu > li.qk-has-mega:hover > .qk-mega{display:none}
  .qk-mega{display:none;position:static;border:0;border-left:1px solid rgba(255,255,255,.45);margin:0 0 14px 2px;padding:0 0 4px 12px;
    background:transparent;box-shadow:none;max-height:none;overflow:visible}
  .nav .menu.qk-menu > li.open > .qk-mega{display:block}
  .qk-mega-all{padding:4px 0 6px}
  .qk-mega-all a{font-size:12px;min-height:40px}
  .qk-mega-sec{border-top:0;padding:0;position:relative}
  .qk-mega-h{position:relative;padding:11px 44px 11px 0;font-size:14px;color:#fff;cursor:pointer;min-height:44px}
  .qk-mega-h::after{content:'\f054';font-family:'Font Awesome 6 Free';font-weight:900;font-size:12px;color:#9a9a9a;
    position:absolute;right:14px;top:50%;transform:translateY(-50%);transition:transform .25s,color .25s}
  .qk-mega-sec.open > .qk-mega-h{color:var(--gold)}
  .qk-mega-sec.open > .qk-mega-h::after{transform:translateY(-50%) rotate(90deg);color:var(--gold)}
  .qk-mega-list{display:none;columns:1;margin:0 0 10px 4px;padding:0 0 4px 12px;border-left:1px solid rgba(255,255,255,.35)}
  .qk-mega-sec.open > .qk-mega-list{display:block}
  .qk-mega-list a{display:flex;align-items:center;min-height:42px;padding:6px 0;font-size:16px;color:#f2f2f2}
  .qk-drawer-foot{display:flex;flex-direction:column;margin-top:18px;padding-top:8px;border-top:1px solid var(--gold)}
  .qk-drawer-foot a{display:flex;align-items:center;gap:10px;min-height:46px;font-family:var(--f-head);text-transform:uppercase;letter-spacing:1px;font-size:15px;color:#fff}
  .qk-drawer-foot a i{color:var(--gold)}
  .nav{z-index:auto}
}