/* VerifyUGC — unified site header: grouped dropdowns + mobile drawer.
   Self-contained so it works on every page regardless of which base
   stylesheet (inline index, article.css, page.css) is loaded. Paired
   with /assets/nav.js. Uses brand tokens from tokens.css. */

/* container of the nav links (right side of the header) */
.navlinks{display:flex;align-items:center;gap:24px}
.navlinks a{text-decoration:none}
.navlinks>a{color:var(--dim,#9b9bbd);font-weight:500;font-size:.92rem;transition:color .15s}
.navlinks>a:hover{color:var(--text,#edecf7);text-decoration:none}

/* "Sign in" — quiet secondary action */
.navsignin{color:var(--text,#edecf7)!important;font-weight:500}
.navsignin:hover{opacity:.8}

/* Discord-only login: the header "Login with Discord" CTA (set by nav.js when
   the visitor is signed out). Discord blurple so it's instantly recognizable. */
.navlogin{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:11px;
  background:#5865F2;color:#fff!important;font-weight:600;font-size:.92rem;line-height:1;
  white-space:nowrap;transition:background .15s ease,transform .15s ease}
.navlogin:hover{background:#4752c4;transform:translateY(-1px);text-decoration:none}
.navlogin svg{flex:0 0 auto}

/* Signed-in: avatar + handle chip linking to the dashboard. */
.navacct{display:inline-flex;align-items:center;gap:8px;color:var(--text,#edecf7)!important;font-weight:600;font-size:.92rem}
.navacct:hover{opacity:.85;text-decoration:none}
.navav{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--bg2,#0c0c18);border:1px solid var(--border2,rgba(255,255,255,.14))}

/* primary CTA — gradient, consistent across all page stylesheets */
.btn-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:11px;
  font-weight:600;font-size:.92rem;line-height:1;white-space:nowrap;border:1px solid transparent;
  background:var(--grad,linear-gradient(120deg,#a855f7,#3b82f6));color:#fff!important;
  transition:transform .15s ease,box-shadow .25s ease}
.btn-cta:hover{transform:translateY(-1px);text-decoration:none;
  box-shadow:0 8px 26px color-mix(in srgb,var(--a1,#a855f7) 45%,transparent)}

/* dropdown groups */
.navgroup{position:relative;display:inline-flex;align-items:center}
.navtrigger{font:inherit;font-weight:500;font-size:.92rem;color:var(--dim,#9b9bbd);background:none;
  border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1}
.navtrigger:hover,.navtrigger[aria-expanded="true"]{color:var(--text,#edecf7)}
.navtrigger::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .15s ease}
.navtrigger[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:2px}
.navtrigger:focus-visible{outline:2px solid var(--a2,#3b82f6);outline-offset:4px;border-radius:4px}

.navmenu{position:absolute;top:calc(100% + 14px);left:0;min-width:212px;background:var(--surface,#13131f);
  border:1px solid var(--border,rgba(255,255,255,.10));border-radius:14px;padding:7px;
  display:flex;flex-direction:column;gap:2px;box-shadow:0 18px 40px rgba(0,0,0,.5);z-index:120;
  /* hidden by default; fade + slide in (0.15s). visibility is delayed on close so
     the fade-out can finish, then snaps the menu out of the a11y tree + hit-testing. */
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}
.navmenu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} /* hover bridge */
.navgroup.open>.navmenu,.navgroup:hover>.navmenu{opacity:1;visibility:visible;transform:translateY(0);
  pointer-events:auto;transition:opacity .15s ease,transform .15s ease,visibility 0s}
.navmenu a{display:flex;align-items:center;margin:0;padding:10px 13px;border-radius:9px;
  color:var(--dim,#9b9bbd)!important;font-weight:500;font-size:.9rem;white-space:nowrap}
.navmenu a:hover{background:var(--surface2,#171726);color:var(--text,#edecf7)!important}
/* emoji prefix — fixed-width gutter so labels align regardless of glyph width */
.navico{flex:0 0 auto;display:inline-block;width:1.3em;margin-right:9px;text-align:center;
  font-size:.95em;line-height:1}

/* hamburger — hidden on desktop; 44x44 tap target (WCAG 2.5.5) when shown */
.menu{display:none;place-items:center;min-width:44px;min-height:44px;background:none;
  border:0;color:var(--text,#edecf7);font-size:1.5rem;line-height:1;cursor:pointer;
  padding:4px;-webkit-tap-highlight-color:transparent}
.menu:focus-visible{outline:2px solid var(--a2,#3b82f6);outline-offset:2px;border-radius:6px}

/* --- mobile (<=880px): hamburger + drawer --- */
@media (max-width:880px){
  .menu{display:grid}
  .navlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:6px;background:var(--bg2,#0c0c18);border-bottom:1px solid var(--border,rgba(255,255,255,.10));
    padding:16px 22px 22px;display:none;z-index:115}
  .navlinks.open{display:flex}
  .navlinks>a,.navsignin{padding:11px 0;min-height:44px;display:flex;align-items:center}
  /* roomier tap targets for the drawer's grouped links */
  .navmenu a{padding:12px 13px}
  .navtrigger{min-height:44px}
  .btn-cta{justify-content:center;margin-top:6px}
  .navgroup{flex-direction:column;align-items:stretch;width:100%}
  .navtrigger{width:100%;justify-content:space-between;padding:8px 0}
  /* accordion: collapse with display (height), not opacity — and reset the
     desktop fade props so an open section is actually visible. */
  .navmenu{position:static;display:none;min-width:0;width:100%;border:0;box-shadow:none;
    background:transparent;padding:2px 0 6px 14px;
    opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:none}
  .navmenu::before{display:none}
  .navgroup:hover>.navmenu{display:none} /* touch: open by tap, not hover */
  .navgroup.open>.navmenu{display:flex}
}

/* header lockup logo (per-theme) */
.brand .brandlogo{height:30px;width:auto;display:none}
.brand .brandlogo--ugc{display:block}
html[data-theme="roblox"] .brand .brandlogo--ugc{display:none}html[data-theme="roblox"] .brand .brandlogo--roblox{display:block}
html[data-theme="uefn"] .brand .brandlogo--ugc{display:none}html[data-theme="uefn"] .brand .brandlogo--uefn{display:block}
html[data-theme="minecraft"] .brand .brandlogo--ugc{display:none}html[data-theme="minecraft"] .brand .brandlogo--minecraft{display:block}

/* header lockup logo (per-theme) */
.brand .brandlogo{height:30px;width:auto;display:none}
.brand .brandlogo--ugc{display:block}
html[data-theme="roblox"] .brand .brandlogo--ugc{display:none}html[data-theme="roblox"] .brand .brandlogo--roblox{display:block}
html[data-theme="uefn"] .brand .brandlogo--ugc{display:none}html[data-theme="uefn"] .brand .brandlogo--uefn{display:block}
html[data-theme="minecraft"] .brand .brandlogo--ugc{display:none}html[data-theme="minecraft"] .brand .brandlogo--minecraft{display:block}