/* 
 * Le Grand Bleu — Design System v2
 * Palette: Deep Navy (#162F35) · Ocean (#264D56) · Warm Salt (#E5DDD4) · Driftwood accent (#9E5930)
 * Font: Cormorant Garamond (heading) + Barlow (body)
 */

/* ─── Self-hosted fonts (latin subset) ─── */
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(fonts/barlow-300.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/barlow-400.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/barlow-500.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url(fonts/cormorant-garamond-300-italic.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ─── Custom Scrollbar ─── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #162F35; }
::-webkit-scrollbar-thumb { background: #9E5930; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #C7BC9E; }

/* ─── Selection ─── */
::selection {
    background-color: #9E5930;
    color: #ffffff;
}

/* ─── Fixed Header ─── */
.site-header {
    transition: background-color 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
}
.site-header.scrolled {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    background-color: rgba(22, 47, 53, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(229, 221, 212, 0.06);
}

/* ─── Outline Buttons (no fill, no rounded) ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: 1px solid rgba(229, 221, 212, 0.25);
    color: #ffffff;
    padding: 0.875rem 2.25rem;
    font-family: 'Barlow', sans-serif;
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-decoration: none;
    transition: all 0.35s ease;
    cursor: pointer;
    background: transparent;
}
.btn:hover {
    border-color: #9E5930;
    color: #9E5930;
}

.btn-header {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(229, 221, 212, 0.2);
    color: #ffffff;
    padding: 0.5rem 1.25rem;
    font-family: 'Barlow', sans-serif;
    font-size: 0.5625rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    text-decoration: none;
    transition: all 0.35s ease;
    background: transparent;
}
.btn-header:hover {
    border-color: #9E5930;
    color: #9E5930;
}

/* ─── Scroll Arrow (Hero bottom) ─── */
.scroll-arrow {
    animation: scrollBounce 2.5s ease-in-out infinite;
    background: none;
    border: none;
    cursor: pointer;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(8px); opacity: 0.8; }
}

/* ─── Scroll Reveal Animations ─── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.3s; }

/* ─── Parallax Sections ─── */
.parallax-section {
    position: relative;
    overflow: hidden;
}
.parallax-img {
    width: 100%;
    height: 130%;
    object-fit: cover;
    will-change: transform;
    position: absolute;
    top: -15%;
    left: 0;
}

/* ─── Gold Separator ─── */
.separator {
    width: 4rem;
    height: 1px;
    background-color: #9E5930;
    margin: 0 auto;
}

/* ─── Smooth Image Loading ─── */
img {
    transition: opacity 0.6s ease;
}

/* ─── Elegant Horizontal Rules ─── */
hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, #9E5930, transparent);
}

/* ─── Hide Scrollbar Utility ─── */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Image Hover (dish gallery) ─── */
.img-zoom {
    overflow: hidden;
}
.img-zoom img {
    transition: transform 1s ease;
}
.img-zoom:hover img {
    transform: scale(1.04);
}

/* ─── Apple-style rounded corners (boxes & photos) ─── */
.img-zoom,
.glass-card,
.glass-card-quote,
#reviews .relative.bg-white\/\[0\.03\],
#hero .backdrop-blur-md {
    border-radius: 2rem;
    isolation: isolate; /* keeps rounded clipping smooth on zoom (Safari) */
}
/* Full-width edge-to-edge photo stays square */
#meza-mmoja .img-zoom {
    border-radius: 0;
}
@supports (corner-shape: squircle) {
    .img-zoom,
    .glass-card,
    .glass-card-quote,
    #reviews .relative.bg-white\/\[0\.03\],
    #hero .backdrop-blur-md {
        corner-shape: squircle;
        border-radius: 3rem; /* squircle needs a larger radius to look equivalent */
    }
    #meza-mmoja .img-zoom {
        border-radius: 0;
    }
}

