/*
 * Application-wide typography contract.
 *
 * Keep component typography in rem/em so it follows the user's browser zoom and
 * the root size below. Feature styles may refine hierarchy, but ordinary copy and
 * supporting text must not fall below the readable floors defined here.
 */
:root {
    --portal-font-size-root: 106.25%; /* 17px at the browser's default setting */
    --portal-font-size-body: 1rem;
    --portal-font-size-small: .875rem; /* 14px minimum supporting copy */
    --portal-font-size-h1: clamp(2rem, 1.72rem + 1.25vw, 3rem);
    --portal-font-size-h2: clamp(1.625rem, 1.43rem + .85vw, 2.25rem);
    --portal-font-size-h3: clamp(1.35rem, 1.23rem + .5vw, 1.75rem);
    --portal-font-size-h4: 1.25rem;
    --portal-font-size-h5: 1.125rem;
    --portal-font-size-h6: 1rem;
    --portal-line-height-body: 1.55;
    --portal-line-height-heading: 1.2;
}

html {
    font-size: var(--portal-font-size-root);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: var(--portal-font-size-body);
    line-height: var(--portal-line-height-body);
}

:where(h1, h2, h3, h4, h5, h6) {
    line-height: var(--portal-line-height-heading);
    text-wrap: balance;
}

:where(h1) { font-size: var(--portal-font-size-h1); }
:where(h2) { font-size: var(--portal-font-size-h2); }
:where(h3) { font-size: var(--portal-font-size-h3); }
:where(h4) { font-size: var(--portal-font-size-h4); }
:where(h5) { font-size: var(--portal-font-size-h5); }
:where(h6) { font-size: var(--portal-font-size-h6); }

:where(p, li, dd, dt, label, input, select, textarea, button) {
    line-height: 1.5;
}

/* Bootstrap and legacy templates frequently shrink these below an accessible
   reading size. These are supporting text, not decorative microcopy. */
:where(small, .small, .text-small, .form-text, .form-label, .field-validation-error) {
    font-size: var(--portal-font-size-small);
}

@media (max-width: 575.98px) {
    :root {
        --portal-font-size-h1: clamp(1.8rem, 1.52rem + 1.4vw, 2.15rem);
        --portal-font-size-h2: clamp(1.5rem, 1.3rem + 1vw, 1.8rem);
        --portal-font-size-h3: 1.3rem;
    }
}