/* -------------------------------------------------------------
 * O KΗΠΟΣ (The Garden) — Coffee-Table Book Lookbook CSS
 * A premium, tactile design system with dynamic light shifts,
 * uncropped exhibition grids, and accessible responsive styling.
 * ------------------------------------------------------------- */

/* 1. Design System & CSS Variables */
:root {
    /* Fonts */
    --font-display: 'Cormorant Garamond', serif;
    --font-text: 'Lora', serif;
    --font-mono: 'Space Mono', monospace;

    /* Organic Fibonacci Spacing */
    --space-xs: 0.5vw;
    --space-sm: 1.618vw;
    --space-md: 3.236vw;
    --space-lg: 5.24vw;
    --space-xl: 8.48vw;

    /* Animation Curves */
    --ease-laminar: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-curtain: cubic-bezier(0.85, 0, 0.15, 1);
    --ease-spring: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Light / Daytime Mode (Default) */
body.daytime-mode {
    --color-bg-base: #F6F3ED;          /* Linen White */
    --color-bg-base-translucent: rgba(246, 243, 237, 0.92);
    --color-text-primary: #171B15;     /* Dark Olive Charcoal */
    --color-accent-sage: #6B7B68;      /* High contrast Sage Green */
    --color-stone: #EADAC2;             /* Sun-baked Limestone */
    --color-hearth: #D37841;            /* Terracotta warm clay */
    --color-amber: #E28C28;             /* Darker filament glow */
    --color-glow: rgba(138, 157, 135, 0.12);
    --color-overlay-dark: rgba(23, 27, 21, 0.18);
    --color-border-line: rgba(23, 27, 21, 0.12);
}

/* Dark / Nocturnal Mode */
body.nocturnal-mode {
    --color-bg-base: #0F120E;          /* Nocturnal Cypress */
    --color-bg-base-translucent: rgba(15, 18, 14, 0.92);
    --color-text-primary: #F6F3ED;     /* Linen White */
    --color-accent-sage: #8A9D87;      /* Forest silhouette */
    --color-stone: #2A2E28;             /* Wet river stone */
    --color-hearth: #FFA33C;            /* Radiant amber ember */
    --color-amber: #FFB35C;
    --color-glow: rgba(255, 163, 60, 0.22);
    --color-overlay-dark: rgba(0, 0, 0, 0.65);
    --color-border-line: rgba(246, 243, 237, 0.12);
}

/* 2. Global Resets & Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
    transition: background-color 1.4s var(--ease-laminar), color 1.4s var(--ease-laminar);
}

body {
    font-family: var(--font-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    min-height: 100vh;
}

/* Tactile Linen Overlay */
.linen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Utility Monospace Label */
.mono-label {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 0.8vw, 0.95rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-accent-sage);
}

/* 3. Logo Styles & Inverts */
.logo-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    transition: filter 1.4s var(--ease-laminar);
}

body.daytime-mode .logo-img {
    filter: brightness(0) saturate(100%) invert(0.08) sepia(0.08) saturate(0.5); /* Olive black day filter */
}

body.nocturnal-mode .logo-img {
    filter: brightness(0) invert(0.96) sepia(0.05) saturate(0.2); /* Linen white night filter */
}

/* 4. Act I: Loader Styles */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F6F3ED;
    z-index: 1;
    transition: transform 1.5s var(--ease-curtain);
}

.loader-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: #171B15;
    transition: opacity 0.8s var(--ease-laminar);
}

.loader-logo {
    max-height: 90px;
    filter: none !important;
}

.loader-brand-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 4.5rem);
    font-weight: 300;
    letter-spacing: 0.1em;
}

.loader-progress {
    display: flex;
    justify-content: center;
    gap: 2px;
}

.loader-tagline {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    opacity: 0.6;
    margin-top: 10px;
    max-width: 320px;
    line-height: 1.5;
}

body.loaded .loader-curtain {
    transform: translateY(-100%);
}

body.loaded .loader-content {
    opacity: 0;
    pointer-events: none;
}

body.loaded .loader {
    pointer-events: none;
}

/* 5. Floating Navigation (Celine Style with spacing and alignment) */
.solar-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 8px var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: opacity 0.5s var(--ease-laminar), transform 0.5s var(--ease-laminar), background-color 0.5s var(--ease-laminar), border-color 0.5s var(--ease-laminar);
}

