/* ============================================================================
   GAMLS Bootstrap 5 override layer — bends BS5's stock chrome into the brand
   palette by remapping Bootstrap's CSS custom properties at :root.

   Documentation: https://members.gamls.com/branding/bs-overrides

   SCOPE
   - --bs-primary tokens fully replaced. Covers .btn-primary, .btn-outline-
     primary, nav-pills, pagination, list-group, dropdown, progress, accordion,
     form-control focus + .form-check-input:checked, and .table-primary.
   - Info family components patched: .alert-info / .btn-info / .btn-outline-info
     redirected to a brand blue-pale chrome.
   - Sitewide <a> link styling (underline offset + gold focus halo).
   - The rest of BS5 stays default. --bs-info-*, --bs-success-*, --bs-danger-*,
     --bs-warning-*, --bs-secondary-* are all untouched, so .text-info, .bg-info,
     .text-bg-info and the equivalents for the other families render BS5-native.

   HOW TO USE
   1. Load AFTER branding.css (provides --gamls-blue) and AFTER bootstrap.min.css
      (so these rules win cascade order).
   2. To change the brand color: edit --gamls-blue in branding.css, then update
      --brand-rgb below to match. CSS can't extract an RGB triple from a hex
      var, so the tuple has to be mirrored by hand.
   3. The accordion expand-icon (section 7) is a data-URI SVG that CSS variables
      can't penetrate. Update the %23xxxxxx hex inline whenever the brand color
      changes (URL-encode: drop the '#', prefix with %23).

   Shade/tint math (used by the --brand-shade-N / --brand-tint-N variables):
     shade by N%  ==  color-mix(in srgb, c (100-N)%, #000)   (darker by N%)
     tint by N%   ==  color-mix(in srgb, c (100-N)%, #fff)   (lighter by N%)
   ============================================================================ */

/* ---- 1. Brand color — sourced from branding.css ------------------------- */
:root {
  --brand:     var(--gamls-blue);   /* defined in branding.css */
  --brand-rgb: 5, 89, 131;          /* MUST mirror --gamls-blue (#055983) — CSS can't extract RGB from a hex var */
}

