/* Maple Radio - the small amount of styling Bootstrap does not already give us.
   Everything here has to hold up in both colour modes, so it is written against
   Bootstrap's theme variables rather than fixed colours wherever possible. */

/* The brand red, replacing Bootstrap's default --bs-danger (#dc3545) everywhere:
   the navbar, every btn-danger, the failed-quiz badge, and the wrong-answer
   highlight. Overridden as theme tokens rather than as one-off classes, so it
   holds in both colour modes and stays consistent with any future use of
   text-danger / border-danger / etc.

   --bs-danger and --bs-danger-rgb are read at runtime by bg-danger, text-danger,
   text-bg-danger and friends, so overriding them here is enough for those.
   .btn-danger and .list-group-item-danger instead bake Bootstrap's hex values
   into their own component variables at build time, so those are redeclared
   below with matching tints/shades - solved from Bootstrap's own ratios against
   #dc3545, then reapplied to our red, so hover/active/subtle stay in the same
   proportion Bootstrap intended. */
:root,
[data-bs-theme="light"] {
  --bs-danger: #a62a1e;
  --bs-danger-rgb: 166, 42, 30;
  --bs-danger-text-emphasis: #43110c;
  --bs-danger-bg-subtle: #edd5d2;
  --bs-danger-border-subtle: #dbaaa5;

  /* A deeper red than --bs-danger, used only for the navbar's edge so the bar
     reads as a deliberate band rather than a floating block of colour. */
  --mr-red-edge: #52150f;
}

[data-bs-theme="dark"] {
  --bs-danger: #a62a1e;
  --bs-danger-rgb: 166, 42, 30;
  --bs-danger-text-emphasis: #ca7f78;
  --bs-danger-bg-subtle: #220906;
  --bs-danger-border-subtle: #631912;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #a62a1e;
  --bs-btn-border-color: #a62a1e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8d241a;
  --bs-btn-hover-border-color: #842118;
  --bs-btn-focus-shadow-rgb: 179, 73, 63;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #842118;
  --bs-btn-active-border-color: #7d2017;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #a62a1e;
  --bs-btn-disabled-border-color: #a62a1e;
}

.mr-navbar {
  border-bottom: 3px solid var(--mr-red-edge);
}

/* The navbar keeps its red in both modes - it is brand chrome, not surface - so
   its controls are always styled for a dark background. */
.mr-navbar .btn-outline-light:hover,
.mr-navbar .btn-outline-light:focus-visible {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
}

.mr-navbar .navbar-brand,
.mr-navbar .navbar-brand:hover {
  color: #fff;
}

/* Monochrome icons, inheriting the button's colour. Both are in the markup and
   CSS picks one from the theme in effect, so the icon follows an instant toggle
   with no JavaScript and no flash. */
.mr-icon {
  width: 1rem;
  height: 1rem;
  display: block;
}

html[data-bs-theme="dark"] .mr-icon-moon,
html:not([data-bs-theme="dark"]) .mr-icon-sun {
  display: none;
}

/* Match the height of the text-labelled buttons beside it. Their height comes
   from a btn-sm's text line box (font-size 0.875rem x line-height 1.5), which a
   16px icon falls short of, leaving the theme button visibly shorter. Giving the
   icon that line box evens them up; the viewBox keeps the glyph square inside it
   rather than stretching. */
#theme-toggle .mr-icon {
  height: calc(0.875rem * 1.5);
}

/* One width for the auth button whichever of its four labels it is showing -
   "Log in", "Connexion", "Log out", "Déconnexion". The language button switches
   text in place, so without this the button resizes mid-switch and shoves the
   navbar sideways; logging in or out would jump it again. Sized for the longest,
   French "Déconnexion". */
.mr-auth-btn {
  min-width: 6.25rem;
}

/* One width for the Stats link whichever language it's showing - "Statistics"
   vs "Statistiques". Same reasoning as .mr-auth-btn: the language button
   switches text in place, so without this the link resizes mid-switch and
   shoves the navbar sideways. Sized for the longer, French "Statistiques". */
.mr-stats-btn {
  min-width: 6.5rem;
}

/* The two icon-and-initials buttons read as a pair, so they share a width. */
#theme-toggle,
#language-toggle {
  min-width: 2.5rem;
  justify-content: center;
}

/* Wide enough for a name, narrow enough to leave the navbar room. */
.mr-username {
  width: 13ch;
}

@media (min-width: 576px) {
  .mr-username {
    width: 18ch;
  }
}

.skip-link {
  padding: 0.5rem 1rem;
}

/* The options are clickable rows; make that obvious without overriding
   Bootstrap's own list-group states. */
#q-options .list-group-item:not(.list-group-item-success):not(.list-group-item-danger) {
  cursor: pointer;
}

#q-options .list-group-item:has(input:disabled) {
  cursor: default;
}

#q-text {
  /* Question text is the focus of the page; give it room to breathe. */
  line-height: 1.5;
}