/**
 * Site theme: Bootstrap's own variables and component hooks.
 * The rules inside body:not(.exam-theme) are the site's. The exam app keeps the
 * look it was built with (its hooks are in _components.css, its tokens in the
 * .exam-theme block of _variables.css). Components that the exam does not use
 * are styled without the gate.
 */

@media (min-width: 768px) {
    :root:not(:has(.exam-theme)) {
        scroll-padding-top: 5rem;   /* a focused element lands below the sticky nav (WCAG 2.4.11); on phones the nav scrolls away */
    }
}

@media (prefers-reduced-motion: no-preference) {
    :root:not(:has(.exam-theme)) {
        scroll-behavior: smooth;
    }
}

body:not(.exam-theme) {
    & :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.2;
        text-wrap: balance;
    }

    & :is(.display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
        font-weight: 800;
        letter-spacing: -.03em;
        word-spacing: .05em;
        line-height: 1.08;
        text-wrap: balance;
    }

    & .lead {
        --bs-lead-font-size: 1.25rem;
        font-size: var(--bs-lead-font-size);
        font-weight: 500;
        color: var(--bs-secondary-color);
    }

    & .text-uppercase { letter-spacing: .08em; }

    & a { text-underline-offset: .2em; }

    & ::selection { background: rgba(var(--at-blue-rgb), .16); }

    & .bi { display: inline-block; width: 1em; height: 1em; line-height: 1; }

    /* Buttons are keys: a solid edge under the face (--at-btn-edge, in a darker shade of the face), and a press
       pushes the face down onto it. States (WCAG 2.2 AA): every variant changes colour on hover, sinks while
       pressed, and keyboard focus keeps the resting colours and draws a two-tone ring (a gap in the surface
       colour, then the focus colour) outside the edge, so the ring reads on a blue button and on navy. The
       transparent outline keeps a ring in forced-colors mode. The exam app keeps Bootstrap's defaults. */
    & .btn {
        --bs-btn-font-weight: 700;
        --bs-btn-padding-y: .5625rem;   /* 44px high with the 16px font: the touch target of CLAUDE.md */
        --at-btn-edge: 3px;
        --at-btn-edge-color: rgba(var(--at-ink-rgb), .2);
        --bs-btn-focus-box-shadow: 0 var(--at-btn-edge) 0 var(--at-btn-edge-color), 0 0 0 2px var(--bs-body-bg), 0 0 0 calc(2px + var(--bs-focus-ring-width)) var(--bs-focus-ring-color);
        box-shadow: 0 var(--at-btn-edge) 0 var(--at-btn-edge-color);
        margin-bottom: var(--at-btn-edge);   /* room for the edge, so it never overlaps what follows */
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .08s ease-out, transform .08s ease-out;
        text-wrap: balance;
    }

    & .btn:focus-visible {
        outline: 2px solid transparent;
        color: var(--bs-btn-color);
        background-color: var(--bs-btn-bg);
        border-color: var(--bs-btn-border-color);
        box-shadow: var(--bs-btn-focus-box-shadow);   /* the resting edge rule above outranks Bootstrap's focus rule */
    }

    & .btn:not(:disabled):active {
        transform: translateY(var(--at-btn-edge));
        box-shadow: 0 0 0 var(--at-btn-edge-color);
    }

    & .btn:not(:disabled):active:focus-visible {
        box-shadow: 0 0 0 var(--at-btn-edge-color), 0 0 0 2px var(--bs-body-bg), 0 0 0 calc(2px + var(--bs-focus-ring-width)) var(--bs-focus-ring-color);
    }

    & .btn-lg { --at-btn-edge: 4px; }
    & .btn-sm { --at-btn-edge: 2px; }
    & .btn-link, & .input-group > .btn { --at-btn-edge: 0; margin-bottom: 0; }
    & .btn-primary { --at-btn-edge-color: var(--at-blue-ink); }
    & .btn-outline-primary { --at-btn-edge-color: var(--bs-primary-border-subtle); }
    & .btn-outline-secondary { --at-btn-edge-color: var(--at-accent-hover); }
    & .btn-light { --at-btn-edge-color: var(--at-dot); }
    & .btn-outline-light { --at-btn-edge-color: var(--at-navy-line); }

    & .btn-lg {
        --bs-btn-padding-y: .625rem;   /* 49px, Bootstrap's own large button is 48px */
        --bs-btn-padding-x: 1rem;
        --bs-btn-font-size: 1.125rem;
        --bs-btn-border-radius: var(--bs-border-radius-lg);
    }

    & .btn-primary {
        --bs-btn-color: var(--at-white);
        --bs-btn-bg: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: var(--at-white);
        --bs-btn-hover-bg: var(--bs-primary-hover);
        --bs-btn-hover-border-color: var(--bs-primary-hover);
        --bs-btn-active-color: var(--at-white);
        --bs-btn-active-bg: var(--bs-primary-text-emphasis);
        --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
        --bs-btn-disabled-bg: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
    }

    & .btn-secondary {
        --bs-btn-color: var(--at-ink);
        --bs-btn-bg: var(--bs-secondary);
        --bs-btn-border-color: var(--bs-secondary);
        --bs-btn-hover-color: var(--at-ink);
        --bs-btn-hover-bg: var(--bs-secondary-hover);
        --bs-btn-hover-border-color: var(--bs-secondary-hover);
        --bs-btn-active-color: var(--at-ink);
        --bs-btn-active-bg: var(--bs-secondary-hover);
        --bs-btn-active-border-color: var(--bs-secondary-hover);
    }

    & .btn-outline-primary {
        --bs-btn-color: var(--bs-link-color);
        --bs-btn-bg: var(--bs-tertiary-bg);
        --bs-btn-border-color: var(--bs-primary-border-subtle);
        --bs-btn-hover-color: var(--at-white);
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-active-color: var(--at-white);
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
    }

    & .btn-outline-secondary {
        --bs-btn-color: var(--bs-secondary-text-emphasis);
        --bs-btn-bg: var(--bs-tertiary-bg);
        --bs-btn-border-color: var(--bs-secondary);
        --bs-btn-hover-color: var(--at-ink);
        --bs-btn-hover-bg: var(--bs-secondary);
        --bs-btn-hover-border-color: var(--bs-secondary);
        --bs-btn-active-color: var(--at-ink);
        --bs-btn-active-bg: var(--bs-secondary-hover);
        --bs-btn-active-border-color: var(--bs-secondary-hover);
    }

    & .btn-light {
        --bs-btn-color: var(--at-navy);
        --bs-btn-bg: var(--at-white);
        --bs-btn-border-color: var(--at-white);
        --bs-btn-hover-color: var(--at-navy);
        --bs-btn-hover-bg: var(--at-tint);
        --bs-btn-hover-border-color: var(--at-tint);
        --bs-btn-active-color: var(--at-navy);
        --bs-btn-active-bg: var(--at-tint);
        --bs-btn-active-border-color: var(--at-tint);
    }

    & .btn-outline-light {
        --bs-btn-color: var(--at-white);
        --bs-btn-border-color: var(--at-navy-line);
        --bs-btn-hover-color: var(--at-navy);
        --bs-btn-hover-bg: var(--at-white);
        --bs-btn-hover-border-color: var(--at-white);
        --bs-btn-active-color: var(--at-navy);
        --bs-btn-active-bg: var(--at-white);
    }

    & [data-bs-theme="dark"] .btn-primary { --bs-btn-active-bg: var(--bs-primary-hover); --bs-btn-active-border-color: var(--bs-primary-hover); }

    & .card {
        --bs-card-spacer-y: 1.5rem;
        --bs-card-spacer-x: 1.5rem;
        --bs-card-border-color: var(--bs-border-color);
        --bs-card-border-radius: var(--bs-border-radius-xl);
        --bs-card-bg: var(--bs-tertiary-bg);
        --bs-card-cap-bg: transparent;
        --bs-card-title-color: var(--bs-heading-color);
        --bs-card-box-shadow: none;
    }

    & .card:has(.stretched-link:focus-visible) {
        outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
        outline-offset: .15rem;
    }

    & .card .stretched-link:focus-visible { outline: 0; }

    & .accordion {
        --bs-accordion-color: var(--bs-body-color);
        --bs-accordion-bg: var(--bs-tertiary-bg);
        --bs-accordion-border-color: var(--bs-border-color);
        --bs-accordion-border-radius: var(--bs-border-radius-xl);
        --bs-accordion-inner-border-radius: calc(var(--bs-border-radius-xl) - 1px);
        --bs-accordion-btn-color: var(--bs-heading-color);
        --bs-accordion-btn-bg: var(--bs-tertiary-bg);
        --bs-accordion-btn-padding-y: 1.15rem;
        --bs-accordion-btn-padding-x: 1.5rem;
        --bs-accordion-body-padding-x: 1.5rem;
        --bs-accordion-active-color: var(--bs-primary-text-emphasis);
        --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
        --bs-accordion-btn-focus-border-color: var(--bs-primary);
        --bs-accordion-btn-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
    }

    & .accordion-button { font-weight: 600; }

    & .nav-pills {
        --bs-nav-pills-border-radius: var(--bs-border-radius-pill);
        --bs-nav-pills-link-active-color: var(--at-white);
        --bs-nav-pills-link-active-bg: var(--bs-primary);
        --bs-nav-link-color: var(--bs-body-color);
        --bs-nav-link-hover-color: var(--bs-primary);
        --bs-nav-link-padding-y: .625rem;
        --bs-nav-link-font-weight: 600;
    }

    & .nav-pills .nav-link:not(.active) {
        background-color: var(--bs-tertiary-bg);
        border: var(--bs-border-width) solid var(--bs-border-color);
        white-space: nowrap;
    }

    & .nav-pills .nav-link.active { border-color: var(--bs-primary); }

    & .badge {
        --bs-badge-padding-x: .75em;
        --bs-badge-padding-y: .4em;
        --bs-badge-font-weight: 700;
        --bs-badge-border-radius: var(--bs-border-radius-pill);
    }

    & .list-group {
        --bs-list-group-bg: transparent;
        --bs-list-group-color: var(--bs-body-color);
        --bs-list-group-border-color: var(--bs-border-color);
        --bs-list-group-border-radius: var(--bs-border-radius-lg);
        --bs-list-group-item-padding-y: 1rem;
        --bs-list-group-action-hover-bg: var(--bs-primary-bg-subtle);
        --bs-list-group-action-hover-color: var(--bs-body-color);
        --bs-list-group-action-active-bg: var(--bs-primary-bg-subtle);
        --bs-list-group-active-color: var(--at-white);
        --bs-list-group-active-bg: var(--bs-primary);
        --bs-list-group-active-border-color: var(--bs-primary);
    }

    & .table {
        --bs-table-color: var(--bs-body-color);
        --bs-table-bg: transparent;
        --bs-table-border-color: var(--bs-border-color);
        --bs-table-striped-bg: rgba(var(--at-ink-rgb), .02);
        --bs-table-hover-bg: var(--bs-primary-bg-subtle);
        --bs-table-active-bg: var(--bs-primary-bg-subtle);
        --bs-table-active-color: var(--bs-body-color);
    }

    & .table > thead { --bs-table-color: var(--bs-heading-color); }

    & .table > :not(caption) > * > * { padding: .9rem 1rem; }

    /* A range input is a touch target: 44 px tall, the track stays centred */
    & .form-range { height: 2.75rem; }

    & .form-control:focus,
    & .form-select:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
    }
}

/* Navigation bar (the site menu, also above the exam): see the navbar part of _components.css */
.navbar {
    --bs-navbar-padding-y: .75rem;
    --bs-navbar-color: var(--bs-secondary-color);
    --bs-navbar-hover-color: var(--bs-primary);
    --bs-navbar-active-color: var(--bs-primary);
    --bs-navbar-nav-link-padding-x: 1rem;
    --bs-navbar-brand-color: var(--bs-heading-color);
    --bs-navbar-brand-hover-color: var(--bs-primary);
    font-weight: 600;
}

.navbar-nav { --bs-nav-link-padding-y: .75rem; }

.nav-link:focus-visible { box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); }

.breadcrumb { --bs-breadcrumb-divider-color: var(--bs-secondary-color); }