/* Fixed bridge from the editable site theme to compiled Bootstrap 5. */
:root {
    --bs-primary: var(--site-color-primary);
    --bs-secondary: var(--site-color-secondary);
    --bs-body-color: var(--site-color-text);
    --bs-body-color-rgb: 52, 64, 84;
    --bs-body-bg: var(--site-color-background);
    --bs-secondary-color: var(--site-color-text-muted);
    --bs-border-color: var(--site-color-border);
    --bs-link-color: var(--site-color-link);
    --bs-link-hover-color: var(--site-color-link-hover);
    --bs-font-sans-serif: var(--site-font-body);
    --bs-font-monospace: var(--site-font-monospace);
    --bs-focus-ring-color: color-mix(in srgb, var(--site-color-secondary) 25%, transparent);
}

/* Bootstrap 5 colors anchors from --bs-link-color-rgb, which cannot use our hex theme token. */
a { color: var(--site-color-link); }
a:hover { color: var(--site-color-link-hover); }

.bg-primary, .text-bg-primary { background-color: var(--site-color-primary) !important; }
.text-primary { color: var(--site-color-primary) !important; }
.bg-secondary, .text-bg-secondary { background-color: var(--site-color-secondary) !important; }
.text-secondary { color: var(--site-color-secondary) !important; }

.btn-primary {
    --bs-btn-color: var(--site-color-primary-button-text, var(--site-color-primary-contrast));
    --bs-btn-bg: var(--site-color-primary);
    --bs-btn-border-color: var(--site-color-primary);
    --bs-btn-hover-color: var(--site-color-primary-button-text, var(--site-color-primary-contrast));
    --bs-btn-hover-bg: var(--site-color-primary-hover);
    --bs-btn-hover-border-color: var(--site-color-primary-hover);
    --bs-btn-active-color: var(--site-color-primary-button-text, var(--site-color-primary-contrast));
    --bs-btn-active-bg: var(--site-color-primary-hover);
    --bs-btn-active-border-color: var(--site-color-primary-hover);
    --bs-btn-disabled-color: var(--site-color-primary-button-text, var(--site-color-primary-contrast));
    --bs-btn-disabled-bg: var(--site-color-primary);
    --bs-btn-disabled-border-color: var(--site-color-primary);
}

.btn-danger {
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--site-color-danger);
    --bs-btn-disabled-border-color: var(--site-color-danger);
}

.btn-primary:focus-visible, .btn-outline-primary:focus-visible, .btn-outline-secondary:focus-visible {
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--site-color-secondary) 25%, transparent);
}

/* Hover and active FILL this button with the primary colour, which makes those two states the
   same thing .btn-primary is - so they read the same token chain it reads. Resting stays on
   --site-color-primary, because resting is primary-coloured text on the page background, not on
   a fill, and the button-text override has nothing to say about that.

   The two states were on --site-color-primary-contrast alone. On a theme whose brand puts white
   on filled controls, that put dark text on the orange fill while the filled button beside it
   was white - which is what the October review caught: "Learn more" and "Purchase" side by side
   in a hero, identical orange, different text colours.

   Note the legacy .btn.btn-primary.btn-outline-primary rule below already reads the full chain.
   So the combined classes behaved correctly and the plain class did not, in the same file. */
.btn-outline-primary {
    --bs-btn-color: var(--site-color-primary);
    --bs-btn-border-color: var(--site-color-primary);
    --bs-btn-hover-color: var(--site-color-primary-button-text, var(--site-color-primary-contrast));
    --bs-btn-hover-bg: var(--site-color-primary);
    --bs-btn-hover-border-color: var(--site-color-primary);
    --bs-btn-active-color: var(--site-color-primary-button-text, var(--site-color-primary-contrast));
    --bs-btn-active-bg: var(--site-color-primary-hover);
    --bs-btn-active-border-color: var(--site-color-primary-hover);
}

/* Legacy content sometimes combines the filled and outline classes. Keep the outline appearance. */
.btn.btn-primary.btn-outline-primary {
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--site-color-primary-button-text, var(--site-color-primary-contrast));
    --bs-btn-active-color: var(--site-color-primary-button-text, var(--site-color-primary-contrast));
    --bs-btn-disabled-bg: transparent;
}

/* "White" is one of the three button styles an author can pick for a content bar
   (TwoByBarPresentation.ButtonStyles), and Bootstrap has no .btn-white of its own. It lived in
   two-by-bar.css scoped to .cms-two-by-bar until the October review found the hole that scoping
   left: the bar editor's "Add left button" control renders itself in the style the author picked,
   as a live preview, and it sits in the editor shell with no .cms-two-by-bar ancestor - so a
   button set to White drew its opener as a bare .btn, no border, no ground, looking unstyled
   beside a filled "Edit right button". Unscoped here, the public bar and the editor agree, and an
   author writing class="btn btn-white" in a Custom HTML bar gets it too.

   The hover and active states USED to repeat the resting ones exactly, so the only thing that
   changed under the pointer was the cursor - the review's "this button style doesn't have a
   :hover effect that works". They now fill with --site-color-primary-hover and put the text on
   the same chain .btn-primary reads above, so the white button and the orange one beside it
   behave identically and a theme that puts white on filled controls gets white on both. */
