/* ============================================================
   EPRA Design System — Bootstrap 5 runtime overrides
   ============================================================
   PROBLEM THIS SOLVES: in production, Bootstrap 5.3 is compiled from
   source (Sass) with EPRA's brand variables baked in by the Concrete CMS
   site theme (katalysis_pro_theme) — see this repo's colors_and_type.css
   header comments for how those variables were traced. Apps embedded in
   themed Concrete pages get that themed Bootstrap for free and should
   NOT load a second copy.

   But for local dev / standalone testing OUTSIDE Concrete CMS (no theme,
   no Sass build), there is currently no practical way to pull down the
   full compiled theme — it depends on Concrete's own "bedrock" frontend
   package and the theme's own build chain, not something to vendor into
   a lightweight app repo. Confirmed with the user 2026-09-08.

   This file is the pragmatic middle ground: load PLAIN Bootstrap 5.3 from
   CDN, then load this file after it. Bootstrap 5.3's components read
   their styling from runtime CSS custom properties (--bs-*), not just
   Sass-compile-time values — so redefining the key ones here gets local
   dev visually CLOSE to the real theme without any build step. This is
   an approximation, not a byte-for-byte match: any theme customization
   that only exists in Sass source (e.g. component variables with no
   corresponding --bs-* runtime property) can't be replicated this way.
   Treat this as "close enough to develop against," not "identical to
   production" — do a real visual check against a live Concrete page
   before shipping anything that depends on exact pixel parity.

   USAGE:
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href=".../foundations/colors_and_type.css">
     <link rel="stylesheet" href=".../foundations/bootstrap-overrides.css">
   In that order — this file assumes colors_and_type.css's --epra- / --color-
   prefixed tokens are already defined, and reads from them rather than
   repeating literal hex values, so the two files can't drift apart.

   Values below are traced from the theme's actual compiled output
   (css/main.css), not guessed from the raw Sass variables — see
   colors_and_type.css's own correction notes for why that distinction
   matters (the raw variable name doesn't always mean what it says).
   ============================================================ */

:root, [data-bs-theme="light"] {
  /* ---- Brand colors ---- */
  --bs-primary: var(--epra-blue);
  --bs-primary-rgb: 18, 73, 127;
  --bs-secondary: var(--epra-secondary);
  --bs-secondary-rgb: 161, 159, 154;
  --bs-link-color: var(--epra-blue);
  --bs-link-color-rgb: 18, 73, 127;
  --bs-link-hover-color: var(--epra-blue);

  /* ---- Body ---- */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--color-dark-text);
  /* Confirmed 400 in the real compiled output — do not "fix" this to 300,
     that was this repo's own earlier mistake (see colors_and_type.css). */
  --bs-body-font-weight: 400;
  /* Real theme's main page background ($body-bg in its own SCSS) is
     #F0F0F0, not Bootstrap's stock white -- confirmed against the theme's
     compiled source, 2026-09-10. Unlike buttons/border-radius, Bootstrap's
     own `body{background-color:var(--bs-body-bg)}` rule doesn't locally
     redeclare this, so a plain :root override works here without needing
     a second override on `body` itself. */
  --bs-body-bg: var(--color-bg-page);

  /* ---- Card ---- */
  /* Matches the real theme: transparent, borderless, no shadow by default
     ($enable-shadows:false). Pair with .bg-white + this repo's own
     .epra-shadow-* / .epra-card-* additions for the "boxed card" look the
     apps actually want — see components/components.css. */
  --bs-card-border-width: 0;
  --bs-card-bg: transparent;
  --bs-card-border-radius: 10px;
  --bs-card-inner-border-radius: 10px;

  /* ---- Badges ---- */
  --bs-badge-border-radius: 2px;
}

/* Button pill radius / weight — Bootstrap 5.2+'s .btn rule locally
   redeclares --bs-btn-border-radius/-sm/-lg and --bs-btn-font-weight
   (e.g. `.btn{--bs-btn-border-radius:var(--bs-border-radius); ...}`), so a
   :root-level override alone gets shadowed: an explicit declaration on the
   .btn element itself always wins over one only inherited from :root,
   regardless of specificity. Must redeclare directly on .btn (this file
   loads after bootstrap.min.css, so it wins the resulting same-specificity
   tie). Confirmed against the real compiled CDN output 2026-09-10. */
.btn {
  --bs-btn-border-radius: 50px;
  --bs-btn-border-radius-sm: 50px;
  --bs-btn-border-radius-lg: 50px;
  --bs-btn-font-weight: 600;
}