/* Glassmorphic scrolled state & subpage headers backing */
.menu-page .solar-navigation,
.gallery-page .solar-navigation,
.reservations-page .solar-navigation,
.solar-navigation.scrolled {
    background-color: var(--color-bg-base-translucent);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-color: var(--color-border-line);
}

.solar-navigation.nav-hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.nav-left-brand {
    flex: 1;
    display: flex;
    align-items: center;
}

.nav-center-menu {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-right-actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-sm);
}

.brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-primary);
}

.nav-logo {
    height: 95px !important; /* Enlarged header logo for premium visibility */
    max-height: 95px;
    width: auto;
    object-fit: contain;
}

/* Scrolled logo filter override in daytime mode */
body.daytime-mode .solar-navigation.scrolled .nav-logo,
body.daytime-mode .menu-page .nav-logo,
body.daytime-mode .gallery-page .nav-logo,
body.daytime-mode .reservations-page .nav-logo {
    filter: brightness(0) saturate(100%) invert(0.08) sepia(0.08) saturate(0.5) !important;
}

/* Unscrolled logo over dark video is ALWAYS white */
.solar-navigation:not(.scrolled) .nav-logo {
    filter: brightness(0) invert(1) !important;
}

.nav-links {
    display: flex;
    gap: var(--space-md);
}

.nav-item {
    text-decoration: none;
    color: #FFFFFF; /* High contrast white by default over hero video */
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 0.95vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0.9;
    position: relative;
    padding-bottom: 4px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
    transition: opacity 0.4s var(--ease-laminar), color 0.4s var(--ease-laminar);
}

/* Nav items color on scrolled backing or subpages */
.solar-navigation.scrolled .nav-item,
.menu-page .nav-item,
.gallery-page .nav-item,
.reservations-page .nav-item {
    color: var(--color-text-primary);
    text-shadow: none;
    opacity: 0.85;
}

.nav-item.active {
    opacity: 1;
    color: var(--color-accent-sage) !important;
}

.nav-item.active::after {
    width: 100%;
    left: 0;
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1.5px;
    background-color: var(--color-accent-sage);
    transition: width 0.4s var(--ease-laminar), left 0.4s var(--ease-laminar);
}

.nav-item:hover {
    opacity: 1;
}

.nav-item:hover::after {
    width: 100%;
    left: 0;
}

/* =============================================================
 * Luxury 14-Language Dropdown Selector
 * ============================================================= */
.lang-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.lang-dropdown-trigger {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #FFFFFF;
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: all 0.3s var(--ease-laminar);
}

/* Scrolled language trigger states */
.solar-navigation.scrolled .lang-dropdown-trigger,
.menu-page .lang-dropdown-trigger,
.gallery-page .lang-dropdown-trigger,
.reservations-page .lang-dropdown-trigger {
    color: var(--color-text-primary);
    border-color: var(--color-border-line);
    text-shadow: none;
}

.lang-dropdown-trigger:hover {
    border-color: var(--color-accent-sage);
    color: var(--color-accent-sage);
}

.lang-dropdown-trigger .arrow {
    font-size: 0.6rem;
    opacity: 0.7;
    transition: transform 0.3s;
}

.lang-dropdown-wrapper.active .lang-dropdown-trigger .arrow {
    transform: rotate(180deg);
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background-color: var(--color-bg-base-translucent);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border: 1px solid var(--color-border-line);
    border-radius: 6px;
    display: none;
    flex-direction: column;
    padding: 8px 0;
    z-index: 150;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.lang-dropdown-menu.active {
    display: flex;
    animation: dropdown-fade-in 0.3s var(--ease-laminar) forwards;
}

@keyframes dropdown-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.lang-dropdown-item {
    background: none;
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    padding: 10px 18px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-primary);
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.2s var(--ease-laminar);
}

.lang-dropdown-item:hover {
    background-color: var(--color-stone);
    color: var(--color-accent-sage);
    padding-left: 22px;
}

.lang-dropdown-item.active {
    color: var(--color-hearth);
    font-weight: 700;
}

/* 6. Act I: The Gate (Full-Screen Immersive Cover) */
.hero-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.hero-media-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}

