/* ─────────────────────────────────────────────────────────────────────
 * public/shared/nav.css
 *
 * Single styling source for the site-wide nav. Consumed by:
 *   - src/components/Header.astro  (via <link rel="stylesheet"
 *     href="/shared/nav.css">). Astro pages render the nav server-side
 *     with class names that match this file.
 *   - public/shared/nav.js  (loaded by Discourse via theme head_tag).
 *     nav.js injects a <link rel="stylesheet"> pointing at this same
 *     file when it boots so Discourse pages share the exact CSS.
 *
 * Edit THIS file to change nav styling. Both Astro and Discourse
 * renderings pick up the change after the next CF Pages build.
 * ───────────────────────────────────────────────────────────────────── */

  /* Self-hosted Inter Tight 700 — used by .nav-link. We can't depend on
     the Google Fonts request from BaseLayout.astro because adblockers
     can block fonts.googleapis.com and leave the dev nav rendering with
     the system fallback (narrower glyphs), while the forum's separate
     font request goes through and renders Inter Tight (wider). The two
     navs then visibly disagree on item widths. Loading the woff2 from
     our own origin (dev.thundercats.org/fonts/) sidesteps that — both
     surfaces get the same font with the same metrics. */
  @font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url('https://dev.thundercats.org/fonts/inter-tight-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url('https://dev.thundercats.org/fonts/inter-tight-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }


  /* ── Base ──────────────────────────────────────────────── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    height: 72px;
    background: #000000;
    border-bottom: 1px solid var(--tc-line-gold);
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
    transition: background 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
  }

  /* Homepage: transparent nav over the TV wall until the user scrolls. The
     riotgames.com/leagueoflegends.com pattern - lets the hero dominate the
     first viewport. Solidifies via JS adding .is-scrolled on first scroll. */
  body.homepage .site-header {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
  }
  body.homepage .site-header.is-scrolled {
    background: #000000;
    border-bottom-color: var(--tc-line-gold);
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  }

  /* Minimized nav while the TV wall animation runs: hide the middle
     primary nav and the CONTRIBUTE call-to-action so the wall holds
     the visual focus. Logo + Search + Sign in stay visible so a user
     can navigate immediately if they want. Restored on first scroll
     or click, or when the animation completes. */
  body.homepage .site-header.is-minimized .site-nav,
  body.homepage .site-header.is-minimized .contribute-link {
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
  }
  body.homepage .site-header .site-nav,
  body.homepage .site-header .contribute-link {
    transition: opacity 600ms ease;
  }

  .header-inner {
    max-width: 1440px;
    margin: 0 auto;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 28px;
    gap: 24px;
  }

  /* ── Logo ──────────────────────────────────────────────── */
  .site-logo {
    display: flex;
    align-items: center;
    padding: 8px 0;
    flex-shrink: 0;
    border-bottom: none;
  }

  .site-logo img {
    height: 44px;
    width: auto;
    max-width: none;
    display: block;
  }

  /* ── Primary nav ───────────────────────────────────────── */
  .site-nav {
    display: none;
  }

  @media (min-width: 1024px) {
    .site-nav { display: flex; justify-content: center; }
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-item {
    position: relative;
  }

  .nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Tightened from padding: 10px 16px on 2026-05-15 — Mark's preference,
       and it brings the actions block (SEARCH + SIGN IN) inside the inner's
       right padding instead of overflowing by ~67px on every page. */
    padding: 10px 10px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tc-bone);
    border-bottom: none;
    border-radius: 0;
    transition: color 160ms ease, background 160ms ease;
    white-space: nowrap;
  }

  .nav-link:hover {
    color: var(--tc-gold);
    background: transparent;
  }

  .nav-link.active {
    background: var(--tc-gold);
    color: var(--tc-ink);
    font-weight: 900;
  }

  .nav-link.active:hover {
    background: #e8b455;
    color: var(--tc-ink);
  }

  .nav-chevron {
    opacity: 0.55;
    transition: transform 160ms ease, opacity 160ms ease;
    flex-shrink: 0;
  }

  .nav-item:hover .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* ── Dropdown ──────────────────────────────────────────── */
  .nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 180px;
    background: #0f0d0a;
    border: 1px solid var(--tc-line-gold);
    padding: 6px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    box-shadow: 0 12px 28px rgba(0,0,0,0.8);
    z-index: 910;
  }

  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .nav-dropdown-link {
    display: block;
    padding: 9px 18px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(243,234,216,0.75);
    border-bottom: none;
    white-space: nowrap;
    transition: color 120ms ease, background 120ms ease;
  }

  .nav-dropdown-link:hover {
    color: var(--tc-gold);
    background: rgba(217,164,65,0.08);
  }

  /* ── Right actions ─────────────────────────────────────── */
  .header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }

  .search-btn {
    background: transparent;
    border: 1px solid rgba(243,234,216,0.28);
    color: var(--tc-bone);
    padding: 7px 11px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
    display: none;
  }
  .search-icon { display: block; flex-shrink: 0; }

  @media (min-width: 1024px) {
    .search-btn { display: block; }
  }

  .search-btn:hover {
    border-color: var(--tc-gold);
    color: var(--tc-gold);
  }

  .signin-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tc-gold);
    border-bottom: none;
    transition: opacity 140ms ease;
    display: none;
  }
  .contribute-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tc-bone);
    border: 1px solid rgba(243,234,216,0.28);
    padding: 7px 11px;
    transition: border-color 140ms ease, color 140ms ease;
    display: none;
  }
  .contribute-link:hover {
    border-color: var(--tc-gold);
    color: var(--tc-gold);
  }
  @media (min-width: 1024px) {
    .contribute-link { display: inline-block; }
  }


  @media (min-width: 1024px) {
    .signin-link { display: block; }
  }

  /* Signed-in trigger styling lives in the global block below so it
     applies to both the SSR-rendered trigger AND the client-hydrated
     trigger (which is injected via innerHTML and has no astro-cid).
     Scoped duplicates here would only match the SSR path. */
  .signin-link:hover { opacity: 0.75; color: var(--tc-gold); }

    /* ── Hamburger ─────────────────────────────────────────── */
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tc-bone);
  }

  @media (min-width: 1024px) {
    .menu-toggle { display: none; }
  }

  .menu-bar {
    display: block;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 200ms ease, opacity 200ms ease;
  }

  /* ── Mobile nav ────────────────────────────────────────── */
  .mobile-nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: #000;
    border-bottom: 1px solid var(--tc-line-gold);
    z-index: 899;
    padding: 16px 0 24px;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }

  .mobile-nav[hidden] { display: none; }

  .mobile-nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-nav-link {
    display: block;
    padding: 12px 28px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tc-bone);
    border-bottom: none;
  }

  .mobile-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
  }

  .mobile-sub-link {
    display: block;
    padding: 8px 28px 8px 44px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(243,234,216,0.6);
    border-bottom: none;
  }

  /* ── Profile dropdown (must be GLOBAL) ──
   * The signed-in profile menu is built by the auth hydrator JS via
   * innerHTML on the [data-auth-slot] container. Those injected nodes
   * do NOT carry Astro's data-astro-cid scope attribute, so scoped
   * CSS from the regular <style> block never matches them. Result
   * was a permanently-expanded inline-rendered <ul> that pushed the
   * nav around. Keep these rules global so they apply regardless of
   * how the dropdown got into the DOM.
   */
  .profile-slot {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* Trigger row layout (avatar + username + chevron sit inline).
     GLOBAL because the hydrator injects a fresh trigger via innerHTML
     with no astro-cid, so scoped rules wouldn't apply on that path. */
  .profile-slot .signin-link.signin-user,
  .profile-slot .profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
  }
  .profile-slot .signin-avatar {
    border-radius: 50%;
    border: 1px solid var(--tc-line-gold, #d9a441);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    object-fit: cover;
  }
  .profile-slot .signin-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1a1612;
    color: var(--tc-gold, #d9a441);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .profile-slot .profile-trigger .nav-chevron {
    opacity: 0.55;
    transition: transform 160ms ease, opacity 160ms ease;
    margin-left: 2px;
    flex-shrink: 0;
  }
  .profile-slot:hover .profile-trigger .nav-chevron,
  .profile-slot:focus-within .profile-trigger .nav-chevron,
  .profile-slot.is-open .profile-trigger .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* Transparent bridge below the trigger so the cursor can travel from
     the trigger down to the visible dropdown without leaving the slot's
     :hover region. Without this, the visual gap between trigger and
     menu kills :hover mid-traversal and the menu snaps shut. */
  .profile-slot::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
    pointer-events: none;
  }
  .profile-slot:hover::after,
  .profile-slot:focus-within::after,
  .profile-slot.is-open::after {
    pointer-events: auto;
  }

  .profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    min-width: 200px;
    background: #0f0d0a;
    border: 1px solid var(--tc-line-gold, #d9a441);
    padding: 6px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    box-shadow: 0 12px 28px rgba(0,0,0,0.8);
    z-index: 910;
    pointer-events: none;
  }

  .profile-slot:hover .profile-dropdown,
  .profile-slot:focus-within .profile-dropdown,
  .profile-slot.is-open .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .profile-dropdown .nav-dropdown-link {
    display: block;
    padding: 9px 18px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(243,234,216,0.75);
    border-bottom: none;
    white-space: nowrap;
    transition: color 120ms ease, background 120ms ease;
    text-decoration: none;
  }
  .profile-dropdown .nav-dropdown-link:hover {
    color: var(--tc-gold, #d9a441);
    background: rgba(217,164,65,0.08);
  }

  .profile-dropdown .signout-link {
    opacity: 0.7;
    border-top: 1px solid rgba(243,234,216,0.08);
    margin-top: 4px;
    padding-top: 11px;
  }
  .profile-dropdown .signout-link:hover { opacity: 1; }

  /* ── Right-flyout sub-menu (SUPER7, MATTEL, MOVIES, SOCIAL) ───
   * Sits to the right of the parent dropdown row on hover. Same warm-dark
   * panel styling as .nav-dropdown. Transparent cursor-bridge keeps :hover
   * alive while traversing the gap. */
  .nav-dropdown-item {
    position: relative;
  }
  .nav-dropdown-link.has-flyout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .flyout-chevron {
    opacity: 0.55;
    transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
    flex-shrink: 0;
  }
  .nav-dropdown-item:hover > .nav-dropdown-link .flyout-chevron,
  .nav-dropdown-item:focus-within > .nav-dropdown-link .flyout-chevron {
    opacity: 1;
    color: var(--tc-gold, #d9a441);
    transform: translateX(2px);
  }
  .nav-dropdown-item.has-flyout::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 12px;
    height: 100%;
    background: transparent;
    pointer-events: none;
  }
  .nav-dropdown-item.has-flyout:hover::after,
  .nav-dropdown-item.has-flyout:focus-within::after {
    pointer-events: auto;
  }
  .nav-flyout {
    position: absolute;
    top: -7px;
    left: calc(100% - 1px);
    min-width: 200px;
    background: #0f0d0a;
    border: 1px solid var(--tc-line-gold, rgba(217,164,65,0.32));
    padding: 6px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    box-shadow: 0 12px 28px rgba(0,0,0,0.8);
    z-index: 920;
  }
  .nav-dropdown-item:hover > .nav-flyout,
  .nav-dropdown-item:focus-within > .nav-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  /* ── Discourse-only overrides (forum pages add html.tc-shared-host) ───
   * These rules ONLY fire when loaded by the Discourse theme. Dev pages
   * never get .tc-shared-host on <html>, so they're inert there. Includes
   * the box-sizing reset (Discourse doesn't ship one), Discourse's native
   * header suppression, and the body padding to clear our fixed header. */
  html.tc-shared-host {
    padding-top: 0 !important;
  }
  html.tc-shared-host body {
    padding-top: 72px !important;
    background: #0b0a09 !important;
  }
  html.tc-shared-host .site-header,
  html.tc-shared-host .site-header * {
    box-sizing: border-box;
  }
  html.tc-shared-host .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
  }
  html.tc-shared-host .nav-dropdown { z-index: 9010; }
  html.tc-shared-host .nav-flyout { z-index: 9020; }

  /* Stop Discourse's own header/nav from poking through ours. */
  html.tc-shared-host #header,
  html.tc-shared-host #navigation,
  html.tc-shared-host .navTabs,
  html.tc-shared-host #logoBlock,
  html.tc-shared-host .logo,
  html.tc-shared-host .visitorPanel,
  html.tc-shared-host #breadCrumbAdmin,
  html.tc-shared-host .navTabs-tabs {
    display: none !important;
  }

  /* Forum SIGN IN must never wrap. Dev page wraps it in .auth-slot which
     already keeps it inline; forum doesn't, so be explicit. */
  html.tc-shared-host .signin-link {
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
  }

  /* ── Forum-side signed-in user menu (built by nav.js when Discourse session is live) ───
   * nav.js replaces the SIGN IN link with a .tc-user-menu containing an avatar
   * button + a dropdown of Forum/Profile/Messages/Notifications/Bookmarks/Prefs/Sign out.
   * Without these rules the dropdown layouts as a normal block flow element and
   * pushes the header height to accommodate it - visible as a tall column on the
   * right side of the nav bar. */
  .tc-user-menu {
    position: relative;
    display: none;
  }
  @media (min-width: 1024px) {
    .tc-user-menu { display: block; }
  }
  .tc-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--tc-bone, #f3eed8);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .tc-user-btn:hover {
    color: var(--tc-gold, #d9a441);
  }
  .tc-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--tc-line-gold, rgba(217,164,65,0.32));
    object-fit: cover;
    flex-shrink: 0;
  }
.tc-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    min-width: 200px;
    background: #0f0d0b;
    border: 1px solid var(--tc-line-gold, rgba(217,164,65,0.32));
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 9999;
  }
  .tc-user-dropdown.tc-user-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .tc-user-link {
    display: block;
    padding: 10px 16px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tc-bone, #f3eed8);
    text-decoration: none;
    border-bottom: none;
    white-space: nowrap;
  }
  .tc-user-link:hover {
    background: rgba(217,164,65,0.10);
    color: var(--tc-gold, #d9a441);
  }