:root {
    --foreground: #FFFFFF;
    --background: #F4F5F8;
    --text-header: #000000;
    --text-paragraph: #191919;
    --accent: #3F5FFF;

    --border: #EAEAEA 1px solid;
    --border-color: #EAEAEA;

    --spacing-s: 8px;
    --spacing-m: 16px; 
    --spacing-l: 32px;
    --spacing-xl: 64px;
}

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

h1, h2, h3, h4, h5, h6 {
    color: var(--text-header);
}

h5 {
    padding-left: 8px;
    border-left: var(--accent) 12px solid;
    padding-block: 4px;
}

p, small, a {
    color: var(--text-paragraph);
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

section {
    padding-top: 64px;
}

/* 
    CLASSES
*/

.container {
    max-width: 1440px;
    margin-inline: auto;
}

.highlighted {
    color: var(--accent);
}

.primary-button {
    background-color: var(--accent);
    color: var(--foreground);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 12px 32px;
    border-radius: 16px;
    transition: box-shadow 0.2s;

    img {
        height: 32px;
        width: auto;
        transition: transform 0.2s;
    }
}

.ghost-button {
    border: var(--accent) 3px solid;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 12px 32px;
    border-radius: 16px;
    transition: box-shadow 0.2s;

    img {
        height: 32px;
        width: auto;
        transition: transform 0.2s;
    }
}

.primary-button:hover,
.ghost-button:hover {
    box-shadow: var(--accent) 0 0 8px;

    img[src*="arrow-right"] {
        transform: translateX(8px);
    }
}

/* 
    NAV
*/

nav {
    border-bottom: var(--border);

    > button {
        margin-left: 16px;
        img {
            height: 48px;
        }
    }

    ul {
        display: none;
        flex-direction: column;
        list-style: none;
        padding-block: 24px;

        button {
            background: none;
            border: none;
            transition: background-color 0.2s;
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: clamp(1.2rem, 1.154rem + 0.231vi, 1.333rem);
        }

        button:hover {
            background-color: var(--background);
        }
    }
}

@media (min-width: 1080px) {
    nav {
        > button {
            display: none;
        }

        ul {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }
    }
}

/* 
    HERO SECTION
*/

#hero-section {
    display: flex;
    padding-top: 0;

    div {
        padding: 64px 32px;

        p {
            padding-block: 32px 64px;
        }

        i {
            font-weight: 500;
        }
    }

    > img {
        display: none;
    }
}

@media (min-width: 1080px) {
    #hero-section {
        min-height: 75dvh;

        div {
            p {
                max-width: 70%;
            }
        }
    
        img {
            display: block;
            max-width: 35%;
            object-fit: cover;
        }
    }
}

/* 
    FEATURES SECTION
*/

#features-section {
    background-color: var(--background);
    border-top: var(--border);
    padding: 32px;

    #features-grid {
        display: grid;

        .features-image {
            padding-block: 64px;

            img {
                object-fit: cover;
                width: 100%;
                height: 400px;
                box-shadow: 16px 16px var(--accent);
                border-radius: 16px;
            }
        }

        .features-image:nth-of-type(3) {  /* WTF? */
            img {
                box-shadow: -16px 16px var(--accent);; /* Switch shadow side */
            }
        }

        .features-text {
            p {
                padding-top: 32px;
            }

            button {
                margin-top: 32px;
            }
        }
    }
}

@media (min-width: 1080px) {
    #features-section {
        padding: 64px;

        #features-grid {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 1fr);
    
            .features-image {
                padding-inline: 0 64px;
            }
    
            .features-image:nth-of-type(3) {  /* WTF? */
                order: 2;
                padding-inline: 64px 0; /* Switch padding side */
    
                img {
                    box-shadow: -16px 16px var(--accent); /* Switch shadow side */
                }
            }

            .features-image:nth-of-type(5) {
                order: 5;
            }
    
            .features-text {
                padding-block: 64px;
                padding-inline: 64px 0;
            }
    
            .features-text:nth-of-type(4) {
                order: 1;
                padding-inline: 0 64px; /* Switch padding side */
            }

            .features-text:nth-of-type(6) {
                order: 6;
            }
        }
    }
}

/* 
    ABOUT ME
*/

#about-me-section {
    padding: 64px 32px;

    #about-me-grid {
        display: grid;
        padding-top: 32px;

        > div {
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                padding-block: 32px;
                text-align: center;
            }

            a {
                display: flex;
                align-items: center;
                gap: 16px;
                padding-bottom: 8px;
                cursor: pointer;

                img {
                    width: 24px;
                }
            }
        }

        > img {
            aspect-ratio: 1 / 1;
            width: 50%;
            object-fit: cover;
            border-radius: 100vh;
            margin-bottom: 32px;
            margin-inline: auto;
        }
    }
}