/* ---- 2. Derived shades/tints (leave alone) ------------------------------ */
:root {
  --brand-shade-10: color-mix(in srgb, var(--brand) 90%, #000);
  --brand-shade-15: color-mix(in srgb, var(--brand) 85%, #000);
  --brand-shade-20: color-mix(in srgb, var(--brand) 80%, #000);
  --brand-shade-25: color-mix(in srgb, var(--brand) 75%, #000);
  --brand-shade-60: color-mix(in srgb, var(--brand) 40%, #000);
  --brand-tint-50:  color-mix(in srgb, var(--brand) 50%, #fff);
  --brand-tint-60:  color-mix(in srgb, var(--brand) 40%, #fff);
  --brand-tint-70:  color-mix(in srgb, var(--brand) 30%, #fff);
  --brand-tint-73:  color-mix(in srgb, var(--brand) 27%, #fff);
  --brand-tint-80:  color-mix(in srgb, var(--brand) 20%, #fff);
}

/* ---- 3. Bootstrap root variables ---------------------------------------- */
/* Covers: .text-primary .bg-primary .border-primary .text-bg-primary,
   .*-primary-subtle / -emphasis utilities, .link-primary, .focus-ring,
   and (via emphasis/subtle) .alert-primary, .list-group-item-primary,
   accordion active text+bg, etc. */
:root {
  --bs-primary:                var(--brand);
  --bs-primary-rgb:            var(--brand-rgb);
  --bs-primary-text-emphasis:  var(--brand-shade-60);
  --bs-primary-bg-subtle:      var(--brand-tint-80);
  --bs-primary-border-subtle:  var(--brand-tint-60);

  /* links (also feeds nav-link, .btn-link, breadcrumb, pagination text) */
  --bs-link-color:             var(--brand);
  --bs-link-color-rgb:         var(--brand-rgb);
  --bs-link-hover-color:       var(--brand-shade-20);
  --bs-link-hover-color-rgb:   var(--brand-rgb);

  /* global :focus-visible / .focus-ring utility */
  --bs-focus-ring-color:       rgba(var(--brand-rgb), .25);
}

/* ---- 4. Buttons (solid) ------------------------------------------------- */
.btn-primary {
  --bs-btn-bg:                  var(--brand);
  --bs-btn-border-color:        var(--brand);
  --bs-btn-hover-bg:            var(--brand-shade-15);
  --bs-btn-hover-border-color:  var(--brand-shade-20);
  --bs-btn-active-bg:           var(--brand-shade-20);
  --bs-btn-active-border-color: var(--brand-shade-25);
  --bs-btn-disabled-bg:         var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb:    var(--brand-rgb);
  /* If your blue is light, white text may fail contrast — then also set:
     --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; */
}

/* ---- 5. Buttons (outline) ---------------------------------------------- */
.btn-outline-primary {
  --bs-btn-color:               var(--brand);
  --bs-btn-border-color:        var(--brand);
  --bs-btn-hover-bg:            var(--brand);
  --bs-btn-hover-border-color:  var(--brand);
  --bs-btn-active-bg:           var(--brand);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-disabled-color:      var(--brand);
  --bs-btn-focus-shadow-rgb:    var(--brand-rgb);
}

/* ---- 6. Nav pills, pagination, list group, dropdown, progress ----------- */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--brand);
}

.pagination {
  --bs-pagination-active-bg:         var(--brand);
  --bs-pagination-active-border-color: var(--brand);
  --bs-pagination-focus-box-shadow:  0 0 0 .25rem rgba(var(--brand-rgb), .25);
  /* link + hover color already flow from --bs-link-* above */
}

.list-group {
  --bs-list-group-active-bg:          var(--brand);
  --bs-list-group-active-border-color: var(--brand);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--brand);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--brand);
}

/* ---- 7. Accordion ------------------------------------------------------- */
/* active text + bg already follow --bs-primary-*-emphasis/subtle.
   These two cannot: focus shadow (hardcoded) and the chevron SVG (data URI). */
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
  /* >>> chevron hex matches --brand (#055983 URL-encoded) <<< */
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23055983'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ---- 8. Form controls (focus + checked are hardcoded, not variables) ---- */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-tint-50);
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}

.form-check-input:checked {
  background-color: var(--brand);   /* also colors the switch track */
  border-color: var(--brand);
}
.form-check-input:focus {
  border-color: var(--brand-tint-50);
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}

.form-range::-webkit-slider-thumb        { background-color: var(--brand); }
.form-range::-webkit-slider-thumb:active { background-color: var(--brand-tint-70); }
.form-range::-moz-range-thumb            { background-color: var(--brand); }
.form-range::-moz-range-thumb:active     { background-color: var(--brand-tint-70); }

/* ---- 9. Contextual table rows (.table-primary) -------------------------- */
.table-primary {
  --bs-table-bg:           var(--brand-tint-80);
  --bs-table-border-color: var(--brand-tint-73);
  --bs-table-color:        #000;
}

/* ---- 10. BS5 info family overrides (cyan -> brand blue-pale) ----------- */
/* .alert-info / .btn-info / .btn-outline-info get brand blue-pale chrome
   directly, not via --bs-info-*. Rest states sit on --gamls-blue-pale with
   --bs-primary-border-subtle borders, so info shares chrome edges with the
   primary family. Filled .btn-info hover darkens to --gamls-blue-light per
   the .btn-gamls-blue-pale precedent (pale rest -> blue-light hover);
   outline .btn-outline-info hover fills with --gamls-blue-pale and keeps
   text at --gamls-blue-dark. --bs-info-* itself stays at BS5 default so
   .text-info / .bg-info / .text-bg-info / etc. elsewhere remain cyan. */
.alert-info {
  --bs-alert-bg:           var(--gamls-blue-pale);
  --bs-alert-color:        var(--gamls-on-blue-pale);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color:   var(--gamls-blue-dark);
}

.btn-info {
  --bs-btn-bg:                    var(--gamls-blue-pale);
  --bs-btn-color:                 var(--gamls-on-blue-pale);
  --bs-btn-border-color:          var(--bs-primary-border-subtle);
  --bs-btn-hover-bg:              var(--gamls-blue-light);
  --bs-btn-hover-color:           var(--gamls-on-blue-light);
  --bs-btn-hover-border-color:    var(--gamls-blue-light);
  --bs-btn-active-bg:             var(--gamls-blue-light);
  --bs-btn-active-color:          var(--gamls-on-blue-light);
  --bs-btn-active-border-color:   var(--gamls-blue-light);
  --bs-btn-disabled-bg:           var(--gamls-blue-pale);
  --bs-btn-disabled-color:        var(--gamls-on-blue-pale);
  --bs-btn-disabled-border-color: var(--bs-primary-border-subtle);
  --bs-btn-focus-shadow-rgb:      var(--brand-rgb);
}

.btn-outline-info {
  --bs-btn-color:                 var(--gamls-blue-dark);
  --bs-btn-border-color:          var(--bs-primary-border-subtle);
  --bs-btn-hover-bg:              var(--gamls-blue-pale);
  --bs-btn-hover-color:           var(--gamls-blue-dark);
  --bs-btn-hover-border-color:    var(--bs-primary-border-subtle);
  --bs-btn-active-bg:             var(--gamls-blue-pale);
  --bs-btn-active-color:          var(--gamls-blue-dark);
  --bs-btn-active-border-color:   var(--bs-primary-border-subtle);
  --bs-btn-disabled-color:        var(--gamls-blue-dark);
  --bs-btn-focus-shadow-rgb:      var(--brand-rgb);
}

/* ---- 11. Global element overrides --------------------------------------- */
/* Sitewide link styling. Underline offset 0.3em clears Open Sans's deep
   descenders (g/j/p/q/y dip ~0.24-0.29em below baseline); skip-ink fills
   the remaining gaps. Focus halo uses brand gold (--gamls-gold at 25%)
   so it reads as a brand cue rather than the browser/BS5 default ring. */
a {
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(192, 159, 99, 0.25);
}

/* ============================================================================
   DARK MODE NOTE
   If you use [data-bs-theme="dark"], Bootstrap recomputes the emphasis/subtle
   primary vars for dark backgrounds. Re-declare them there if you support it:

   [data-bs-theme="dark"] {
     --bs-primary-text-emphasis: color-mix(in srgb, var(--brand) 60%, #fff);
     --bs-primary-bg-subtle:     color-mix(in srgb, var(--brand) 20%, #000);
     --bs-primary-border-subtle: color-mix(in srgb, var(--brand) 40%, #000);
     --bs-link-color:            color-mix(in srgb, var(--brand) 60%, #fff);
     --bs-link-hover-color:      color-mix(in srgb, var(--brand) 70%, #fff);
   }
   ============================================================================ */