/* All links red */
a {
  color: #dc3545;
}

a:hover {
  color: #b02a37;
}

/* ASCII-art site logo: scale down on narrow screens, never overflow.
   Art is 40 chars wide; monospace advance ~= 0.6em.
   - >=720px viewport: 2.4vw >= 17.3px, so clamped to the 0.6rem max
     (renders unchanged from before).
   - 375px viewport: 2.4vw = 9px font -> ~0.54em advance -> 40 chars
     ~= 216px, well inside the ~351px .container content width.
   - 320px viewport: 2.4vw = 7.68px font -> ~0.46em advance -> 40 chars
     ~= 184px, inside the ~296px content width.
   overflow-x:auto on the <pre> is the backstop if a font's advance
   differs. */
.site-logo {
  font-size: clamp(0.32rem, 2.4vw, 0.6rem);
  line-height: 1;
  overflow-x: auto;
  max-width: 100%;
}

/* Red theme-toggle switch (Bootstrap 5.3 .form-switch override) */

/* Scope note: these .form-check-input rules also recolor any future
   checkbox / radio added to the site. That is acceptable for now -- the
   only checkbox is #theme-toggle. The :focus:not(:checked) knob rule
   needs the .form-switch ancestor selector to work cleanly, so it is
   intentionally not scoped to #theme-toggle. */

.form-check-input:checked {
  background-color: #dc3545;
  border-color: #dc3545;
}

.form-check-input:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Unchecked + focused: BS5 default bakes a blue knob into the switch
   background-image; override with a red knob so focus shows no blue. */
.form-switch .form-check-input:focus:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dc3545'/%3e%3c/svg%3e");
}