@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
/* ---------------------------------------------------------------------------
 * public/shared/nav.css  -  GI JOE: ARMY shared masthead
 *
 * Styling for the shared "Dossier" masthead injected by nav.js onto external
 * surfaces (the forums.gijoe.army Discourse tenant + the shared identity
 * master's cold-login page). 1:1 visual mirror of src/components/Header.astro.
 * Loaded via the Discourse theme head_tag (<link ...nav.css?v=N>); nav.js
 * guards against double-loading it. Edit here, push, bump ?v= in the head_tag.
 * ------------------------------------------------------------------------- */

:root{
  --d1-steel:#1c2025; --d1-steel-2:#262c33; --d1-steel-3:#343b44; --d1-steel-4:#424a55;
  --d1-ink:#0a0c0e; --d1-bone:#ece4cc; --d1-manila:#d6c598; --d1-manila-hi:#e9dab2;
  --d1-fg-2:#a39473; --d1-red:#c4181d; --d1-red-hi:#e63a3f;
  --d1-line:rgba(236,228,204,0.14);
}

/* Host-shift: clear the fixed masthead, hide the host's own header chrome */
html.tc-shared-host{ padding-top:0 !important; }
html.tc-shared-host body{ padding-top:104px !important; background:var(--d1-steel) !important; }
/* Discourse own header is hidden by the tenant theme SCSS; belt-and-suspenders */
html.tc-shared-host .d-header-wrap,
html.tc-shared-host .d-header{ display:none !important; }
html.tc-shared-host{ --header-offset:0px !important; }

/* ---- Fixed masthead shell ---- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:9000;
  background:var(--d1-ink);
  border-bottom:1px solid var(--d1-steel-3);
  box-shadow:0 6px 18px rgba(0,0,0,0.6);
}

/* ---- Status strip (UNCLASSIFIED . DTG) ---- */
.d1-statusbar{
  background:var(--d1-steel-2);
  border-bottom:1px solid var(--d1-steel-3);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:6px 28px;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--d1-fg-2);
}
.d1-statusbar__dot{ display:inline-block; width:6px; height:6px; border-radius:999px; background:var(--d1-red); box-shadow:0 0 6px var(--d1-red); margin-right:5px; vertical-align:middle; }
.d1-statusbar__class{ margin-left:auto; color:var(--d1-bone); }

/* ---- Masthead row ---- */
.header-inner{
  max-width:1280px; margin:0 auto; padding:8px 28px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px;
}
.site-logo{ display:flex; align-items:center; padding:4px 0; flex-shrink:0; border-bottom:none !important; }
.site-logo img{ height:34px; width:auto; display:block; }

.site-nav{ display:none; }
@media (min-width:1024px){ .site-nav{ display:flex; justify-content:flex-start; } }
.nav-list{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.nav-item{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:5px; padding:8px 12px;
  font-family:'Oswald','Inter Tight',sans-serif; font-weight:500; font-size:12px;
  letter-spacing:0.20em; text-transform:uppercase; color:var(--d1-fg-2) !important;
  border-bottom:2px solid transparent !important; text-decoration:none !important;
  transition:color 200ms ease, border-color 200ms ease; white-space:nowrap;
}
.nav-link:hover{ color:var(--d1-bone) !important; }
.nav-link.active{ color:var(--d1-bone) !important; border-bottom-color:var(--d1-red) !important; }
.nav-chevron{ opacity:0.6; transition:transform 160ms ease, opacity 160ms ease; flex-shrink:0; }
.nav-item:hover .nav-chevron{ transform:rotate(180deg); opacity:1; }

/* ---- Dropdowns ---- */
.nav-dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:240px;
  background:var(--d1-steel-2); border:1px solid var(--d1-steel-3);
  border-top:2px solid var(--d1-red); padding:6px; 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 14px 32px rgba(0,0,0,0.55); z-index:9010;
}
.nav-dropdown::before{ content:""; position:absolute; top:-6px; left:0; right:0; height:6px; }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-link{
  display:flex; flex-direction:column; gap:2px; padding:9px 12px;
  border-left:2px solid transparent; text-decoration:none !important;
  transition:background 160ms ease, border-color 160ms ease;
}
.nav-dropdown-link:hover{ background:var(--d1-steel-3); border-left-color:var(--d1-manila); }
.nav-drop-label{ font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--d1-bone) !important; }
.nav-drop-sub{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.10em; color:var(--d1-fg-2) !important; }

/* ---- Actions ---- */
.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.search-btn{
  width:32px; height:32px; background:var(--d1-steel-2); border:1px solid var(--d1-steel-3);
  color:var(--d1-bone) !important; cursor:pointer; display:none; align-items:center; justify-content:center;
  transition:border-color 220ms ease;
}
@media (min-width:1024px){ .search-btn{ display:inline-flex; } }
.search-btn:hover{ border-color:var(--d1-manila); }
.signin-link{
  font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  background:var(--d1-red); color:var(--d1-bone) !important; border:0; padding:8px 16px;
  text-decoration:none !important; transition:background 220ms ease;
}
.signin-link:hover{ background:var(--d1-red-hi); }

/* ---- Logged-in user menu ---- */
.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(--d1-bone); font-family:'Oswald',sans-serif; font-size:12px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; }
.tc-user-btn:hover{ color:var(--d1-manila); }
.tc-user-avatar{ width:28px; height:28px; border-radius:2px; border:1px solid var(--d1-line); object-fit:cover; }
.tc-user-name{ display:none; }
@media (min-width:1280px){ .tc-user-name{ display:inline; } }
.tc-user-dropdown{ position:absolute; top:calc(100% + 8px); right:0; list-style:none; margin:0; padding:8px 0; min-width:200px; background:var(--d1-steel-2); border:1px solid var(--d1-steel-3); border-top:2px solid var(--d1-red); 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:'Oswald',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--d1-bone) !important; text-decoration:none !important; }
.tc-user-link:hover{ background:rgba(214,197,152,0.10); color:var(--d1-manila) !important; }

/* ---- Mobile ---- */
.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(--d1-bone); }
@media (min-width:1024px){ .menu-toggle{ display:none; } }
.menu-bar{ display:block; width:100%; height:1.5px; background:currentColor; transition:transform 200ms ease, opacity 200ms ease; }
.mobile-nav{ position:fixed; left:0; right:0; background:var(--d1-ink); border-bottom:1px solid var(--d1-steel-3); z-index:8999; padding:16px 0 24px; max-height:calc(100dvh - 104px); 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:'Oswald',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.18em; text-transform:uppercase; color:var(--d1-bone) !important; text-decoration:none !important; }
.mobile-sub{ list-style:none; margin:0; padding:0 0 8px; }
.mobile-sub-link{ display:block; padding:8px 28px 8px 44px; font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(236,228,204,0.6) !important; text-decoration:none !important; }