/*
 * Bootstrap bridge
 * ----------------
 * Bootstrap 5.3 lives in @layer bootstrap (see bootstrap-layer.css), so style.css always wins.
 * This file maps Bootstrap variables to the brand, sets grid gutters that match the original spacing,
 * and fixes the few places where a generic style.css rule would fight the Bootstrap grid.
 */

:root {
  --bs-body-font-family: var(--font-b);
  --bs-body-font-size: 18px;
  --bs-body-font-weight: 500;
  --bs-body-line-height: 1.7;
  --bs-body-color: var(--fg);
  --bs-body-bg: var(--bg);
  --bs-heading-color: var(--fg);
  --bs-primary: #2f7cf6;
  --bs-primary-rgb: 47, 124, 246;
  --bs-secondary: #7c4dff;
  --bs-secondary-rgb: 124, 77, 255;
  --bs-link-color: inherit;
  --bs-link-hover-color: inherit;
  --bs-border-color: var(--line);
  --bs-border-radius: 14px;
  --bs-border-radius-lg: var(--r);
  --bs-focus-ring-color: rgba(124, 77, 255, 0.25);
}

/* Lenis handles smooth scrolling. Bootstrap's native smooth scroll would fight it. */
:root, html { scroll-behavior: auto; }

/* Bootstrap gives .lead a light weight and .card a flex layout. Keep the design system's versions. */
.lead { font-weight: inherit; }
.card { display: block; color: inherit; word-wrap: normal; }

/* ---------- Grid gutters matching the original layout spacing ---------- */
.g-cards { --bs-gutter-x: clamp(18px, 1.6vw, 28px); --bs-gutter-y: clamp(18px, 1.6vw, 28px); }
.gx-split { --bs-gutter-x: clamp(40px, 6vw, 140px); } .gy-split { --bs-gutter-y: clamp(40px, 6vw, 140px); }
.gx-ph { --bs-gutter-x: clamp(30px, 5vw, 110px); } .gy-ph { --bs-gutter-y: clamp(30px, 5vw, 110px); }
.gx-head { --bs-gutter-x: clamp(32px, 5vw, 120px); } .gy-head { --bs-gutter-y: clamp(32px, 5vw, 120px); }
.gx-glance { --bs-gutter-x: clamp(24px, 4vw, 90px); } .gy-glance { --bs-gutter-y: clamp(24px, 4vw, 90px); }
.gx-form { --bs-gutter-x: 18px; } .gy-form { --bs-gutter-y: 18px; }
.gx-ft { --bs-gutter-x: clamp(30px, 4vw, 80px); } .gy-ft { --bs-gutter-y: clamp(30px, 4vw, 80px); }

/* Converted CSS grids become Bootstrap rows. */
.row.cards, .row.split, .row.ph-grid, .row.section-head--split, .row.glance-in, .row.form-grid, .row.ft-top {
  display: flex; grid-template-columns: none; gap: 0;
}
/* Generic rules such as p { margin } and h2 { margin } must not cancel the row gutter. */
.row { margin-top: calc(-1 * var(--bs-gutter-y)); margin-left: calc(-0.5 * var(--bs-gutter-x)); margin-right: calc(-0.5 * var(--bs-gutter-x)); }
.row > * { margin-top: var(--bs-gutter-y); }

/* Extra wide screens (1800px and up): one more column, matching the original fluid grids. */
@media (min-width: 1800px) {
  .row-cols-3xl-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-3xl-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-3xl-6 > * { flex: 0 0 auto; width: 16.6667%; }
}

/* ---------- Forms ---------- */
/* .form-control and .form-select are added for Bootstrap familiarity; .input and .select keep the look. */
.form-control:focus, .form-select:focus { color: var(--ink); }
.dark .form-control:focus, .dark .form-select:focus { color: #fff; background-color: rgba(255, 255, 255, 0.06); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- Components ---------- */
.collapsing { transition: height 0.45s var(--ease); }
.modal { --bs-modal-zindex: 1055; }
.modal-open .hdr { padding-right: var(--bs-scrollbar-width, 0); }
body.menu-open .hdr { z-index: 100; }

/* Column ratios that match the original fractional grids exactly.
   A column's content width is (row content width minus the gutter) times the ratio. */
@media (min-width: 1200px) {
  .row.split--wide > .col-xl-7, .row.ph-grid > .col-xl-7 { width: calc((100% - 2 * var(--bs-gutter-x)) * 0.6 + var(--bs-gutter-x)); }
  .row.split--wide > .col-xl-5, .row.ph-grid > .col-xl-5 { width: calc((100% - 2 * var(--bs-gutter-x)) * 0.4 + var(--bs-gutter-x)); }
  .row.section-head--split > .col-xl-7, .row.glance-in > .col-xl-7 { width: calc((100% - 2 * var(--bs-gutter-x)) * 0.575 + var(--bs-gutter-x)); }
  .row.section-head--split > .col-xl-5, .row.glance-in > .col-xl-5 { width: calc((100% - 2 * var(--bs-gutter-x)) * 0.425 + var(--bs-gutter-x)); }
  /* Wide heading variant: room for a longer two line heading, the lead takes the narrower column. */
  .row.section-head--wide > .col-xl-7 { width: calc((100% - 2 * var(--bs-gutter-x)) * 0.66 + var(--bs-gutter-x)); }
  .row.section-head--wide > .col-xl-5 { width: calc((100% - 2 * var(--bs-gutter-x)) * 0.34 + var(--bs-gutter-x)); }
}

/* ---------- Reboot parity ----------
 * Bootstrap's reboot changes a few browser defaults that style.css never set.
 * :where() keeps specificity at zero, so any rule in style.css still wins.
 */
:where(.btn) { line-height: inherit; color: inherit; vertical-align: baseline; user-select: auto; text-align: center; }
:where(.btn):hover, :where(.btn):focus-visible, :where(.btn):active { color: inherit; }
:where(img, svg) { vertical-align: baseline; }
:where(small) { font-size: smaller; }
:where(b, strong) { font-weight: bolder; }
:where(legend) { float: none; width: auto; padding: 0; margin-bottom: 0; font-size: inherit; line-height: inherit; }
:where(ul, ol) { padding-left: 40px; margin-top: 1em; margin-bottom: 1em; }
:where(ul ul, ol ol, ul ol, ol ul) { margin-top: 0; margin-bottom: 0; }
:where(dl) { margin-top: 1em; }
:where(blockquote) { margin: 1em 40px; }
:where(th) { text-align: center; }
:where(table) { border-collapse: separate; }
:where(label) { display: inline; }