/* ════════════════════════════════════════════════════════════════
   NOVA TRADING — BASE STYLESHEET
   Loaded on EVERY page (home + all 12 product/guide pages).
   Contains only what is truly shared: brand tokens, reset, fonts,
   navbar, mobile menu, dropdown, and footer.

   ⚠️ Anything here changes on EVERY page at once. That's the point —
   edit a color/font/nav link here once instead of in 13 files.
   Page-specific look (hero, product grid, article layout, etc.)
   lives in home.css or article.css instead.
   ════════════════════════════════════════════════════════════════ */

/* ── BRAND TOKENS — single source of truth for colors/spacing ── */
:root {
  --cream:#FFFFFF; --cream-dark:#F8FAFC; --navy:#0F172A; --navy-soft:#334155; --navy-deep:#1E293B;
  --gold:#E8670E; --gold-light:#F07820; --gold-pale:#FEF0E0; --gold-dark:#B8420C;
  --green:#16a34a; --muted:#64748B; --muted-2:#475569; --muted-3:#334155;
  --wa:#25D366; --wa-hover:#1ebe5c;
  --border:rgba(249,115,22,0.22); --border-soft:rgba(15,23,42,0.08);
  --shadow:0 4px 40px rgba(15,23,42,0.08);
  --r:6px; --tr:0.26s ease;
}

/* ── RESET & BASE TYPOGRAPHY ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* overflow-x:clip clips without creating a containing block for position:fixed children —
   fixes cartDrawer / mobile menus escaping viewport bounds */
html{overflow-x:clip}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--navy);line-height:1.6;font-weight:300;overflow-x:clip}
body.menu-open{overflow:hidden}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:500;line-height:1.15}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font-family:'DM Sans',sans-serif;cursor:pointer}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity:.45}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--cream-dark)}
::-webkit-scrollbar-thumb{background:rgba(249,115,22,.4);border-radius:999px}
::selection{background:rgba(249,115,22,.22);color:var(--navy)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}

/* ── NAVBAR ── */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(248,250,252,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);transition:box-shadow var(--tr)}
#navbar.scrolled{box-shadow:0 2px 28px rgba(15,23,42,.1)}
.nav-inner{max-width:1320px;margin:0 auto;padding:0 48px;height:72px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;letter-spacing:.13em;color:var(--navy);display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.nav-logo .sep{color:var(--gold);margin:0 10px;font-weight:300;font-size:1.65rem}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0;flex-wrap:nowrap;flex-shrink:1;min-width:0}
.nav-links a{font-size:.775rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-soft);font-weight:400;position:relative;padding-bottom:2px;text-decoration:none;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:100%;height:1px;background:var(--gold);transition:right var(--tr)}
.nav-links a:hover::after{right:0}
.nav-cta{background:var(--navy);color:var(--cream)!important;padding:9px 22px;border-radius:var(--r);font-size:.74rem!important;letter-spacing:.12em;transition:background var(--tr);text-decoration:none;white-space:nowrap;flex-shrink:0}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--navy-soft)}
/* nav inquiry button */
.nav-inquiry{background:var(--wa);color:#fff!important;padding:9px 18px;border-radius:var(--r);font-size:.72rem!important;letter-spacing:.1em;display:flex;align-items:center;gap:6px;transition:background var(--tr);border:none;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0}
.nav-inquiry::after{display:none!important}
.nav-inquiry:hover{background:var(--wa-hover)}

/* Dropdown (Products / Guides) */
.nav-dropdown{position:relative}
.nav-dropdown > a{cursor:pointer}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid rgba(249,115,22,.25);border-radius:8px;box-shadow:0 12px 40px rgba(15,23,42,.14);min-width:240px;z-index:2000;padding:8px 0;list-style:none;margin:0}
.dropdown-menu::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px;background:transparent}
.dropdown-menu::after{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid rgba(249,115,22,.3)}
.dropdown-menu li{list-style:none}
.dropdown-menu li a{display:block;padding:10px 20px;font-size:.8rem;letter-spacing:.04em;text-transform:none!important;color:var(--navy-soft)!important;font-weight:400;transition:background .15s,color .15s;white-space:nowrap;text-decoration:none}
.dropdown-menu li a:hover{background:rgba(249,115,22,.08);color:var(--gold)!important}
.dropdown-menu .dd-label{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:10px 20px 4px;display:block;font-weight:500}
.dropdown-menu li a.is-current{color:var(--gold-dark)!important;font-weight:500}
.dropdown-menu .dd-label.dd-label-divider{margin-top:4px;border-top:1px solid rgba(15,23,42,.08);padding-top:10px}
.nav-dropdown:hover .dropdown-menu,.dropdown-menu:hover{display:block}
.nav-dropdown > a::before{content:'';position:absolute;bottom:-14px;left:-20px;right:-20px;height:14px}

