$transition: 280ms all 120ms ease-out;

header {
    background: $background_accent_1;
    top: 0;
    box-shadow: 0px -10000px 0px 10000px $background_accent_1;
    h1 a, h1 a:hover, h1 a:link, h1 a:visited {
        font-family: $headline_font, sans-serif;
        color: $font_accent_1;
        margin: 0;
        font-weight: bold;
        font-size: $font_size_h1;
        text-decoration: none;
    }
    nav {
        grid-template-rows: auto 1fr auto;
        padding: 0 1rem;
        position: sticky;
        display: grid;
        place-items: flex-start;
        margin-left: -25px;
        .title_dropdown {
            background-color: transparent;
            border: none;
            font-family: inherit;
        }
        > ul {
            grid-auto-flow: column;
            > li {
                margin: 0 0.5rem;

                a, .title_dropdown {
                    text-decoration: none;
                    text-align: center;
                    display: inline-block;
                    color: #fff;
                    font-size: 1.125rem;

                    &:focus {
                        outline: none;
                    }
                }

                > a, .title_dropdown {
                    padding: 1rem 0.5rem;
                    border-top: 3px solid transparent;
                    transition: $transition;

                    &:hover, &:focus {
                        border-top-color: $menu_accent_hover;
                        color: $menu_accent_hover;
                    }
                }
            }
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;

            li {
                padding: 0;
            }
        }
    }

    .dropdown {
        position: relative;

        .title_dropdown {
            display: inline-flex;
            align-items: center;

            &:after {
                 content: "";
                 border: 0.35rem solid transparent;
                 border-top-color: rgba(#fff, 0.45);
                 margin-left: 0.25em;
                 transform: translateY(0.15em);
            }
        }

        .dropdown__menu {
            position: absolute;
            min-width: 15ch;
            left: 50%;
            top: calc(100% - 0.25rem);
            transition: $transition;
            transform: rotateX(-90deg) translateX(-50%);
            transform-origin: top center;
            visibility: hidden;
            opacity: 0.3;
            padding: 0.5em 0;
            background-color: $menu_background_dropdown_color;
            border-radius: 4px;
            box-shadow: 0 0.15em 0.25em rgba(black, 0.25);

            a {
                color: $font_menu;
                display: block;
                padding: 0.5em;
                opacity: 0;
                transition: $transition;

                &:hover {
                    background-color: $background_accent_1;
                }

                &:focus {
                    outline: none;
                    background-color: $background_accent_1;
                }
            }
        }

        &:after {
            content: "";
            border: 0.5rem solid transparent;
            border-bottom-color: $menu_background_dropdown_color;
            position: absolute;
            top: calc(100% - 1.25rem);
            left: 50%;
            transform: translateX(-50%);
            transition: $transition;
            opacity: 0;
            will-change: opacity;
        }

        &:hover, &:focus-within {
            .title_dropdown {
                border-top-color: $menu_accent_hover;
            }

            .dropdown__menu {
                opacity: 1;
                transform: rotateX(0) translateX(-50%);
                visibility: visible;

                a {
                    opacity: 1;
                }
            }

            &:after {
                opacity: 1;
            }
        }


        p {
            font-size: 1.125rem;
            line-height: 1.5;
        }
    }
}


// header {
//     margin: -25px -25px 0px -25px;
//     background: $background_accent_1;
//     padding: 20px 30px;
//     box-shadow: 5px 5px 5px 10px $background_accent_1;
//     h1 a, h1 a:hover, h1 a:link, h1 a:visited {
//         font-family: $headline_font, sans-serif;
//         color: $font_accent_1;
//         margin: 0;
//         font-weight: bold;
//         font-size: $font_size_h1;
//         text-decoration: none;
//     }
//     nav ul {
//         list-style: none;
//         margin: 0;
//         padding: 0;
//         display: inline;
//         position: relative;
//         li {
//             margin: 0 8px 0 0;
//             padding: 0;
//             a, a:link, a:visited {
//                 font-size: $font_size_default;
//                 color: $font_accent_2;
//                 text-decoration: none;
//                 background: $shadow_accent_1;
//                 padding: 8px 24px;
//                 border-radius: 5px;
//                 text-transform: $menu_text_transform;
//             }
//             a:hover, a:active {
//                 color: $font_accent_2_hover;
//                 box-shadow: 0px 0px 1px 1px $shadow_accent_1;
//             }
//             ul li {
//                 display: none;
//                 position: absolute;
//                 background: green;
//             }
//         }
//     }
// }

// @media (min-width: $large_view) {
//     header {
//         max-width: $large_min_width;
//         margin: auto;
//         box-shadow: 0px -10000px 0px 10000px $background_accent_1;
//         h1 a, h1 a:hover, h1 a:link {
//             font-size: $font_size_h1_large;
//         }
//         nav ul {
//             font-size: $font_size_default_large;
//         }
//     }
// }
//
// @media (max-width: $mobile_view) {
//     header {
//         h1 a, h1 a:hover, h1 a:link {
//             font-size: $font_size_h1_mobile;
//         }
//         nav ul {
//             font-size: $font_size_default_mobile;
//             a, a:link, a:visited {
//                 display: block;
//                 padding: 5px 8px;
//                 margin: -6px 0px;
//             }
//         }
//     }
// }
// 
// @media (max-width: $tiny_view) {
//     header {
//         h1 a, h1 a:hover, h1 a:link {
//             font-size: $font_size_h1_tiny;
//         }
//         nav ul {
//             font-size: $font_size_default_tiny;
//         }
//     }
// }
// 
// @media (max-width: $pico_view) {
//     header {
//         h1 a, h1 a:hover, h1 a:link {
//             font-size: $font_size_h1_pico;
//         }
//     }
// }