/* ═══════════════════════════════════════════════════════════════════════════
   NAMA THEME — desktop.css
   Aethelgard Noir Design System — Desktop Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 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-bar-height: calc(32px + 2.5vw)
}

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

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

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; }

/* ── Swiper / SPA Stage ────────────────────────────────────────────────────── */
.nama-main {
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
}

.nama-swiper {
    width: 100%;
    height: 100%;
}

.nama-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* ── Header / Navigation ───────────────────────────────────────────────────── */
.nama-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Above the fullscreen hours panel (@ 9999) so the burger stays clickable
       while it is open, mirroring mobile. */
    z-index: 10002;
    pointer-events: none; /* let clicks through to swiper by default */
}

.nama-nav-desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    height: var(--global-bar-height);
    pointer-events: none; /* Let clicks pass through transparent middle */
}

.nama-logo, .nama-burger {
    pointer-events: auto; /* Re-enable clicks for logo and burger */
}

/* Burger */
.nama-burger {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Slightly wider gap for elegance */
    padding: 10px;
    z-index: 1001;
}
.burger-line {
    display: block;
    width: 24px;
    height: 1px;
    background-color: var(--silver);
    transition: transform var(--transition-fast), width var(--transition-fast), opacity var(--transition-fast);
}
/* By default, we disabled the "X" on desktop. We can just indent lines on hover
   (and show the same indented look when the burger is in its active state — i.e.
   the nav dropdown is open). */
.nama-burger:hover .burger-line:first-child,
.nama-burger.is-active .burger-line:first-child { width: 24px; transform: translateX(8px); }
.nama-burger:hover .burger-line:last-child,
.nama-burger.is-active .burger-line:last-child { width: 24px; transform: translateX(8px); }

/* Dropdown Glass Bar */
.nama-nav-dropdown {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%; /* Matches exactly the height of the header defined by .nama-nav-desktop */
    /* Glassmorphism */
    background: rgba(25, 25, 25, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(213, 197, 180, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1; /* Confirms it sits behind the logo and burger */
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    pointer-events: auto;
}
.nama-nav-dropdown.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Center nav links inside dropdown */
.nama-nav-links {
    display: flex;
    align-items: center;
    gap: 4.5vw;
}
.nama-nav-link {
    font-family: var(--font-sans);
    font-size: 0.85vw;
    font-weight: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--taupe);
    transition: color var(--transition-fast);
    position: relative;
    padding-bottom: 4px;

    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
    line-height: normal;
}
.nama-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 50%;
    width: 0; 
    height: 1px;
    background: var(--gold);
    transform: translateX(-50%);
    transition: width var(--transition-fast);
}
.nama-nav-link.is-active, .nama-nav-link:hover { color: var(--gold); }
.nama-nav-link.is-active::after, .nama-nav-link:hover::after { width: 100%; }

/* Logo */
.nama-logo {
    display: flex;
    align-items: center;
}
.nama-logo img { 
    height: 32px; 
    width: auto; 
}
.nama-logo-text {
    font-family: var(--font-serif);
    font-size: 1.4vw;
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--silver);
}

/* Hide mobile elements on desktop */
.nama-nav-mobile-bar,
.nama-mobile-overlay,
.nama-burger--mobile { display: none !important; }

/* ── Mobile Overlay (desktop hidden) ──────────────────────────────────────── */
.nama-mobile-overlay {
    position: fixed;
    inset: 0;
    background: var(--obsidian);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 8vw;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity var(--transition-luxury), transform var(--transition-luxury);
}
.nama-mobile-overlay.is-open {
    opacity: 1;
    transform: translateX(0);
}
.nama-mobile-close {
    position: absolute;
    top: 1.4vw;
    right: 5vw;
    color: var(--silver);
    padding: 10px;
}
.nama-mobile-nav-list { width: 100%; }
.nama-mobile-nav-link {
    font-family: var(--font-serif);
    font-size: 8vw;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--silver);
    display: block;
    padding: 0.85vw 0;
    border-bottom: 1px solid rgba(213, 197, 180, 0.12);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.nama-mobile-nav-link:hover,
