/* ==========================================================================
   Learn2Trade 2026: global layer (fonts, tokens, base, buttons, cards, header, mega menu, drawer, footer, dock)
   Source of truth for tokens: James Miller's mockup (zip/l2t-site/index.html :root). Dark-first, light via
   prefers-color-scheme or [data-theme="light"].
   Everything is namespaced .l2t-* so it can sit next to the theme's Tailwind build on old templates.
   ========================================================================== */

/* ---- Fonts: self-hosted, latin subset, SIL OFL 1.1 (licences in ../fonts/OFL-*.txt) ---- */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-var.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap;font-stretch:100%}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-sub-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-sub-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-sub-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-sub-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-sub-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-sub-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---- Tokens (mockup :root, verbatim) + spacing scale ---- */
:root{
  --ink:#0A0E13; --panel:#111821; --panel-2:#17202B; --line:#233041;
  --fg:#E9EDF1; --muted:#8B98A6; --soft:#5E6B79;
  --amber:#F4A62A; --amber-ink:#1A1206; --amber-soft:rgba(244,166,42,.12);
  --long:#2FCB8A; --short:#F0605A; --long-soft:rgba(47,203,138,.12); --short-soft:rgba(240,96,90,.12);
  --grid:rgba(139,152,166,.10);
  --logo-bg:#0A0E13; /* broker logos on live are white-on-dark: keep them on a dark tile in both schemes */
  --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:14px; --r-lg:18px; --r-sm:10px; --max:1200px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px; --s-18:72px; --s-21:84px;
  --gutter:max(20px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --ink:#F5F6F3; --panel:#FFFFFF; --panel-2:#EEF0EC; --line:#DCE0DA;
  --fg:#0E141B; --muted:#56616D; --soft:#8792A0;
  --amber:#C47A07; --amber-ink:#0E141B; --amber-soft:rgba(196,122,7,.10);
  --long:#108A58; --short:#C93A34; --long-soft:rgba(16,138,88,.10); --short-soft:rgba(201,58,52,.10);
  --grid:rgba(14,20,27,.07); color-scheme:light;
}}
:root[data-theme="light"]{
  --ink:#F5F6F3; --panel:#FFFFFF; --panel-2:#EEF0EC; --line:#DCE0DA;
  --fg:#0E141B; --muted:#56616D; --soft:#8792A0;
  --amber:#C47A07; --amber-ink:#0E141B; --amber-soft:rgba(196,122,7,.10);
  --long:#108A58; --short:#C93A34; --long-soft:rgba(16,138,88,.10); --short-soft:rgba(201,58,52,.10);
  --grid:rgba(14,20,27,.07); color-scheme:light;
}

/* ---- Base ---- */
body.l2t-2026,body.l2t-2026.custom-background{margin:0;background:var(--ink);color:var(--fg);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.l2t-2026 *,body.l2t-2026 *::before,body.l2t-2026 *::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.l2t-2026::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
.l2t-2026 :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.l2t-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.l2t-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--amber);color:var(--amber-ink);padding:10px 14px;border-radius:8px;font-weight:600}
.l2t-skip:focus{left:12px}
.l2t-wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:max(20px,env(safe-area-inset-right,0px))}
.l2t-2026 .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.l2t-eyebrow{font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}

/* ---- Buttons ---- */
.l2t-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--f-body);padding:14px 20px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background-color .15s;white-space:nowrap}
.l2t-btn:hover{transform:translateY(-1px)}
.l2t-btn--amber{background:var(--amber);color:var(--amber-ink)}
.l2t-btn--amber:hover{color:var(--amber-ink)}
.l2t-btn--ghost{border-color:var(--line);color:var(--fg);background:transparent}
.l2t-btn--ghost:hover{border-color:var(--muted);color:var(--fg)}
.l2t-btn--sm{padding:10px 16px;font-size:14px}
.l2t-btn .tg{width:16px;height:16px;flex:none}
.l2t-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;padding:0}
.l2t-icon-btn svg{width:17px;height:17px}