/* ─── Dinner Section Texture Background ─── */
#dinner {
    position: relative;
    background-image: linear-gradient(rgba(22, 47, 53, 0.80), rgba(22, 47, 53, 0.80)), url('images/6_risultato.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ─── The Kitchen Section Texture Background ─── */
#chef {
    position: relative;
    background-image: linear-gradient(rgba(22, 47, 53, 0.80), rgba(22, 47, 53, 0.80)), url('images/4_risultato.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ─── Meza Mmoja Text Section Texture Background ─── */
.meza-mmoja-text-bg {
    position: relative;
    background-image: linear-gradient(to bottom, rgba(22, 47, 53, 0.80), rgba(22, 47, 53, 0.90)), url('images/4_risultato.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ─── The Tasting Hour Section Texture Background ─── */
#tasting {
    position: relative;
    background-image: linear-gradient(to bottom, rgba(22, 47, 53, 0.75), rgba(22, 47, 53, 0.85)), url('images/6_risultato.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ─── Glassmorphism Cards for Textured Sections ─── */
.glass-card {
    background: rgba(22, 47, 53, 0.60);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(229, 221, 212, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    padding: 2.5rem;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

@media (min-width: 768px) {
    .glass-card {
        padding: 3.5rem;
    }
}

.glass-card:hover {
    border-color: rgba(158, 89, 48, 0.4);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

.glass-card-quote {
    background: rgba(22, 47, 53, 0.50);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(229, 221, 212, 0.12);
    padding: 3rem 2rem;
    max-w: 4rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Text enhancement & depth */
.glass-card h2, 
.glass-card blockquote,
#info h2,
#info p {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.glass-card p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Make body texts everywhere crisp and legible */
p {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}






/* ─── Reviews Section: same texture background as Meza Mmoja ─── */
#reviews {
    position: relative;
    background-image: linear-gradient(to bottom, rgba(22, 47, 53, 0.80), rgba(22, 47, 53, 0.90)), url('images/2_risultato.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ─── Reviews box: higher opacity ─── */
#reviews .relative.bg-white\/\[0\.03\] {
    background: rgba(22, 47, 53, 0.80);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(229, 221, 212, 0.15);
}

/* ─── Reviews cards (desktop row) ─── */
.review-card {
    display: flex;
    flex-direction: column;
    background: rgba(22, 47, 53, 0.80);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(229, 221, 212, 0.15);
    border-radius: 2rem;
    padding: 2rem;
    min-height: 22rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    flex: 0 0 calc((100% - 3 * 1.5rem) / 4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Sliding track */
.reviews-viewport {
    overflow: hidden;
    padding: 2rem 0 5rem;
    margin: -2rem 0 -5rem;
}
#reviews-grid {
    --visible-reviews: 4;
    display: flex;
    gap: 1.5rem;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Liquid glass arrows */
.glass-arrow {
    position: absolute;
    top: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: -2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(22, 47, 53, 0.40);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 221, 212, 0.10);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 5;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.glass-arrow:hover {
    transform: scale(1.1);
    background: rgba(22, 47, 53, 0.55);
}
.glass-arrow:active { transform: scale(0.95); }
.glass-arrow-left { left: -3.5rem; }
.glass-arrow-right { right: -3.5rem; }
@supports (corner-shape: squircle) {
    .review-card { corner-shape: squircle; border-radius: 3rem; }
}

/* ─── Footer Liquid Glass Icons (Hero box style) ─── */
.footer-glass-btn {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(22, 47, 53, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(229, 221, 212, 0.16);
    color: rgba(229, 221, 212, 0.85);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease;
}
.footer-glass-btn:hover {
    background: rgba(22, 47, 53, 0.70);
    border-color: rgba(229, 221, 212, 0.35);
    color: #ffffff;
    transform: scale(1.12);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

/* ─── Responsive layout ─── */
#hero {
    min-height: 100svh;
    padding-top: 4rem;
    padding-bottom: 5rem;
}
#hero > .backdrop-blur-md {
    width: 100%;
}
@media (min-width: 768px) {
    #hero > .backdrop-blur-md { width: fit-content; }
}
#hero .max-w-xs {
    flex-wrap: wrap;
}
.site-header .btn-header {
    min-height: 44px;
}
footer > .flex {
    flex-wrap: wrap;
}

@media (min-width: 768px) and (max-width: 1279px) {
    #reviews-grid { --visible-reviews: 2; }
    .review-card { flex-basis: calc((100% - 1.5rem) / 2); }
    .glass-card { padding: 2rem; }
    #reviews > .hidden { padding-inline: 3rem; }
    .glass-arrow-left { left: -3rem; }
    .glass-arrow-right { right: -3rem; }
}

@media (max-width: 767px) {
    #hero > .backdrop-blur-md,
    .glass-card,
    #reviews .relative.bg-white\/\[0\.03\] {
        padding: 1.5rem;
    }
    #hero h1 { margin-bottom: 1.5rem; }
    #hero p.uppercase { margin-bottom: 2rem; }
    #hero .btn { padding-inline: 1rem; }
    #dinner, #chef, #tasting, #reviews {
        padding-block: 4rem;
    }
    #info, .meza-mmoja-text-bg { padding-block: 3.5rem; }
    .site-header > div { gap: 0.75rem; padding-inline: 1rem; }
    .site-header > div > a { flex-shrink: 0; }
    .btn-header { padding-inline: 0.75rem; letter-spacing: 0.15em; }
    #reviews-scroll > div { min-width: 0; flex: 0 0 100%; }
}

/* ─── Language dropdown (same box style as .btn-header) ─── */
.lang-dd { position: relative; }
.lang-dd > summary { list-style: none; cursor: pointer; min-height: 44px; user-select: none; }
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd > summary::after {
    content: "";
    width: 0.4rem; height: 0.4rem;
    border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: translateY(-0.1rem) rotate(45deg);
    transition: transform 0.3s ease;
}
.lang-dd[open] > summary { border-color: rgba(229, 221, 212, 0.6); color: #ffffff; }
.lang-dd[open] > summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.lang-menu {
    position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 60;
    min-width: 8.5rem; margin: 0; padding: 0.25rem 0; list-style: none;
    background: rgba(22, 47, 53, 0.97);
    border: 1px solid rgba(229, 221, 212, 0.2);
}
.lang-menu a {
    display: block; padding: 0.7rem 1.25rem;
    font-family: 'Barlow', sans-serif; font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85); text-decoration: none; white-space: nowrap;
    transition: color 0.3s ease;
}
.lang-menu a:hover { color: #9E5930; }

/* Header on phones: the menu button lives in the hero, keep the bar to logo + language + booking */
.btn-header { white-space: nowrap; }
@media (max-width: 767px) {
    .btn-header.hidden { display: none; }
}