/* ============================================================
   Invoice Parse — Brand Token Layer (Phase 1 redesign foundation)
   ------------------------------------------------------------
   Source-of-truth, version-controlled here. NOTE: static is served
   from Azure Blob (AzureStaticStorage) with no collectstatic in the
   deploy pipeline — this file must be uploaded to the blob's
   `static/css/` container manually, exactly like
   combined_styles_production.css / light_landing.css, or the
   {% static %} link 404s. See the PR description ("Static pipeline").

   Load order (set in base.html / base_minimal.html): AFTER Bootstrap
   AND after the css_file block, so this wins the cascade over both
   Bootstrap and combined_styles_production.css / light_landing.css.
   Seeded from _newlanding_v2/design_tokens.css. Two font families
   only (Space Grotesk + JetBrains Mono) — no DM Sans.
   ============================================================ */

:root {
  /* --- Brand colours --- */
  --c-deep:  #021B8D;  /* Deep Blue — trust/authority. Backgrounds, headings, link hover. */
  --c-vib:   #114FEE;  /* Vibrant Blue — primary action. Buttons, links. */
  --c-light: #15B0F8;  /* Light Blue — clarity. Secondary accents. */
  --c-green: #16EA9E;  /* Digital Green — automation/intelligence. AI accents, success. */

  /* Press/hover shades of the vibrant primary (derived; not in seed). */
  --c-vib-700: #0c3bcf; /* hover */
  --c-vib-800: #0a32ad; /* active */

  /* --- Neutrals / text --- */
  --c-ink:   #0B1437;  /* Primary text / headings. */
  --c-muted: #525c80;  /* Secondary text. */
  --c-soft:  #8a93b5;  /* Tertiary / captions. */
  --c-line:  #E9EEF8;  /* Hairlines / borders. */
  --c-line2: #E6ECF8;  /* Alt border. */
  --c-bg:    #F6F8FC;  /* Section background tint. */

  /* --- Gradients --- */
  --grad:      linear-gradient(120deg, #021B8D, #114FEE, #15B0F8, #16EA9E); /* full brand sweep */
  --grad-btn:  linear-gradient(100deg, #114FEE, #15B0F8);                   /* buttons / accents */
  --grad-deep: linear-gradient(135deg, #021B8D 0%, #0c3bcf 45%, #114FEE 72%, #15B0F8 100%); /* hero */

  /* --- Typography (two families only) --- */
  --ff-head: "Space Grotesk", system-ui, sans-serif;   /* headings + body */
  --ff-body: "Space Grotesk", system-ui, sans-serif;   /* same family as headings */
  --ff-mono: "JetBrains Mono", ui-monospace, monospace; /* eyebrows / technical labels */

  /* ============================================================
     Bootstrap variable remap — recolours .text-primary / .bg-primary
     / links / body typography site-wide without touching markup.
     ============================================================ */
  --bs-primary:           #114FEE;
  --bs-primary-rgb:       17, 79, 238;

  --bs-link-color:        #114FEE;
  --bs-link-color-rgb:    17, 79, 238;
  --bs-link-hover-color:  #021B8D;
  --bs-link-hover-color-rgb: 2, 27, 141;

  --bs-body-font-family:  var(--ff-body);
  --bs-body-color:        #0B1437;
  --bs-body-color-rgb:    11, 20, 55;
  --bs-heading-color:     #0B1437;
}

/* ============================================================
   Typography — force the brand family over FlexStart
   (combined_styles_production.css hardcodes Open Sans/Nunito/Poppins).
   Loaded after that sheet; !important guards against higher-specificity
   FlexStart selectors (e.g. #header ...).
   ============================================================ */
body {
  font-family: var(--ff-body) !important;
  color: var(--c-ink);
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--ff-head) !important;
  color: var(--c-ink);
}

/* ============================================================
   Component overrides — Bootstrap 5.3 compiles these to local
   literals, so the --bs-primary remap above does NOT reach them.
   ============================================================ */

/* Solid primary button */
.btn-primary {
  --bs-btn-bg:                 var(--c-vib);
  --bs-btn-border-color:       var(--c-vib);
  --bs-btn-hover-bg:           var(--c-vib-700);
  --bs-btn-hover-border-color: var(--c-vib-700);
  --bs-btn-active-bg:          var(--c-vib-800);
  --bs-btn-active-border-color: var(--c-vib-800);
  --bs-btn-disabled-bg:        var(--c-vib);
  --bs-btn-disabled-border-color: var(--c-vib);
}

/* Outline primary button */
.btn-outline-primary {
  --bs-btn-color:               var(--c-vib);
  --bs-btn-border-color:        var(--c-vib);
  --bs-btn-hover-bg:            var(--c-vib);
  --bs-btn-hover-border-color:  var(--c-vib);
  --bs-btn-active-bg:           var(--c-vib);
  --bs-btn-active-border-color: var(--c-vib);
  --bs-btn-disabled-color:      var(--c-vib);
  --bs-btn-disabled-border-color: var(--c-vib);
}

/* Brand sweep on PRIMARY surfaces only (e.g. landing icon boxes
   `bg-primary bg-gradient`). Scoped to .bg-primary so Bootstrap's
   semantic gradients (.bg-success/.bg-warning/.bg-danger/.bg-info/...
   .bg-gradient, e.g. in features.html) keep their own colour and just
   retain the default translucent overlay. */
.bg-primary.bg-gradient {
  background-image: var(--grad-btn) !important;
}

/* ============================================================
   Shared section eyebrow (used by landing/section partials —
   "Try It Now", "Contact Us", "Compare Plans"). Not header/footer;
   retained from Phase 1.
   ============================================================ */
.section-header p {
  color: var(--c-vib);
}

/* ============================================================
   === Header ===  (Phase 2 re-skin)
   FlexStart's header lives in combined_styles_production.css; these
   override its hardcoded navy/indigo (#012970 / #013289 / #4154f1)
   and "Nunito" onto brand tokens. NO markup/JS change — every
   JS-hooked class/ID is untouched. BOTH states branded: resting
   `.header` AND scrolled `#header.header-scrolled` (BootstrapMade's
   main.js toggles `.header-scrolled` — confirmed in the blob CSS),
   so the bar stays on-brand before and after scroll.
   ============================================================ */

/* Resting bar — frosted brand-neutral so logo/nav stay legible over
   the current light hero and white interior pages (FlexStart leaves
   this transparent). Phase 3's dark hero may need a revisit here. */
.header {
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  padding: 16px 0;           /* symmetric top/bottom (was 8/20 via .pt-2) */
  /* Solid white (reads clean over the dark hero and light pages alike).
     Do NOT add backdrop-filter/filter/transform here — it makes .header the
     containing block for its position:fixed descendants and traps the
     .navbar-mobile overlay inside the header box (mobile menu breaks). */
}

/* Near-full-width header row so the logo hugs the left and the actions hug
   the right (was capped/centred by container-xl → buttons sat ~150px inset). */
.header .container-xl {
  max-width: 100%;
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}
/* Desktop only (below 1280 FlexStart switches to the mobile hamburger nav):
   nav links sit after the logo; Login + CTA are pushed to the far right. */
@media (min-width: 1280px) {
  .header .navbar { flex: 1 1 auto; }
  .header .navbar > ul { width: 100%; }
  .header .navbar > ul > li.dropdown,
  .header .navbar > ul > li:has(> .nav-login) { margin-left: auto; }
}

/* Scrolled bar — solid white + brand-tinted shadow, distinct from resting. */
.header.header-scrolled {
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 2px 20px rgba(2, 27, 141, 0.10);
}

/* Logo mark (logo_new.svg — square brand-gradient icon) + wordmark */
.header .logo {
  flex-shrink: 0;            /* don't let the nav squeeze the logo at tighter widths */
}
.header .logo img {
  height: 30px;
  width: auto;
  margin-right: 8px;
}
.header .logo span {
  color: var(--c-ink);
  font-family: var(--ff-head);
  font-size: 19px;           /* design lockup: compact wordmark (was 30px/700 — too big/bold) */
  font-weight: 600;
  letter-spacing: 0;         /* FlexStart adds letter-spacing:1px which reads heavy */
  line-height: 1;            /* FlexStart sets .logo line-height:0 → wordmark lines overlap ("Parsice"); restore it */
  white-space: nowrap;       /* keep "Invoice Parse" on a single line */
}

/* Desktop nav links — resting + hover/active. Matches the Claude Design:
   14.5px, medium weight (500), slate — FlexStart's 700/16px reads too heavy. */
.navbar a,
.navbar a:focus {
  color: #475073 !important;
  font-family: var(--ff-body);
  font-size: 14.5px;
  font-weight: 500;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: var(--c-vib) !important;
}

/* "Login" — deep-blue text link, weight 600 (design) */
.navbar .nav-login,
.navbar .nav-login:focus {
  color: var(--c-deep) !important;
  font-weight: 600;
}
.navbar .nav-login:hover {
  color: var(--c-vib) !important;
}

/* "Try the AI Agent →" CTA button — design: vibrant blue, radius 11px, soft
   shadow, weight 600; hover → deep blue. (.navbar .getstarted outranks .navbar a.) */
.navbar .getstarted,
.navbar .getstarted:focus {
  background: var(--c-vib) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 18px;
  border-radius: 11px;
  box-shadow: 0 8px 22px rgba(17, 79, 238, 0.28);
}
.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
  background: var(--c-deep) !important;
  color: #fff !important;
}

/* Authenticated user dropdown menu */
.navbar .dropdown ul a {
  color: var(--c-ink) !important;
}
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
  color: var(--c-vib) !important;
}

