/**
 * Design-system alignment of site primitives, by family (design-system adoption). Families so far: button, text
 * fields (.form-control, .form-select, the search inputs), selection controls (.form-check-input: checkbox, radio,
 * switch), pagination, and the other focusable controls the theme or Bootstrap strips the outline from (tabs,
 * accordion, close button, user menu items, search icon, share buttons, remove-file button, plan switcher, image links).
 *
 * Baseline = the live site. This file must not change size, spacing, border, radius, font or colour of any
 * state; it only adds what the theme lacks. Today that is a visible KEYBOARD FOCUS indicator: the theme removes
 * Bootstrap's focus shadow (.btn and .page-link: box-shadow: none !important) and Bootstrap sets outline 0, so Tab
 * shows nothing on buttons, checkboxes, radios, switches and page links; a text input or select only turns its
 * border green (2.35:1 against its resting border).
 *
 * Rules for this file: no !important, no colour literal, selector specificity not higher than the theme's own
 * (.btn.btn-x level = 0,3,0), at most one ancestor selector. Uses outline (not box-shadow, which the theme
 * cancels). Bootstrap sets `outline: 0` on the same selectors at the same specificity earlier in the page, so
 * source order decides: this file is linked after bootstrap.css and app.css (see includes/styles.blade.php).
 * The admin "Custom CSS" loads after this file and can still override it on purpose.
 */

.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.accordion-button:focus-visible,
.btn-close:focus-visible,
.drop-down-item:focus-visible,
.form-search button:focus-visible,
.search-input input:focus-visible,
.social-btn:focus-visible,
.uploaded-file-remove:focus-visible,
.plan-switcher-item:focus-visible,
.item-slide-img:focus-visible {
    outline: var(--vs-focus-ring-width) solid var(--vs-focus-ring-color);
    outline-offset: var(--vs-focus-ring-offset);
}

/*
 * Dark surfaces: the dark ring would disappear, so use the design system's on-dark (white) ring there.
 * These are the areas painted with admin colours that default to dark: the top navigation bar
 * (--navbar1_background_color; the second bar, .nav-bar-bg, is light), the footer and the item preview bar.
 * Assumption: if the admin makes one of these backgrounds light, remove it from this list.
 * The hero (.header-image) has a 40% black overlay over a photo, so it also gets the white ring.
 */
.nav-bar:not(.nav-bar-bg),
.footer,
.preview-nav,
.header-image {
    --vs-focus-ring-color: var(--vs-focus-ring-color-on-dark);
}

/* White panels inside a dark bar (the user/menu dropdown): back to the dark ring. */
.drop-down-menu {
    --vs-focus-ring-color: var(--vs-color-brand-secondary);
}

/*
 * NOT covered, on purpose (each needs something this file must not do):
 *  - .bootstrap-select .btn: the theme sets `outline: 0 !important` (app.css), so only !important or a vendor edit
 *    can beat it (11 workspace pages use the select picker).
 *  - .announcement-close and .nav-bar-menu-close: sit on admin-chosen / mobile-menu backgrounds of unknown
 *    brightness; the first mobile-menu close control is even written as <butaton> in navbar.blade.php (not focusable).
 *  - .drop-down-btn (the menu opener): it is a <div>, not focusable; a vendor markup/JS gap, not a style gap.
 */