/* ═══════════════════════════════════════════════════════════════════════════
   NAMA MENUS — menus.css
   Aethelgard Noir Design System — Menus section only (standalone theme)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom Properties ─────────────────────────────────────────────────────── */
:root {
    --gold:          #C5A059;
    --gold-light:    #E9C176;
    --obsidian:      #131313;
    --dark-grey:     #1C1B1B;
    --silver:        #E5E2E1;
    --taupe:         #D1C5B4;
    --font-serif:    'Noto Serif', Georgia, serif;
    --font-sans:     'Work Sans', system-ui, sans-serif;
    --transition-luxury: 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-fast:   0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ── Global Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: var(--obsidian);
    color: var(--silver);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { background: none; border: none; cursor: pointer; font-family: inherit; color: inherit; }

/* ── Stage ─────────────────────────────────────────────────────────────────── */
.nama-menus-main {
    width: 100%;
    height: 100vh;      /* fallback for browsers without dvh */
    height: 100dvh;     /* fit to the *visible* viewport (accounts for mobile browser bars) */
    display: flex;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION: MENUS
════════════════════════════════════════════════════════════════════════════ */
.section-menus {
    width: 100%;
    height: 100%;
    display: flex;
    background: var(--obsidian);
    position: relative;
}

/* Left sidebar — 25vw */
.menus-sidebar {
    width: 25vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-right: 1px solid rgba(213, 197, 180, 0.1);
    flex-shrink: 0;
}
.menus-sidebar-word {
    font-family: var(--font-serif);
    font-size: 8vw;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    /* 1. Make it a solid color using the old outline color */
    color: rgba(213, 197, 180, 0.18);

    /* 2. Remove the outline effect */
    -webkit-text-stroke: none;

    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    user-select: none;
    line-height: 1;
}

/* Right list — 75vw */
.menus-list {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.menus-list-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4vw;
    border-bottom: 1px solid rgba(213, 197, 180, 0.08);
    position: relative;
    overflow: hidden;
    transition: flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease;
    cursor: pointer;
    background-color: transparent;
}
.menus-list-item:last-child { border-bottom: none; }
/* When container is hovered, shrink all strips */
.menus-list:hover .menus-list-item { flex: 0.8; }
/* The hovered strip expands significantly */
.menus-list .menus-list-item:hover { flex: 1.6; }

/* 1. The Base Image (Stays Sharp) */
.menus-item-bg {
    position: absolute;
    inset: 0;
    background-size: 100% auto;
    background-position: center;

    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. The "Frosted Glass" Overlay */
.menus-item-bg::after {
    content: '';
    position: absolute;
    inset: 0;

    /* Semi-transparent tint (Required for glassmorphism to work) */
    background: linear-gradient(to right, rgba(19,19,19,0.85) 0%, rgba(19,19,19,0.5) 50%, rgba(19,19,19,0.85) 100%);

    /* THE MAGIC: Blurs the image *behind* this overlay */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* Crucial for Safari support */
}

/* 3. The Hover State */
.menus-list-item:hover .menus-item-bg {
    /* Bring the whole container to full visibility */
    /* The rgba() gradient and backdrop-filter handle the transparency now */
    opacity: 1;
}

.menus-item-content {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
    gap: 3vw;
}
.menus-item-count {
    font-family: var(--font-serif);
    font-size: 0.7vw;
    font-weight: 250;
    font-style: italic; /* Removed the italic to match your photo */
    letter-spacing: 0.1em; /* Gives the numbers a little breathing room */
    min-width: 10px;
    color: var(--gold);
    opacity: 1;
    transform: translateY(-0.8vw);
}
/* Title wrapper holds title + schedule side-by-side */
.menus-item-title-wrap {
    display: flex;
    align-items: center;
    gap: 3vw;
    flex: 1;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.menus-item-title {
    font-family: var(--font-serif);
    font-size: 3.5vw;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--silver);
    transition: color 0.4s ease;
    line-height: 1;
}
.menus-item-schedule {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    opacity: 0.5;
    transition: opacity 0.4s ease, border-color 0.4s ease;
    gap: 0.3rem;
    border-left: 2px solid rgba(213, 197, 180, 0.2);
    padding-left: 2vw;
    height: 3.5rem;
}
.menus-item-schedule-line {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5em;
}
.menus-sched-day,
.menus-sched-time {
    font-family: var(--font-sans);
    font-size: 0.5vw;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--taupe);
}
.menus-item-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--taupe);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s ease;
}

/* ── Menu hover state changes ─────────────────────────────────────────── */
.menus-list-item:hover .menus-item-count,
.menus-list-item:hover .menus-item-title,
.menus-list-item:hover .menus-item-arrow { color: var(--gold); }
.menus-list-item:hover .menus-item-count { opacity: 0.8; }
.menus-list-item:hover .menus-item-schedule {
    opacity: 0.9;
    border-left-color: rgba(197, 160, 89, 0.3);
}
.menus-list-item:hover .menus-item-title-wrap { transform: translateX(20px); }
.menus-list-item:hover .menus-item-arrow { transform: translateX(10px); }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES (≤ 768px)
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .section-menus { flex-direction: column; }

    .menus-sidebar { display: none; }

    .menus-list { width: 100%; }
    .menus-list-item {
        /* 0 on top/bottom, safe-area math on left/right */
        padding: 0 20px 0 calc(2.5rem + env(safe-area-inset-left, 0px)) !important;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }
    /* Disable all hover effects on mobile */
    .menus-list:hover .menus-list-item { flex: 1 !important; }
    .menus-list .menus-list-item:hover { flex: 1 !important; background-color: transparent !important; }
    .menus-list-item:hover .menus-item-title-wrap { transform: none; }
    .menus-list-item:hover .menus-item-arrow { transform: none; color: var(--taupe); }
    .menus-list-item:hover .menus-item-count {color: var(--gold);}
    .menus-list-item:hover .menus-item-title { color: var(--silver); }
    .menus-list-item:hover .menus-item-schedule { opacity: 0.5; border-left-color: rgba(213, 197, 180, 0.2); }
    .menus-item-bg { display: none; }

    .menus-item-content { gap: 0px; }
    .menus-item-count {
        font-size: 0.75rem;
        min-width: 36px;
    }
    .menus-item-title {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
        line-height: 1.2;
    }
    .menus-item-title-wrap {
        flex-direction: row;
        align-items: center;
        gap: 3vw;
        flex: 1;
    }
    .menus-item-schedule {
        border-left: 1px solid rgba(213, 197, 180, 0.15);
        padding-left: 3vw;
        align-items: flex-start;
        height: auto;
        gap: 0.2rem;
        flex-shrink: 0;
    }
    .menus-item-schedule-line { display: flex; flex-direction: column; gap: 0; }
    .menus-sched-day,
    .menus-sched-time {
        font-size: 0.5rem;
        letter-spacing: 0.12em;
    }
    .menus-item-arrow {
        display: flex;
        margin-left: auto;
        flex-shrink: 0;
    }
    .menus-item-arrow svg { width: 20px; height: 20px; }

    /* Empty-state note sizing on small screens */
    .menus-empty { font-size: 0.8rem !important; padding: 2rem; text-align: center; }
}