/* @view-transition {
    navigation: auto;
} */

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

    /* Prevent font size inflation */
    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    /* Remove default margin */
    body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
        /* margin-block-end: 0; */ /* Andy Bell */
        margin: 0; /* Kevin Powell */
    }

     /* Remove list styles on ul, ol elements
         Safari removes list semantics of lists that don’t look like lists (list-style: none). 
         Scott O’Hara provided a fix in “Fixing” Lists, where he suggests setting role="list" explicitly on the list to re-add list semantics
    */

    /* Andy Bell: Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    /* 
    ul[role='list'],
    ol[role='list'] {
        list-style: none;
    } 
    */

    /* Kevin Powell. https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
    [role="list"] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Set core body defaults */
    body {
        /* min-height: 100vh;*/ /* Andy Bell */
        min-block-size: 100vh; /* Kevin Powell */
        line-height: 1.5; /* both  */
    }

    /* Andy Bell: Set shorter line heights on headings and interactive elements */
    /* 
    h1, h2, h3, h4, button, input, label {
        line-height: 1.1;
    } 
    */

    /* Kevin Powell */
    h1, h2, h3, button, input, label {
        line-height: 1.1;
    } 

    /* Balance text wrapping on headings */
    h1, h2, h3, h4 {
        text-wrap: balance;
    }
    
    /* Kevin Powell */
    p, li {
        text-wrap: pretty;
    }

    /* Andy Bell: A elements that don't have a class get default styles */
    /* 
    a:not([class]) {
        text-decoration-skip-ink: auto;
        color: currentColor;
        }
     */


    /* Andy Bell: Make images easier to work with */
    /* 
    img, picture {
        max-width: 100%;
        display: block;
    } 
    */

    /* Kevin Powell */
    img, picture {
        max-inline-size: 100%;
        display: block;
    }

    /* Andy Bell: Inherit fonts for inputs and buttons */
    /* 
    input, button, textarea, select {
        font-family: inherit;
        font-size: inherit;
    } 
    */

    /* Kevin Powell */
    input, button, textarea, select {
        font: inherit;
    }

    /* Andy Bell: Make sure textareas without a rows attribute are not tiny */
    /* 
    textarea:not([rows]) {
        min-height: 10em;
    } 
    */

    /* Andy Bell: Anything that has been anchored to should have extra scroll margin */
    /* For example, if a user clicks a "Skip to main content" link, the browser will scroll to the #main element. 
        The scroll-margin-block ensures that the #main element does not appear too close to the top of the viewport */
    /* 
    :target {
        scroll-margin-block: 5ex;
    }
    */

}

@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-300: 0.875rem;
            --fs-400: 1rem;
            --fs-500: 1.25rem;
            --fs-600: 1.5rem;
            --fs-700: 2rem;
            --fs-800: 3rem;
            --fs-900: 5rem;
            --fs-1000: 7.5rem;
        }
    }
    /* semantic "layer" of custom properties as well, which describe what they are being used for instead. */
    /* in another selector for syntax highlighting reasons only */
    :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-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;
    }

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

        scroll-padding: 3rem;
    }

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

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

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--ff-heading);
        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: var(--flex-group-gap, 0.5rem);
    }

    /* space */
    .flow > * + * {
        margin-block-start: var(--flow-spacer, 1em);
    }
    .grid-flow {
        display: grid;
        gap: var(--grid-flow-gap, 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;
        }

        /* with modifiers and custom properties */
        &[data-gap="large"] {
            --equal-columns-gap: 2rem;
        }
        &[data-alignment="centered"] {
            --equal-columns-vertical-alignment: center;
        }

    }

    /* .flex-equal-columns {
        display: flex;
        > * {
            flex: 1;
        }
    } */

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

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

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

    .wrapper {
        --wrapper-max-width: 1130px;

        /* /* for Figma design */
        /* max-width: calc(1130px + 2rem); */

        max-width: var(--wrapper-max-width);
        margin-inline: auto;
        padding-inline: 1rem;

        /* for Figma design */
        box-sizing: content-box;

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

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

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

    .grid-auto-fill {
        --auto-fit-min-col-size: 250px;
        
        display: grid;
        gap: 1rem;
        /* min() ensures not overflow, 100% is the size of the container */ 
        /* grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr)); */
        /* grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-fit-min-col-size), 100%), 1fr)); */
        grid-template-columns: repeat(auto-fill, minmax(min(var(--auto-fit-min-col-size), 100%), 1fr));
    }
    
    
}


