/*
 * Rizes colour theme.
 *
 * To change the site's colours, edit ONLY section 1 below, save, and reload the
 * page. Each colour needs:
 *   - the colour itself (a hex value such as #0d6efd);
 *   - the same colour as red, green, blue numbers (used for see-through shades);
 *   - a darker shade (buttons when hovered or pressed, the navigation bar's
 *     background, and text in soft-coloured boxes);
 *   - a light shade (soft backgrounds, such as alert boxes);
 *   - the text colour that reads well on top of the colour and its darker shade
 *     (usually white or black).
 * A "hex to RGB" converter gives the numbers. Keep enough contrast between each
 * colour and its text colour: at least 4.5:1 (WebAIM's contrast checker shows it).
 *
 * Section 2 passes these colours to the parts of Bootstrap that don't follow its
 * main colour settings by themselves. It shouldn't need editing.
 *
 * Known exceptions that keep Bootstrap's blue, because Bootstrap draws them as
 * fixed images: the open/close arrow of accordions, and the focus glow of on/off
 * switches. Adjust them here if they are ever used.
 */

/* --- 1. Edit these --------------------------------------------------------- */

:root {
  /* Primary: main buttons, links, the navigation bar (in its darker shade).
     Bootstrap's blue. */
  --rizes-primary: #0d6efd;
  --rizes-primary-rgb: 13, 110, 253;
  --rizes-primary-dark: #0a58ca;
  --rizes-primary-light: #cfe2ff;
  --rizes-on-primary: #ffffff;

  /* Secondary: less important buttons. Bootstrap's grey. */
  --rizes-secondary: #6c757d;
  --rizes-secondary-rgb: 108, 117, 125;
  --rizes-secondary-dark: #565e64;
  --rizes-secondary-light: #e2e3e5;
  --rizes-on-secondary: #ffffff;
}

/* --- 2. Applying the colours to Bootstrap (no need to edit) ----------------- */

:root,
[data-bs-theme="light"] {
  --bs-primary: var(--rizes-primary);
  --bs-primary-rgb: var(--rizes-primary-rgb);
  --bs-primary-bg-subtle: var(--rizes-primary-light);
  --bs-primary-border-subtle: rgba(var(--rizes-primary-rgb), 0.4);
  --bs-primary-text-emphasis: var(--rizes-primary-dark);
  --bs-secondary: var(--rizes-secondary);
  --bs-secondary-rgb: var(--rizes-secondary-rgb);
  --bs-secondary-bg-subtle: var(--rizes-secondary-light);
  --bs-secondary-border-subtle: rgba(var(--rizes-secondary-rgb), 0.4);
  --bs-secondary-text-emphasis: var(--rizes-secondary-dark);
  --bs-link-color: var(--rizes-primary);
  --bs-link-color-rgb: var(--rizes-primary-rgb);
  --bs-link-hover-color: var(--rizes-primary-dark);
  --bs-focus-ring-color: rgba(var(--rizes-primary-rgb), 0.35);
}

.btn-primary {
  --bs-btn-color: var(--rizes-on-primary);
  --bs-btn-bg: var(--rizes-primary);
  --bs-btn-border-color: var(--rizes-primary);
  --bs-btn-hover-color: var(--rizes-on-primary);
  --bs-btn-hover-bg: var(--rizes-primary-dark);
  --bs-btn-hover-border-color: var(--rizes-primary-dark);
  --bs-btn-active-color: var(--rizes-on-primary);
  --bs-btn-active-bg: var(--rizes-primary-dark);
  --bs-btn-active-border-color: var(--rizes-primary-dark);
  --bs-btn-disabled-color: var(--rizes-on-primary);
  --bs-btn-disabled-bg: var(--rizes-primary);
  --bs-btn-disabled-border-color: var(--rizes-primary);
  --bs-btn-focus-shadow-rgb: var(--rizes-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--rizes-primary);
  --bs-btn-border-color: var(--rizes-primary);
  --bs-btn-hover-color: var(--rizes-on-primary);
  --bs-btn-hover-bg: var(--rizes-primary);
  --bs-btn-hover-border-color: var(--rizes-primary);
  --bs-btn-active-color: var(--rizes-on-primary);
  --bs-btn-active-bg: var(--rizes-primary-dark);
  --bs-btn-active-border-color: var(--rizes-primary-dark);
  --bs-btn-disabled-color: var(--rizes-primary);
  --bs-btn-disabled-border-color: var(--rizes-primary);
  --bs-btn-focus-shadow-rgb: var(--rizes-primary-rgb);
}

.btn-secondary {
  --bs-btn-color: var(--rizes-on-secondary);
  --bs-btn-bg: var(--rizes-secondary);
  --bs-btn-border-color: var(--rizes-secondary);
  --bs-btn-hover-color: var(--rizes-on-secondary);
  --bs-btn-hover-bg: var(--rizes-secondary-dark);
  --bs-btn-hover-border-color: var(--rizes-secondary-dark);
  --bs-btn-active-color: var(--rizes-on-secondary);
  --bs-btn-active-bg: var(--rizes-secondary-dark);
  --bs-btn-active-border-color: var(--rizes-secondary-dark);
  --bs-btn-disabled-color: var(--rizes-on-secondary);
  --bs-btn-disabled-bg: var(--rizes-secondary);
  --bs-btn-disabled-border-color: var(--rizes-secondary);
  --bs-btn-focus-shadow-rgb: var(--rizes-secondary-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--rizes-secondary);
  --bs-btn-border-color: var(--rizes-secondary);
  --bs-btn-hover-color: var(--rizes-on-secondary);
  --bs-btn-hover-bg: var(--rizes-secondary);
  --bs-btn-hover-border-color: var(--rizes-secondary);
  --bs-btn-active-color: var(--rizes-on-secondary);
  --bs-btn-active-bg: var(--rizes-secondary-dark);
  --bs-btn-active-border-color: var(--rizes-secondary-dark);
  --bs-btn-disabled-color: var(--rizes-secondary);
  --bs-btn-disabled-border-color: var(--rizes-secondary);
  --bs-btn-focus-shadow-rgb: var(--rizes-secondary-rgb);
}