/* ---- Cards + lists ---- */
.l2t-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-6)}
.l2t-tick{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.l2t-tick li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.l2t-tick li::before{content:"";width:16px;height:16px;flex:none;margin-top:4px;border-radius:4px;background:var(--long-soft);box-shadow:inset 0 0 0 1.5px var(--long)}
.l2t-tick li b{color:var(--fg);font-weight:600}

/* ---- Logo (text wordmark, as in the mockup) ---- */
.l2t-logo{display:flex;align-items:baseline;font:800 22px/1 var(--f-display);text-decoration:none;letter-spacing:-.03em;color:var(--fg)}
.l2t-logo b{color:var(--amber);font-weight:800}
.l2t-logo:hover{color:var(--fg)}

/* ---- Header + menu ---- */
.l2t-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);font-family:var(--f-body)}
.admin-bar .l2t-header{top:32px}
.l2t-nav{display:flex;align-items:center;gap:20px;padding-block:14px}
.l2t-menu{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.l2t-menu > li{margin:0}
.l2t-menu > li > a,.l2t-menu > li > button{display:inline-flex;align-items:center;gap:5px;font:500 14px/1 var(--f-body);color:var(--muted);background:none;border:0;padding:9px 10px;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap}
.l2t-menu > li > a:hover,.l2t-menu > li > button:hover,.l2t-menu > li > button[aria-expanded="true"],.l2t-menu a[aria-current]{color:var(--fg);background:var(--panel-2)}
.l2t-caret{width:9px;height:9px;flex:none;transition:transform .15s}
button[aria-expanded="true"] .l2t-caret{transform:rotate(180deg)}
.l2t-nav__right{margin-left:auto;display:flex;align-items:center;gap:10px}
.l2t-burger{display:none}
.l2t-searchbar{border-top:1px solid var(--line);background:var(--panel)}
.l2t-searchbar form{display:flex;gap:10px;padding-block:12px;margin:0 auto}
.l2t-searchbar input{flex:1;min-width:0;font:400 15px/1 var(--f-body);color:var(--fg);background:var(--ink);border:1px solid var(--line);border-radius:999px;padding:12px 18px;margin:0}
.l2t-mega{position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 24px 48px -24px rgba(0,0,0,.45)}
.l2t-mega__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px 40px;padding-block:28px 32px}
.l2t-mega h5,.l2t-drawer h5{margin:0 0 12px;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.l2t-mega ul,.l2t-drawer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.l2t-mega li,.l2t-drawer li{margin:0}
.l2t-mega a,.l2t-drawer ul a{font-size:14.5px;line-height:1.4;text-decoration:none;color:var(--fg)}
.l2t-mega a:hover,.l2t-drawer ul a:hover{color:var(--amber)}
.l2t-drawer{position:fixed;z-index:49;left:0;right:0;bottom:0;top:var(--hdr,64px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overflow-y:auto;background:var(--ink);padding-block:8px calc(24px + env(safe-area-inset-bottom,0px));padding-left:var(--gutter);padding-right:max(20px,env(safe-area-inset-right,0px));border-top:1px solid var(--line)}
.l2t-drawer > a,.l2t-drawer summary{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font:600 17px/1 var(--f-display);text-decoration:none;cursor:pointer;list-style:none;color:var(--fg)}
.l2t-drawer summary::-webkit-details-marker{display:none}
.l2t-drawer details[open] summary .l2t-caret{transform:rotate(180deg)}
.l2t-drawer__grp{padding:14px 0 18px;display:grid;gap:22px;border-bottom:1px solid var(--line)}
.l2t-drawer__cta{margin-top:20px;display:grid;gap:10px}
@media (max-width:1180px){ .l2t-menu{display:none} .l2t-burger{display:inline-flex} .l2t-mega{display:none!important} }
@media (min-width:1181px){ .l2t-drawer{display:none!important} }
@media (max-width:520px){ .l2t-login{display:none} }

/* ---- Footer ---- */
.l2t-foot{border-top:1px solid var(--line);padding-block:56px 40px;font-size:14px;color:var(--muted);background:var(--ink)}
.l2t-foot__grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:32px}
.l2t-foot h4{font:600 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);margin:0 0 14px}
.l2t-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.l2t-foot li{margin:0}
.l2t-foot a{text-decoration:none;color:var(--muted)}
.l2t-foot .l2t-logo,.l2t-foot .l2t-logo:hover{color:var(--fg)}
.l2t-foot a:hover{color:var(--fg)}
.l2t-contact li{display:flex;gap:10px;align-items:flex-start}
.l2t-contact svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--soft)}
.l2t-contact li:last-child{padding-left:26px}
.l2t-contact a{color:var(--fg)}
.l2t-social{display:flex;gap:8px;margin-top:18px}
.l2t-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center}
.l2t-social svg{width:17px;height:17px}
.l2t-legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:12px;font-size:12px;line-height:1.65;color:var(--soft);max-width:120ch}
.l2t-legal p{margin:0}
.l2t-legal a{color:var(--muted);text-decoration:underline}
.l2t-scam{background:var(--short-soft);color:var(--fg)!important;border-radius:10px;padding:12px 14px;font-size:13px}
.l2t-scam a{color:var(--fg)!important}