.nama-mobile-nav-link.is-active { color: var(--gold); padding-left: 2vw; }
.nama-mobile-overlay-footer {
    position: absolute;
    bottom: 2.8vw;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nama-overlay-contact-link {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: var(--taupe);
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION: HOME
════════════════════════════════════════════════════════════════════════════ */
.section-home {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
}

.home-bg {
    position: absolute;
    inset: 0;
    /* Clip the scale-up that compensates for blurred edges. */
    overflow: hidden;
}
/* Hero media — video OR photo. The blur / opacity treatment set in the
   Customizer arrives as the --hero-* custom properties on .home-bg, and is
   applied here so the ::after scrim below stays crisp and fully opaque. */
.home-bg-media,
.home-bg-video,
.home-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
    opacity: var(--hero-opacity, 1);
}
/* Blur is gated behind a class rather than left at blur(0px), because even a
   zero-radius filter costs a full filter pass on every frame of the video.
   The scale-up compensates for the soft rim a blur leaves at the edges. */
.home-bg.has-blur .home-bg-media {
    filter: blur(var(--hero-blur, 0px));
    transform: scale(var(--hero-scale, 1));
}
.home-bg-video--desktop,
.home-bg-image--desktop { display: block; }
.home-bg-video--mobile,
.home-bg-image--mobile { display: none; }
.home-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(19, 19, 19, 0.58);
}

/* Center column */
.home-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    position: relative;
    z-index: 2;
}
.home-brand {
    font-family: var(--font-serif);
    font-size: 5.5vw;
    font-weight: 300;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--silver);
    text-align: center;
}
.home-brand img { 
    height: 12vw;
    width: auto; 
}

.home-ctas {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1vw;
    justify-content: center;
    align-items: center;
    width: auto;
}
/* Row 1: Schedule + Reserve side by side; Row 2: Order spans the two above */
.home-schedule-cta { grid-column: 1; grid-row: 1; }
#reserveTableBtn   { grid-column: 2; grid-row: 1; }
#orderOnlineBtn    { grid-column: 1 / -1; grid-row: 2; width: 100%; }

/* Schedule CTA wrapper — hosts the status dot OUTSIDE the button. */
.home-schedule-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
}
/* Lift the status dot out of the button and float it just to the left,
   vertically centered. Centered with margin (not transform) so the
   .is-open dotBreath scale animation keeps working. */
.home-schedule-cta .home-status-dot {
    position: absolute;
    left: -0.9vw;
    top: 50%;
    margin-top: -3px;   /* half the 6px dot height */
}
/* Luxury button base — matches nama-luxury hover fill effect */
.nama-btn-primary,
.nama-btn-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 0.65vw;              /* matches .home-footer-link */
    font-weight: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;           /* keep the longest label on one line at the larger size */
    height: 3vw;
    width: 14vw;
    max-width: 100%;
    background: rgba(25, 25, 25, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease, border-color 0.4s ease;
}

/* Pseudo-element for hover fill sweep */
.nama-btn-primary::before,
.nama-btn-secondary::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 100%;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: -1;
}
.nama-btn-primary:hover::before,
.nama-btn-secondary:hover::before { width: 100%; }

/* Secondary (Reserve) — white/silver border, fills white */
.nama-btn-secondary {
    border: 1px solid rgba(229, 226, 225, 0.35);
    color: var(--silver);
}
.nama-btn-secondary::before { background: var(--silver); }
.nama-btn-secondary:hover { color: var(--obsidian); }

/* Primary (Order) — gold border, fills gold */
.nama-btn-primary {
    border: 1px solid var(--gold);
    color: var(--gold);
}
.nama-btn-primary::before { background: var(--gold); }
.nama-btn-primary:hover { color: var(--silver); }

.nama-btn-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* ── Glassmorphism Card Container ──────────────────────────────────────────
   On desktop the static hero card is replaced by the #hoursPanel drawer, so
   hide the static version here. (Mobile already hides it in mobile.css.) */
.home-hours { display: none; }

/* ── Hours Panel — right-side drawer (desktop) ──────────────────────────────
   Body-level overlay (see template-parts/overlays/hours-panel.php) styled to
   match the old static hours card, but anchored to the right edge with only
   the left corners rounded, sliding in/out on the X axis.
   Mobile overrides in mobile.css use !important to retain fullscreen behavior. */
