/*******************************************************************************
  * Pico CSS  - responsive nav
  * Grows vertically (mobile-first). Changes back to horizontal growth on higher
  * resolutions.
  *****************************************************************************/

:where(menu, [role="menu"]),
:where(menu, [role="menu"]) > [role="menuitem"] {
    flex-direction: column;
    position: relative;
}

@media (min-width: 576px) {
    :where(menu, [role="menu"]),
    :where(menu, [role="menu"]) > [role="menuitem"] {
        flex-direction: row;
    }
}

/*******************************************************************************
    * Pure CSS burger menu
    * Styles a parent + checkbox to look like 3 stacked lines when unchecked and
    * as a cross when checked. Includes animations.
    *****************************************************************************/

[data-role="burger"] {
    opacity: 1;
    cursor: pointer;
    border-radius: 10%;
    box-sizing: border-box;
    background-color: transparent;
    width: 28px;
    margin: 0;
    border: 0 solid var(--pico-h1-color);
    margin-top: -80px;
    padding: 10px;
    height: 45px;
    margin-right: 58px;
}

[data-role="burger"] > input[type="checkbox"] {
    height: 4px;
    width: 28px;
    border: none;
    background-color: var(--pico-h1-color);
    transition: all 0.2s ease-in-out;
    position: relative;
    margin-inline: 0;
    box-shadow: none;
}

[data-role="burger"] > input[type="checkbox"]:checked {
    background-image: none;
    background-color: transparent;
}

[data-role="burger"] > input[type="checkbox"]::before, [data-role="burger"] > input[type="checkbox"]::after {
    height: 4px;
    width: 28px;
    border-radius: 2px;
    background-color: var(--pico-h1-color);
    position: absolute;
    content: "";
    transition: all 0.2s ease-in-out;
}

[data-role="light"] input[type="checkbox"]::before, [data-role="light"] input[type="checkbox"]::after {
   background: #000; 
}

[data-role="burger"] > input[type="checkbox"]::before {
    top: -10px;
}

[data-role="burger"] > input[type="checkbox"]::after {
    top: 10px;
}

[data-role="burger"] > input[type="checkbox"]:checked::before {
    box-shadow: none;
    transform: rotate(45deg) translate(7px, 7px);
}

[data-role="burger"] > input[type="checkbox"]:checked::after {
    box-shadow: none;
    transform: rotate(-45deg) translate(7px, -7px);
}

/*******************************************************************************
  * Pure CSS toggle
  * Uses a checkbox to trigger rules and show/hide related elements.
  *****************************************************************************/

/* adjust menu for toggling */
:where(menu, [role="menu"]) {
    position: relative; /* anchor for children */
    /* needed otherwise it grows to fit all its children */
    max-height: calc(var(--pico-line-height) * 1em + var(--pico-nav-element-spacing-vertical)*2);
}

/* hide entries within menu */
:where(menu, [role="menu"]) > [role="menuitem"] {
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    position: relative;
}

/* show hidden items when burger is checked */
:where(menu, [role="menu"]):has(> label > input[type="checkbox"]:checked) > [role="menuitem"] {
    visibility: visible;
    opacity: 1;
    z-index: 9999;
}

/* position the menu button */
:where(menu, [role="menu"]) > label {
    position: absolute;
    right: 0;
    top: var(--pico-nav-element-spacing-vertical);
    padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
}

nav {
    height: 0;
    display: inherit;
    top: -28px;
}

@media (min-width: 576px) {
    /* hide menu button */
    :where(menu, nav[role="menu"]) > label {
        display: none;
    }

    /* show all elements */
    :where(menu, [role="menu"]) > [role="menuitem"] {
        visibility: visible;
        opacity: 1;
        display: flex;
        top: unset;
    }
}

@media (max-width: 576px) {
    nav {
        top: 0;
    }

    [data-theme="light"] nav > ul {
        background-color: rgb(235, 235, 235);
        border: 1px solid rgba(200, 200, 200, 0.4);
        border-radius: 10px;
        backdrop-filter: blur(5px);
    }

    [data-theme="dark"] nav > ul {
        background-color: #1a2436;
        border: 1px solid rgba(19, 22.5, 30.5, 0.4);
        border-radius: 10px;
        backdrop-filter: blur(5px);
    }

}