.btn-white {
    --bs-btn-color: var(--site-color-primary);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--site-color-primary);
    --bs-btn-hover-color: var(--site-color-primary-button-text, var(--site-color-primary-contrast));
    --bs-btn-hover-bg: var(--site-color-primary-hover);
    --bs-btn-hover-border-color: var(--site-color-primary-hover);
    --bs-btn-active-color: var(--site-color-primary-button-text, var(--site-color-primary-contrast));
    --bs-btn-active-bg: var(--site-color-primary-hover);
    --bs-btn-active-border-color: var(--site-color-primary-hover);
}

.btn-outline-secondary {
    --bs-btn-color: var(--site-color-secondary);
    --bs-btn-border-color: var(--site-color-secondary);
    --bs-btn-hover-color: var(--site-color-secondary-contrast);
    --bs-btn-hover-bg: var(--site-color-secondary);
    --bs-btn-hover-border-color: var(--site-color-secondary);
    --bs-btn-active-color: var(--site-color-secondary-contrast);
    --bs-btn-active-bg: var(--site-color-secondary-hover);
    --bs-btn-active-border-color: var(--site-color-secondary-hover);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--site-color-primary);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--site-color-primary) 25%, transparent);
}

/* Bootstrap caps .container at 1140px (xl) and 1320px (xxl), on its own breakpoints and with no
   reference to --site-content-width - so every partial built on .container ignores the site's own
   width. Eight public partials do: Hero, Card block, Section header, Video, Filters, Accordion,
   Image gallery. Pinned to the token here rather than by rewriting those views, because this also
   catches .container written by an author inside a Custom HTML bar.

   Padding as well as max-width, and the max-width carries the gutter. .site-container is
   min(100% - 2g, T) with no padding, so its content starts at (viewport - width) / 2. .container
   is centred with padding p inside, so its content starts at that plus p. The two line up only
   when p = g AND the cap is T + 2g - which is what is set below. With max-width alone, a window
   between 1200 and 1400 put .container's 12px padding against .site-container's 32px gutter and
   every object built on .container sat ~40px wider than the header and footer around it.

   Raising the padding is safe for .row: its negative margins are half of --bs-gutter-x, 12px, so
   a 32px gutter still contains them. Columns keep their own padding, so column content lands on
   the same measure.

   This works because bootstrap-theme.css is included after bootstrap.css in the ~/Content/css
   bundle - the selectors match Bootstrap's exactly, so it is source order that decides. */
/* Applied at every width, not only from 1200px up. Bootstrap's own stepped caps - 540, 720, 960,
   1140 - each sit in their own media query but at this same specificity, so source order still
   decides and this rule wins at all widths. Below the cap the container resolves to 100% less its
   gutters, which is exactly what .site-container resolves to, so the two agree everywhere.

   Gating it at 1200px was the defect: above that line every .container-based object agreed with
   the header, and below it they fell back to Bootstrap's stepped widths and 12px padding. On a
   1100px laptop that put .container's content at 82px from the left while .site-container started
   at 32px - a 50px disagreement, on the one edge the reference most wants aligned. The seven
   TwoByBar layouts, Hero, Card block, Section header, Video, Filters, Accordion and Image gallery
   all inherit the fix, as does a .container an author writes inside a Custom HTML bar.

   .container-fluid is deliberately left alone: it is how a section asks to run full width. */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: calc(var(--site-content-width) + var(--site-page-gutter) * 2);
    padding-right: var(--site-page-gutter);
    padding-left: var(--site-page-gutter);
}

/* Bootstrap's EXPANDED accordion header is blue: --bs-accordion-active-bg is --bs-primary-bg-subtle
   (#cfe2ff) and --bs-accordion-active-color is --bs-primary-text-emphasis (#052c65). The :root
   bridge at the top of this file remaps --bs-primary, but those two read Bootstrap's subtle and
   emphasis SCALES, which are separate hardcoded hexes and are not derived from --bs-primary - so
   remapping the brand colour never reached them. The focus ring and the expanded chevron are the
   same leak by two more routes: the ring is a literal rgba(13, 110, 253, .25), and the expanded
   icon is an SVG with #052c65 baked into its stroke attribute.

   Expanded now looks exactly like collapsed - no tint, body-coloured text, the same dark chevron,
   still rotated - and primary is spent on hover alone, where it reads as the affordance rather than
   as a state the reader has to decode. The chevron is a background-image, so its stroke cannot
   follow currentColor; pinning the active icon to the resting one is what stops the expanded header
   turning blue on its own.

   :focus-visible rides with :hover so the keyboard gets the same cue the mouse does. The ring token
   covers plain :focus, which Bootstrap sets on .accordion-button.

   Deliberately unscoped: .accordion-button is plain Bootstrap, so this one block covers the
   Accordion CMS object, its editor preview, the audit snapshot, and an accordion an author writes
   by hand inside a Custom HTML bar - the same reason the .container rule above is unscoped. */
.accordion {
    --bs-accordion-active-color: var(--site-color-text);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
    --bs-accordion-btn-focus-box-shadow: var(--site-focus-ring);
}

/* Same specificity as .accordion-button:not(.collapsed), so source order decides and hover wins in
   both states. bootstrap-theme.css is included after bootstrap.css in the ~/Content/css bundle. */
.accordion-button:hover,
.accordion-button:focus-visible {
    color: var(--site-color-primary);
}