/* Explain: Base reset, typography defaults, and global responsive styles for the CEDHF website. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    color: var(--text-color);
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--accent-color);
    color: var(--charcoal-color);
}

input,
select,
textarea,
button {
    font: inherit;
}

button,
a.btn,
summary {
    cursor: pointer;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.65;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 70%, white);
    outline-offset: 3px;
}

.aspect-4\/3 {
    aspect-ratio: 4 / 3;
}

.brand-kicker {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.76rem;
}

.editorial-measure {
    max-width: 68ch;
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 4.75rem;
    }

    body {
        overflow-wrap: anywhere;
    }

    h1,
    h2,
    h3 {
        overflow-wrap: normal;
        text-wrap: balance;
    }

    p,
    li {
        text-wrap: pretty;
    }

    img,
    video {
        height: auto;
    }

    fieldset {
        min-width: 0;
    }
}