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

    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
    }

    [role="list"] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body {
        min-block-size: 100vh;
        line-height: 1.6;
    }

    h1,
    h2,
    h3,
    button,
    input,
    label {
        line-height: 1.1;
    }

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

    p,
    li {
        text-wrap: pretty;
    }

    img,
    picture {
        max-inline-size: 100%;
        display: block;
    }

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

@layer base {
    :root {
        --clr-white: hsl(0, 0%, 100%);
        --clr-gray-100: hsl(0, 2%, 79%);
        --clr-brand-400: hsl(25, 88%, 75%);
        --clr-brand-500: hsl(25, 88%, 66%);
        --clr-green-400: hsl(143, 19%, 49%);
        --clr-green-500: hsl(143, 38%, 37%);
        --clr-green-600: hsl(145, 29%, 19%);
        --clr-brown-500: hsl(10, 5%, 25%);
        --clr-brown-600: hsl(9, 7%, 21%);
        --clr-brown-700: hsl(9, 8%, 16%);
        --clr-brown-800: hsl(0, 6%, 15%);
        --clr-brown-900: hsl(0, 6%, 13%);

        --clr-orange-500: hsl(28, 43%, 28%);
        --clr-red-500: hsl(359, 34%, 24%);
        --clr-teal-500: hsl(186, 42%, 25%);

        --ff-heading: "Outfit", sans-serif;
        --ff-body: "Fira Sans", sans-serif;

        --fs-300: 0.875rem;
        --fs-400: 1rem;
        --fs-500: 1.125rem;
        --fs-600: 1.25rem;
        --fs-700: 1.5rem;
        --fs-800: 2rem;
        --fs-900: 3.75rem;
        --fs-1000: 3.75rem;

        @media (width > 760px) {
            --fs-500: 1.25rem;
            --fs-600: 1.5rem;
            --fs-700: 2rem;
            --fs-800: 3rem;
            --fs-900: 5rem;
            --fs-1000: 7.5rem;
        }
    }

    :root {
        --text-main: var(--clr-gray-100);
        --text-high-contrast: var(--clr-white);
        --text-brand: var(--clr-brand-500);
        --text-brand-light: var(--clr-brand-400);

        --background-accent-light: var(--clr-green-400);
        --background-accent-main: var(--clr-green-500);
        --background-accent-dark: var(--clr-green-600);

        --background-extra-light: var(--clr-brown-500);
        --background-light: var(--clr-brown-600);
        --background-main: var(--clr-brown-700);
        --background-dark: var(--clr-brown-800);
        --background-extra-dark: var(--clr-brown-900);

        --font-size-heading-sm: var(--fs-700);
        --font-size-heading-rg: var(--fs-800);
        --font-size-heading-lg: var(--fs-900);
        --font-size-heading-xl: var(--fs-1000);

        --font-size-sm: var(--fs-300);
        --font-size-rg: var(--fs-400);
        --font-size-md: var(--fs-500);
        --font-size-lg: var(--fs-600);

        --border-radius-sm: 0.25rem;
        --border-radius-md: 0.5rem;
        --border-radius-lg: 0.75rem;
    }

    html {
        font-family: var(--ff-body, sans);
        line-height: 1.6;
    }

    body {
        font-size: var(--font-size-rg);
        color: var(--text-main);
        background-color: var(--background-main);
    }

    h1,
    h2,
    h3,
    h4 {
        color: var(--text-high-contrast);
    }

    h1 {
        font-size: var(--font-size-heading-xl);
    }

    a {
        color: var(--text-high-contrast);
    }

    a:hover,
    a:focus-visible {
        color: var(--text-brand-light);
    }

    img {
        border-radius: var(--border-radius-lg);
    }
}

@layer layout {
    .flow > * + * {
        margin-block-start: var(--flow-spacer, 1em);
    }

    .grid-flow {
        display: grid;
        gap: var(--grid-flow, 1rem);
    }

    .equal-columns {
        display: grid;
        gap: var(--equal-columns-gap, 1rem);
        align-items: var(--equal-columns-vertical-alignment, stretch);

        @media (width > 760px) {
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
        }

        &[data-gap="large"] {
            --equal-columns-gap: 2rem;
        }

        &[data-gap="none"] {
            --equal-columns-gap: none;
        }

        &[data-alignment="center"] {
            --equal-columns-vertical-alignment: center;
        }
    }

    .section {
        padding-block: var(--padding-block, 3.75rem);

        @media (width > 760px) {
            --padding-block: 8rem;

            &[data-padding="compact"] {
                --padding-block: 4.5rem;
            }
        }
    }

    .wrapper {
        max-width: var(--wrapper-max-width, 1130px);
        margin-inline: auto;
        padding-inline: 1rem;
        box-sizing: content-box;

        &[data-width="wide"] {
            --wrapper-max-width: 1330px;
        }

        &[data-width="narrow"] {
            --wrapper-max-width: 720px;
        }
    }
}

