/* ============================================================================
   ii-theme.css — shared theming + responsive foundation for the II portal.
   Loaded on EVERY portal page (before ii-portal-nav + per-page CSS).

   Two jobs:
   1. DARK MODE. The portal's per-page CSS declares its palette as CSS custom
      properties on :root (e.g. --cream, --ink, --line, --card). Redefining
      those same tokens under `.ii-dark` flips the whole palette for every
      token-driven rule with NO specificity fight (we change the variable, not
      the rule). Hardcoded colours (background:#fff, chip text, inline styles)
      don't use tokens, so a handful of universal component overrides — scoped
      to `.ii-dark` with !important, which beats any non-important page rule
      regardless of ID specificity — cover the recurring components. Page-
      specific leftovers are handled in each page's own CSS.
   2. RESPONSIVE. The 228px sticky sidenav becomes an off-canvas drawer with a
      hamburger + scrim below 900px; page grids stack in each page's own CSS.
   ============================================================================ */

/* ---- FONT TOKENS ---------------------------------------------------------
   --font-display (Montserrat) + --font-body (Lato) are the portal's two type
   faces. Individual page CSS (e.g. ii-home-v6.css) declares them on its own
   :root, but ii-theme.css loads on EVERY portal page, so declare them here as
   the shared fallback: any page that references var(--font-display) /
   var(--font-body) without declaring them still resolves to the right stack. */
