/* Noir — full-screen video front page (dark, gold accent, liquid menu). Originally modelled on https://ixmenu.com/glera/ */

/* Roboto latin subset, vendored from @fontsource/roboto 5.1.0 (Apache-2.0, see fonts/LICENSE) */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/roboto-latin-300-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/roboto-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/roboto-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: dark;
    --noir-brown: #31241c;
    --noir-gutter: 16px;
}

html {
    background: #000;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    color: #fff;
    background: #000;
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

/* Hero */
.noir-hero {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: calc(18vh + env(safe-area-inset-top)) max(var(--noir-gutter), env(safe-area-inset-right)) 2rem max(var(--noir-gutter), env(safe-area-inset-left));
    padding-top: calc(18svh + env(safe-area-inset-top));
    text-align: center;
}

.noir-hero__media {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* Shows when the video and poster are missing or fail: the restaurant's accent colour. */
    background: var(--mt-accent, #b99a86);
}

.noir-hero__video,
.noir-hero__poster,
.noir-hero__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.noir-hero__poster {
    object-fit: cover;
    transition: opacity .8s ease;
}

.noir-hero__poster.is-hidden {
    opacity: 0;
}

.noir-hero__overlay {
    background: linear-gradient(169deg, #221709 19%, #000 100%);
}

/* Positioned without z-index: paints above the fixed media and keeps the menu's z-indexes global. */
.noir-hero__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.noir-hero__brand {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 9vw, 3.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .2em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

[dir=rtl] .noir-hero__brand {
    letter-spacing: 0;
}

.noir-hero__logo {
    display: block;
    width: 150px;
    max-width: 60vw;
    height: auto;
    margin-inline: auto;
}

/* Liquid menu button: label + arrow above a round pulsing hamburger, as on the live page */
.noir-hero .mt-liquid {
    --mt-menu-text: #d8b8a3;
    --mt-menu-bg: #0b0806;
    justify-content: center;
}

@supports (color: color-mix(in srgb, red 50%, #fff)) {
    .noir-hero .mt-liquid {
        --mt-menu-text: color-mix(in srgb, var(--mt-accent) 55%, #fff);
    }
}

.noir-hero .uc_liquid_hamburger {
    flex-direction: column-reverse;
    gap: 14px;
    transition: none;
}

.noir-hero .mt-liquid__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.noir-hero .mt-liquid__icon::after {
    border-radius: 50%;
}

.noir-hero .mt-liquid__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .25em;
}

[dir=rtl] .noir-hero .mt-liquid__label {
    font-size: 14px;
    letter-spacing: 0;
}

.noir-hero .mt-liquid__label::after {
    content: "";
    width: 8px;
    height: 15px;
    background: var(--mt-accent, #b99a86);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* While the menu is open the button moves to the corner so it never covers a category link. */
.noir-hero .mt-liquid.noir-pinned .uc_liquid_hamburger {
    position: fixed;
    top: calc(var(--noir-gutter) + env(safe-area-inset-top));
    inset-inline-end: calc(var(--noir-gutter) + env(safe-area-inset-right));
}

[dir=rtl] .noir-hero .mt-liquid.noir-pinned .uc_liquid_hamburger {
    inset-inline-end: calc(var(--noir-gutter) + env(safe-area-inset-left));
}

.noir-hero .mt-liquid.noir-pinned .mt-liquid__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.noir-hero .mt-liquid .global-menu-inner {
    padding-top: calc(110px + env(safe-area-inset-top));
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.noir-hero .mt-liquid .menu-item a {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 3px;
    word-spacing: .1em;
}

[dir=rtl] .noir-hero .mt-liquid .menu-item a {
    letter-spacing: 0;
}

.noir-hero .mt-liquid .menu-item a:hover,
.noir-hero .mt-liquid .menu-item a:focus-visible {
    color: #fff;
}

/* Floating chat: small dark-brown trigger, accent items, clear of the home indicator */
.noir-hero .mt-chat {
    right: calc(20px + env(safe-area-inset-right));
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 9990;
}

[dir=rtl] .noir-hero .mt-chat {
    right: auto;
    left: calc(20px + env(safe-area-inset-left));
}

.noir-hero .mt-chat__cta,
.noir-hero .mt-chat__item a {
    width: 44px;
    height: 44px;
    font-size: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

.noir-hero .mt-chat__cta {
    background: var(--noir-brown);
}

.noir-hero .mt-chat__cta:hover {
    background: #373737;
}

.noir-hero .mt-chat__items {
    gap: 13px;
}

.noir-hero .mt-chat__item {
    margin-bottom: 0;
}

/* Footer text over the video, kept clear of the chat button */
.mt-footer {
    position: relative;
    margin: 0;
    padding: 1rem calc(76px + env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) calc(76px + env(safe-area-inset-left));
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.6;
    text-align: center;
}

@media (min-width: 768px) {
    .noir-hero {
        padding-top: calc(25vh + env(safe-area-inset-top));
        padding-top: calc(25svh + env(safe-area-inset-top));
    }

    .noir-hero .mt-liquid__icon {
        width: 70px;
        height: 70px;
    }

    .noir-hero .mt-liquid .menu-item a {
        font-size: 25px;
        line-height: 49px;
        letter-spacing: normal;
        word-spacing: normal;
    }

    .noir-hero .mt-chat__items {
        gap: 6px;
    }

    .mt-footer {
        font-size: 14px;
    }
}

@media (min-width: 1025px) {
    .mt-footer {
        font-size: 16px;
    }
}

/* Entrance: hidden until theme.js animates it in; revealed anyway if the script never runs. */
@media (prefers-reduced-motion: no-preference) {
    .noir-hero:not(.is-ready) :is(.noir-hero__brand, .mt-liquid__icon, .mt-liquid__label) {
        opacity: 0;
        animation: noir-reveal .6s 2.5s forwards;
    }
}

@keyframes noir-reveal {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .noir-hero__poster {
        transition: none;
    }
}