/* Button brand colors — the SAME shadowing problem as border-radius above,
   but for a different underlying reason: the plain CDN build is precompiled
   from Sass with Bootstrap's OWN default $primary/$secondary already baked
   in as literal hex (e.g. `.btn-primary{--bs-btn-bg:#0d6efd;...}`), never
   referencing `var(--bs-primary)` at all for these classes — so overriding
   --bs-primary at :root (above) does nothing for .btn-primary/-secondary/
   -outline-* specifically, even though it correctly reflows into other
   things that DO reference it (e.g. .text-primary, .border-primary).
   Confirmed against the real compiled CDN output 2026-09-10 (found via
   BPR's compare-btn/chart-action, both .btn-outline-primary, rendering
   Bootstrap's stock blue instead of EPRA navy). Redeclare the specific
   --bs-btn-* custom properties each class actually uses, same
   hover/active darkening pattern Bootstrap's own precompiled CSS uses. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--epra-blue);
  --bs-btn-border-color: var(--epra-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--epra-blue-dark);
  --bs-btn-hover-border-color: var(--epra-blue-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--epra-blue-darker);
  --bs-btn-active-border-color: var(--epra-blue-darker);
  --bs-btn-disabled-bg: var(--epra-blue);
  --bs-btn-disabled-border-color: var(--epra-blue);
}
.btn-outline-primary {
  --bs-btn-color: var(--epra-blue);
  --bs-btn-border-color: var(--epra-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--epra-blue);
  --bs-btn-hover-border-color: var(--epra-blue);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--epra-blue);
  --bs-btn-active-border-color: var(--epra-blue);
  --bs-btn-disabled-color: var(--epra-blue);
  --bs-btn-disabled-border-color: var(--epra-blue);
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--epra-secondary);
  --bs-btn-border-color: var(--epra-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--epra-secondary-dark);
  --bs-btn-hover-border-color: var(--epra-secondary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--epra-secondary-darker);
  --bs-btn-active-border-color: var(--epra-secondary-darker);
  --bs-btn-disabled-bg: var(--epra-secondary);
  --bs-btn-disabled-border-color: var(--epra-secondary);
}
.btn-outline-secondary {
  --bs-btn-color: var(--epra-secondary-dark);
  --bs-btn-border-color: var(--epra-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--epra-secondary);
  --bs-btn-hover-border-color: var(--epra-secondary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--epra-secondary);
  --bs-btn-active-border-color: var(--epra-secondary);
  --bs-btn-disabled-color: var(--epra-secondary-dark);
  --bs-btn-disabled-border-color: var(--epra-secondary);
}

/* Form controls (select/input/textarea) — the real theme sets
   $form-control-bg: $light (#f9fbfc, = --color-paper-alt here) as its OWN
   variable, separate from $body-bg. Stock Bootstrap's default SCSS ties
   $form-control-bg to $body-bg by default, which is why the plain CDN
   build's compiled `.form-control{background-color:var(--bs-body-bg)}`
   can't be fixed by the --bs-body-bg override above — that would make
   inputs match the grey PAGE background, not the real theme's actual
   near-white form-control background. Confirmed against the theme's
   compiled source, 2026-09-10. */
.form-control, .form-select {
  background-color: var(--color-paper-alt);
}
/* .form-select ALSO locally redeclares --bs-form-select-bg-img with a
   baked literal SVG (stock grey arrow, #343a40) -- same shadowing pattern
   as buttons, a :root override wouldn't reach it. Path data copied
   verbatim from the theme's own $form-select-indicator SCSS variable,
   recolored to $body-color (#343434) as that variable does at compile
   time. */
.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 15' fill='none'%3e%3cpath fill='%23343434' d='M17.9588 4.43124L9.94451 13.8236C9.80734 13.9845 9.64533 14.0644 9.45847 14.0644C9.27161 14.0644 9.1096 13.9845 8.97243 13.8236L0.958097 4.43124C0.820925 4.27026 0.752878 4.07887 0.752878 3.85452C0.752878 3.63017 0.820925 3.43877 0.958097 3.27779L2.75106 1.18639C2.88823 1.02541 3.05025 0.945557 3.2371 0.945557C3.42396 0.945557 3.58598 1.02541 3.72315 1.18639L9.45847 7.91692L15.1938 1.18639C15.331 1.02541 15.493 0.945557 15.6798 0.945557C15.8667 0.945557 16.0287 1.02541 16.1659 1.18639L17.9588 3.27779C18.096 3.43877 18.1641 3.63017 18.1641 3.85452C18.1641 4.07887 18.096 4.27026 17.9588 4.43124Z'/%3e%3c/svg%3e");
}

