/*
 * LawalGo theme: maps Bootstrap, select2 and the header onto the brand
 * colours defined in variables.css. Change colours there, not here.
 * Selectors start with "html" so they still win when a page loads Bootstrap again later.
 */
html:root {
  --bs-primary: #020146;
  --bs-primary-rgb: 2, 1, 70;
  --bs-link-color: #020146;
  --bs-link-color-rgb: 2, 1, 70;
  --bs-link-hover-color: #1E1D6B;
  --bs-link-hover-color-rgb: 30, 29, 107;
}

html[data-theme="dark"] {
  --bs-link-color: #8C8BF5;
  --bs-link-color-rgb: 140, 139, 245;
  --bs-link-hover-color: #FFE600;
  --bs-link-hover-color-rgb: 255, 230, 0;
}

/* Header */
.section-header .navbar-expand-lg {
  background: var(--color-header-bg);
}

.navbar-logo .brand-logo {
  height: 30px;
  width: auto;
}

@media (min-width: 992px) {
  .section-header .navbar-collapse a {
    color: var(--color-header-text);
  }

  .section-header .navbar-collapse a:hover,
  .section-header .navbar-collapse a.active {
    color: var(--color-highlight);
  }

  .section-header .navbar-collapse a::after {
    background-color: var(--color-highlight);
  }
}

.navbar-toggle {
  color: var(--color-header-text);
}

/* Buttons */
html .btn-primary {
  --bs-btn-color: var(--color-on-primary);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-on-primary);
  --bs-btn-hover-bg: var(--color-primary-light);
  --bs-btn-hover-border-color: var(--color-primary-light);
  --bs-btn-active-color: var(--color-on-primary);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: 2, 1, 70;
}

html .btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-on-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
}

html .text-primary {
  color: var(--color-primary) !important;
}

html .bg-primary {
  background-color: var(--color-primary) !important;
}

html .border-primary {
  border-color: var(--color-primary) !important;
}

/* Form controls */
html .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

html .form-control:focus,
html .form-select:focus,
html .form-check-input:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 .2rem rgba(2, 1, 70, .15);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Language menu */
#languageDropdownMenu .language-item.active {
  background: var(--color-highlight);
  color: var(--color-on-highlight);
  font-weight: 600;
}