/* Local stylesheet contains only classes and provides special behaviors */


.masthead {
    align-items: baseline;
    background-color: var(--grime);
    display: flex;
    justify-content: space-between;
    position: relative;

    .site-branding {
        align-items: center;
        display: flex;
        gap: 1rem;
    }
    .site-logo {
        font-size: 3rem;
        margin-inline-end: 0.5rem;
    }
    .site-motto {
        color: var(--hushed);
        font-family: var(--monospace);
    }
}
.page-header {
}
.page-main {
}
.page-footer {
}

/* Footer navigation */
.footer-nav {
}
.footer-menu {
}

/* Content blocks */
.block {
}
.embed {
}
.custom-rich-text {
}
.custom-image {
    .caption {
    }
}
.credited-image {
    .image-credit {
    }
}
.placeholder-image {
}

/* Details/summary */
.details-content {
}

/* Forms */
.form-element {
}

/* Responsive object for use with WAGTAILEMBEDS_RESPONSIVE_HTML */
.responsive-object {
    position: relative;
    & iframe,
    & object,
    & embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.masthead-nav {
    --bar-h: 2px;
    --bar-gap: 6px;
    --bar-w: 1.5rem;
    --nav-bg: var(--loud);

    .masthead-nav-toggle {
        align-items: center;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: var(--bar-gap);
        padding: 0.5rem;
    }

    .hamburger-bar {
        background-color: var(--nav-bg);
        border-radius: 1px;
        display: block;
        height: var(--bar-h);
        transition:
            opacity var(--transition-speed)
                var(--transition-timing-function),
            transform var(--transition-speed)
                var(--transition-timing-function);
        width: var(--bar-w);
    }

    &:has(.masthead-nav-toggle[aria-expanded="true"]) {
        .masthead-nav-toggle {
            background-color: color-mix(
                in srgb, var(--nav-bg) 65%, transparent
            );
            backdrop-filter: blur(10px);
        }
        .hamburger-bar {
            background-color: var(--silent);
        }
        .hamburger-bar:nth-child(1) {
            transform: translateY(
                calc(var(--bar-gap) + var(--bar-h))
            ) rotate(45deg);
        }
        .hamburger-bar:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        .hamburger-bar:nth-child(3) {
            transform: translateY(
                calc(-1 * (var(--bar-gap) + var(--bar-h)))
            ) rotate(-45deg);
        }
    }

    .masthead-menu {
        background-color: color-mix(in srgb, var(--nav-bg) 65%, transparent);
        backdrop-filter: blur(10px);
        box-shadow: 0 0.5rem 0 rgba(0, 0, 0, 0.35);
        display: none;
        inset-inline: 0;
        margin: 0;
        position: absolute;
        top: 100%;
        z-index: 100;
        a {
            border-block-end: 1px solid
                color-mix(in srgb, var(--silent) 20%, transparent);
            color: var(--silent);
            display: block;
            font-family: var(--monospace);
            font-size: 1.1rem;
            font-weight: 600;
            padding: 0.5rem 1rem;
            text-decoration: none;

            &:last-child {
                border-block-end: none;
            }
            &:hover {
                background-color:
                    color-mix(in srgb, var(--silent) 10%, transparent);
            }
        }
    }

    &:has(.masthead-nav-toggle[aria-expanded="true"]) .masthead-menu {
        display: block;
    }

    .submenu {
        background-color:
            color-mix(in srgb, var(--silent) 10%, transparent);
        display: none;
        margin-inline-start: 0;
    }

    li.is-open > .submenu {
        display: block;
    }

    .masthead-submenu-toggle {
        --chevron-size: 0.4em;
        border: none;
        color: var(--silent);
        cursor: pointer;
        display: inline-block;
        padding: 0.25em;

        &::after {
            border-color: currentColor;
            border-style: solid;
            border-width: 0 2px 2px 0;
            content: "";
            display: inline-block;
            height: var(--chevron-size);
            transform: rotate(45deg);
            transition: transform var(--transition-speed)
                var(--transition-timing-function);
            vertical-align: middle;
            width: var(--chevron-size);
        }

        &[aria-expanded="true"]::after {
            transform: rotate(-135deg);
        }
    }
}

.breadcrumbs {
    menu {
        align-items: baseline;
        column-gap: 1rem;
        display: flex;
        flex-wrap: wrap;
        li {
            white-space: nowrap;
        }
    }
    .breadcrumbs-menu {
    }
    .breadcrumb {
    }
}

/* Star rating widget */
.star-rating {
    --star-filled: var(--hero);
    --star-empty: var(--whisper);

    display: inline-flex;
    font-family: var(--sans-serif);
    gap: 0.05em;
    line-height: 1;
    vertical-align: middle;

    & .star-rating-meter {
        clip: rect(0, 0, 0, 0);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    & .star {
        background: linear-gradient(
            to right,
            var(--star-filled) var(--fill, 0%),
            var(--star-empty) var(--fill, 0%)
        );
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }

    &.star-rating--unrated {
        color: var(--hushed);
    }
}


/* Scene cards */
.scene-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
}
.scene-card {
    background-color: color-mix(in srgb, var(--quiet) 50%, transparent);
    border: var(--border-width) solid var(--whisper);
    border-radius: var(--border-radius);
    color: inherit;
    display: block;
    padding: 0.75rem;
    text-decoration: none;
    transition:
        background-color var(--transition-speed)
        var(--transition-timing-function),
        border-color var(--transition-speed)
        var(--transition-timing-function);
    width: 100%;
    &:hover {
        background-color: var(--quiet);
    }
    &:visited, &:link {
        color: inherit;
    }
    &.highlighted {
        border-color: var(--loud);
        background-color: var(--quiet);
    }
}
.scene-card-top {
    align-items: baseline;
    display: flex;
    gap: 0.25rem 0.5rem;
}
.scene-card-name {
    flex-grow: 1;
    font-family: var(--monospace);
    font-weight: var(--bold-weight);
}
.scene-card-distance {
    color: var(--hushed);
    font-size: 0.8rem;
    text-wrap: nowrap;
}
.scene-card-vibe {
    flex-shrink: 0;
    margin-inline-start: auto;
}
.scene-card-meta {
    margin-block: 0.2rem 0;
}
.scene-card-address {
    color: var(--hushed);
    font-size: 0.8rem;
    margin-block: 0.2rem 0;
}
.scene-card-hours {
    color: var(--hushed);
    font-size: 0.8rem;
    margin-block: 0.2rem 0;
}
.scene-card-notes {
    color: var(--hushed);
    font-size: 0.8rem;
    line-height: 1.4;
    margin-block: 0.35rem 0;
}

/* Chips */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.chip {
    background-color: var(--hushed);
    border-radius: 2px;
    color: var(--truesilent);
    display: inline-block;
    font-family: var(--monospace);
    font-size: var(--smaller-font-size);
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    text-transform: uppercase;
    &.success {
        background-color: var(--success);
    }
    &.warning {
        background-color: var(--warning);
    }
    &.danger {
        background-color: var(--danger);
    }
    &.highlight {
        background-color: var(--highlight);
    }
    &.info {
        background-color: var(--info);
    }
}

/* buttons */
.button {
    --base-color: var(--loud);
    --highlight-color: color-mix(in srgb, var(--base-color) 60%, transparent);
    --active-color: var(--trueloud);
    --highlight-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight-color) 20%, transparent);
    background-color: var(--base-color);
    border: 2px solid var(--silent);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--highlight-color);
    display: inline-block;
    font-family: var(--monospace);
    font-weight: var(--bold-weight);
    margin: 0.1rem;
    padding: 0.325rem 0.75rem;
    text-decoration: none;
    transition-duration: var(--transition-speed);
    transition-property: background-color, box-shadow, color, transform;
    transition-timing-function: var(--transition-timing-function);
    &:link, &:visited {
        color: var(--truesilent);
    }
    &:hover {
        background-color: var(--highlight-color);
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--highlight-color) 20%, transparent);
        transform: translateY(4px) translateX(4px);
    }
    &:active {
        background-color: var(--active-color);
        box-shadow: var(--highlight-shadow);
    }
    &.success {
        --base-color: var(--success);
    }
    &.warning {
        --base-color: var(--warning);
    }
    &.danger {
        --base-color: var(--danger);
    }
    &.highlight {
        --base-color: var(--highlight);
    }
    &.info { 
        --base-color: var(--info);
    }
}