.hours-panel {
    display: flex;
    flex-direction: column;
    gap: 1vw;

    position: fixed;
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);

    background: rgba(25, 25, 25, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(213, 197, 180, 0.3);
    border-right: none;
    border-radius: 32px 0 0 32px;

    padding: 2vw 2vw;
    width: fit-content;

    z-index: 9999;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.hours-panel.is-open {
    transform: translate(0, -50%);
    pointer-events: auto;
}

/* ── Stacked Row Layout ──────────────────────────────────────────────────── */
.home-hours-row {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    gap: 0.5rem; 
    transition: color var(--transition-fast);
}

.hours-panel .home-hours-row {
    align-self: stretch;
    margin-right: -2vw;
    padding-right: 2vw;
    padding-bottom: 0.5vw;
    border-bottom: 0.5px solid rgba(213, 197, 180, 0.15);
}
.hours-panel .home-hours-row:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.home-hours-day {
    font-family: var(--font-sans);
    font-size: 0.65vw;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--taupe);
}

.home-hours-time {
    font-family: var(--font-serif);
    font-size: 1.75vw; 
    color: var(--silver);
    letter-spacing: 0.05em;
    line-height: 1;
}

/* ── Divider & Status ────────────────────────────────────────────────────── */
.home-hours-divider {
    width: 100%;
    height: 1px;
    background: rgba(213, 197, 180, 0.3);
    margin-top: 0.5rem; 
    margin-bottom: -1rem; /* Pulls the status dot closer to the line */
}

.home-status {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.home-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--taupe);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
    opacity: 0.5;
}

.home-status-dot.is-open { 
    background: var(--gold); 
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.6);
    opacity: 1;
    animation: dotBreath 4s ease-in-out infinite;
}

@keyframes dotBreath {
    0%, 100% { box-shadow: 0 0 4px 2px rgba(197, 160, 89, 0.2); transform: scale(1); }
    50%       { box-shadow: 0 0 6px 4px rgba(197, 160, 89, 0.4); transform: scale(1.3); }
}

.home-status-label {
    font-family: var(--font-sans);
    
    /* Fluid typography for home section baseline */
    font-size: 0.65vw; 
    
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--taupe);
}

.home-status-label.is-open { 
    color: var(--gold); 
}

/* ── Hover / Active States ───────────────────────────────────────────────── */
.home-hours-row.is-today .home-hours-day,
.home-hours-row.is-today .home-hours-time {
    color: var(--gold);
}

/* Absolute bottom footer */
/* Absolute bottom footer */
.home-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    padding: 1.4vw 3vw;
    z-index: 2;
}

.home-footer-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    
    /* THE MAGIC TRICK: Forces all 3 columns to be exactly the same width */
    flex: 1; 
}

/* Aligns the content inside the equal-width columns */
.home-footer-group:first-child { align-items: flex-start; }
.home-footer-group--center { align-items: center; text-align: center; }
.home-footer-group--right  { align-items: flex-end; text-align: right; }

.home-footer-link,
.home-footer-text {
    font-family: var(--font-sans);
    font-size: 0.65vw;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--taupe);
    transition: color var(--transition-fast);
    margin: 0; 
}
.home-footer-link:hover { color: var(--gold); }

/* Stacked Social Links */
.home-social-links { 
    display: flex; 
    flex-direction: row; /* Stacks them vertically */
    align-items: flex-end;  /* Locks them to the right side */
    gap: 1.2vw;               /* Matches the 4px gap of the phone/email block */
}

.home-social-link {
    font-family: var(--font-sans);
    font-size: 0.65vw;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--taupe);
    transition: color var(--transition-fast);
}
.home-social-link:hover { color: var(--gold); }

/* Hide mobile-only elements on desktop */
.home-hours-mobile { display: none; }
.home-docked-bar   { display: none; }
.home-dock-panel   { display: none; }



/* ── Side Scroll Section Indicator ────────────────────────────────────────── */
.nama-side-scroll-nav {
    position: fixed;
    top: 50%;
    left: calc(2rem + env(safe-area-inset-left, 0px));
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center; /* IMPORTANT: Keeps the dots perfectly centered when one turns into a long bar */
    gap: 1.5rem;
    z-index: 9999;
    pointer-events: auto;
}