@layer component {
    .skip-to-main:not(:focus) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .skip-to-main {
        position: absolute;
        top: 10px;
        left: 10px;
        background-color: var(--background-accent-main);
        color: var(--text-brand-light);
        text-decoration: none;
        padding: 1rem;
    }

    .site-footer {
        text-align: center;
        padding-block: 2rem;
        display: grid;
        gap: 2rem;

        a {
            text-decoration: none;
            color: var(--text-main);
        }

        a:hover,
        a:focus-visible {
            color: var(--text-brand-light);
        }
    }

    .site-footer__title {
        font-size: var(--font-size-lg);
        font-family: var(--ff-heading);
        font-weight: 700;
    }

    .button {
        display: inline-flex;
        font-size: var(--font-size-md);
        text-decoration: none;
        padding: 0.5rem 1rem;
        font-weight: 700;
        background-color: var(--background-accent-main);
        font-family: var(--ff-heading);
        cursor: pointer;
        border-radius: var(--border-radius-sm);
    }

    .button:hover,
    .button:focus-visible {
        color: var(--text-high-contrast);
        background-color: var(--background-accent-light);
    }

    .card {
        display: grid;
        gap: var(--grid-gap, 1rem);
        background-color: var(--background-light);
        padding: 1rem;
        border-radius: var(--border-radius-lg);

        img {
            border-radius: var(--border-radius-md);
        }
    }

    .card__title {
        font-size: var(--card-title-font-size, var(--font-size-heading-sm));
        color: var(--card-title-color, var(--text-brand));
    }

    .hero {
        text-align: center;
        font-size: var(--font-size-md);
        color: var(--text-high-contrast);
        background-image: url("/assets/hero.webp");
        background-size: cover;
        background-position: center;

        span {
            display: block;
            color: var(--text-brand);
            font-size: var(--font-size-heading-xl);
        }
    }

    .hero__title {
        font-size: var(--font-size-heading-lg);
    }

    .site-header {
        padding-block: 1rem;
    }

    .site-header__layout {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        justify-content: space-between;
    }

    [aria-controls="primary-navigation"] {
        z-index: 100;
        background-color: transparent;
        border: none;

        img {
            border-radius: 0;
        }
    }

    [aria-controls="primary-navigation"] {
        display: none;
    }

    .primary-navigation {
        ul {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem 1rem;

            a {
                text-decoration: none;
            }
        }

        @media (width < 760px) {
            display: none;
            z-index: 10;
            position: absolute;
            top: 0;
            right: 0;
            background-color: var(--background-accent-main);
            font-family: var(--ff-heading);
            font-size: var(--font-size-lg);
            font-weight: 700;
            padding: 1.5rem;
            border-bottom-left-radius: 12px;

            ul {
                flex-direction: column;
                gap: 0;
            }

            li + li {
                padding-block-start: 1.5rem;
                margin-block-start: 1.5rem;
                border-top: 2px solid var(--background-accent-light);
            }
        }
    }

    @media (width < 760px) {
        [aria-controls="primary-navigation"] {
            display: block;
        }

        [aria-expanded="true"] ~ .primary-navigation {
            display: block;
        }
    }
}

@layer utilities {
    .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .text-center {
        text-align: center;
    }

    .text-brand {
        color: var(--text-brand);
    }

    .text-high-contrast {
        color: var(--text-high-contrast);
    }

    .section-title {
        font-size: var(--font-size-heading-rg);
    }

    .background-base {
        background-color: var(--background-base);
    }

    .background-light {
        background-color: var(--background-light);
    }

    .background-extra-light {
        background-color: var(--background-extra-light);
    }

    .background-dark {
        background-color: var(--background-dark);
    }

    .background-extra-dark {
        background-color: var(--background-extra-dark);
    }

    .background-accent {
        background-color: var(--background-accent-dark);
    }

    .font-size-sm {
        font-size: var(--font-size-sm);
    }

    .font-size-regular {
        font-size: var(--font-size-rg);
    }

    .font-size-md {
        font-size: var(--font-size-md);
    }

    .font-size-lg {
        font-size: var(--font-size-lg);
    }
}