/* Mobile nav — toggle icon + slide-in overlay. FlexStart's main.js
   toggles `.navbar-mobile` (NOT `.mobile-nav-active`) — confirmed in
   the blob CSS. Do not touch the toggle markup or the bi-list/bi-x icons. */
.mobile-nav-toggle {
  color: var(--c-ink);
}
.mobile-nav-toggle.bi-x {
  color: #fff;
}
.navbar-mobile {
  background: rgba(2, 27, 141, 0.92);   /* brand deep-blue scrim */
}
.navbar-mobile ul {
  background: #fff;
}
.navbar-mobile a,
.navbar-mobile a:focus {
  color: var(--c-ink) !important;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: var(--c-vib) !important;
}

/* Back-to-top floating button (FlexStart default #4154f1) */
.back-to-top {
  background: var(--c-vib) !important;
}
.back-to-top:hover {
  background: var(--c-vib-700) !important;
}

/* ============================================================
   === Footer ===  (Phase 2 REBUILD — matches Claude Design)
   footer.html markup was rebuilt to the dark design footer
   (logo + tagline, Product/Company columns, legal row). These rules
   style the new `.footer-brand` structure on brand tokens. The old
   FlexStart `.footer .footer-top/.footer-links/...` rules no longer
   have matching elements; only `.footer` base bg is overridden here.
   Contrast: all text verified AA on the var(--c-deep) background.
   ============================================================ */
