@view-transition {
    navigation: auto;
}

/*
::view-transition-group(root) {
    animation-duration: 3s;
}
*/

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

    /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
    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;
    }

    /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
    [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;
    }

    ul {
        margin: 0;
        padding: 0;
    }
}

@layer base {
    /*PRIMITVES*/
    :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-300: hsl(143, 19%, 69%);
        --clr-green-400: hsl(143, 19%, 49%);
        --clr-green-500: hsl(143, 38%, 37%);
        --clr-green-600: hsl(145, 29%, 19%);

        --clr-brown-100: hsl(10, 5%, 90%);
        --clr-brown-200: hsl(9, 7%, 85%);
        --clr-brown-300: hsl(9, 8%, 75%);
        --clr-brown-400: hsl(0, 6%, 60%);

        --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%, 37%);

        --ff-body: "Fira Sans", sans-serif;
        --ff-heading: "Outfit", 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;
        }
    }

    /*CUSTOM PROPERTIES*/
    :root{
        --text-main: var(--clr-brown-800);
        --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-regular: 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-regular: var(--fs-400);
        --font-size-md: var(--fs-500);
        --font-size-lg: var(--fs-600);

        --border-radius-1: 0.25rem;
        --border-radius-2: 0.5rem;
        --border-radius-3: 0.75rem;

        @media (prefers-color-scheme: light) {
            --text-main: var(--clr-brown-300);
            --text-high-contrast: var(--clr-brown-900);

            --background-accent-dark: var(--clr-green-300);
            --background-extra-light: var(--clr-brown-100);
            --background-light: var(--clr-brown-200);
            --background-main: var(--clr-brown-300);
            --background-dark: var(--clr-brown-400);
            --background-extra-dark: var(--clr-brown-500);
        }
    }

    html{
        font-family: var(--ff-body), sans-serif;
        line-height: 1.6;
        scroll-padding: 3rem;
    }

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

    body {
        font-size: var(--font-size-regular);
        color: var(--text-high-contrast);
        background-color: var(--background-main);
    }

    h1, h2, h3, h4 {
        font-family: var(--ff-heading), sans-serif;
        color: var(--text-high-contrast);
    }

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

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

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

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

@layer layout {

    .flex-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;

    }
    .flow > * + * {
        margin-block-start: 1em;
    }

    .grid-flow {
        display: grid;
        gap: 1rem;

        align-content: start;
        justify-items: start;
    }

    .grid-auto-fill {
        --auto-fit-min-col-size: 250px;
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(min(var(--auto-fit-min-col-size), 100%), 1fr));
    }

    .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-alignment="centered"] {
            --equal-columns-vertical-alignment: center;
        }
    }

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

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

            &[data-padding="compact"] {
                --padding: 4.5rem;
                padding-block: var(--padding);
            }
        }
    }
    .wrapper {
        --wrapper-max-width: 1130px;
        max-width: var(--wrapper-max-width);
        margin-inline: auto;
        padding-inline: 1rem;
        box-sizing: content-box;

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

            max-width: var(--wrapper-max-width);
        }

        &[data-width="narrow"] {
            --wrapper-max-width: 800px;
            max-width: var(--wrapper-max-width);
        }
    }
}

