/* ===========================================================================
   s2t-nav.css — S2T top-navigation cluster (UI-05, FregaForce §17).
   Owns: top bar, inline public nav, account chip, BS5 offcanvas drawer.
   Loaded AFTER s2t-bs5-shim.css so these rules win. Frega tokens (literal
   values — S2T has no Frega token file). Does NOT touch page body/chrome.
   ========================================================================= */
:root {
  --s2t-brand: #4A8A68;
  --s2t-brand-strong: #136242;
  --s2t-brand-deep: #044D31;
  --s2t-brand-light: #86AF99;
  --s2t-brand-subtle: #F6F8F7;
  --s2t-surface: #FFFFFF;
  --s2t-radius-btn: 50px;
  --s2t-radius-pill: 9999px;
  --s2t-radius-sm: 8px;
  --s2t-shadow-3: 0 4px 16px rgba(0,0,0,0.12);
  --s2t-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- Top bar -------------------------------------------------------------- */
.s2t-bar { font-family: var(--s2t-font); width: 100%; margin: 0; position: relative; }   /* relative = anchor for the Menu 1 dropdown panel; drop the legacy 1170px cap */
.s2t-bar .header-content {
  display: flex;
  align-items: center;            /* vertically centres burger+logo and the chip — fixes the "G" offset */
  justify-content: space-between; /* frega-style: burger+logo left, account chip right; no inline nav between */
  gap: 16px;
  padding: 8px 24px;
  min-height: 56px;
}
.s2t-zone-left   { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.s2t-zone-right  { flex: 0 0 auto; display: flex; align-items: center; }
.s2t-bar .logo img { height: 40px; width: auto; display: block; }
/* Split logo: real icon image (s2t.png) + HTML wordmark text — crisp at any DPI and
   responsive (the word hides on very small screens, keeping the icon; the link's title
   shows "Something 2 Trade" on hover). Brand colours sampled from the original logo PNG. */
.s2t-bar .s2t-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.s2t-bar .s2t-logo-icon { height: 40px; width: 40px; display: block; }
.s2t-bar .s2t-logo-word { font-family: var(--s2t-font); font-weight: 800; font-size: 22px; line-height: 1; color: #5a5a5a; letter-spacing: -0.01em; white-space: nowrap; text-transform: none; }
.s2t-bar .s2t-logo-2 { color: #F07A2D; }

/* ---- Fixed-nav content clearance ----------------------------------------- *
   .navigation is position:fixed (styles.css) so it reserves no flow space.
   The legacy clearance was a %-padding INSIDE #EchoMainContent — but the SPA
   ($("#EchoMainContent").load(...)) wipes that wrapper, so content rode up
   under the bar. Put a deterministic spacer on #EchoMainContent itself (only
   its children are replaced by .load, so this survives) and let the bar grow
   instead of clipping if the cluster ever wraps. S2T-only (this file). */
.navigation { height: auto; min-height: 67px; }
/* Fixed 73px bar + the §4 --space-5 (24px) standard section gap. Constant px (not %) so the
   header->content gap stays ~24px at EVERY width (the bar is a steady ~73px single row). */
#EchoMainContent { padding-top: 91px; }
/* The initial server-rendered page wraps content in .std-content, whose legacy %-padding-top
   was the OLD fixed-bar clearance — now redundant since #EchoMainContent owns the clearance.
   Left in, it DOUBLE-spaces below the bar on first load (~80px gap). Zero it (S2T-only: this
   file is linked solely by defaultFregaCom.master). The SPA .load() drops .std-content anyway. */
#EchoMainContent .std-content { padding-top: 0; }

/* Burger — visible at ALL widths; it is now the ONLY entry to the nav (frega-style) */
.s2t-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;         /* §8 touch target */
  border: 0; background: transparent;
  color: var(--s2t-brand-strong);
  font-size: 22px; line-height: 1; cursor: pointer;
  border-radius: var(--s2t-radius-sm);
}
.s2t-burger:hover { background: var(--s2t-brand-subtle); }

/* UI-15 — the two burgers (far-left = .s2t-burger-user / account drawer; right-of-logo =
   .s2t-burger-site) were the SAME glyph at the same size, so <992px read as "☰ [logo] ☰ [chip]"
   with nothing to tell them apart but their aria-label. Owner call: rank them by size, and the
   FAR-LEFT one is the bigger. The site burger stays at the §8 44px floor. Both stay >=44px, so
   no touch target regresses. The far-left burger is visible at ALL widths; the site burger is
   display:none >=992px (inline nav takes over), so >=992px only the larger glyph remains. */
.s2t-burger-user { width: 48px; height: 48px; font-size: 28px; }

/* Very small screens: the full logo (icon + "Something2Trade" wordmark = ~228px) + two burgers
   + the chip stop fitting on one row below ~576px (§17 "below the width where logo + nav + chip
   fit"), pushing the right user menu off-screen. Crop the single logo image to just its left
   icon (object-fit, no new asset) and tighten the bar so the Login/Register pill / account chip
   stays visible. */
@media (max-width: 575.98px) {
  .s2t-bar .s2t-logo-word { display: none; }   /* icon only; the title tooltip shows the name */
  /* push the left (Menu 2) burger toward the screen edge to free horizontal room */
  .s2t-bar .header-content { padding-left: 6px; padding-right: 14px; gap: 8px; }
  .s2t-zone-left { gap: 8px; }
  .s2t-zone-right { flex-shrink: 0; }
}

/* ---- Menu 1 (#s2tSiteNav): public site nav + social ----------------------- *
   Inline in the bar at >=992px; a frega-style full-width dropdown panel below the
   bar at <992px (toggled by .s2t-burger-site). */
.s2t-site-nav-list { list-style: none; margin: 0; padding: 0; }
.s2t-site-link { display: block; text-decoration: none; font-family: var(--s2t-font); color: var(--s2t-brand-deep); font-weight: 700; }
.s2t-site-link:hover { color: var(--s2t-brand); }
.s2t-site-social { display: flex; align-items: center; gap: 16px; }
.s2t-site-social .s2t-soc { color: var(--s2t-brand-strong); font-size: 20px; line-height: 1; text-decoration: none; }
.s2t-site-social .s2t-soc:hover { color: var(--s2t-brand); }
.s2t-site-social .s2t-soc img { height: 20px; width: auto; display: block; }

@media (min-width: 992px) {
  .s2t-burger-site { display: none; }                              /* inline nav -> no burger */
  #s2tSiteNav.s2t-site-nav { display: flex !important; align-items: center; justify-content: center; gap: 28px; flex: 1 1 auto; min-width: 0; }
  .s2t-site-nav-list { display: flex; align-items: center; gap: 24px; }
  .s2t-site-link { padding: 6px 2px; }
}

@media (max-width: 991.98px) {
  /* burger shows; the collapse becomes a frega-style full-width dropdown under the bar */
  #s2tSiteNav.s2t-site-nav { position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: #fff; box-shadow: var(--s2t-shadow-3); z-index: 1040; }
  .s2t-site-nav-list { display: flex; flex-direction: column; }
  .s2t-site-nav-list li { border-bottom: 1px solid #ececec; }
  .s2t-site-link { padding: 16px 24px; text-transform: uppercase; letter-spacing: .03em; color: #555; font-weight: 600; }
  .s2t-site-link:hover { background: var(--s2t-brand-subtle); color: var(--s2t-brand-deep); }
  .s2t-site-social { padding: 16px 24px; }
}
.s2t-drawer .s2t-drawer-social .s2t-soc { color: var(--s2t-brand-strong); font-size: 20px; line-height: 1; text-decoration: none; }
.s2t-drawer .s2t-drawer-social .s2t-soc:hover { color: var(--s2t-brand); }
.s2t-drawer .s2t-drawer-social .s2t-soc img { height: 20px; width: auto; display: block; }

/* ---- Account chip (in-flow, right zone, vertically centred by flex) -------
   The AUTHED chip is the SHARED component now (UI-17 slice 2): its pill, 34px
   avatar, photo, caret and fly-out all come from frega-chip.css, which loads
   just before this file. S2T's old private chip (.chip-avatar / .chip-name /
   .chip-caret, 32px, initial-only) is RETIRED - one chip, one size, everywhere.

   All this file still owns is S2T's IDENTITY: bind the shared component's
   accent to the S2T brand token. This is the whole reason the component did not
   need forking - the hub publishes the member's OWN accent into --frega-accent,
   S2T pins it to the brand. Scope it to the chip so it cannot leak. */
#fregauserContain {
  --frega-accent: var(--s2t-brand);
  font-family: var(--s2t-font);
  cursor: pointer;
}
#fregauserContain.is-anon .chip-login-pill {
  display: inline-block; background: var(--s2t-brand); color: #fff;
  font-weight: 700; text-decoration: none;
  padding: 8px 22px; border-radius: var(--s2t-radius-btn); line-height: 1;
}
#fregauserContain.is-anon .chip-login-pill:hover { background: var(--s2t-brand-strong); }

/* :focus-visible ring (§8) — brand at 25% */
.s2t-burger:focus-visible,
.navTopRightUser:focus-visible,
.navTopRightUser a:focus-visible,
.s2t-drawer .nav-link:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(74,138,104,0.25);
}

/* ---- Offcanvas drawer ----------------------------------------------------- */
.s2t-drawer { font-family: var(--s2t-font); max-width: 320px; box-shadow: var(--s2t-shadow-3); }
.s2t-drawer .s2t-drawer-head { background: var(--s2t-brand); color: #fff; }
.s2t-drawer .s2t-drawer-head .offcanvas-title { font-weight: 700; }
.s2t-drawer .s2t-drawer-head .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.s2t-drawer .offcanvas-body { padding: 0; background: var(--s2t-surface); }

/* Member-head (avatar + email) injected by _userNavigation */
.s2t-drawer .nav-user-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; background: var(--s2t-brand-subtle); border-bottom: 1px solid var(--s2t-brand-light);
}
.s2t-drawer .nav-user-avatar img { width: 40px; height: 40px; border-radius: var(--s2t-radius-pill); object-fit: cover; }
.s2t-drawer .nav-user-meta { display: flex; flex-direction: column; min-width: 0; }
.s2t-drawer .nav-user-name { font-weight: 700; color: var(--s2t-brand-deep); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s2t-drawer .nav-user-email { font-weight: 400; color: var(--s2t-brand-strong); font-size: 12px; word-break: break-all; }

/* list-group flat menu */
.s2t-drawer .s2t-drawer-menu { border-radius: 0; }
.s2t-drawer .list-group-item { border: 0; padding: 0; }
.s2t-drawer .list-group-item.section-title {
  padding: 14px 16px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--s2t-brand-strong); background: transparent;
}
.s2t-drawer .nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; color: var(--s2t-brand-deep); text-decoration: none; font-weight: 600;
}
.s2t-drawer .nav-link i { width: 20px; text-align: center; color: var(--s2t-brand); font-size: 16px; }
.s2t-drawer .nav-link:hover { background: var(--s2t-brand-subtle); }
.s2t-drawer .nav-link-cta { color: var(--s2t-brand); font-weight: 700; }
.s2t-drawer .nav-link-danger { color: #b3261e; }
.s2t-drawer .nav-link-danger i { color: #b3261e; }

/* ---- Menu 2 (#s2tUserDrawer) — FregaForce Razor account fly-out look ------- *
   The user/member menu adopts the FregaForce account-menu styling (getusersitemenu.cshtml
   + style.css): WHITE header with a hairline border (not the green bar), grey section
   bands, dark item text with a green-tint hover, muted email, danger Sign Out. These are
   scoped to .s2t-user-drawer so Menu 1 (site drawer) keeps the S2T green header. */
.s2t-user-drawer .s2t-drawer-head { background: #fff; color: var(--s2t-brand-deep); border-bottom: 1px solid #e6e2d6; }
.s2t-user-drawer .s2t-drawer-head .offcanvas-title { color: var(--s2t-brand-deep); }
.s2t-user-drawer .s2t-drawer-head .btn-close { filter: none; }            /* dark close on the white header */
.s2t-user-drawer .nav-user-head { background: #fff; border-bottom: 1px solid #e6e2d6; }
.s2t-user-drawer .nav-user-email { color: #6c757d; }
.s2t-user-drawer .list-group-item.section-title {
  background: #f4f2ed; color: #555; font-weight: 600; font-size: 0.82rem;
  text-transform: none; letter-spacing: 0; padding: 7px 16px; margin-top: 6px;
}
.s2t-user-drawer .nav-link { color: #1a1a1a; font-weight: 500; }
.s2t-user-drawer .nav-link:hover { background: #2ba46416; }               /* FregaForce green-tint hover */
.s2t-user-drawer .nav-link i { color: var(--s2t-brand); }
.s2t-user-drawer .nav-link-cta { color: var(--s2t-brand); font-weight: 700; }

/* No bar-level responsive rules needed: the bar is just burger + logo + chip at every
   width; all nav/social collapses into the offcanvas drawers by design. */

/* ---- Account chip dropdown (frega parity) -------------------------------- */
/* UI-17 slice 2: the .dropdown wrapper moved OFF .s2t-zone-right and ONTO
   #fregauserContain, so the menu now anchors to the chip itself (BS5 .dropdown =
   position:relative) exactly as it does on the hub - that is what adopting the
   shared .menu-admin rules (right:0; top:100%) means. The old rule here made the
   zone static so the menu hung off .s2t-bar and dropped flush to the header's
   bottom edge; with the wrapper moved it matched nothing and was removed rather
   than left to mislead. Popper is still off (data-bs-display="static").
   Everything below is S2T's own item styling for the BS5 .dropdown-item rows -
   frega-chip.css styles the hub's .menAdmBtnBtn rows, which S2T does not use. */
.s2t-chip-menu {
  border: 0; border-radius: var(--s2t-radius-sm); box-shadow: var(--s2t-shadow-3);
  padding: 6px; min-width: 220px;
  position: absolute; top: 100%; right: 24px; left: auto; margin: 0;
}
.s2t-chip-menu .dropdown-item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--s2t-font); font-weight: 600; color: var(--s2t-brand-deep);
  border-radius: var(--s2t-radius-sm); padding: 10px 12px; text-transform: none;
}
.s2t-chip-menu .dropdown-item i { width: 18px; text-align: center; color: var(--s2t-brand); }
.s2t-chip-menu .dropdown-item:hover,
.s2t-chip-menu .dropdown-item:focus { background: var(--s2t-brand-subtle); color: var(--s2t-brand-deep); }
.s2t-chip-menu .s2t-chip-signout,
.s2t-chip-menu .s2t-chip-signout i { color: #b3261e; }
.s2t-chip-menu .s2t-chip-signout:hover { background: #fdecea; color: #b3261e; }