@layer components {

    /* keyboard navigation */
    .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;
        background: var(--background-accent-main);
        padding: 1rem;
        border-radius: var(--border-radius-2);
    }

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

    .site-header__inner {
        display: flex;
        justify-content: space-between;

        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }


    /* Styling the mobile navigation  */
    [aria-controls="primary-nav"] {
        z-index: 100;
        cursor: pointer;
        background: transparent;
        border: 0;

        img { border-radius: 0 }
    }

    [aria-controls="primary-nav"] {
        display: none; /* hide hamburger */
    }

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

        a {text-decoration: none;}

        @media (width < 760px) {
            display: none; /* hide mobile navigation */

            position: absolute;
            z-index: 10;
            top: 0;
            right: 0;

            padding: 2rem;;

            font-size: var(--font-size-lg);
            font-weight: 700;
            font-family: var(--ff-heading);

            border-radius: 0 0 0 var(--border-radius-3);
            background-color: var(--background-accent-main);

            ul {
                flex-direction: column;
                gap: 0;/* remove gap */
            }

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

    /* show mobile navigation */
    @media (width < 760px) {
        /* show hamburger */
        [aria-controls="primary-nav"] {
            display: block;
        }
        /* show mobile navigation */
        [aria-expanded="true"] ~ .primary-navigation {
            display: block;
        }
    }


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

    .hero__title {
        font-size: var(--font-size-heading-lg);
        color: var(--text-high-contrast);

        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-columns: repeat(2, 1fr);
            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; /* crop img. background-size vs object-fit */
        }

        /* translate img to down */
        /* @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;
                gap: 1rem;
                grid-template-columns: 1fr 1fr;

                img {
                    grid-column: 1 / 2;
                    grid-row: 1 / 3;
                }
            }
        }
        .card:nth-child(4) {
            grid-area: card-four;
        }

    }

    .card {
        /* first they were grids and now flex*/

        /* display: grid;
        gap: var(--card-gap, 1rem); */

        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 {
        margin-block-start: auto;

        background-color: var(--background-extra-light);
        padding: 0.75rem;
        border-radius: var(--border-radius-2);
    }

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

        li {
            font-family: var(--ff-heading);
            font-size: var(--font-size-sm);
            color: var(--text-high-contrast);

            padding: 0rem 0.25rem;
            border-radius: var(--border-radius-1);

            background-color: var(--tag-bg, red);

        }

        [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;
        padding: 0.5rem 1rem;
        background-color: var(--background-accent-main);
        border-radius: var(--border-radius-2);

        font-family: var(--ff-heading);
        font-size: var(--font-size-md);
        font-weight: 700;

        text-decoration: none;
        cursor: pointer;
    }

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

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

        display: grid;
        gap: 2rem;

        background-color: var(--background-dark);

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

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


    select,
    ::picker(select) {
        appearance: base-select;

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

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

    
}

@layer utilities {

    [hidden] {
        display: none;
    }

    /* Fixing the resizing issue: disable animations when resizing */
    /* .resizing * {
        transition: none;
        animation-play-state: paused;
    } */

    /* Meaningful links, assistive technologies  */
    .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    /* transform semantic custom properties (from @layer base ) to utility classes */

    /* add .text-center */
    .text-center {
        text-align: center;
    }
    .text-brand {
        color: var(--text-brand);
    }
    .text-high-contrast {
        color: var(--text-high-contrast);
    }

    /* add .section-title */
    .section-title {
        font-size: var(--font-size-heading-regular);
    }

    .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-regular);
    }
    .font-size-md {
        font-size: var(--font-size-md);
    }
    .font-size-lg {
        font-size: var(--font-size-lg);
    }
}