/* ---- Mobile dock + Telegram sheet ---- */
.l2t-dock{display:none}
.l2t-tgsheet{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:grid;align-items:end}
.l2t-tgsheet[hidden]{display:none}
.l2t-tgsheet__panel{position:relative;background:var(--panel);border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:24px var(--gutter) calc(88px + env(safe-area-inset-bottom,0px));display:grid;gap:12px}
.l2t-tgsheet h2{margin:0 0 6px;font:700 22px/1.1 var(--f-display);letter-spacing:-.02em}
.l2t-tgsheet__close{position:absolute;right:16px;top:16px}
.l2t-tgsheet__ch{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--fg);background:var(--ink)}
.l2t-tgsheet__ch span{font:500 12px/1 var(--f-mono);color:var(--muted)}
@media (max-width:760px){
  .l2t-dock{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .l2t-dock a{display:grid;justify-items:center;gap:4px;padding:10px 4px;font:500 11px/1 var(--f-body);color:var(--muted);text-decoration:none}
  .l2t-dock svg{width:20px;height:20px}
  .l2t-dock a:first-child{color:var(--amber)}
  .l2t-foot{padding-bottom:110px}
}
@media (max-width:1020px){ .l2t-foot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .l2t-foot__grid{grid-template-columns:1fr} }

/* ---- Removed overlays: safety nets only (real fix = header swap + plugin deactivation on staging) ---- */
.l2t-2026 .rc-dialog,.l2t-2026 #floatingbanner{display:none!important}

@media (prefers-reduced-motion:reduce){.l2t-2026 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Amber buttons always carry dark ink (contrast AA), also inside header/drawer where link colours are inherited. */
.l2t-header .l2t-btn--amber,.l2t-drawer .l2t-btn--amber,.l2t-drawer .l2t-btn--amber:hover{color:var(--amber-ink)}
/* Drawer open: header stays visible above the body-level drawer; no rubber-band scroll behind it. */
html.l2t-locked{overflow:hidden}
html.l2t-locked .l2t-header{position:fixed;left:0;right:0;top:0}
/* The bottom dock (z 80) stays visible over the drawer: give the drawer's last items room above it. */
@media (max-width:1180px){ .l2t-drawer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))} }

/* Mobile menu, QA re-test 22 Oct: the burger shows a visible close (X) icon while the drawer is open; every drawer
   sub-link is a 44px-tall tap target (WCAG 2.5.5 guidance), with no extra gap so the list does not grow. */
.l2t-burger .l2t-burger__close{display:none}
.l2t-burger[aria-expanded="true"] .l2t-burger__open{display:none}
.l2t-burger[aria-expanded="true"] .l2t-burger__close{display:block}
.l2t-burger[aria-expanded="true"]{border-color:var(--amber);color:var(--amber)}
.l2t-drawer ul{gap:0}
.l2t-drawer ul a{display:flex;align-items:center;min-height:44px;padding-block:4px;box-sizing:border-box}


/* rc.16 ADDED: header account link (logged in) */
.l2t-acctlink{position:relative;display:inline-flex;align-items:center}
.l2t-acctlink__btn{display:inline-flex;align-items:center;gap:8px}
.l2t-btn--sm.l2t-acctlink__btn{padding-left:6px}
.l2t-acctlink__avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--amber-soft);color:var(--fg);border:1px solid var(--amber);font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1}
.l2t-acctlink__badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d92d20;color:#fff!important;font-size:11px;font-weight:700;line-height:18px;text-align:center;text-decoration:none}
.l2t-acctlink__badge:hover{background:#b42318}
@media (max-width:520px){ .l2t-nav__right .l2t-acctlink:has(.l2t-login){display:none} }
.l2t-drawer__cta .l2t-acctlink{display:flex}
.l2t-drawer__cta .l2t-acctlink__btn{flex:1;justify-content:center}
/* rc.16 ADDED: keep focused/invalid account fields clear of the sticky header */
.woocommerce-MyAccount-content input,.woocommerce-MyAccount-content select,.woocommerce-notices-wrapper{scroll-margin-top:110px}