@font-face {
    font-family: 'Sunborn';
    src: url('/res/fonts/Sunborn-SansOne.otf');
}

:root {
    --button-bg: #cc3f00;
    --project-head-family: 'Sunborn', sans-serif;
    --project-body-family: 'Lato', sans-serif;
    --drop-shadow-color: var(--font-body-color);
    --drop-shadow-hover: var(--font-body-color);
    --hover-color: hsl(from var(--branding-color-1) h calc(s + 10) calc(l + 20));
    --gap: 1.5em;
}

::selection {
    background: var(--branding-color-1);
    color: var(--branding-color-1-fg);
}

header nav a, h1, h2, h3, h4, h5 {
    font-weight: normal;
    color: var(--branding-color-1);
    text-shadow: 0.06em 0.06em 0 var(--drop-shadow-color);
}

a {
    --_anchor-element-color: var(--branding-color-1);
    --_anchor-hover-color: var(--hover-color);
    --_anchor-visited-color: var(--branding-color-1);
}

body {
    margin: 2em;
    font-weight: 600;
    & > header {
        /* --gap: 1.5em; */
        display: flex;
        gap: var(--gap);
        background: unset;
        color: var(--branding-color-1);
        svg#dos-gatos-logo {
            height: 4em;
            width: auto;
            fill: var(--branding-color-1);
            filter: drop-shadow(.1em 0.1em 0 var(--drop-shadow-color));
            &:hover {
                fill: var(--hover-color);
            }
        }
        & nav {
            gap: var(--gap);
            ul {
                gap: var(--gap);
                li {
                    margin: 0;
                    padding: 0;
                    gap: var(--gap);
                    a {
                        font-family: var(--project-head-family);
                        font-size: x-large;
                        --_anchor-element-color: var(--branding-color-1);
                        --_anchor-hover-color: var(--hover-color);
                        --_anchor-visited-color: var(--branding-color-1);
                        &:hover {
                            text-shadow: 0.1em 0.1em 0 var(--issue-color-1);
                        }
                    }
                }
            }
        }
        a.button {
            margin-left: auto;
            margin-right: 0.2em;
        }
    }
}

a.floater.gift-cards.button {
    z-index: calc(var(--project-modal-z-index) - 1);
    i {
        font-weight: normal;
        font-size: 1.4em;
    }
}

.directory--group {
    a.navigation--current {
        box-shadow: none;
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color: currentColor;
    }
}

:where(h1, h2, h3, h4, h5) a {
    text-decoration-line: underline;
    /* text-decoration-style: wavy; */
    text-decoration-color: currentColor;
}

a.button.button.button,
.button.button.button
{
    background-color: var(--button-bg);
    color: white;
    font-family: var(--project-head-family);
    border: 0.1em solid var(--font-body-color);
    border-radius: 0.4em;
    box-shadow: 0.15em 0.15em 0 var(--font-body-color);
    padding: 0.5em 0.5em 0.3em;
    &:hover {
        /* color: black; */
        background-color: hsl(from var(--button-bg) h s calc(l + 10));
        box-shadow: 0.25em 0.25em 0 var(--font-body-color);
    }
}

.menu-items > ul {
    padding-bottom: 5lh;
    border-bottom: 5px ridge #cc3f00;
    margin-bottom: 5lh;
}

.menu-item {
    display: grid;
    grid-template-columns: 8lh 1fr 7lh;
    gap: 1.5em;
    margin: 1em;
    a:has(img), img {
        display: block;
        height: 8lh;
        width: 8lh;
        object-fit: cover;
        
    }
    & > div {
        width: 100%;
        h3 {
            margin-bottom: 0;
        }
    }
}

.main-slideshow {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(7, 1fr);
    .dish-image {
        grid-column: 1 / span 4;
        max-height: 80vh;
        object-fit: cover;
    }
    .dish-blurb {
        grid-column: 5 / span 3;
    }
    .slideshow-controls {
        button {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border: none;
            background: unset;
            fill: var(--branding-color-1);
            filter: drop-shadow(0.1em 0.1em 0 var(--issue-color-1));
            cursor: pointer;
            &:hover {
                border: none;
                background: unset;
                fill: var(--hover-color);
                filter: drop-shadow(0.1em 0.1em 0 var(--issue-color-1));
            }
            /* svg {
            } */
        }
    }
    @media only screen and (max-width: 35em) {
        display: flex;
        flex-direction: column;
    }
}

slide-show img.dish-image {
    margin-right: var(--gap);
}

main > h1:first-of-type {
    text-align: center;
}

.event-listing--no-results {
    text-align: center;
}

.dingus:after {
    content: "       ";
    text-decoration: wavy;
    color: var(--branding-color-1);
    
}


@media only screen and (max-width: 35em) {
    #app-header {
        /* width: 100%; */
        /* height: 100vh; */
        /* position: absolute;
        left: 0;
        top: 0; */
        background: rgb(0 0 0 / .9);
        backdrop-filter: blur(8px);
        left: 0;
        nav ul {
            display: flex;
            flex-direction: column;
        }
        a.button.button.button {
            margin: 0 auto;
        }
    }
}