
/* ── Site-wide primary colour override (was Bootstrap's default blue) ──────
   Bootstrap 5.3 mostly reads --bs-primary via CSS variables, so redefining
   it here covers .text-primary/.bg-primary/.border-primary/nav-pills/focus
   rings automatically. .btn-primary and .btn-outline-primary are the
   exception — their component tokens are baked to literal hex at Bootstrap's
   own build time, not wired to var(--bs-primary), so those need restating
   explicitly. Chosen colour is Bootstrap's own "purple" swatch — part of
   their tested palette (won't clash with success/danger/warning/info), and
   matches the purple Hex Tasks already uses elsewhere on this site. */

:root {
    --bs-primary: #6f42c1;
    --bs-primary-rgb: 111, 66, 193;
    --bs-primary-text-emphasis: #59339d;
    --bs-primary-bg-subtle: #e6dcf7;
    --bs-primary-border-subtle: #cfbeeb;
    --bs-link-color: #6f42c1;
    --bs-link-color-rgb: 111, 66, 193;
    --bs-link-hover-color: #59339d;
    --bs-link-hover-color-rgb: 89, 51, 157;
    --bs-focus-ring-color: rgba(111, 66, 193, 0.25);
}

.btn-primary {
    --bs-btn-bg: #6f42c1;
    --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-bg: #5f38a5;
    --bs-btn-hover-border-color: #59339b;
    --bs-btn-active-bg: #59339b;
    --bs-btn-active-border-color: #543092;
    --bs-btn-disabled-bg: #6f42c1;
    --bs-btn-disabled-border-color: #6f42c1;
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
}

.btn-outline-primary {
    --bs-btn-color: #6f42c1;
    --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-bg: #6f42c1;
    --bs-btn-hover-border-color: #6f42c1;
    --bs-btn-active-bg: #6f42c1;
    --bs-btn-active-border-color: #6f42c1;
    --bs-btn-focus-shadow-rgb: 111, 66, 193;
}

.breakpoint-indicator {
  border-radius: 0.375rem;
  font-weight: bold;
  opacity: 0.7;
}

.tiny { font-size: 80% }


a.plainlink {
    text-decoration: none;
    color: inherit;
}

/* ── Off-canvas main nav (used on every page, all screen sizes) ────────────── */

#mainNav .nav-link {
    color: rgba(255, 255, 255, 0.75);
    padding: 0.6rem 0.25rem;
    font-size: 1.05rem;
}

#mainNav .nav-link:hover,
#mainNav .nav-link.active {
    color: #fff;
}

#mainNav .nav-item + .nav-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#mainNav .nav-group-heading {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.75rem 0 0.25rem;
}

#mainNav .nav-key {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}