:root{
  --font-display:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- LEGIBILITY : readable muted / ink-3 TEXT ----------------------------
   Legibility pass: grey secondary TEXT reads near-black (#1C1411) in light mode.
   We do NOT touch --muted / --ink-3 themselves — those tokens ALSO paint chart
   gridline strokes, card borders and backgrounds, which must stay grey. Instead
   text rules repoint their `color:` to these text-only tokens. In DARK mode the
   tokens resolve to the SAME light-grey as --muted / --ink-3, so dark text is
   unchanged; only LIGHT-mode text darkens. (--muted-ink / --ink3-ink are
   referenced only as a text `color:`, never as a border/background/stroke.) */
:root{ --muted-ink:#1C1411; --ink3-ink:#1C1411; }
.ii-dark{ --muted-ink:#A69D93; --ink3-ink:#B4ACA2; }

/* ---- FONT RECLAIM --------------------------------------------------------
   The BuddyBoss global-fonts setting injects an inline `p, span, li, a {
   font-family: Inter }` rule (and body{Inter}) that force-overrides normal
   inheritance, so every bare span / link / list-item in the portal renders in
   Inter instead of the II system faces (Montserrat display + Lato body) that
   every mockup uses. Re-assert the II stack, scoped to the portal.
   - The base (body.ii-portal, specificity 0,1,1) strongly beats body{Inter}.
   - The per-tag reclaim wraps the scope in :where() so it stays at element
     specificity (0,0,2): it out-ranks the theme's blunt `span/a/li/p` (0,0,1)
     rule but still YIELDS to any real .class (0,1,0) or #id font rule — so the
     portal's intentional Montserrat labels/headings are preserved untouched. */
body.ii-portal{ font-family:'Lato','Montserrat',-apple-system,BlinkMacSystemFont,sans-serif; }
body:where(.ii-portal) p, body:where(.ii-portal) span,
body:where(.ii-portal) li, body:where(.ii-portal) a{
  font-family:'Lato','Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ---- ICON-SVG COLLAPSE GUARD ---------------------------------------------
   A flex-child <svg> with the default flex:0 1 auto + min-width:auto collapses
   to 0 in the portal's flex containers (e.g. the directory card "message" icon
   rendered as an empty square). Icon SVGs inside buttons/links must never shrink. */
body.ii-portal button svg, body.ii-portal a svg{ flex:0 0 auto; }

/* ---- DARK PALETTE : redefine the shared tokens ---------------------------- */
/* Each portal page declares its palette on its OWN root wrapper (#ii-dash3{--cream:…}),
   not :root — and a value declared on the element beats one inherited from body. So the
   dark map is applied BOTH at body level (covers home's :root, BB chrome, and tokens the
   page doesn't re-declare like --card) AND scoped to every page root by ID (specificity
   1,1,0 beats the page's own 1,0,0). Add new page roots here as pages are added. */
.ii-dark,
.ii-dark #ii-dash3,
.ii-dark #ii-bench6,
.ii-dark #ii-wt6,
.ii-dark #ii-directory,
.ii-dark #ii-content3,
.ii-dark #ii-cdetail,
.ii-dark #ii-bench-v2,
.ii-dark #ii-wt-v4{
  /* page grounds + card/surfaces */
  --cream:#14100D; --page:#14100D; --sunk:#191510; --unk:#191510;
  --card:#211B15; --paper:#211B15; --surface:#211B15; --white:#211B15; --paper-warm:#241E17;
  --brand-soft:#2A211A; --amber-10:#2A211A; --community-10:#2A211A;

  /* text */
  --ink:#E9E3DB; --charcoal:#E9E3DB; --ink-2:#DAD3CA; --ink-strong:#F7F2EC;
  --ink-3:#B4ACA2; --muted:#A69D93; --cloud:#A69D93;
  /* text already meant to sit on dark chrome — keep light */
  --on-ink:#F4F0F5; --on-ink-muted:#CFC6DA; --rail-ink:#EDE7E2; --rail-muted:#A79C94;

  /* lines / rules / grids */
  --line:#332D26; --border:#332D26; --line-2:#3A3129; --rule:#332D26;
  --grid:#2A241E; --chrome-line:#48423B;

  /* brand — orange stays; dark-brown/purple TEXT tokens lift for contrast */
  --orange:#F97215; --accent-orange:#F97215; --community-100:#DE804D; --series-you:#DE804D;
  --amber:#E08A54; --amber-60:#8A5A3A; --amber-25:#33261A; --community-25:#33261A;
  --brand:#D08A56; --brown:#D08A56; --t-av:#D08A56; --amber-ink:#D08A56;
  --m1-purple:#A488CC; --m1-purple-lt:#C3B0E0; --series-target:#A488CC;
  --purple-ink:#B79AD8; --t-article:#B79AD8; --lavender:#CDC8D1; --lavender-mist:#CDC8D1;

  /* status — greens */
  --good:#5FBE86; --up:#5FBE86; --conv:#4ADE80; --far:#34D399; --green:#5DBB84; --st-good:#5FBE86;
  --good-bg:#16281D; --conv-bg:#17271C; --far-bg:#123027; --green-25:#18291F; --st-good-bg:#16281D;
  /* status — reds */
  --bad:#F06A5C; --down:#F06A5C; --crit:#F06A5C; --st-crit:#F06A5C;
  --bad-bg:#301A18; --crit-bg:#301A18; --st-crit-bg:#301A18;
  /* status — amber/attention */
  --attn:#E0A46A; --st-attn:#E0A46A; --sun:#F5A623;
  --attn-bg:#33261A; --st-attn-bg:#33261A;
  /* status — neutral */
  --st-ok:#C4BCB2; --st-ok-bg:#242019;

  /* metric accents (kept vivid; tints darkened) */
  --aov:#F59E0B; --aov-bg:#33280F; --sales:#9B6BF0; --sales-bg:#241C33;
  --upt:#8486F5; --upt-bg:#1E1F33; --ratio:#A585F8; --ratio-bg:#241C33;
  --near:#4B93E7; --rain:#4B93E7; --snow:#7FB2DE; --near-bg:#16223A;
  --teal:#5FA8C4; --tc:#5FA8C4; --t-tool:#5FA8C4; --tb:#5FA8C4;
  --teal-10:#122229; --teal-25:#16333D; --tt:#16333D;
  --purple-25:#241C33; --t-discussion:#5DBB84;

  /* sidenav rail is dark in both modes — nudge slightly for separation */
  --rail:#191310;
}

/* ---- DARK : page ground + BuddyBoss content wrappers ----------------------
   The portal renders inside BB's white content area; dark-ify body + the common
   BB singular wrappers so no light frame shows around the portal. */
.ii-dark, .ii-dark body{ background:#14100D !important; }   /* theme class lives on <html>; body must go dark too */
.ii-dark #page,
.ii-dark .site,
.ii-dark #primary,
.ii-dark .site-content,
.ii-dark .content-area,
.ii-dark .entry-content,
.ii-dark .page-content,
.ii-dark article,
.ii-dark .bb-single-page,
.ii-dark .buddypanel ~ .site-content-wrap{ background:transparent !important; }

/* The rebuilt homepage (front page 27) declares its palette on an INLINE
   <style> :root{--bg:#f5f1eb; --card:#ffffff; …}. That :root is specificity 0,1,0
   — a tie with our .ii-dark token block above — and it loads LATER, so in dark mode
   --card resolved to white and every .card (e.g. Trending Topics) painted white.
   html.ii-dark is 0,1,1, which OUTRANKS :root regardless of source order, so we
   re-assert the dark card/ground tokens here. Fixes the homepage without needing a
   page-root id or dashboard.css (which the homepage doesn't even enqueue). */
html.ii-dark{ --card:#211B15; --bg:#14100D; --surface:#211B15; --paper:#211B15; }

/* ---- DARK : universal component overrides (hardcoded colours) -------------
   !important beats non-important page rules at any specificity. Keep this list
   to genuinely cross-page components; page-specific bits live in page CSS. */
/* shared layout wrappers (page ground + sticky topbar) use hardcoded light values */
.ii-dark .shell,
.ii-dark .ii-portal-shell{ background:var(--cream) !important; }
.ii-dark .topbar{ background:var(--card) !important; border-color:var(--line) !important; }
.ii-dark .content{ background:transparent !important; }
.ii-dark .card,
.ii-dark .panel,
.ii-dark .th{ background:var(--card) !important; border-color:var(--line) !important; }
.ii-dark .th.unread{ background:#2A211A !important; }     /* keep unread readable on dark */
.ii-dark .th:hover{ background:#28221B !important; }
.ii-dark input,
.ii-dark select,
.ii-dark textarea,
.ii-dark .fsearch,
.ii-dark .qbox{ background:var(--card) !important; color:var(--ink) !important; border-color:var(--line) !important; }
.ii-dark input::placeholder,
.ii-dark textarea::placeholder{ color:var(--muted-ink) !important; }
/* data tables: a global table{background:#fff} + light <th> header bands leave
   light text unreadable in dark. Neutralise the table/header grounds so the dark
   card shows through; page CSS re-tints any "highlight" columns/rows on top. */
.ii-dark #ii-directory table,
.ii-dark [id^="ii-"] table{ background:transparent !important; }
.ii-dark [id^="ii-"] thead th{ background:transparent !important; }
/* loading skeletons (shared, defined in ii-portal-nav.css with a light base) */
.ii-dark .ii-skel{ background:#2A241E !important; }
.ii-dark .ii-skel::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent) !important; }
/* white text that sits on the orange/brand buttons stays white — don't touch */

/* ---- THEME TOGGLE (sidenav footer) --------------------------------------- */
.sidenav .ii-theme-toggle{
  display:flex; align-items:center; gap:11px; width:100%; padding:9px 10px; margin-top:2px;
  background:none; border:0; border-radius:8px; cursor:pointer;
  color:#DCD4CE; font-size:13.5px; font-weight:400; text-align:left; font-family:inherit;
}
.sidenav .ii-theme-toggle:hover{ background:#2A201B; color:#fff; }
.sidenav .ii-theme-toggle svg{ width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.sidenav .ii-theme-toggle .ii-tt-label{ flex:1; }
.sidenav .ii-theme-toggle .ii-tt-state{ font-size:11px; color:#A79C94; }
/* show the sun in dark mode (click → light), moon in light mode (click → dark) */
.ii-theme-toggle .ii-tt-sun{ display:none; }
.ii-dark .ii-theme-toggle .ii-tt-sun{ display:block; }
.ii-dark .ii-theme-toggle .ii-tt-moon{ display:none; }

/* ============================================================================
   RESPONSIVE — sidenav becomes an off-canvas drawer below 900px
   ============================================================================ */
/* intake photo dropzones (.dz) — drag/preview/error states (both themes) */
.dz{ position:relative; overflow:hidden; }
.dz.dz-over{ outline:2px dashed var(--orange, #F97215); outline-offset:-4px; }
.dz.dz-has{ min-height:118px; }
.dz.dz-has .dzt{ position:absolute; left:8px; bottom:8px; margin:0; background:rgba(0,0,0,.55); color:#fff; padding:3px 9px; border-radius:6px; font-size:13px; }
.dz.dz-err .dzt{ color:#F06A5C; }

/* ---- GLOBAL CHROME: II sidenav injected on non-portal pages (body.ii-global-chrome).
   The sidenav is fixed in a left gutter; body padding pushes the page (incl. the BB
   header) clear of it, and BuddyBoss's own left panel is hidden so there's one nav. */
body.ii-global-chrome{ padding-left:228px; }
body.ii-global-chrome .sidenav{ position:fixed; top:0; left:0; height:100vh; z-index:900; }
body.admin-bar.ii-global-chrome .sidenav{ top:32px; height:calc(100vh - 32px); }
body.ii-global-chrome .buddypanel,
body.ii-global-chrome .bb-buddypanel{ display:none !important; }
@media (max-width:900px){
  body.ii-global-chrome{ padding-left:0; }               /* hamburger + drawer take over */
  body.admin-bar.ii-global-chrome .sidenav{ top:0; height:100vh; }
}

.ii-nav-toggle{ display:none; }
.ii-nav-scrim{ display:none; }

@media (max-width:1000px){  /* matches every page CSS's .sidenav{display:none} breakpoint so the drawer takes over with no dead zone */
  html, body{ max-width:100%; overflow-x:hidden; }

  /* hamburger — fixed top-left, above everything */
  .ii-nav-toggle{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:12px; left:12px; z-index:1002;
    width:42px; height:42px; border-radius:11px; border:1px solid rgba(0,0,0,.08);
    /* Force a dark button + light icon so the hamburger is always visible — some
       pages sit on an orange header, and theme/page rules were tinting the button
       (and its currentColor icon) orange -> invisible. !important locks contrast. */
    background:#1C1411 !important; color:#EDE7E2 !important; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.18);
  }
  .ii-dark .ii-nav-toggle{ border-color:#33251E; }
  .ii-nav-toggle svg{ width:22px !important; height:22px !important; display:block !important; fill:none !important; stroke:#FFFFFF !important; stroke-width:2.1; stroke-linecap:round; opacity:1 !important; }
  .ii-nav-toggle svg path,
  .ii-nav-toggle svg line{ stroke:#FFFFFF !important; fill:none !important; opacity:1 !important; }
  /* clear the WP admin bar (46px ≤782px) when it's present */
  .admin-bar .ii-nav-toggle{ top:56px; }

  /* the shared sidenav: off-canvas, slides in. Everything is !important because
     several page stylesheets set their own .sidenav rules for mobile — including
     `.sidenav{display:none}` (ii-bench-v2) and `position:sticky` — that would
     otherwise hide or mis-place the drawer. Width/display/position are forced here
     so the drawer works identically on every portal page regardless of page CSS. */
  .sidenav{
    display:flex !important; flex-direction:column !important;
    /* Anchor BOTH top and bottom so the drawer's height is exactly the visible viewport
       (fixed elements resolve top/bottom against the visual viewport) -- no reliance on
       100vh/100dvh, which resolved to the LARGER layout viewport here and pushed the footer
       items off-screen with nothing to scroll. The taller menu content then overflows and
       overflow-y:auto scrolls it, so everything below Retail ORBIT is reachable. */
    position:fixed !important; top:0 !important; bottom:0 !important; left:0 !important;
    width:262px !important; max-width:86vw !important; flex:0 0 auto !important;
    height:auto !important; max-height:none !important; z-index:1001 !important;
    transform:translateX(-100%); transition:transform .25s ease;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    padding-bottom:max(28px, env(safe-area-inset-bottom)) !important;
    box-shadow:0 0 40px rgba(0,0,0,.35); will-change:transform;
  }
  /* WP admin bar (dev/admins only) sits above the drawer — offset so its top items clear it */
  body.admin-bar .sidenav{ top:46px !important; bottom:0 !important; height:auto !important; }
  body.ii-nav-open .sidenav{ transform:translateX(0) !important; }

  /* scrim behind the open drawer */
  body.ii-nav-open .ii-nav-scrim{
    display:block; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.45);
  }

  /* main content takes the full width (aside is now out of flow) + room for the hamburger */
  .ii-portal-main{ width:100% !important; }
  .ii-portal-shell{ display:block !important; }
  /* nudge page headers clear of the fixed hamburger */
  .ii-portal-main > *:first-child,
  .ii-portal-shell > .main:first-child{ padding-top:8px; }
}

@media (max-width:520px){
  .ii-nav-toggle{ top:9px; left:9px; }
}

/* PRO/Peer upgrade gate panel (Traffic & Conversion etc.) — uses portal tokens so it
   reads correctly in both light and dark. */
.ii-pgate{ max-width:560px; margin:60px auto; padding:36px 32px; border:1px solid var(--line,#e4e4e7); border-radius:16px; background:var(--card,#fff); text-align:center; }
.ii-pgate-badge{ display:inline-block; background:#F97215; color:#fff; font-weight:800; font-size:13px; letter-spacing:.08em; padding:4px 12px; border-radius:999px; margin-bottom:14px; }
.ii-pgate-title{ font-size:23px; font-weight:800; color:var(--ink,#18181b); margin:0 0 10px; }
.ii-pgate-sub{ color:var(--muted,#52525b); font-size:14.5px; line-height:1.6; margin:0 auto 22px; max-width:440px; }
.ii-pgate-btn{ display:inline-block; background:#F97215; color:#fff; font-weight:700; font-size:15px; padding:12px 30px; border-radius:999px; text-decoration:none; }
.ii-pgate-btn:hover{ background:#d9640f; color:#fff; }

/* Locked "More filters" button (Community) + PRO badge — Channel/Region/Activity
   filters are PRO-only, so Community sees the button with an upgrade cue. */
.morebtn.locked{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; opacity:.92; }
.morebtn.locked:hover{ opacity:1; text-decoration:none; }
.morebtn.locked svg{ opacity:.8; }
.probadge{ display:inline-flex; align-items:center; background:#F97215; color:#fff; font-weight:800; font-size:13px; letter-spacing:.06em; padding:2px 6px; border-radius:999px; margin-left:1px; line-height:1; }

/* ============================================================================
   WHOLE-PAGE PRO GATE — Community members on Benchmarking / What's Trending see
   the page open but greyed-out, with a centered upgrade card. Applied by
   window.iiProGate() to the page's <main> (the in-page sidenav stays usable).
   ============================================================================ */
/* Whole-page PRO gate — same visual language as the locked advanced filters:
   the full page stays visible but is desaturated, dimmed and non-interactive,
   with a slim upgrade notice pinned at the top (NOT a modal overlay). */
.ii-pro-gated{ position:relative; }
.ii-pro-gated > :not(.ii-pro-note){ filter:grayscale(1); opacity:.5; pointer-events:none !important; user-select:none; }
.ii-pro-note{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#FBF3EE; border:1px solid #F0D6C6; border-radius:12px; padding:12px 16px; margin:0 0 18px; }
.ii-pro-note .lock{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:#F3EEFA; color:#6C4AA0; display:flex; align-items:center; justify-content:center; }
.ii-pro-note .txt{ flex:1 1 260px; min-width:0; font-size:13.5px; line-height:1.5; color:#1C1411; }
.ii-pro-note .txt b{ color:#2A2A2C; font-family:'Montserrat',Arial,sans-serif; }
.ii-pro-note .txt .price{ font-weight:700; color:#2A2A2C; white-space:nowrap; }
.ii-pro-note .txt .disc{ color:#1C1411; white-space:nowrap; }
.ii-pro-note .cta{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:#DE804D; color:#fff; font-weight:700; border-radius:8px; padding:9px 20px; text-decoration:none; font-size:13.5px; }
.ii-pro-note .cta:hover{ background:#c96f3f; color:#fff; text-decoration:none; }
.ii-dark .ii-pro-note{ background:#241A16; border-color:#3A2C24; }
.ii-dark .ii-pro-note .txt{ color:#C9BDB4; }
.ii-dark .ii-pro-note .txt b, .ii-dark .ii-pro-note .txt .price{ color:#EDE7E2; }
.ii-dark .ii-pro-note .txt .disc{ color:#9E9188; }
.ii-dark .ii-pro-note .lock{ background:#2E2440; color:#B9A2D6; }
@media(max-width:900px){ .ii-pro-note{ padding:11px 13px; gap:10px; } .ii-pro-note .cta{ width:100%; } }
/* connect-only variant (ACCESS-01b / ACCESS-03): one ask, no pricing. Amber
   accent (connect, not Pro-purple). Inherits base .ii-pro-note layout + the
   900px mobile rule above; CTA reuses .ii-pro-note .cta. */
.ii-pro-note.mode-connect .lock{ background:#FBEADF; color:#C25E2E; }
.ii-dark .ii-pro-note.mode-connect .lock{ background:#3A2A1E; color:#E09A6E; }