.footer-brand {
  background: var(--c-deep) !important;
  color: #c5cdf0;
  padding: clamp(48px, 6vw, 72px) 0 28px;
  font-family: var(--ff-body);
  font-size: 14px;
}

/* Top row: brand block + link columns */
.footer-brand .footer-top-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
.footer-brand .footer-brand-info {
  flex: 1 1 280px;
  max-width: 360px;
}
.footer-brand .footer-logo img {
  height: 30px;
  width: auto;
  margin-right: 10px;
  /* logo-mono.svg is already white (white gradients) — no filter needed */
}
.footer-brand .footer-logo span {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: #fff;
}
.footer-brand .footer-brand-info p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #9fabd8;
  margin: 18px 0 0;
}

/* Link columns */
.footer-brand .footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
}
.footer-brand .footer-col h4 {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #aab4dd;
  margin: 0 0 14px;
}
.footer-brand .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer-brand .footer-col a {
  color: #c5cdf0;
  text-decoration: none;
  font-size: 14.5px;
  transition: color 0.2s;
}
.footer-brand .footer-col a:hover {
  color: var(--c-green);
}

/* Bottom legal row */
.footer-brand .footer-bottom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.footer-brand .footer-copyright {
  font-size: 13px;
  color: #97a1cc;
}
.footer-brand .footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.footer-brand .footer-legal a {
  color: #9fabd8;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}
.footer-brand .footer-legal a:hover {
  color: #fff;
}