.nama-scroll-dot {
    width: 6px;
    height: 6px;
    border-radius: 10px; /* Changed from 50% to 10px so it acts like a pill when stretched */
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
    transition: all 0.55s cubic-bezier(0.25, 1, 0.5, 1); /* Upgraded the timing for a snappier morph */
    cursor: pointer;
}

.nama-scroll-dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.5); /* Nice little interaction on hover */
}

.nama-scroll-dot.active {
    height: 36px; /* Stretches vertically into a bar */
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); /* Gives the active bar a premium little glow */
}

/* ════════════════════════════════════════════════════════════════════════════
   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;
    height: 100%;
    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); }

/* ════════════════════════════════════════════════════════════════════════════
   SECTION: ABOUT US
════════════════════════════════════════════════════════════════════════════ */
.section-about {
    width: 100%;
    height: 100%;
    display: flex;
    background: var(--obsidian);
    position: relative;
    overflow: hidden;
}

/* Left — photo pane */
.about-photo-pane {
    flex: 0 0 50%;
    height: 100%;
    position: relative;
    background-color: var(--dark-grey);
    overflow: hidden;
}
.about-image-frame {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity var(--transition-luxury);
    opacity: 0;
}
.about-image-frame.is-active { 
    opacity: 1; 
}
/* Fade right edge into background */
.about-photo-pane::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 25%;
    height: 100%;
    background: linear-gradient(to left, var(--obsidian) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* Right — text pane */
.about-text-pane {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4.5vw 0 calc(4.5vw + 90px);
    position: relative;
}
.about-content-block {
    display: none;
    width: 80%;
}
.about-content-block.is-active { display: block; }

/* Heading row: "OUR STORY" stacked above massive year */
.about-heading-row {
    display: flex;
    flex-direction: column; /* Stacks the label and the year vertically */
    align-items: flex-start; /* Aligns everything to the left */
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 2vw;
}

.about-heading-left {
    display: flex;
    flex-direction: row; /* Forces "Our" and "Story" onto the same line */
    align-items: baseline;
    gap: 0.4em; /* Adds a natural space between the two words */
    margin-bottom: 0.3vw; /* Gives a tiny bit of breathing room above the year */
}

.about-label-our,
.about-label-story {
    /* Matches .about-story-label-mobile */
    font-family: var(--font-sans);
    font-size: 0.7vw; 
    font-weight: normal;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 1; /* Removes the faded look from the old desktop CSS */
    margin: 0;
    line-height: 1;
}

.about-year-display {
    /* Matches .about-mobile-year */
    font-family: var(--font-serif);
    font-size: 3.5vw; /* Massive scale for desktop */
    font-weight: 300;
    font-style: italic;
    color: var(--silver);
    opacity: 1; /* Removes the faded look from the old desktop CSS */
    line-height: 1;
    flex-shrink: 0;
    margin-left: -4px; /* Slightly pulls the italic text left to optically align the stem of the 1 */
}
.about-body-text {
    font-family: var(--font-sans);
    font-size: 0.8vw;
    font-weight: 300;
    line-height: 1.85;
    color: var(--taupe);
}

/* Glassmorphism timeline footer */
.about-timeline-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(25, 25, 25, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0 3vw;
    height: var(--global-bar-height);
    z-index: 10;
}

/* Progress bar — on the top edge of the footer */
.about-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgb(81, 77, 72);
}
.about-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--gold);
    /* No transition — tracks wheel scroll in real-time */
}

/* Year items */
.about-timeline-grid {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    align-items: center;
}
.about-year-item {
    font-family: var(--font-sans);
    font-size: 0.85vw;
    font-weight: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--taupe);
    transition: color var(--transition-fast);
    position: relative;
    padding-bottom: 4px;

    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
    line-height: normal;
}

.about-year-item::after {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 50%;
    width: 0; 
    height: 1px;
    background: var(--gold);
    transform: translateX(-50%);
    transition: width var(--transition-fast);
}

.about-year-item:hover, .about-year-item.is-active { color: var(--gold); }
.about-year-item:hover::after, .about-year-item.is-active::after { width: 100%;}