/* Hamburger + mobile menu (shared markup/IDs on every page) */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border-radius:999px;border:1px solid rgba(15,23,42,.08);background:rgba(255,255,255,.65);transition:background var(--tr),border-color var(--tr),transform var(--tr);position:relative;z-index:1002;flex-shrink:0}
.hamburger:hover{background:#fff;border-color:rgba(249,115,22,.34)}
.hamburger span{display:block;width:24px;height:1.5px;background:var(--navy);transition:transform .28s ease,opacity .2s ease}
.hamburger.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu-backdrop{position:fixed;inset:72px 0 0;background:rgba(15,23,42,.28);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .26s ease;z-index:998}
.mobile-menu-backdrop.open{opacity:1;pointer-events:auto}
.mobile-menu{display:none;position:fixed;top:72px;left:14px;right:14px;background:rgba(248,250,252,.985);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(249,115,22,.24);z-index:999;padding:18px 18px 20px;flex-direction:column;gap:14px;border-radius:24px;box-shadow:0 22px 60px rgba(15,23,42,.16);max-height:calc(100vh - 92px);overflow-y:auto}
.mobile-menu a{font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;color:var(--navy);text-decoration:none}
.mobile-menu-group{display:flex;flex-direction:column;gap:8px;padding:12px 0 0}
.mobile-menu-group + .mobile-menu-group{border-top:1px solid rgba(15,23,42,.08)}
.mobile-menu-label{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500}
.mobile-menu-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-radius:10px;transition:background var(--tr),padding-left var(--tr)}
.mobile-menu-link:hover{background:rgba(249,115,22,.08);padding-left:8px}
.mobile-menu-link small{font-size:.72rem;letter-spacing:normal;text-transform:none;color:var(--muted)}
.mobile-menu-link.active{color:var(--gold-dark);font-weight:500}
.mobile-menu-cta{display:flex;align-items:center;justify-content:center;padding:13px 16px;border-radius:14px;font-size:.76rem!important;letter-spacing:.12em;background:var(--navy);color:var(--cream)!important}
.mobile-menu-cta.wa{background:var(--wa)}
.mobile-menu.open{display:flex}
@media(max-width:1080px){
  .nav-links{display:none!important}
  .hamburger{display:flex}
  .nav-inner{padding:0 20px;height:68px}
  .mobile-menu{top:68px}
  .mobile-menu-backdrop{inset:68px 0 0}
}

/* ── FOOTER ── */
footer{margin-top:80px;border-top:1px solid var(--border);background:var(--cream-dark);padding-bottom:env(safe-area-inset-bottom,0)}
/* push page content above sticky bar when it's visible (home page only, harmless elsewhere) */
body.bar-visible footer{padding-bottom:72px}
.fi{max-width:1320px;margin:0 auto;padding:32px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.flogo{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;letter-spacing:.1em}
.flogo .sep{color:var(--gold);margin:0 8px}
.ftag{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.fcopy{font-size:.73rem;color:var(--muted);text-align:right}
.fhours{font-size:.73rem;color:var(--muted);margin-top:6px;line-height:1.6}
.fhours strong{color:var(--navy-soft)}
.flinks-title{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:10px}
.flinks{display:flex;flex-direction:column;gap:7px}
.flinks a{color:var(--muted);font-size:.82rem}
.flinks a:hover{color:var(--gold)}
@media(max-width:640px){
  .nav-inner,.fi{padding:0 20px}
  .fi{padding:28px 20px;flex-direction:column;text-align:center}
}

/* ═══════════════════════════════════════════════════════════════
   TRANSPARENT HERO NAV — homepage only
   When #navbar has data-transparent, it starts fully see-through
   over the dark hero. nav.js already adds .scrolled at 30px scroll,
   which switches back to the standard frosted-glass look.
   ═══════════════════════════════════════════════════════════════ */

#navbar[data-transparent] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  transition: background 0.45s ease, border-color 0.45s ease,
              backdrop-filter 0.45s ease, box-shadow 0.45s ease;
}

/* Logo white on dark hero */
#navbar[data-transparent] .nav-logo { color: #ffffff; }
#navbar[data-transparent] .nav-logo .sep { color: rgba(249,186,90,0.9); }

/* Nav links white */
#navbar[data-transparent] .nav-links a { color: rgba(255,255,255,0.85); }
#navbar[data-transparent] .nav-links a:hover { color: #ffffff; }

/* Hamburger white on mobile */
#navbar[data-transparent] .hamburger span { background: #ffffff; }

/* "Get Quote" button: keep dark bg so it stays readable on the photo */
#navbar[data-transparent] .nav-cta {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(6px);
}
#navbar[data-transparent] .nav-cta:hover {
  background: rgba(255,255,255,0.28) !important;
}

/* "Send Requirement" green button — subtle tweak only */
#navbar[data-transparent] .nav-inquiry {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}

/* ── Once scrolled: snap back to frosted glass + dark text ── */
#navbar[data-transparent].scrolled {
  background: rgba(248,250,252,0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom-color: var(--border) !important;
}
#navbar[data-transparent].scrolled .nav-logo { color: var(--navy); }
#navbar[data-transparent].scrolled .nav-logo .sep { color: var(--gold); }
#navbar[data-transparent].scrolled .nav-links a { color: var(--navy-soft); }
#navbar[data-transparent].scrolled .hamburger span { background: var(--navy); }
#navbar[data-transparent].scrolled .nav-cta {
  background: var(--navy) !important;
  color: var(--cream) !important;
  border: none !important;
  backdrop-filter: none;
}
#navbar[data-transparent].scrolled .nav-inquiry {
  box-shadow: none;
}

/* ── RATES-UPDATED CHIP (date comes from src/site.json via build.js) ── */
.rates-chip{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.06em;color:#166534;background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.28);border-radius:999px;padding:5px 14px;white-space:nowrap}
.rates-chip .rates-chip-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.18);animation:ratesPulse 2.4s ease-in-out infinite}
.rates-chip--dark{color:#86EFAC;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35)}
@keyframes ratesPulse{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.18)}50%{box-shadow:0 0 0 5px rgba(34,197,94,.08)}}