/* J. Louis - Raffles Singapore tour-owned branding and source-matched menu treatment. */

@font-face {
    font-family: "Raffles Raleway";
    src: url("media/fonts/raleway-medium.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

body {
    --primary-color: #4c4944;
    --primary-color-rgb: 76, 73, 68;
    --secondary-color: #8b8781;
    --secondary-color-rgb: 139, 135, 129;
    --menu-width: 21rem;
    --logo-height: 14.8rem;
}

/* J. Louis - Recreate the original transparent panel geometry while retaining the shared aside controller. */
aside {
    width: 21rem;
    max-height: calc(100% - 0.5rem);
    margin: 0.5rem 0 0 2rem;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
}

aside::before {
    display: none !important;
}

aside > my-btn.close {
    top: 1rem;
    transform: translateX(1rem);
}

aside > my-btn.open {
    transform: translateX(2rem);
}

/* J. Louis - Use the source tour's persistent hamburger glyph for the open panel control. */
aside > my-btn.close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    font-size: 0;
}

aside > my-btn.close::before {
    content: "";
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M2%203.5h20M2%2012h20M2%2020.5h20'%20fill='none'%20stroke='black'%20stroke-width='2.4'%20stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M2%203.5h20M2%2012h20M2%2020.5h20'%20fill='none'%20stroke='black'%20stroke-width='2.4'%20stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* J. Louis - Match the original 210 by 148 pixel logo card and centered Raffles mark. */
aside section[logo] {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 21rem;
    height: 14.8rem;
    margin: 0 0 0.1rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
    border: 0.1rem solid #4c4944;
    border-radius: 0.5rem;
}

aside section[logo] img {
    width: 12.5rem;
    height: 12.6rem;
    object-fit: contain;
    transform: none;
}

/* J. Louis - Keep accordion behavior but present its single group as the source tour's flat card list. */
aside nav,
aside section[menu] {
    width: 19rem;
    overflow: visible;
}

aside nav {
    margin: 0 0 0 1rem;
}

aside section[menu] {
    display: block;
    margin: 0;
}

aside section[menu] #sa_menu {
    width: 19rem;
    max-height: calc(100vh - 15.4rem);
    border: 0;
    border-radius: 0;
    overflow-x: hidden;
    scrollbar-width: none;
}

aside section[menu] #sa_menu::-webkit-scrollbar,
aside section[menu] scroll-bar {
    display: none;
}

aside acc-menu,
aside acc-menu acc-menu-group,
aside acc-menu acc-menu-group > acc-menu-item-children {
    width: 19rem;
    overflow: visible;
    background: transparent;
}

aside acc-menu > acc-menu-item-children > acc-menu-group > acc-menu-item-title {
    display: none;
}

aside acc-menu acc-menu-group.open > acc-menu-item-children {
    opacity: 1;
    transform: none;
}

aside acc-menu acc-menu-item > acc-menu-item-title {
    box-sizing: border-box;
    justify-content: center;
    width: 19rem;
    height: 5rem;
    margin: 0 0 0.1rem;
    padding: 0 1rem !important;
    background: rgba(255, 255, 255, 0.9);
    border: 0.1rem solid #4c4944;
    border-radius: 0.5rem;
    color: #4c4944;
    font-family: "Raffles Raleway", Raleway, Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

aside acc-menu acc-menu-item:not(:last-child) > acc-menu-item-title {
    border-bottom: 0.1rem solid #4c4944;
}

aside acc-menu acc-menu-item.active > acc-menu-item-title,
aside acc-menu acc-menu-item > acc-menu-item-title {
    background: rgba(255, 255, 255, 0.9);
    color: #4c4944;
    outline: none;
}

aside acc-menu acc-menu-item > acc-menu-item-title:hover,
aside acc-menu acc-menu-item > acc-menu-item-title:focus {
    background: rgba(255, 255, 255, 0.98);
    color: #4c4944;
    outline: none;
}

aside acc-menu acc-menu-item.visited > acc-menu-item-title::before {
    display: none;
}

/* J. Louis - Preserve the card proportions on narrow screens without allowing the drawer to overflow. */
@media screen and (max-width: 31.25rem) {
    aside {
        width: min(21rem, calc(100% - 7rem));
        max-height: calc(100% - 0.5rem);
        margin: 0.5rem 0 0 1rem;
        padding: 0;
    }

    body.aside aside {
        backdrop-filter: none !important;
    }

    aside section[logo] {
        width: 100%;
        margin-left: 0;
    }

    aside nav,
    aside section[menu],
    aside section[menu] #sa_menu,
    aside acc-menu,
    aside acc-menu acc-menu-group,
    aside acc-menu acc-menu-group > acc-menu-item-children {
        width: calc(100% - 1rem);
    }

    aside nav {
        margin-left: 0.5rem;
    }

    aside section[menu] {
        margin-left: 0;
    }

    aside acc-menu acc-menu-item > acc-menu-item-title {
        width: 100%;
    }

    aside > my-btn.close {
        left: 100%;
        right: auto;
        top: 1rem;
        transform: translateX(1rem);
    }
}

/* J. Louis - Match the Raffles title card with a pure-white opener backdrop. */
#splash_screen {
    background: #fff;
    backdrop-filter: none;
}

/* J. Louis - Enlarge the Raffles opener artwork by a further twenty-five percent while retaining the shared responsive limits. */
#splash_screen > div:not(.splash_overlay):not(#splash_spinner) img {
    width: 67.5rem;
    height: 37.5rem;
}