@layer components {
    .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;
        background: var(--background-accent-main);
        padding: 1rem;
        border-radius: var(--border-radius-2);
    }

    .skip-to-main {
        position: absolute;
        background: var(--background-accent-main);
        color: var(--text-high-contrast);
        padding: 1rem;
        border-radius: var(--border-radius-2);
    }

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

        overflow-x: clip;
        position: relative;
    }

    .site-header__inner {
        display: flex;
        gap: .5rem 1rem;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    [aria-controls="primary-nav"] {
        z-index: 100;
        cursor: pointer;
        background: transparent;
        border: 0;

        img {
            border-radius: 0;
        }
    }

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

    .primary-navigation {
        ul {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem 1rem;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        @media (width < 760px) {
            display: none;
            opacity: 0;
            transition: opacity 1s, display 1s, translate 1s;
            transition-behavior: allow-discrete;
            translate: 0 -100%;

            position: absolute;
            z-index: 10;
            top: 0;
            right: 0;
            font-size: var(--font-size-lg);
            font-weight: 700;
            font-family: var(--ff-heading), sans-serif;
            background-color: var(--background-accent-main);
            padding: 2rem;
            border-radius: 0 0 0 var(--border-radius-3);

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

            li {
                --delay: 1s;
                translate: 50%;
                transition: translate 1s var(--delay), opacity 1s var(--delay);
            }

            li:nth-child(2) {
                --delay: 1.25s;
            }

            li:nth-child(3) {
                --delay: 1.5s;
            }

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

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

        [aria-expanded="true"] + .primary-navigation {
            display: block;
            opacity: 1;
            translate: 0 0;

            @starting-style {
                opacity: 0;
                translate: 0 -100%;
            }

            li {
                translate: 0 0;
                opacity: 1;

                @starting-style {
                    opacity: 0;
                    translate: 50% 0;
                }
            }
        }
    }

    .hero {
        text-align: center;
        font-size: var(--font-size-md);
        color: var(--clr-brown-100);
        background-image: url("assets/hero.webp");
        background-size: cover;
        background-position: center;
        /*
        animation: fade-out forwards;
        animation-timeline: view();
        animation-range-start: exit;
        */
    }


    /*
    .section {
        animation: fade-out;
        animation-timeline: view();
    }
    */

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

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

    .mushroom-guide {
        --card-title-font-size: var(--font-size-lg);
        --card-title-color: var(--text-high-contrast);
        --card-gap: 0.75rem;
    }

    .faq-bento{
        --card-title-color: var(--text-high-contrast);
        display: grid;
        gap: 1rem;
        grid-template-areas:
            "card-one"
            "card-two"
            "card-three"
            "card-four";

        @media (width > 600px) {
            grid-template-areas:
                "card-one card-two"
                "card-three card-four";
        }
        @media (width > 900px) {
            grid-template-columns: repeat(3, 1fr);
            grid-template-areas:
                "card-one card-two card-four"
                "card-three card-three card-four";
        }

        .card > img {
            height: 100%;
            object-fit: cover;
        }

        @media (width > 600px) {
            .card:nth-child(even) > img {
                order: 3;
            }
        }



        .card:nth-child(1) {
            grid-area: card-one;
        }

        .card:nth-child(2) {
            grid-area: card-two;
        }

        .card:nth-child(3) {
            grid-area: card-three;

            @media (width > 900px) {
                display: grid;
                grid-template-columns: 1fr 1fr;

                img {
                    grid-column: 1 / 2;
                    grid-row: 1 / 3;
                }
            }
        }

        .card:nth-child(4) {
            grid-area: card-four;
        }
    }

    .card {
        display: flex;
        flex-direction: column;
        gap: var(--card-gap, 1rem);
        padding: 1rem;
        background-color: var(--background-light);
        border-radius: var(--border-radius-3);

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

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

    .card__note {
        background-color: var(--background-extra-light);
        margin-block-start: auto;
        padding: 0.75rem;
        border-radius: var(--border-radius-1);
    }

    .tag-list {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;

        li {
            font-family: var(--ff-heading), sans-serif;
            color: var(--text-high-contrast);
            font-size: var(--font-size-sm);
            padding: 0.125rem 0.25rem;
            background-color: var(--tag-bg);
            border-radius: var(--border-radius-1);
        }

        [data-edible="edible"] {
            --tag-bg: var(--background-accent-main);
        }

        [data-edible="toxic"] {
            --tag-bg: var(--clr-red-500);
        }

        [data-season="summer"] {
            --tag-bg: var(--background-accent-main);
        }

        [data-season="spring"] {
            --tag-bg: var(--clr-teal-500);
        }

        [data-season="fall"] {
            --tag-bg: var(--clr-orange-500);
        }
    }


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

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

    select {
        padding: 0.5rem 1rem;
        background-color: var(--background-accent-main);
        border: 0;
        border-radius: var(--border-radius-2);
        color: var(--text-high-contrast);
    }

    .site-footer {
        text-align: center;
        background-color: var(--background-dark);
        padding-block: 2rem;
        display: grid;
        gap: 2rem;

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

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

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

@layer utilities {
    [hidden] {
        display: none;
    }

    .resizing * {
        transition: none;
        animation-play-state: paused;
    }

    .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-regular);
    }

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

    .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-regular);
    }

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

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

/*
@keyframes fade-out {
    from {
        opacity: 1;
    } to {
        opacity: 0;
    }
}
*/

/* É possível criar filtros apenas com CSS, aqui vai um seletor que poderia fazer isso:

.mushroom-guide:has(#season [value="spring"]:checked)
    .card:not(:has([data-season="spring"])) {
    display: none;
}

É possível mas não é recomendado.*/