/* Copyright (c) 2026 Silk Road Merchants LLC. All Rights Reserved
 * Filename: base.css
 * Author: Michael Taciroglu
 * Date Created: October 21, 2026
 * Description: What every page shares for accessibility: a focus ring that shows, readable text colours, form text phones do not zoom into, busy buttons, text size, dark mode.
 *
 * Loaded right after Bootstrap by the app's layout, its standalone pages (sign-in, two-step,
 * terms, the popups, the message pages) and the public inquiry, schedule and unsubscribe pages.
 */

/* A 2px ring clear of the control, 3:1 or more against white and the light page backgrounds.
   Bootstrap marks focus with a pale glow of about 1.4:1, which this replaces. A page may colour
   it through --focus-ring; the inquiry form uses a shade of the school's accent. */
:focus-visible,
.btn:focus-visible,
.btn-close:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--focus-ring, #0a58ca);
    outline-offset: 2px;
}
.btn:focus-visible,
.btn-close:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible { box-shadow: none; }

/* Text colours (WCAG 1.4.3, 4.5:1). Bootstrap's blue, green, red, pink (code) and grey are about
   4.5:1 on white and 4.2-4.3:1 on the staff pages' grey (#f4f6f9), and its yellow and cyan outline
   buttons 1.6:1 and 2.0:1 anywhere. They take the next darker shades of Bootstrap's own palette
   (600 for blue, green, red and pink, 800 for yellow and cyan), 4.8:1 or more on every light
   background they sit on, the pale "subtle" badge colours included. Dark mode, below, has its own. */
:root,
[data-bs-theme="light"] {
    --bs-link-color: #0a58ca;
    --bs-link-color-rgb: 10, 88, 202;
    --bs-link-hover-color: #084298;
    --bs-link-hover-color-rgb: 8, 66, 152;
    --bs-primary: #0a58ca;
    --bs-primary-rgb: 10, 88, 202;
    --bs-secondary: #5c636a;
    --bs-secondary-rgb: 92, 99, 106;
    --bs-success: #146c43;
    --bs-success-rgb: 20, 108, 67;
    --bs-danger: #b02a37;
    --bs-danger-rgb: 176, 42, 55;
    --bs-code-color: #ab296a;
}
.btn-outline-primary { --bs-btn-color: #0a58ca; --bs-btn-border-color: #0a58ca; }
.btn-outline-secondary { --bs-btn-color: #5c636a; --bs-btn-border-color: #5c636a; }
.btn-outline-success { --bs-btn-color: #146c43; --bs-btn-border-color: #146c43; }
.btn-outline-danger { --bs-btn-color: #b02a37; --bs-btn-border-color: #b02a37; }
.btn-outline-warning { --bs-btn-color: #664d03; --bs-btn-border-color: #664d03; }
.btn-outline-info { --bs-btn-color: #055160; --bs-btn-border-color: #055160; }

/* Dark mode (Your settings > Appearance: data-bs-theme="dark" on <html>, lib/Appearance.php).
   Bootstrap's dark palette keeps its coloured text and outline buttons at their light-mode colours,
   2.6-3.6:1 on its dark backgrounds, so they take its lighter "emphasis" shades, above 6:1; so does
   the focus ring. Links and code are set again, since :root above sets them for every theme. */
[data-bs-theme="dark"] {
    --focus-ring: #6ea8fe;
    --bs-link-color: #6ea8fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color: #9ec5fe;
    --bs-link-hover-color-rgb: 158, 197, 254;
    --bs-code-color: #e685b5;
}
[data-bs-theme="dark"] .text-primary { color: var(--bs-primary-text-emphasis) !important; }
[data-bs-theme="dark"] .text-secondary { color: var(--bs-secondary-color) !important; }
[data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; }
[data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); --bs-btn-border-color: var(--bs-primary-text-emphasis); }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-color); --bs-btn-border-color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: var(--bs-success-text-emphasis); --bs-btn-border-color: var(--bs-success-text-emphasis); }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); --bs-btn-border-color: var(--bs-danger-text-emphasis); }
[data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: var(--bs-warning-text-emphasis); --bs-btn-border-color: var(--bs-warning-text-emphasis); }
[data-bs-theme="dark"] .btn-outline-info { --bs-btn-color: var(--bs-info-text-emphasis); --bs-btn-border-color: var(--bs-info-text-emphasis); }
/* .table-light stays light in Bootstrap's dark mode; a light header row in a dark table glares. */
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-secondary-bg);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    --bs-table-hover-color: var(--bs-body-color);
}

/* Card headers are headings (<h2 class="card-header">, or a heading inside the header) so screen
   readers can list and jump to them; they keep the size, weight and line height of a plain one. */
.card-header:is(h2, h3),
.card-header :is(h2, h3) { font-size: 1rem; font-weight: inherit; line-height: inherit; }
.card-header :is(h2, h3) { margin-bottom: 0; }

/* Phones: iOS zooms the whole page into a field whose text is under 16px when it takes focus. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select { font-size: 1rem; }
}

/* A working button keeps its focus, so it is dimmed rather than disabled (window.crmBusy in
   src/JS/ui_actions.js, src/JS/public_form.js). */
.btn.is-busy { opacity: .65; cursor: progress; }

/* The signed-in user's text size (Appearance in lib/Appearance.php sets data-text-size on <html>).
   Nearly everything is sized in rem, so it all follows the root. */
html[data-text-size="112"] { font-size: 112.5%; }
html[data-text-size="125"] { font-size: 125%; }
html[data-text-size="150"] { font-size: 150%; }