.hero-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 27, 21, 0.35);
    z-index: 2;
    transition: background-color 1.4s var(--ease-laminar);
}

.hero-overlay-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #F6F3ED;
    padding: var(--space-xl) 0 var(--space-md) 0;
}

.hero-logo {
    max-height: 140px !important;
    width: auto;
    margin-bottom: var(--space-xs);
    filter: brightness(0) invert(1) !important;
}

.hero-display-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 9.5vw, 10rem);
    font-weight: 300;
    font-style: italic;
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

.hero-date {
    color: #F6F3ED;
    opacity: 0.9;
}

.hero-scroll-prompt {
    position: absolute;
    bottom: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0.95;
}

.hero-scroll-prompt .mono-label {
    color: #F6F3ED !important;
    font-size: 0.8rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.prompt-line {
    width: 1.5px;
    height: 45px;
    background-color: #F6F3ED;
    animation: scroll-line-move 2.5s infinite var(--ease-laminar);
    transform-origin: top;
}

@keyframes scroll-line-move {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    50.1% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* 7. Act II: The Sanctuary (Η Πέτρινη Αυλή) */
.sanctuary-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: var(--color-bg-base);
    padding: var(--space-xl) var(--space-lg);
    z-index: 2;
    display: flex;
    align-items: center;
    transition: background-color 1.4s var(--ease-laminar);
}

.editorial-spread-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-lg);
    max-width: 1350px;
    margin: 0 auto;
    width: 100%;
    align-items: center;
}

.spread-left-column {
    position: relative;
    width: 100%;
}

.image-bleed-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3.5/4.5;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.03);
}

.parallax-img {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    object-fit: cover;
    will-change: transform;
}

.frame-caption-mono {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #F6F3ED;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    opacity: 0.8;
    z-index: 5;
}

.spread-right-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-left: var(--space-sm);
}

.section-chapter {
    color: var(--color-accent-sage);
}

.editorial-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5.2vw, 5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.1;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    transition: color 1.4s var(--ease-laminar);
}

.editorial-body {
    font-size: clamp(1.05rem, 1.25vw, 1.45rem);
    line-height: 1.7;
    opacity: 0.85;
    color: var(--color-text-primary);
    transition: color 1.4s var(--ease-laminar);
}

.editorial-body.secondary {
    font-size: clamp(0.95rem, 1.1vw, 1.2rem);
    opacity: 0.65;
    line-height: 1.6;
}

/* 8. Act III: The Wow Moment (Το Πέρασμα στο Σούρουπο) */
.canopy-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-base);
    z-index: 2;
    overflow: hidden;
    transition: background-color 1.4s var(--ease-laminar);
}

.canopy-viewport-pin {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.canopy-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.canopy-fullscreen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layer-day {
    z-index: 1;
}

.layer-night {
    z-index: 2;
    opacity: 0;
    will-change: opacity;
}

.canopy-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 27, 21, 0.2);
    z-index: 3;
    transition: background-color 1.4s var(--ease-laminar);
}

body.nocturnal-mode .canopy-tint {
    background-color: rgba(0, 0, 0, 0.55);
}

.canopy-overlay-content {
    position: relative;
    z-index: 4;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #F6F3ED;
    padding: 0 var(--space-lg);
}

.canopy-display-phrase {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 4.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.25;
    letter-spacing: -0.01em;
    position: absolute;
    width: 80%;
    max-width: 900px;
    will-change: opacity;
    transition: opacity 0.15s ease-out;
}

.phrase-nocturnal {
    opacity: 0;
}

/* Static Fallback for reduced motion / mobile styling */
@media (prefers-reduced-motion: reduce) {
    .canopy-section {
        height: auto;
        min-height: 100vh;
    }
    .layer-night {
        display: none !important;
    }
    .phrase-nocturnal {
        display: none !important;
    }
    .canopy-display-phrase {
        position: relative;
        width: 100%;
        opacity: 1 !important;
    }
}

/* 9. Act IV: Curated Exhibition (Η Έκθεση των Αισθήσεων) */
.exhibition-section {
    position: relative;
    width: 100%;
    background-color: var(--color-bg-base);
    padding: var(--space-xl) var(--space-lg);
    z-index: 2;
    transition: background-color 1.4s var(--ease-laminar);
}

