/* ── PrimaForja brand theme (brand book v1.0) ─────────────────────────────
   Light content by default; the coal look is dark mode (theme toggle).
   The chrome (nav/footer) and the hero's embers scene stay dark in both
   modes — they carry the brand art.
   Palette: Forge Orange #FF7A00 · Ember #FFB347 · Gold #FFC36B
            Steel #C0C6CF · Gunmetal #6B7280 · Coal #0B1220
            Charcoal #111827 · Dark Slate #1F2937 · Slate #374151
   Loaded last — overrides site-chrome and theme-public-dark. */

:root {
  --pf-orange: #FF7A00;
  --pf-orange-deep: #C25E00;   /* small text on light surfaces */
  --pf-ember: #FFB347;
  --pf-gold: #FFC36B;
  --pf-gunmetal: #6B7280;
  --pf-coal: #0B1220;
  --pf-charcoal: #111827;
  --pf-darkslate: #1F2937;
  --pf-slate: #374151;
  --pf-lightgray: #F3F4F6;
  --pf-midgray: #9CA3AF;
  --pf-body-light: #EEF1F5;    /* default page canvas */
  --pf-card-border: #E2E6EC;
}

/* Chrome variables drive the nav/footer gradients (site-chrome.css uses
   them with !important) — coal chrome in BOTH modes. */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --chrome-gradient-from: #4C5870;
  --chrome-gradient-to: #0B1220;
  --chrome-text: #F3F4F6;
  --chrome-menu-hover: #FFB347;
}

/* multi-stop chrome gradient: the light zone reaches past the brand
   before falling to coal (overrides site-chrome's two-stop version) */
