/* ==========================================================================
   Bootstrap 5 brand theme - remaps Bootstrap's --bs-* custom properties onto
   MAG Finserv's existing design tokens (assets/css/style.css :root block).
   Load order: bootstrap.min.css -> bootstrap-brand.css -> style.css

   NOTE: Bootstrap 5.3 redeclares many component variables locally on the
   component's own class (e.g. .navbar{--bs-navbar-color:...}), not only at
   :root. A :root-only override loses to that direct match regardless of
   source order, because "declared directly on the element" always beats
   "inherited from :root". So each block below targets the same selector
   Bootstrap uses for that variable -- verified against the vendored
   bootstrap.min.css, not assumed. Only variables Bootstrap keeps solely at
   :root (colors, radius scale, shadows, fonts) are set in the :root block.
   ========================================================================== */

:root {
  /* Core identity */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink-800);
  --bs-body-bg: var(--white);
  --bs-headings-font-family: var(--font-display);
  --bs-link-color: var(--blue-600);
  --bs-link-color-rgb: 61, 76, 143;
  --bs-link-hover-color: var(--blue-500);
  --bs-link-hover-color-rgb: 39, 170, 225;

  /* Brand color */
  --bs-primary: var(--blue-500);
  --bs-primary-rgb: 39, 170, 225;
  --bs-dark: var(--night-800);
  --bs-dark-rgb: 80, 77, 80;
  --bs-light: var(--ivory-050);
  --bs-light-rgb: 250, 247, 241;
  --bs-secondary: var(--ink-400);
  --bs-secondary-rgb: 117, 113, 117;
  --bs-border-color: var(--line);
  --bs-focus-ring-color: rgba(39, 170, 225, .18);

  /* Radius scale */
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-xxl: var(--radius-lg);

  /* Shadows */
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-lg);

  /* Breadcrumb divider and form-range thumb are :root-only in Bootstrap */
  --bs-breadcrumb-divider: '\203A';
  --bs-form-range-thumb-bg: var(--blue-500);
}

/* ---------- Navbar (.navbar redeclares its own color vars locally) ---------- */
.navbar {
  --bs-navbar-color: var(--ink-800);
  --bs-navbar-hover-color: var(--blue-600);
  --bs-navbar-active-color: var(--blue-600);
  --bs-navbar-brand-color: var(--ink-800);
  --bs-navbar-brand-hover-color: var(--ink-800);
  --bs-navbar-toggler-border-color: transparent;
  --bs-navbar-toggler-focus-width: 0;
}

/* ---------- Dropdown (.dropdown-menu redeclares locally) ----------
   Bootstrap defines --bs-dropdown-box-shadow as a hook but never actually
   applies it as a box-shadow property -- that's left to a .shadow utility
   class or, here, an explicit declaration consuming our own token. */
.dropdown-menu {
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  --bs-dropdown-link-hover-bg: var(--ivory-050);
  --bs-dropdown-link-hover-color: var(--blue-600);
  --bs-dropdown-link-active-bg: var(--ivory-050);
  --bs-dropdown-link-active-color: var(--blue-600);
}

/* ---------- Modal (.modal redeclares border-radius locally; same
   unconsumed-shadow-hook situation as the dropdown above) ---------- */
.modal { --bs-modal-border-radius: var(--radius-lg); }
.modal-content { box-shadow: var(--shadow-lg); }
.modal-backdrop {
  --bs-backdrop-bg: var(--night-900);
  --bs-backdrop-opacity: .7;
}

/* ---------- Offcanvas (mobile menu; .offcanvas redeclares locally;
   same unconsumed-shadow-hook situation) ---------- */
.offcanvas {
  --bs-offcanvas-width: min(85vw, 340px);
  --bs-offcanvas-border-color: var(--line);
}
/* Only shadow it below the navbar-expand-xl breakpoint (1200px), where the
   offcanvas is a genuine slide-in panel. At >=1200px Bootstrap renders the
   same element inline, transparent, as part of the nav row -- an unscoped
   shadow there paints a floating drop-shadow silhouette behind the links. */
@media (max-width: 1199.98px) {
  .offcanvas { box-shadow: var(--shadow-lg); }
}

/* ---------- Accordion (FAQ; .accordion redeclares locally) ---------- */
.accordion {
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: var(--radius-md);
  --bs-accordion-btn-color: var(--night-800);
  --bs-accordion-active-color: var(--night-800);
  --bs-accordion-active-bg: var(--white);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(39, 170, 225, .18);
}

/* --bs-btn-bg can't hold a gradient, so the primary CTA needs one real rule. */
.btn-primary {
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-color: var(--night-900);
  --bs-btn-hover-color: var(--night-900);
  --bs-btn-active-color: var(--night-900);
  --bs-btn-border-radius: var(--radius-pill);
  background-image: var(--gradient-blue);
  box-shadow: var(--shadow-md);
  border: 0;
}
.btn-primary:hover,
.btn-primary:focus {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: var(--space-3);
  --bs-btn-padding-x: var(--space-5);
  min-height: 48px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-sm { min-height: 40px; }
.btn-outline-dark {
  --bs-btn-border-color: rgba(80, 77, 80, .2);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--blue-500);
  --bs-btn-hover-color: var(--blue-600);
  --bs-btn-color: var(--night-800);
}
.btn-dark { --bs-btn-hover-bg: var(--night-700); }

/* Bootstrap's stock .lead isn't variable-driven (hardcoded 1.25rem/300). */
.lead { font-size: 1.12rem; font-weight: 400; color: var(--ink-600); }