.exhibition-header {
    max-width: 800px;
    margin: 0 auto var(--space-xl) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.exhibition-gallery {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.gallery-spread-row {
    width: 100%;
    display: flex;
    justify-content: center;
}

.gallery-spread-row.split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.gallery-item-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-stone);
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.02);
    transition: box-shadow 1.4s var(--ease-laminar);
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-laminar);
}

.gallery-item-frame:hover .gallery-img {
    transform: scale(1.02);
}

.size-large {
    aspect-ratio: 16/9;
}

.size-medium {
    aspect-ratio: 4/5;
}

.offset-left {
    padding-right: var(--space-sm);
}

.offset-right {
    padding-left: var(--space-sm);
}

.gallery-caption {
    margin-top: 12px;
    text-align: left;
}

/* Minimal PDF catalogues link style */
.editorial-menu-pathway {
    margin-top: var(--space-xl);
    border-top: 1px solid var(--color-border-line);
    padding-top: var(--space-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 1.4s var(--ease-laminar);
}

.pdf-text-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.menu-editorial-btn {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.8vw, 2.2rem);
    text-decoration: none;
    color: var(--color-text-primary);
    padding: 10px 24px;
    border: 1px solid var(--color-text-primary);
    border-radius: 4px;
    transition: all 0.4s var(--ease-laminar);
}

.menu-editorial-btn:hover {
    color: var(--color-accent-sage);
    border-color: var(--color-accent-sage);
    padding-left: 32px;
    padding-right: 32px;
}

.divider {
    opacity: 0.3;
}

/* Featured Dishes Grid (index.html) */
.featured-dishes-section {
    position: relative;
    width: 100%;
    background-color: var(--color-bg-base);
    padding: var(--space-xl) var(--space-lg);
    z-index: 2;
    transition: background-color 1.4s var(--ease-laminar);
}

.featured-dishes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.dish-item-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.dish-media-frame {
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.02);
}

.dish-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-laminar);
}

.dish-item-card:hover .dish-img {
    transform: scale(1.02);
}

.dish-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dish-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--color-text-primary);
    transition: color 1.4s var(--ease-laminar);
}

.dish-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.85;
    color: var(--color-text-primary);
    transition: color 1.4s var(--ease-laminar);
}

/* Home Reservations CTA */
.home-reservation-cta {
    position: relative;
    width: 100vw;
    height: 70vh;
    overflow: hidden;
    z-index: 2;
}

.reserve-cta-box {
    text-align: center;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: #F6F3ED;
}

.cta-display-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1;
}

.cta-display-desc {
    font-size: 1.2rem;
    opacity: 0.85;
}

.cta-btn {
    border-color: #F6F3ED;
    color: #F6F3ED;
}

.cta-btn:hover {
    color: var(--color-amber);
    border-color: var(--color-amber);
}

/* Act V: The Reservation (Η Κράτηση - Global) */
.reserve-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 2;
}

.reserve-bg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.reserve-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reserve-bg-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.65);
    z-index: 2;
}

.reserve-content-overlay {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-lg);
}

/* Mediterranean Mist Glassmorphic Reservation Form Card */
.reserve-card-form {
    width: 100%;
    max-width: 650px;
    background: rgba(23, 27, 21, 0.45);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(246, 243, 237, 0.15);
    border-radius: 8px;
    padding: var(--space-md) var(--space-md);
    color: #F6F3ED;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.form-chapter {
    color: var(--color-accent-sage);
}

.form-display-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 4.5rem);
    font-weight: 300;
    font-style: italic;
    color: #F6F3ED;
    margin-bottom: var(--space-xs);
}

.letter-prose-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-field-row {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 4px;
    width: 100%;
}

.field-label {
    font-size: 0.7rem;
    color: var(--color-accent-sage);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.split-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    width: 100%;
}

.sub-field {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 4px;
}

/* Elegant input elements */
.letter-select-element, .letter-input-element, .letter-textarea-element {
    background: none;
    border: none;
    outline: none;
    border-bottom: 1px solid rgba(246, 243, 237, 0.25);
    font-family: var(--font-text);
    font-size: 1.15rem;
    color: #F6F3ED;
    padding: 6px 0;
    width: 100%;
    border-radius: 0;
    transition: border-color 0.4s var(--ease-laminar);
}

.letter-select-element {
    cursor: pointer;
}

