/* ==========================
   RESET
========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

/* ==========================
   BASE
========================== */

html body,
html button,
html input,
html select,
html textarea {
    font-family: var(--font-primary);
    font-weight: 400;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ==========================
   STICKY FOOTER
   header.php opens <main class="site-main"> right after the header/filter
   popup markup, footer.php closes it right before <footer>, so every
   template's content — however many sections it outputs — ends up as ONE
   flex item here. That item grows to fill any leftover space, so short
   content (an empty-state page, a 404) still ends with the footer flush
   against the bottom of the viewport instead of floating above blank space,
   while normal longer pages are unaffected and just scroll as usual. Doesn't
   need to account for the fixed header's height at all — position:fixed
   already takes it out of this flow.
========================== */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}

/* ==========================
   TYPOGRAPHY
========================== */

html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    margin: 0;
    line-height: 1.2;
}

html h1 { font-size: 2.5rem; font-weight: 700; }
html h2 { font-size: 2rem; font-weight: 600; }
html h3 { font-size: 1.5rem; font-weight: 600; }
html h4 { font-size: 1.25rem; font-weight: 500; }
html h5 { font-size: 1.1rem; font-weight: 500; }
html h6 { font-size: 1rem; font-weight: 500; }

p {
    font-size: 1rem;
    color: var(--color-text);
}

small {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* ==========================
   CONTAINER
========================== */

.container {
    width: min(100%, var(--content-width));
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 3rem);
}

/* ==========================
   ROW
========================== */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -0.75rem;
    height: 100%;
}

/* ==========================
   COLUMNS
========================== */

.row > * {
    padding-inline: 0.75rem;
    box-sizing: border-box;
}

.col-1  { width: 8.333333%; }
.col-2  { width: 16.666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-5  { width: 41.666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333333%; }
.col-8  { width: 66.666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }

.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 24px; }

.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }

.flex-center-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

svg {
    width: auto;
}