/* .nav-tabs — no theme SCSS override exists (nothing on the live site
   actually uses .nav-tabs/.nav-pills to confirm one), but two of its
   locally-redeclared custom properties would otherwise resolve wrong for
   this app's own prior tab designs (TMT/fen-api both used a raised WHITE
   active tab on a light strip, not blended into the page): stock
   `--bs-nav-tabs-link-active-bg:var(--bs-body-bg)` would now render the
   active tab the same grey as the page (since --bs-body-bg was
   intentionally repointed to the page background above), and
   `--bs-nav-tabs-link-active-color` resolves through the generic
   `--bs-emphasis-color` (baked black, not brand blue). Overridden directly
   on `.nav-tabs` (same shadowing reason as buttons/selects) to preserve the
   "raised active tab" look both apps already had. `--bs-nav-link-color`
   needs no fix — it already resolves through `--bs-link-color`, which the
   brand-colors block above already points at --epra-blue. */
.nav-tabs {
  --bs-nav-tabs-link-active-bg: var(--epra-paper);
  --bs-nav-tabs-link-active-color: var(--epra-blue);
}

/* Headings — Bootstrap 5 doesn't expose heading font-family/weight as
   runtime custom properties (they're compiled directly into the h1-h6
   rule), so this needs a direct rule, not a --bs-* override. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  letter-spacing: -0.05rem;
}

/* Display utility classes (.display-1 through .display-6) — same
   limitation, same fix. */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
}

/* Lead paragraphs — Bootstrap's .lead has no runtime custom property
   either. Real theme value is 300 (see colors_and_type.css --fw-light);
   this is the one place 300 legitimately applies, general body text
   stays at the --bs-body-font-weight override above (400). */
.lead {
  font-weight: var(--fw-light);
}

/* ============================================================
   Theme-custom button classes
   ============================================================
   These are NOT stock Bootstrap — the real theme (katalysis_pro /
   katalysis_pro_theme) defines them as actual new CSS rules on top of
   Bootstrap, not just --bs-* variable overrides, so they can't be
   approximated via the :root block above. Hand-written here from the
   theme's compiled SCSS (audited 2026-09-10) so local dev without a Sass
   build still gets something close. `.btn-outline-light`/
   `.btn-outline-primary`/`.btn-primary`/`.btn-secondary` etc. need no
   entry here — they're stock Bootstrap and already correct via the
   --bs-primary/--bs-secondary overrides above.

   `.btn-accent`: Bootstrap's own color-loop auto-generates this once
   "accent" is registered in $theme-colors (accent = var(--epra-orange)),
   which the theme then simplifies to a flat fill (overriding the Pro
   package's own gradient version) — so flat orange is the correct FINAL
   production look, not the gradient. */
.btn-accent {
  background-color: var(--epra-orange);
  border-color: var(--epra-orange);
  color: var(--epra-ink);
}
.btn-accent:hover, .btn-accent:focus {
  background-color: var(--epra-orange-dark);
  border-color: var(--epra-orange-dark);
  color: var(--epra-ink);
}
.btn-outline-accent {
  color: var(--epra-orange);
  border-color: var(--epra-orange);
}
.btn-outline-accent:hover, .btn-outline-accent:focus {
  background-color: var(--epra-orange);
  border-color: var(--epra-orange);
  color: var(--epra-ink);
}

/* `-dark`/`-light` suffix variants: same base color, text forced to
   readable contrast regardless of the surface they sit on — used for CTAs
   placed on dark hero/nav backgrounds. Confirmed white-text version below
   (katalysis_pro_theme's own override wins over the Pro package's
   body-color version — the theme's is what actually ships). */
.btn-primary-dark, .btn-secondary-dark {
  color: #FFFFFF;
}
.btn-primary-dark { background-color: var(--epra-blue-dark); border-color: var(--epra-blue-dark); }
.btn-primary-dark:hover, .btn-primary-dark:focus { background-color: var(--epra-blue-darker); border-color: var(--epra-blue-darker); color: #FFFFFF; }
.btn-secondary-dark { background-color: var(--epra-secondary-dark); border-color: var(--epra-secondary-dark); }
.btn-secondary-dark:hover, .btn-secondary-dark:focus { background-color: var(--epra-secondary-darker); border-color: var(--epra-secondary-darker); color: #FFFFFF; }
.btn-primary-light { background-color: var(--epra-light-blue); border-color: var(--epra-light-blue); color: #FFFFFF; }
.btn-secondary-light { background-color: var(--epra-secondary-light); border-color: var(--epra-secondary-light); color: #FFFFFF; }

/* `.btn-link`: heavily reskinned in the real theme — no underline, a
   right-arrow that appears/animates on hover, bolder weight. Approximated
   with a pseudo-element the same way this repo's own .hero-cta pattern
   already does, rather than sourcing the theme's actual SVG background
   image (not vendored here). */
.btn-link {
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.btn-link:hover, .btn-link:focus {
  text-decoration: none;
}
.btn-link::after {
  content: '\2192';
  margin-left: 6px;
  display: inline-block;
  transition: transform 180ms ease;
}
.btn-link:hover::after {
  transform: translateX(3px);
}