.letter-textarea-element {
    resize: none;
}

.letter-select-element:focus, .letter-input-element:focus, .letter-textarea-element:focus {
    border-color: var(--color-amber);
}

.letter-input-element::placeholder, .letter-textarea-element::placeholder {
    color: rgba(246, 243, 237, 0.35);
}

.letter-select-element option {
    background-color: #171B15;
    color: #F6F3ED;
}

.submit-booking-letter-btn {
    background: none;
    border: 1px solid rgba(246, 243, 237, 0.25);
    border-radius: 30px;
    padding: 12px 32px;
    cursor: pointer;
    font-family: var(--font-mono);
    color: #F6F3ED;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.9rem;
    margin-top: 10px;
    width: fit-content;
    align-self: center;
    transition: color 0.4s var(--ease-laminar), border-color 0.4s var(--ease-laminar);
}

.submit-booking-letter-btn:hover {
    color: var(--color-accent-sage);
    border-color: var(--color-accent-sage);
}

/* Success Seal */
.booking-letter-success {
    text-align: center;
    padding: var(--space-xs) 0;
    animation: fade-in 0.7s var(--ease-laminar) forwards;
}

.success-wax-seal-wrapper {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px auto;
}

.success-seal-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(0.96) sepia(0.05) saturate(0.2);
}

.success-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 300;
    margin-bottom: 8px;
    color: #F6F3ED;
}

.success-subtitle {
    font-size: 1.05rem;
    opacity: 0.75;
    margin-bottom: 20px;
    color: #F6F3ED;
}

.success-details-summary {
    display: inline-block;
    border-top: 1px dashed rgba(246, 243, 237, 0.3);
    padding-top: var(--space-xs);
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 11. Footer Section */
.footer-section {
    background-color: var(--color-bg-base);
    border-top: 1px solid var(--color-border-line);
    padding: var(--space-xl) var(--space-lg) var(--space-md) var(--space-lg);
    z-index: 2;
    position: relative;
    color: var(--color-text-primary);
    transition: background-color 1.4s var(--ease-laminar), border-color 1.4s var(--ease-laminar);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr 1.25fr;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-contact-text, .footer-location-text, .footer-schedule-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    opacity: 0.9;
}

.footer-link {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s var(--ease-laminar);
}

.footer-link:hover {
    color: var(--color-accent-sage);
}

.footer-center {
    display: flex;
    justify-content: center;
}

.footer-logo {
    height: 100px;
}

.footer-logo-img {
    height: 100%;
    max-height: 100px;
    opacity: 0.9;
}

.footer-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: right;
}

.footer-poetic-schedule {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--color-hearth);
}

.footer-bottom {
    margin-top: var(--space-xl);
    border-top: 1px solid var(--color-border-line);
    padding-top: var(--space-sm);
    text-align: center;
    transition: border-color 1.4s var(--ease-laminar);
}

.copyright-label {
    font-size: 0.7rem;
    color: var(--color-text-primary);
    opacity: 0.65;
}

/* =============================================================
 * 12. DEDICATED MENU PAGE LAYOUT (menu.html)
 * ============================================================= */
.menu-page .menu-main-container {
    padding-top: 15vh;
    min-height: 100vh;
    background-color: var(--color-bg-base);
    transition: background-color 1.4s var(--ease-laminar);
}

.menu-intro-header {
    text-align: center;
    max-width: 800px;
    margin: var(--space-md) auto var(--space-xs) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: 0 var(--space-md);
}

.menu-main-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 7rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    margin: 10px 0;
}

/* Elegant top horizontal sticky categories bar */
.menu-categories-sticky-bar {
    position: sticky;
    top: 110px; /* Aligns right underneath floating celine header */
    background-color: var(--color-bg-base-translucent);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-bottom: 1px solid var(--color-border-line);
    z-index: 90;
    padding: 14px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    transition: background-color 1.4s var(--ease-laminar), border-color 1.4s var(--ease-laminar);
}

.categories-nav-list {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 1200px;
    padding: 0 var(--space-md);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.categories-nav-list::-webkit-scrollbar {
    display: none;
}

.category-nav-link {
    text-decoration: none;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.4vw, 1.55rem);
    font-weight: 300;
    color: var(--color-text-primary);
    opacity: 0.6;
    position: relative;
    padding-bottom: 4px;
    transition: opacity 0.4s var(--ease-laminar), color 0.4s var(--ease-laminar);
}