/* Hide mobile-only elements on desktop */
.about-mobile-swiper { display: none; }
.about-story-label-mobile { display: none; }
.about-mobile-media-stack { display: none; }

/* Transparent scroll capture layer — sits on top, captures native scroll */
#aboutScroller {
    position: absolute;
    inset: 0;
    bottom: var(--global-bar-height); /* stop above the footer */
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 5;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#aboutScroller::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
    #aboutScroller { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION: GALLERY
════════════════════════════════════════════════════════════════════════════ */
/* ── Gallery: native scroll, sticky collections (demo pattern) ── */

/* Outer section: clips the scroller, anchors the nav */
.section-gallery {
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--obsidian);
    overflow: hidden;
}

/* Scroll container — override swiper-wrapper flex (desktop only) */
@media (min-width: 769px) {
.gallery-collections-wrapper {
    display: block !important;
    transform: none !important;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
}
.gallery-collections-wrapper::-webkit-scrollbar { display: none; }
}

/* Each collection: tall (height set by JS = imageCount × 100vh) */
.gallery-collection {
    position: relative;
    width: 100%;
    background: var(--obsidian);
}

/* Sticky frame: sticks to top of viewport while scrolling through collection */
.gallery-images-strip {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Top gradient overlay (Scrim) for desktop nav readability */
.gallery-images-strip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25vh; /* Covers the top 25% of the screen */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    z-index: 12; /* Sits above the images, but below the text/nav */
    pointer-events: none; /* Lets you click through it */
}

/* Stacked photos — opacity toggled by JS */
.gallery-img-frame.story-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--obsidian);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
}
.gallery-img-frame.story-image.active {
    opacity: 1;
}
.gallery-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(19, 19, 19, 0.28);
    z-index: 2;
}

/* Label — centered exactly inside the top navigation bar */
.gallery-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--global-bar-height); /* Matches your nav bar height perfectly! */
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: auto; /* Removes the old bottom positioning */
    z-index: 1002; /* Puts it above the header background */
    pointer-events: none; /* Crucial: stops the invisible box from blocking clicks to your dropdown or burger menu! */
}

.gallery-label-title {
    font-family: var(--font-sans);
    font-size: 0.85vw;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--taupe);
    margin: 0; /* Removes the old margin-bottom */
    line-height: 1; 
    transform: translateY(1px); /* Tiny optical nudge to center uppercase letters perfectly */
}

/* Arrows hidden on desktop */
.gallery-arrow { display: none; }

/* Progress bar — inside sticky frame, above nav */
.gallery-stories-bar {
    position: absolute;
    top: calc(var(--global-bar-height) - 4px);
    left: 0;
    width: 100%;
    display: flex;
    gap: 4px;
    padding: 0 2vw;
    z-index: 20;
    box-sizing: border-box;
}
.gallery-stories-segment {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.20);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.gallery-stories-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
}
.gallery-stories-fill.is-done { width: 100%; }

/* Bottom collection nav bar */
.gallery-col-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 1.25vw 4vw;
    box-sizing: border-box;
    background: rgba(25, 25, 25, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0 3vw;
    height: var(--global-bar-height);
}

.gallery-col-nav-btn {
font-family: var(--font-sans);
    font-size: 0.85vw;
    font-weight: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--taupe);
    transition: color var(--transition-fast);
    position: relative;
    padding-bottom: 4px;
    
    /* Extra resets strictly for the <button> so it matches the <a> and <div> exactly */
    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
    line-height: normal;
}

.gallery-col-nav-btn::after {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 50%;
    width: 0; 
    height: 1px;
    background: var(--gold);
    transform: translateX(-50%);
    transition: width var(--transition-fast);
}

.gallery-col-nav-btn.is-active, .gallery-col-nav-btn:hover { color: var(--gold); }
.gallery-col-nav-btn.is-active::after, .gallery-col-nav-btn:hover::after { width: 100%; }

/* Hide old desktop progress bar */
.gallery-progress { display: none; }

/* Total progress bar — top edge of gallery footer */
.gallery-total-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgb(81, 77, 72);
}
.gallery-total-fill {
    height: 100%;
    width: 0%;
    background: var(--gold);
}

/* Hide mobile-only about elements on desktop — handled in ABOUT US block above */

