/* J. Louis - Flutes tour-owned branding and Panotour-parity presentation. */

@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    font-display: swap;
    src: url('media/fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Cormorant Infant';
    font-weight: 400;
    font-display: swap;
    src: url('media/fonts/CormorantInfant-Regular.ttf') format('truetype');
}

:root {
    --font-primary: 'Roboto', Arial, sans-serif;
    --primary-color: #7d6a59;
    --primary-color-rgb: 125, 106, 89;
}

/* J. Louis - Give only Flutes' controls a frosted-white surface with black iconography. */
section[btns] my-btn,
section[btns][mice] my-btn {
    --glass-shadow-hover: 0 0 1.5rem 0.35rem rgba(255, 255, 255, 0.68),
                          0 0.5rem 1.8rem rgba(0, 0, 0, 0.24),
                          inset 0 1px 0 rgba(255, 255, 255, 0.92);
    background-color: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(16px) saturate(180%) brightness(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.15);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

section[btns] my-btn svg .icon,
section[btns] my-btn svg .icon2,
section[btns][common] my-btn svg *,
section[btns][mice] my-btn svg path,
section[btns][mice] my-btn svg rect {
    fill: #000000;
}

aside > my-btn.open,
aside > my-btn.close {
    color: #000000;
    text-shadow: none;
    background-color: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(16px) saturate(180%) brightness(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.15);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

@media (hover: hover) and (pointer: fine) {
    aside > my-btn.open:hover,
    aside > my-btn.close:hover {
        text-shadow: none;
        box-shadow: 0 0 1.5rem 0.35rem rgba(255, 255, 255, 0.68),
                    0 0.5rem 1.8rem rgba(0, 0, 0, 0.24),
                    inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }
}

/* J. Louis - Keep the tall Flutes mark restrained in both desktop and responsive menus. */
body.menu-top section[ui] > section[logo] img {
    width: 10.5rem;
    max-height: 10rem;
    object-fit: contain;
}

aside section[logo] img {
    width: 14rem;
    max-height: 14rem;
    object-fit: contain;
}

/* J. Louis - Recreate the transparent published top navigation with a fine active outline. */
body.menu-top top-menu {
    height: auto;
    gap: 0.5rem;
    border-radius: 0;
    background-color: transparent;
}

body.menu-top top-menu top-menu-item top-menu-item-title {
    padding: 1.15rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 0;
    background-color: transparent;
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

body.menu-top top-menu top-menu-item:hover > top-menu-item-title,
body.menu-top top-menu top-menu-item.open > top-menu-item-title,
body.menu-top top-menu top-menu-item:has(acc-menu-item.active) > top-menu-item-title {
    border-color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.08);
}

body.menu-top top-menu top-menu-item > top-menu-item-title::after {
    display: none;
}

/* J. Louis - Keep dropdown scene names legible over the bright Flutes interiors. */
body.menu-top top-menu acc-menu > acc-menu-item-children {
    border: 0;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.94);
}

body.menu-top top-menu top-menu-item top-menu-item-menu acc-menu::before {
    border-color: transparent transparent rgba(255, 255, 255, 0.94) transparent;
}

body.menu-top top-menu acc-menu acc-menu-item > acc-menu-item-title {
    color: #292929;
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 1.55rem;
    font-weight: 400;
    text-transform: uppercase;
}

body.menu-top top-menu acc-menu acc-menu-item > acc-menu-item-title:hover,
body.menu-top top-menu acc-menu acc-menu-item > acc-menu-item-title:focus,
body.menu-top top-menu acc-menu acc-menu-item.active > acc-menu-item-title {
    background-color: rgba(125, 106, 89, 0.13);
}

/* J. Louis - Restore the legacy white description card and serif scene heading. */
my-description::before,
#description-caret {
    background-color: rgba(255, 255, 255, 0.9);
}

my-description div.title-stage my-description-title,
my-description my-description-text {
    color: #272727;
}

my-description div.title-stage my-description-title {
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 2.6rem;
}

my-description my-description-text {
    font-size: 1.45rem;
    line-height: 1.45;
}

/* J. Louis - Present the opening photo cleanly while keeping the white source logo visible. */
#splash_screen > div:not(.splash_overlay):not(#splash_spinner) img {
    filter: drop-shadow(0 0.2rem 0.6rem rgba(0, 0, 0, 0.55));
}

#splash_screen > div:not(.splash_overlay):not(#splash_spinner) button {
    border-radius: 0;
    background: rgba(20, 20, 20, 0.62);
    font-family: 'Cormorant Infant', Georgia, serif;
    letter-spacing: 0.12em;
}

/* J. Louis - Keep Flutes' four-dot group aligned with the three standard navigation controls. */
@media screen and (min-width: 501px) {
    section[nav_dots],
    #group-title {
        right: 15rem;
    }
}

/* J. Louis - Give the responsive drawer a quiet dark surface over pale panorama regions. */
@media screen and (max-width: 1100px) {
    body.aside aside {
        background-color: rgba(32, 29, 26, 0.9) !important;
    }
}

@media screen and (max-width: 500px) {
    /* J. Louis - Give the tall Flutes mark more presence in the mobile drawer without changing core sizing. */
    aside section[logo] img {
        width: 16rem;
        max-height: 16rem;
        transform: none;
    }

    body.descr my-description,
    body.descr #description-caret {
        background-color: rgba(255, 255, 255, 0.96);
    }

    body.descr my-description div.title-stage my-description-title,
    body.descr my-description my-description-text {
        color: #272727 !important;
    }
}