.category-nav-link:hover {
    opacity: 0.95;
}

.category-nav-link.active {
    opacity: 1;
    color: var(--color-accent-sage);
}

.category-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1.5px;
    background-color: var(--color-accent-sage);
    transition: width 0.3s var(--ease-laminar), left 0.3s var(--ease-laminar);
}

.category-nav-link.active::after {
    width: 100%;
    left: 0;
}

/* Centered single column menu list grid */
.menu-editorial-grid {
    display: block;
    max-width: 900px;
    margin: var(--space-md) auto var(--space-xl) auto;
    padding: 0 var(--space-lg);
}

.menu-sidebar-nav {
    display: none; /* Decommissioned old vertical aside list */
}

.menu-content-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.menu-sheet-section {
    scroll-margin-top: 175px; /* Accounts for both header and sticky category bar! */
}

.menu-section-heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 3.2rem);
    font-weight: 300;
    font-style: italic;
    color: var(--color-accent-sage);
    border-bottom: 1px solid var(--color-border-line);
    padding-bottom: 10px;
    margin-bottom: 15px;
    transition: color 1.4s var(--ease-laminar);
}

/* Menu item row */
.menu-item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 0;
    border-bottom: 1px dashed var(--color-border-line);
}

.menu-item-text {
    flex-grow: 1;
    padding-right: var(--space-sm);
}

/* Large display translated text */
.menu-item-translated-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 2.2rem);
    font-weight: 400;
    color: var(--color-text-primary);
    margin-bottom: 5px;
}

.menu-item-translated-desc {
    font-size: clamp(0.95rem, 1vw, 1.15rem);
    line-height: 1.5;
    opacity: 0.8;
    margin-bottom: 10px;
}

/* Sticky greek translations underneath */
.menu-item-greek-title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.5vw, 1.6rem);
    font-style: italic;
    color: var(--color-accent-sage);
    margin-top: 6px;
    opacity: 0.9;
}

.menu-item-greek-desc {
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.65;
    line-height: 1.45;
}

.menu-item-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    flex-shrink: 0;
}

.menu-item-price {
    font-family: var(--font-mono);
    font-size: clamp(1.1rem, 1.3vw, 1.5rem);
    color: var(--color-text-primary);
}

.add-to-cart-btn {
    background: none;
    border: 1px solid var(--color-text-primary);
    border-radius: 4px;
    color: var(--color-text-primary);
    padding: 8px 18px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s var(--ease-laminar);
}

.add-to-cart-btn:hover {
    background-color: var(--color-text-primary);
    color: var(--color-bg-base);
}

/* Floating cart bar */
.floating-waiter-cart-bar {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--color-text-primary);
    color: var(--color-bg-base);
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    z-index: 98;
    animation: slide-up-bar 0.4s var(--ease-laminar) forwards;
}

@keyframes slide-up-bar {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.cart-bar-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

#cart-counter {
    color: var(--color-accent-sage);
}

.show-waiter-btn {
    background-color: var(--color-hearth);
    border: none;
    outline: none;
    color: #F6F3ED;
    padding: 8px 16px;
    border-radius: 30px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.3s;
}

.show-waiter-btn:hover {
    opacity: 0.9;
}

/* Waiter Cart Presenter Modal (POS Friendly, Absolute Black Contrast) */
.waiter-presenter-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    color: #FFFFFF;
    z-index: 1000;
    display: none;
    flex-direction: column;
    padding: 30px;
}

.waiter-presenter-modal.active {
    display: flex;
}

.waiter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 20px;
}

.waiter-brand-title {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    color: #FFA33C;
    letter-spacing: 0.1em;
}

.waiter-modal-close {
    background: none;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    padding: 10px 24px;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
}

.waiter-modal-close:hover {
    background-color: #FFFFFF;
    color: #000000;
}

.waiter-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 30px 0;
}

.waiter-orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 900px;
    margin: 0 auto;
}

.waiter-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.waiter-item-title-en {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.8vw, 3.2rem);
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.waiter-item-title-el {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 2.2rem);
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
}

.waiter-item-controls {
    display: flex;
    align-items: center;
    gap: 25px;
}