.navigation-bar,
.navbar {
  background: linear-gradient(90deg,
      #4C5870 0%, #414D63 24%, #1A2334 56%, #0B1220 100%) !important;
}
/* symmetric insets: brand 44px from the left edge, menu 44px from the
   right edge (container stretched full-width with equal padding) */
.navbar .container-regular {
  max-width: none !important;
  width: 100% !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
}

/* ── Dark mode: repoint the public dark machinery at the coal palette ── */
:root[data-theme="dark"] {
  --pg-bg: #0B1220;
  --pg-surface: #111827;
  --pg-surface-2: #1A2332;
  --pg-text: #F3F4F6;
  --pg-text-dim: #9CA3AF;
  --pg-border: #2A3648;
  --pg-accent: #FFB347;
}

/* ── Light default canvas ──────────────────────────────────────────── */
body { background: var(--pf-body-light); }

/* ── Navigation (coal, both modes) ─────────────────────────────────── */
.nav-link, .nav-link div, .w-nav-link {
  color: var(--pf-lightgray) !important;
  font-family: Inter, sans-serif;
}
.nav-link:hover div { color: var(--pf-ember) !important; }
.nav-dropdown-list, .nav-menu-dropdown-list-wrapper,
.w-dropdown-list {
  background: var(--pf-charcoal) !important;
  border: 1px solid var(--pf-darkslate);
}
/* dropdown items: brand orange, visible on any background */
.nav-dropdown-link .button-label,
.nav-dropdown-link div {
  color: var(--pf-ember) !important;
}
.nav-dropdown-link:hover .button-label,
.nav-dropdown-link:hover div {
  color: var(--pf-gold) !important;
}
.site-brand-mark { height: 64px; width: auto; }
/* the wordmark image includes the "j" descender, which drags its box
   center below the cap-height center — nudge down so the CAPS sit
   optically centered on the mark */
.site-brand-word { height: 32px; width: auto; margin-left: 6px; transform: translateY(4px); }
/* slightly thicker header to carry the larger brand */
.navbar { padding: 14px 0 !important; }
.menu-button .w-icon-nav-menu { color: var(--pf-lightgray); }
@media (max-width: 991px) {
  .nav-menu-wrapper, .w-nav-menu { background: var(--pf-charcoal); }
}

/* ── Shared content components: light defaults ─────────────────────── */
.cp h2, .cp h3, .cp-section h2 {
  color: var(--pf-charcoal);
  font-family: Montserrat, Inter, sans-serif;
}
.cp p, .cp-section p { color: var(--pf-slate); }
.cp-accent {
  background: linear-gradient(90deg, var(--pf-ember), var(--pf-orange));
}
.cp-stat .num {
  font-family: Montserrat, Inter, sans-serif;
  color: var(--pf-orange);
}
.cp-stat .lbl { color: var(--pf-gunmetal); }
.cp-card, .cp-stat {
  background: #FFFFFF;
  border: 1px solid var(--pf-card-border);
}
.cp-card h3 { color: var(--pf-charcoal); }
.cp-card p { color: var(--pf-slate); }
.cp-card:hover { border-color: var(--pf-orange); }
.gal-step { background: var(--pf-orange); color: #fff; }

/* CTA band + buttons */
.cp-cta { background: #FFFFFF; border: 1px solid var(--pf-card-border); }
.cp-cta h2 { color: var(--pf-charcoal); }
.cp-cta p { color: var(--pf-slate); }
.cp-btn.primary, .home-hero .btn.primary {
  background: var(--pf-orange); color: #fff; border-color: var(--pf-orange);
}
.cp-btn.primary:hover, .home-hero .btn.primary:hover {
  background: var(--pf-ember); border-color: var(--pf-ember); color: #0B1220;
}
.cp-btn.ghost { border: 1.5px solid var(--pf-orange); color: var(--pf-orange-deep); background: transparent; }
.cp-btn.ghost:hover { background: rgba(255, 122, 0, 0.10); }
/* hero sits on the dark scene in both modes */
.home-hero .btn.ghost { border: 1.5px solid var(--pf-orange); color: var(--pf-ember); background: transparent; }
.home-hero .btn.ghost:hover { background: rgba(255, 122, 0, 0.14); color: var(--pf-gold); }

/* ── Dark-mode specifics beyond the --pg vars ──────────────────────── */
/* theme-public-dark forces ALL cp/pr button hovers to a dark surface,
   which turns primary buttons' dark text invisible — restate readable
   hover states for both button kinds */
:root[data-theme="dark"] .cp-btn.primary:hover,
:root[data-theme="dark"] .pr-card.feature .pr-btn:hover {
  background: var(--pf-gold) !important;
  color: #0B1220 !important;
}
:root[data-theme="dark"] .cp-btn:hover,
:root[data-theme="dark"] .pr-btn:hover {
  color: var(--pf-gold) !important;
}
/* the hero carries the brand art in BOTH modes: its background must stay
   pure black to match the art's faded edges — theme-public-dark repaints
   sections coal (#0B1220), which shows a visible seam around the art */
:root[data-theme="dark"] .home-hero { background-color: #000 !important; }
:root[data-theme="dark"] .cp-stat .num { color: var(--pf-ember); }
:root[data-theme="dark"] .cp-card:hover { border-color: var(--pf-orange); }
:root[data-theme="dark"] .cp-btn.ghost { color: var(--pf-ember); }
:root[data-theme="dark"] .cp-btn.ghost:hover { color: var(--pf-gold); background: rgba(255, 122, 0, 0.14); }

/* ── Footer (coal, both modes) ─────────────────────────────────────── */
.footer,
:root[data-theme="dark"] .footer {
  background: linear-gradient(90deg,
      #4C5870 0%, #414D63 24%, #1A2334 56%, var(--pf-coal) 100%) !important;
  border-top: 1px solid var(--pf-darkslate);
  position: relative;
  overflow: hidden;
}
/* subtle ember field rising along the lower edge */
.footer::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(620px, 60vw);
  aspect-ratio: 775 / 400;
  background: image-set(
      url("../images/brand-footer-flames.avif") type("image/avif"),
      url("../images/brand-footer-flames.png") type("image/png"))
    no-repeat right bottom/contain;
  mix-blend-mode: screen;  /* dark field disappears into the coal footer */
  pointer-events: none;
}
/* the brand flame bleeding off the right edge (per the flame sample) —
   FIXED size so large monitors don't grow it */
.footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -24px;
  height: 300px;
  aspect-ratio: 2614 / 3835;
  transform: translateX(28%);
  background: image-set(
      url("../images/brand-flame.avif") type("image/avif"),
      url("../images/brand-flame.png") type("image/png"))
    no-repeat right bottom/contain;
  pointer-events: none;
}
.footer .container { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .footer::before { height: 200px; opacity: .8; }
}
.footer-title { color: var(--pf-lightgray) !important; }
.footer-link { color: var(--pf-midgray) !important; }
.footer-link:hover { color: var(--pf-ember) !important; }
.footer-copyright { color: var(--pf-gunmetal); }
.footer-divider { background: var(--pf-darkslate); }

/* brand lockup + link columns grouped toward the center */
.footer-wrapper {
  max-width: 1180px !important;
  display: flex;
  gap: 110px;
  align-items: flex-start;
  justify-content: center;
}
.footer-brand { max-width: none !important; flex: 0 0 auto; }
.footer-brand img {
  /* stacked lockup: mark over wordmark over taglines */
  width: min(230px, 64vw) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
}
.footer-block { flex: 0 0 auto; }