/* =====================================================================
   "WHAT IT DOES" MENU  /static/brand/mega.css
   Markup and data: templates/brand/_mega.html. Loaded by brand/_head.html
   and by the homepage (templates/index.html), after the nav styles.
   Tokens only (static/brand/tokens.css); the panel radius is the nav
   bar's 18px so the two read as one piece.
   ===================================================================== */

/* ---------- trigger, inside .nav-links ---------- */
.mega-btn{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;transition:color var(--t-fast,.2s)}
.mega-btn:hover,.mega-btn[aria-expanded=true]{color:var(--ink)}
.mega-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast,.2s) var(--ease,cubic-bezier(.2,.7,.2,1))}
.mega-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.mega-btn:focus-visible{outline:0;border-radius:6px;box-shadow:var(--focus,0 0 0 3px rgba(225,29,42,.14))}

/* the bar turns solid while the panel is open, so the two match over the hero */
.nav.mega-on .nav-in{background:rgba(255,255,255,.96);box-shadow:0 0 0 1px rgba(20,16,10,.06),0 12px 32px -16px rgba(30,20,10,.25)}

/* ---------- desktop panel ---------- */
.mega{position:absolute;left:var(--gut);right:var(--gut);top:calc(100% + 8px);max-width:var(--max,1240px);margin:0 auto;pointer-events:auto;
  max-height:calc(100vh - 108px);overflow-y:auto;overscroll-behavior:contain;
  padding:30px 32px 0;border-radius:18px;background:var(--paper);color:var(--ink);text-align:left;
  box-shadow:0 0 0 1px rgba(20,16,10,.06),0 24px 48px -20px rgba(30,20,10,.3);
  opacity:0;transform:translateY(-6px);transition:opacity .16s var(--ease,cubic-bezier(.2,.7,.2,1)),transform .16s var(--ease,cubic-bezier(.2,.7,.2,1))}
.mega.in{opacity:1;transform:none}
.mega[hidden]{display:none}
.mega ul{list-style:none;margin:0;padding:0}
.mega-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.86fr);gap:28px}
.mega-h{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.mega-d{margin-top:3px;min-height:1.35em;font-size:13px;line-height:1.35;color:var(--muted)}
.mega-ic{display:flex;align-items:center;gap:5px;height:24px;margin:10px 0 12px}
.mi{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:7px;overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(20,16,10,.08),0 1px 2px rgba(20,16,10,.06)}
.mi svg{display:block;width:62%;height:62%}
/* brand colours of the single-colour (simple-icons) logos; the lobehub ones carry their own */
.mi.t-wp{color:#21759B}
.mi.t-wf{background:#146EF5;color:#fff}
.mi.t-sh{color:#5E8E3E}
.mi.t-wx,.mi.t-gh{color:#0C0C0D}
.mi.t-gm{color:#4285F4}
.mi.t-gem{color:#8E75B2}
.mi.t-oa{background:#0D0D0D;color:#fff}
.mi.t-yt{color:#FF0000}
.mi.t-yt svg{width:70%}
.mi.t-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);color:#fff}
.mi.t-qu{background:#B92B27;color:#fff}
.mi.t-cl{background:#F5F1EA;color:#D97757}
.mega-i{display:block;margin:0 -10px;padding:7px 10px;border-radius:10px;transition:background var(--t-fast,.2s)}
.mega-i b{display:block;font-size:14.5px;font-weight:500;line-height:1.35;color:var(--ink)}
.mega-i span{display:block;margin-top:1px;font-size:13px;line-height:1.35;color:var(--muted)}
.mega-i:hover,.mega-l:hover{background:var(--sand)}
.mega-i:focus-visible,.mega-l:focus-visible,.mega-bar a:focus-visible{outline:0;box-shadow:var(--focus,0 0 0 3px rgba(225,29,42,.14))}
.mega-dev{padding-left:28px;border-left:1px solid var(--line)}
.mega-l{display:block;margin:0 -10px;padding:6px 10px;border-radius:10px;font-size:14px;color:var(--ink-2);transition:background var(--t-fast,.2s),color var(--t-fast,.2s)}
.mega-l:hover{color:var(--ink)}
.mega-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:26px;padding:16px 0 18px;border-top:1px solid var(--line);font-size:14px}
.mega-bar a{color:var(--ink-2);border-radius:6px;transition:color var(--t-fast,.2s)}
.mega-bar a:hover{color:var(--ink)}
.mega-lbl{font-weight:600;color:var(--muted)}
.mega-end{display:flex;align-items:center;gap:18px;margin-left:auto}
.mega-bar .mega-cmp{color:var(--muted)}
.mega-bar .mega-all{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.mega-all svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast,.2s) var(--ease,cubic-bezier(.2,.7,.2,1))}
.mega-all:hover svg{transform:translateX(2px)}

/* a narrower desktop keeps every link in the bar */
@media (max-width:1240px){
  .nav-links{gap:20px}
  .mega{padding:26px 24px 0}
  .mega-cols{gap:22px}
  .mega-dev{padding-left:22px}
  .mega-d{min-height:2.7em}
}

/* ---------- phones and tablets: an accordion at the top of the sheet ---------- */
.mega-acc{display:none}
@media (max-width:1120px){
  .mega{display:none !important}
  .nav-menu{display:grid}
  .nav-sheet{max-height:calc(100vh - 86px);max-height:calc(100dvh - 86px);overflow-y:auto;overscroll-behavior:contain}
  .mega-acc{display:block;border-bottom:1px solid var(--line);margin-bottom:4px}
  .mega-acc summary{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;font-size:16px;font-weight:500;color:var(--ink);border-radius:10px;cursor:pointer;list-style:none}
  .mega-acc summary::-webkit-details-marker{display:none}
  .mega-acc summary:focus-visible{outline:0;box-shadow:var(--focus,0 0 0 3px rgba(225,29,42,.14))}
  .mega-acc .pm{position:relative;width:14px;height:14px;flex:none}
  .mega-acc .pm::before,.mega-acc .pm::after{content:"";position:absolute;left:0;top:6.25px;width:14px;height:1.5px;border-radius:2px;background:var(--muted);transition:transform var(--t-fast,.2s) var(--ease,cubic-bezier(.2,.7,.2,1))}
  .mega-acc .pm::after{transform:rotate(90deg)}
  .mega-acc[open] .pm::after{transform:rotate(0)}
  .mega-acc-in{display:grid;gap:18px;padding:4px 14px 18px}
  .mega-g .mega-d{min-height:0;margin-top:2px}
  .mega-g ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  .nav-sheet .mega-g a{display:flex;align-items:center;min-height:38px;padding:0;font-size:15px;border-radius:6px;color:var(--ink-2)}
  .mega-g-end{padding-top:12px;border-top:1px solid var(--line)}
  .nav-sheet .mega-g-end a{font-weight:600;color:var(--ink)}
}
/* tablets: the sheet drops from the right of the bar, the bar stays as it is */
@media (min-width:641px) and (max-width:1120px){
  .nav-sheet{display:block;position:absolute;right:var(--gut);left:auto;width:420px;top:84px;border-radius:18px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 0 1px rgba(20,16,10,.06),0 24px 48px -20px rgba(30,20,10,.3);padding:8px;opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
  .nav.open .nav-sheet{opacity:1;transform:none;pointer-events:auto;visibility:visible}
  .nav-sheet a{display:block;padding:13px 14px;font-size:16px;border-radius:10px;color:var(--ink)}
  .nav-sheet a:active{background:var(--sand)}
}
@media (prefers-reduced-motion:reduce){
  .mega,.mega-btn svg,.mega-acc .pm::after{transition:none}
}