.waiter-qty-btn {
    background: none;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 2.2rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
}

.waiter-qty-btn:active {
    background-color: #FFFFFF;
    color: #000000;
}

.waiter-qty-num {
    font-family: var(--font-mono);
    font-size: 2.8rem;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
    color: #FFA33C;
}

.waiter-modal-footer {
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    padding-top: 20px;
}

.waiter-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.waiter-clear-btn {
    background: none;
    border: 1px solid rgba(255, 74, 74, 0.5);
    color: #FF4A4A;
    padding: 12px 28px;
    font-family: var(--font-mono);
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
}

.waiter-clear-btn:hover {
    background-color: #FF4A4A;
    color: #FFFFFF;
}

.waiter-total-qty {
    font-size: 2rem;
    color: #FFA33C;
}

/* =============================================================
 * 13. GALLERY PAGE LOOKBOOK SPECIFIC STYLES (gallery.html)
 * ============================================================= */
.gallery-page .gallery-main-container {
    padding-top: 15vh;
    min-height: 100vh;
    background-color: var(--color-bg-base);
    transition: background-color 1.4s var(--ease-laminar);
}

.gallery-intro-header {
    text-align: center;
    max-width: 800px;
    margin: var(--space-md) auto var(--space-lg) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: 0 var(--space-md);
}

.gallery-main-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 7rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    margin: 10px 0;
}

/* Lookbook Offset Grid for Gallery */
.exhibition-gallery-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 1200px;
    margin: var(--space-md) auto var(--space-xl) auto;
    padding: 0 var(--space-lg);
}

.gallery-row {
    width: 100%;
    display: flex;
    justify-content: center;
}

.gallery-row.split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.gallery-frame-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-stone);
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.015);
    cursor: pointer;
    transition: box-shadow 1.4s var(--ease-laminar);
}

.gallery-exhibit-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-laminar);
}

.gallery-frame-wrapper:hover .gallery-exhibit-img {
    transform: scale(1.03);
}

/* Visual Hover Magnify Monospace Trigger */
.gallery-hover-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(23, 27, 21, 0.75);
    color: #F6F3ED;
    padding: 10px 24px;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    border-radius: 4px;
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-laminar);
}

.gallery-frame-wrapper:hover .gallery-hover-indicator {
    opacity: 1;
}

/* FULLSCREEN SLIDESHOW LIGHTBOX */
.gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 18, 14, 0.98);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: var(--space-md);
}

.gallery-lightbox.active {
    display: flex;
    animation: fade-in-lightbox 0.5s var(--ease-laminar) forwards;
}

@keyframes fade-in-lightbox {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: 1px solid rgba(246, 243, 237, 0.4);
    color: #F6F3ED;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    border-radius: 4px;
    transition: all 0.3s;
}

.lightbox-close:hover {
    border-color: #F6F3ED;
    background-color: rgba(246, 243, 237, 0.1);
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    color: #F6F3ED;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1005;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.lightbox-nav-btn:hover {
    opacity: 1;
}

.prev-btn {
    left: 30px;
}

.next-btn {
    right: 30px;
}

.nav-arrow-svg {
    width: 32px;
    height: 32px;
}

.lightbox-content-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 85%;
    max-height: 85%;
}

.lightbox-main-img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    animation: scale-up-lightbox 0.5s var(--ease-laminar);
}

@keyframes scale-up-lightbox {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-caption-text {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.5vw, 1.8rem);
    font-style: italic;
    color: #F6F3ED;
    margin-top: 25px;
    text-align: center;
    letter-spacing: 0.02em;
}

/* =============================================================
 * 13. RESERVATIONS PAGE SPECIFIC STYLES (reservations.html)
 * ============================================================= */
.reservations-page .res-main-container {
    padding-top: 15vh;
    min-height: 100vh;
    position: relative;
}

/* Background Night Image Cover */
.res-bg-media-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.res-bg-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.res-bg-media-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 27, 21, 0.72);
    transition: background-color 1.4s var(--ease-laminar);
}

body.nocturnal-mode .res-bg-media-tint {
    background-color: rgba(0, 0, 0, 0.88);
}

/* Split Spread layout for reservations */
.res-editorial-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    max-width: 1300px;
    margin: var(--space-md) auto 0 auto;
    padding: 0 var(--space-lg);
    align-items: start;
}