/* ════════════════════════════════════════════════════════════════════════════
   HERO CTA: RESERVE PHONE

   "Reserve a Table" is a tel: anchor that swaps its own label to the number.
════════════════════════════════════════════════════════════════════════════ */

/* The revealed number is denser than the label it replaces — easing the
   tracking keeps longer international formats on one line inside the button's
   fixed width. */
.nama-reserve-phone.is-revealed { letter-spacing: 0.12em; }

/* ════════════════════════════════════════════════════════════════════════════
   ORDER PANEL OVERLAY

   The same fullscreen clip-path panel the rest of the theme uses — gold title,
   fading divider, glass backdrop. Only the contents differ: this variant fills
   it with the ordering buttons set up in the Customizer.
════════════════════════════════════════════════════════════════════════════ */
.reservation-panel-backdrop { display: none; }

/* Mobile-only floating titles for Schedule / Order / Nav overlays. Hidden on
   desktop (the hours panel shows no title, the order panel keeps its inline
   header, and the desktop navbar has no overlay-style title). */
.hours-panel-title,
.order-panel-mobile-title,
.nama-mobile-overlay-title {
    display: none;
}

.order-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
    background: rgba(25, 25, 25, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 2.8vw 18vw 2.25vw;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.3s cubic-bezier(0.35, 0, 0.65, 1);
    z-index: 9999;
    overflow-y: auto;
}
.order-panel.active { clip-path: inset(0 0 0% 0); }
.order-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1vw;
    flex: 0 0 auto;
}
/* Title styled exactly like the Reserve a Table panel's: small Work Sans caps
   floating centred in the top bar strip, not a large serif heading sitting in
   the panel body. Lifted verbatim from .reservation-panel-title. */
.order-panel-title {
    font-family: var(--font-sans);
    font-size: 0.85vw;
    font-weight: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--global-bar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10003;
}
.order-panel-close {
    display: none !important;
}
/* The Reserve panel has no rule under its title, and with the title lifted out
   of the body this one would be left stranded at the top of an empty panel. */
.order-panel-divider {
    display: none;
}
.order-panel-content {
    font-family: var(--font-sans);
    font-size: 0.75vw;
    color: var(--taupe);
    line-height: 1.7;
    /* Centre the buttons in the panel. The title is absolutely positioned in
       the top bar strip and the divider is hidden, so the only flow space above
       the content is the panel's own padding plus the empty header's margin —
       2.8vw + 2.25vw + 1.1vw. Staying just under that keeps .order-panel's
       overflow-y from producing a scrollbar. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvh - 7vw);
}

/* ── Ordering buttons ─────────────────────────────────────────────────────── */
/* Desktop: the pair sits side by side on one row, centred. */
.order-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.4vw;
    flex-wrap: wrap;
}

/* Same idiom as the hero CTAs — thin border, uppercase tracking, hover fill
   sweep — one step larger, with the colour supplied per button from the
   Customizer via the --order-btn-color custom property. */
.order-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16vw;
    height: 3.6vw;
    padding: 0 1vw;
    border: 1px solid var(--order-btn-color, var(--gold));
    color: var(--order-btn-color, var(--gold));
    font-family: var(--font-sans);
    font-size: 0.75vw;
    font-weight: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease;
}
.order-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 100%;
    background: var(--order-btn-color, var(--gold));
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: -1;
}
.order-btn:hover::before { width: 100%; }
.order-btn:hover { color: var(--obsidian); }

/* Photo variant — the image replaces the label outright, so the horizontal
   padding that exists to breathe around text gives way to an even inset. */
.order-btn.has-image { padding: 0.5vw; }
.order-btn img {
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Customizer-only placeholder, shown when the toggle is on but no button has a
   link yet. Never reaches the live site — see order-panel.php. */
.order-buttons-empty {
    max-width: 24vw;
    text-align: center;
    letter-spacing: 0.14em;
}

/* ════════════════════════════════════════════════════════════════════════════
   UTILITY
════════════════════════════════════════════════════════════════════════════ */
.u-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Scroll lock on body */
body.order-active {
    overflow: hidden;
}
/* Fade utility */
.u-fade-enter { animation: fadeIn 0.6s ease forwards; }
.u-fade-exit  { animation: fadeOut 0.4s ease forwards; }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }