/*
 * Base layer: the browser reset and page shell every page relies on.
 * Component styles live in their own files; keep this one small.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + 0.9vw); }
h3 { font-size: calc(1.3rem + 0.6vw); }
h4 { font-size: calc(1.275rem + 0.3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

@media (min-width: 1200px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
}

p,
ol,
ul,
dl,
pre,
figure,
blockquote {
    margin-top: 0;
    margin-bottom: 1rem;
}

blockquote,
figure {
    margin-inline: 0;
}

ol,
ul {
    padding-left: 2rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
    margin-bottom: 0;
}

dt {
    font-weight: 700;
}

dd {
    margin-bottom: 0.5rem;
    margin-left: 0;
}

hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: 0.25;
}

b,
strong {
    font-weight: bolder;
}

small {
    font-size: 0.875em;
}

sub,
sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

a {
    color: var(--accent);
    text-decoration: underline;
}

a:hover {
    color: var(--accent-hover);
}

pre,
code,
kbd,
samp {
    font-size: 1em;
}

pre {
    display: block;
    overflow: auto;
    font-size: 0.875em;
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
}

code {
    font-size: 0.875em;
    color: var(--code-inline-text);
    overflow-wrap: break-word;
}

a > code {
    color: inherit;
}

kbd {
    padding: 0.1875rem 0.375rem;
    font-size: 0.875em;
    color: var(--text-strong);
    background-color: var(--code-inline-bg);
    border-radius: 0.25rem;
}

img,
svg {
    vertical-align: middle;
}

table {
    caption-side: bottom;
    border-collapse: collapse;
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

button,
input,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button {
    border-radius: 0;
}

button:not(:disabled),
[role="button"] {
    cursor: pointer;
}

button:focus:not(:focus-visible) {
    outline: 0;
}

iframe {
    border: 0;
}

summary {
    display: list-item;
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

/* Page shell: header, then a growing content area. */
.site-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-inline: 0.75rem;
}

.content-wrapper {
    padding-inline: 0.5rem;
}

@media (min-width: 992px) {
    .content-wrapper {
        padding-inline: 1rem;
    }
}