/* Form fields: focus outline and ticked checkboxes. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: rgba(var(--rizes-primary-rgb), 0.6);
  box-shadow: 0 0 0 0.25rem rgba(var(--rizes-primary-rgb), 0.25);
}

.form-check-input:checked {
  background-color: var(--rizes-primary);
  border-color: var(--rizes-primary);
}

/* Highlighted items in menus, tabs, lists, page numbers and progress bars. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--rizes-primary);
  --bs-nav-pills-link-active-color: var(--rizes-on-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--rizes-primary);
  --bs-dropdown-link-active-color: var(--rizes-on-primary);
}

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

.pagination {
  --bs-pagination-active-bg: var(--rizes-primary);
  --bs-pagination-active-border-color: var(--rizes-primary);
  --bs-pagination-active-color: var(--rizes-on-primary);
}

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

/* Focus glows and smaller parts that Bootstrap colours on its own. */
.btn-link {
  --bs-btn-focus-shadow-rgb: var(--rizes-primary-rgb);
}

.link-primary:hover,
.link-primary:focus {
  color: var(--rizes-primary-dark) !important;
  text-decoration-color: var(--rizes-primary-dark) !important;
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(var(--rizes-primary-rgb), 0.25);
}

.pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--rizes-primary-rgb), 0.25);
}

.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--rizes-primary-rgb), 0.25);
}

.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--rizes-primary);
  border-color: var(--rizes-primary);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(var(--rizes-primary-rgb), 0.25);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(var(--rizes-primary-rgb), 0.25);
}

/* Separate rules: a browser ignores a whole rule if one part is unknown to it. */
.form-range::-webkit-slider-thumb {
  background-color: var(--rizes-primary);
}

.form-range::-moz-range-thumb {
  background-color: var(--rizes-primary);
}

.form-range::-webkit-slider-thumb:active {
  background-color: var(--rizes-primary-light);
}

.form-range::-moz-range-thumb:active {
  background-color: var(--rizes-primary-light);
}

/*
 * The navigation bar: the darker shade as background (more contrast than the
 * main colour), and everything on it in the "text on primary" colour.
 */
.rizes-navbar {
  background-color: var(--rizes-primary-dark);
  --bs-navbar-color: var(--rizes-on-primary);
  --bs-navbar-hover-color: var(--rizes-on-primary);
  --bs-navbar-active-color: var(--rizes-on-primary);
  --bs-navbar-brand-color: var(--rizes-on-primary);
  --bs-navbar-brand-hover-color: var(--rizes-on-primary);
  --bs-navbar-toggler-border-color: var(--rizes-on-primary);
  --bs-navbar-disabled-color: color-mix(in srgb, var(--rizes-on-primary) 60%, transparent);
}

/* The current page is underlined, so it isn't marked by colour alone. */
.rizes-navbar .nav-link.active,
.rizes-navbar .nav-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* The menu button's icon, drawn in the "text on primary" colour. */
.rizes-navbar .navbar-toggler-icon {
  background-image: none;
  background-color: var(--rizes-on-primary);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% no-repeat;
}

/* In high-contrast modes, draw the icon in the system's button text colour. */
@media (forced-colors: active) {
  .rizes-navbar .navbar-toggler-icon {
    forced-color-adjust: none;
    background-color: ButtonText;
  }
}

/* Keyboard focus on the bar: an outline in the text colour, never blue on blue. */
.rizes-navbar :focus-visible,
.rizes-navbar .nav-link:focus-visible,
.rizes-navbar .navbar-toggler:focus-visible,
.rizes-navbar .form-select:focus-visible {
  outline: 3px solid var(--rizes-on-primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* A button for use on the navigation bar, such as the language switch. */
.btn-on-primary {
  --bs-btn-color: var(--rizes-on-primary);
  --bs-btn-border-color: var(--rizes-on-primary);
  --bs-btn-hover-color: var(--rizes-primary-dark);
  --bs-btn-hover-bg: var(--rizes-on-primary);
  --bs-btn-hover-border-color: var(--rizes-on-primary);
  --bs-btn-active-color: var(--rizes-primary-dark);
  --bs-btn-active-bg: var(--rizes-on-primary);
  --bs-btn-active-border-color: var(--rizes-on-primary);
  /* A selected option (such as the current language) looks filled, not faded. */
  --bs-btn-disabled-color: var(--rizes-primary-dark);
  --bs-btn-disabled-bg: var(--rizes-on-primary);
  --bs-btn-disabled-border-color: var(--rizes-on-primary);
  --bs-btn-disabled-opacity: 1;
}