// Handles the unified rules for the search and nav menus, as well as the footer, user options and page options.

#site-header-search-bar,
.site-nav-menu {
    border-radius: calc(var(--space) / 2);
    background: linear-gradient(120deg, var(--blue-5), var(--blue-6) 80%);
    box-shadow: inset 0 0 3px .5px var(--blue-3), 0 0 3px .1px var(--blue-7);
    border-top: 2px solid var(--blue-3);

    @media (prefers-color-scheme: dark) {
        background: linear-gradient(120deg, var(--blue-3), var(--blue-2) 80%);
        border-top: 2px solid var(--blue-4);
    }
}

.site-header-user button,
#site-header-user-links,
#page-header-options-links,
#site-footer {
    background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));

    @media (prefers-color-scheme: dark) {
        background-image: linear-gradient(240deg, var(--blue-2), var(--blue-3));
    }
}

#site-header-user-links,
#page-header-options-links {
    display: none;
    position: absolute;
    margin-top: calc(var(--space) / 2);
    box-shadow: 0 0 3px 1px var(--blue-7);
    z-index: 12;
    right: 0;
    border: 2px solid var(--blue-3);

    @media (prefers-color-scheme: dark) {
        box-shadow: 0 0 3px 1px var(--blue-1);
        border: 2px solid var(--blue-2);
    }
}

.site-header-user:focus-within #site-header-user-links,
#page-header-options:focus-within #page-header-options-links {
    display: flex;
}

.drop-link-list {
    display: flex;
    gap: var(--space);
    flex-direction: column;
    padding: var(--space);
    width: max-content;
}

.drop-link-list a:link,
.drop-link-list a:visited  {
    color: var(--blue-7);
    text-shadow: 0 0 3px var(--blue-1);
}