.res-info-column {
    color: #F6F3ED;
    padding-right: var(--space-sm);
}

.res-display-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1;
    margin: 10px 0 20px 0;
}

.res-info-blocks {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
}

.res-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.block-accent {
    color: var(--color-accent-sage);
}

.res-block-text {
    font-size: clamp(0.95rem, 1.1vw, 1.25rem);
    line-height: 1.6;
    opacity: 0.85;
}

.res-link {
    color: #F6F3ED;
    text-decoration: none;
    border-bottom: 1px solid rgba(246, 243, 237, 0.2);
    transition: all 0.3s;
}

.res-link:hover {
    color: var(--color-accent-sage);
    border-bottom-color: var(--color-accent-sage);
}

.secondary-info {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.7;
    border-top: 1px solid rgba(246, 243, 237, 0.15);
    padding-top: 15px;
}

.res-form-column {
    display: flex;
    justify-content: center;
}

/* Map frame section */
.res-map-section {
    max-width: 1300px;
    margin: var(--space-xl) auto 0 auto;
    padding: 0 var(--space-lg) var(--space-xl) var(--space-lg);
    text-align: center;
}

.map-label {
    margin-bottom: 25px;
    display: block;
}

.map-iframe-container {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    background-color: var(--color-stone);
}

.map-iframe-container iframe {
    display: block;
    filter: invert(0.9) hue-rotate(180deg);
}

/* =============================================================
 * 14. Responsive Layout Adjustments
 * ============================================================= */

/* Tablet Rules */
@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }
    
    .solar-navigation {
        padding: var(--space-md) var(--space-md);
    }

    .nav-center-menu {
        flex-grow: 1;
        width: auto;
    }

    .editorial-spread-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        text-align: center;
    }

    .spread-right-column {
        padding-left: 0;
    }

    .image-bleed-frame {
        aspect-ratio: 16/9;
    }

    .gallery-spread-row.split-row {
        grid-template-columns: 1fr;
    }

    .offset-left {
        padding-right: 0;
    }

    .offset-right {
        padding-left: 0;
    }

    .featured-dishes-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .menu-categories-sticky-bar {
        top: 70px;
    }

    .exhibition-gallery-grid {
        gap: var(--space-md);
    }

    .gallery-row.split-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .res-editorial-split-layout {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .res-info-column {
        padding-right: 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-md);
    }

    .footer-right {
        text-align: center;
    }
}

/* Mobile Rules */
@media (max-width: 768px) {
    .solar-navigation {
        flex-direction: row;
        justify-content: space-between;
        padding: var(--space-sm) var(--space-md);
    }

    .nav-left-brand {
        width: auto;
        flex: none;
    }

    .nav-center-menu {
        display: none;
    }

    .nav-right-actions {
        display: flex;
        flex: none;
        align-items: center;
        gap: 15px;
    }

    .solar-compass {
        display: none !important;
    }

    .hero-logo {
        max-height: 70px;
    }

    .hero-display-title {
        font-size: clamp(3rem, 12vw, 5.5rem);
    }

    .canopy-display-phrase {
        width: 90%;
    }
    
    .pdf-text-links {
        flex-direction: column;
        gap: 12px;
    }

    .divider {
        display: none;
    }

    .split-fields {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .menu-categories-sticky-bar {
        top: 80px;
        padding: 10px 0;
        justify-content: flex-start;
    }

    .categories-nav-list {
        gap: 16px;
    }

    .floating-waiter-cart-bar {
        width: calc(100% - 40px);
        left: 20px;
        right: 20px;
        bottom: 20px;
        border-radius: 8px;
    }

    .cart-bar-content {
        justify-content: space-between;
        width: 100%;
    }

    .waiter-presenter-modal {
        padding: 15px;
    }

    .waiter-order-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .waiter-item-controls {
        width: 100%;
        justify-content: space-between;
    }

    .lightbox-close {
        top: 15px;
        right: 15px;
        padding: 8px 16px;
    }

    .lightbox-nav-btn {
        width: 40px;
        height: 40px;
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }
}

/* PDF Downloads Block */
.pdf-downloads-container {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.pdf-download-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pdf-download-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.pdf-separator {
    color: var(--color-primary);
    opacity: 0.3;
    font-size: 0.75rem;
}