/* marks */
/* overloads a base style in base.css */
mark {
    background-color: color-mix(in srgb, var(--hushed) 20%, transparent);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    padding: 0.1rem 0.3rem;
    &.good, &.success {
        background-color: color-mix(in srgb, var(--success) 20%, transparent);
        color: color-mix(in srgb, var(--success) 30%, var(--loud));
    }
    &.warn, &.warning {
        background-color: color-mix(in srgb, var(--warning) 20%, transparent);
        color: var(--warning);
    }
    &.bad, &.danger {
        background-color: color-mix(in srgb, var(--danger) 20%, transparent);
        color: var(--danger);
    }

    &.bad, &.highlight {
        background-color: color-mix(in srgb, var(--highlight) 20%, transparent);
        color: color-mix(in srgb, var(--highlight) 30%, var(--loud));
    }
    &.info {
        background-color: color-mix(in srgb, var(--info) 20%, transparent);
        color: var(--info);
    }
}

.is-highlighted { background-color: var(--yellow); }

/* Stylesheet colors */
.fg-hero { color: var(--hero); }
.fg-grime { color: var(--grime); }
.fg-grunge { color: var(--grunge); }
.fg-moss { color: var(--moss); }
.fg-shag { color: var(--shag); }
.fg-glorp { color: var(--glorp); }
.fg-marooned { color: var(--marooned); }
.fg-burple { color: var(--burple); }
.fg-success { color: var(--success); }
.fg-warning { color: var(--warning); }
.fg-danger { color: var(--danger); }
.fg-highlight { color: var(--highlight); }
.fg-info { color: var(--info); }
.fg-trueloud { color: var(--trueloud); }
.fg-loud { color: var(--loud); }
.fg-hushed { color: var(--hushed); }
.fg-whisper { color: var(--whisper); }
.fg-quiet { color: var(--quiet); }
.fg-silent { color: var(--silent); }
.fg-truesilent { color: var(--truesilent); }
.bg-hero { background-color: var(--hero); }
.bg-grime { background-color: var(--grime); }
.bg-grunge { background-color: var(--grunge); }
.bg-moss { background-color: var(--moss); }
.bg-shag { background-color: var(--shag); }
.bg-glorp { background-color: var(--glorp); }
.bg-marooned { background-color: var(--marooned); }
.bg-burple { background-color: var(--burple); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-danger { background-color: var(--danger); }
.bg-highlight { background-color: var(--highlight); }
.bg-info { background-color: var(--info); }
.bg-trueloud { background-color: var(--trueloud); }
.bg-loud { background-color: var(--loud); }
.bg-hushed { background-color: var(--hushed); }
.bg-whisper { background-color: var(--whisper); }
.bg-quiet { background-color: var(--quiet); }
.bg-silent { background-color: var(--silent); }
.bg-truesilent { background-color: var(--truesilent); }

/* TODO unsorted */

iconify-icon {
    display: inline-block;
}