@media (min-width: 1080px) {
    #about-me-section {
        #about-me-grid {
            grid-template-columns: repeat(2, 1fr);
    
            > div {
                border-right: var(--border-color) 2px solid;
                align-items: flex-start;

                p {
                    padding-right: 32px;
                    text-align: left;
                }
            }
    
            > img {
                margin: auto;
                order: 1;
            }
        }
    }
}

/* 
    CONTACT
*/

#contact-section {
    background-color: var(--background);
    padding-inline: 32px;

    #contact-section__grid {
        display: grid;
    
        > img {
            display: none;
        }
    
        form {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding-bottom: 64px;
    
            h5 {
                margin-left: 0;
                margin-bottom: 32px;
            }

            input[type="text"], input[type="email"], textarea, input[type="checkbox"] {
                padding: 4px 8px;
                border-radius: 8px;
                border: var(--border-color) 2px solid;
            }

            input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
                outline: var(--accent) 3px solid;
            }
    
            input[type="text"], input[type="email"] {
                width: 100%;
                margin-bottom: 16px;
            }

            textarea {
                resize: none;
                width: 100%;
                flex-grow: 1;
                min-height: 200px;
            }

            input[type="checkbox"] {
                margin-block: 16px;
                margin-right: 16px;
                vertical-align: middle;
            }

            button {
                align-self: flex-end;
                margin-top: 32px;
            }

            label {
                cursor: pointer;
            }

            .missing {
                outline: red 2px solid;
            }
        }
    }
}

@media (min-width: 1080px) {
    #contact-section {
        #contact-section__grid {
            grid-template-columns: repeat(2, 1fr);
        
            > img {
                display: block;
                height: 400px;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                margin-inline: auto;
                margin-bottom: 64px;
                border-radius: 16px;
                box-shadow: 16px 16px var(--accent);
            }
        
            form {
                padding-left: 64px;
            }
        }
    }
}

/* 
    DIRECTIONS
*/

#directions-section {
    h5 {
        margin-left: 32px;
    }

    #directions-section__grid {
        display: grid;
        margin-top: 64px;

        > div {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 32px;
            border: var(--border-color) 1px solid;

            p {
                flex-grow: 2;
                padding-block: 16px 32px;
            }

            a {
                text-decoration: none;
            }

            > button {
                margin-left: auto;
            }
        }

        iframe {
            border: none;
            width: 100%;
            height: 300px;
        }

        .modal {
            margin-top: 64px;
            border: none;
            border-radius: 16px;
            max-width: 80%;
            max-height: 85dvh;

            > img {
                max-height: 70dvh;
                width: 100%;
                object-fit: fit;
            }

            div {
                display: grid;
                padding: 16px;
                gap: 16px;

                button {
                    width: 100%;
                }
            }
        }
    }
}

@media (min-width: 1080px) {
    #directions-section__grid {
        grid-template-columns: repeat(2, 1fr);
        padding-inline: 32px;

        .modal {
            div {
                grid-template-columns: repeat(3, 1fr);
                gap: 32px;
            }
        }
    }
}

/* 
    FAQ SECTION
*/

#faq-section {
    margin-bottom: 128px;
    padding-inline: 32px;

    h5 {
        margin-bottom: 64px;
    }

    .faq-question:last-of-type {
        border-bottom: var(--border-color) 1px solid;
    }

    .faq-question {
        border-top: var(--border-color) 1px solid;

        h4 {
            padding-block: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;

            img {
                width: 28px;
            }
        }

        p {
            display: none;
            padding-bottom: 16px;
        }
    }
}

/* 
    FOOTER
*/

footer {
    background-color: var(--accent);
    padding: 32px;

    #footer__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;

        h6 {
            color: var(--foreground);
            padding-bottom: 16px;
        }

        small {
            color: var(--foreground);
        }
    }

    #footer__subline {
        border-top: var(--foreground) 1px solid;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 32px;

        small, a {
            color: var(--foreground);
            padding-top: 16px;
        }
    }
}

@media (min-width: 1080px) {
    footer {
        border-radius: 32px 32px 0 0;
    
        #footer__grid {
            grid-template-columns: repeat(2, 1fr) 2fr;
        }

        #footer__subline {
            flex-direction: row;
        }
    }
}