/* Milyando Urla — public site styles */

:root {
    --cream:     #fbf9f4;
    --sand:      #f3efe6;
    --line:      #e6e0d4;
    --ink:       #1e2a2c;
    --muted:     #6c7374;
    --sea:       #6e8f92;
    --sea-deep:  #4d6c6f;
    --sea-mist:  #d8e6e4;
    --sunset:    #c98a4b;

    --side-w:    20rem;
    --serif:     "Cormorant Garamond", "Times New Roman", serif;
    --sans:      "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ------------------------------------------------------------- sidebar */

.side {
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--side-w);
    background: var(--sea);
    color: #f1f7f6;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 30;
    text-align: center;
}

.side-head { padding: 2.75rem 2rem 1.75rem; }

.monogram {
    display: block;
    width: 9.5rem;
    height: 9.5rem;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .14);
}
.monogram img { width: 100%; height: 100%; object-fit: cover; }

.tagline {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.3;
    color: #e7f1ef;
}

.lang-switch {
    display: inline-flex;
    margin-top: 1.4rem;
    padding: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .12);
}
.lang-switch a {
    padding: .3rem .95rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-decoration: none;
    color: #e3eeec;
}
.lang-switch a.on { background: var(--cream); color: var(--sea-deep); }
.lang-switch a:not(.on):hover { color: #fff; }

.side-nav { flex: 1; padding-bottom: 1rem; }
.nav-group {
    margin: 1.1rem 0 .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.side-nav a {
    display: block;
    padding: .42rem 1.5rem;
    font-size: .95rem;
    text-decoration: none;
    color: #fff;
    transition: background .15s;
}
.side-nav a:hover { background: rgba(255, 255, 255, .08); }
.side-nav a.active { background: var(--cream); color: var(--sea-deep); font-weight: 600; }
.nav-contact { margin-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: .6rem; }

.side-foot {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.25rem 0 1.75rem;
}
.side-foot a { color: #d6e7e4; transition: color .15s; }
.side-foot a:hover { color: #fff; }
.side-foot .ico { width: 1.35rem; height: 1.35rem; }

/* ------------------------------------------------------------- main column */

.page { margin-right: var(--side-w); }

.hero { height: clamp(16rem, 38vh, 26rem); overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }

.sheet {
    max-width: 42rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.intro { text-align: center; padding: 3.25rem 0 1rem; }
.script-logo { width: min(26rem, 78%); height: auto; margin: 0 auto; }
.tagline-main {
    display: none;
    margin-top: .5rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--muted);
}

/* ------------------------------------------------------------- categories */

.cat { padding-top: 3.5rem; }

.cat-title {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 2rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--sea-deep);
}
.cat-title::before, .cat-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}

.items { display: grid; gap: 1.6rem; }
.cat-drinks .items { gap: .95rem; }

.item { text-align: center; }

.item-name {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.42rem;
    line-height: 1.25;
    letter-spacing: .005em;
}
.cat-drinks .item-name { font-size: 1.24rem; }

.item-desc {
    margin-top: .1rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.08rem;
    color: var(--muted);
}

.item-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .2rem .9rem;
    margin-top: .3rem;
    font-size: .88rem;
    color: var(--muted);
}
.item-meta .price { color: var(--ink); font-weight: 600; letter-spacing: .02em; }
.item-meta .glass::before,
.item-meta .kcal::before {
    content: "";
    display: inline-block;
    width: 3px; height: 3px;
    margin-right: .9rem;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--line);
    background: #c7bfb0;
}
.item-meta .kcal { color: var(--sea-deep); }

/* items with a photo */
.item.has-photo { padding: .5rem 0 .75rem; }
.item-photo {
    display: block;
    width: min(100%, 30rem);
    aspect-ratio: 4 / 3;
    margin: 0 auto 1rem;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--sand);
    cursor: zoom-in;
    box-shadow: 0 10px 30px -18px rgba(30, 42, 44, .45);
}
.item-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.item-photo:hover img { transform: scale(1.035); }
.item-photo:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }

.banner {
    margin: 4.5rem -1.5rem 0;
    height: 9rem;
    overflow: hidden;
    border-radius: 0;
}
.banner img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }

.kcal-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 3rem;
    font-size: .82rem;
    color: var(--muted);
}
.kcal-note .ico { color: var(--sea); }

/* ------------------------------------------------------------- contact */

.contact { padding-top: 4.5rem; }
.contact-list { display: grid; gap: 1.1rem; max-width: 30rem; margin: 0 auto; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list .ico {
    width: 2.4rem; height: 2.4rem;
    padding: .55rem;
    border-radius: 50%;
    background: var(--sea);
    color: #fff;
}
.contact-list li > span, .contact-list li > a { padding-top: .35rem; }
.contact-list a { text-decoration-color: var(--line); text-underline-offset: 3px; }
.contact-list a:hover { color: var(--sea-deep); text-decoration-color: currentColor; }

.map {
    margin-top: 2rem;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--sand);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

.foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 4rem;
    padding: 1.5rem 0 2.5rem;
    border-top: 1px solid var(--line);
    font-size: .82rem;
    color: var(--muted);
}
.to-top { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
.to-top:hover { color: var(--sea-deep); }

/* ------------------------------------------------------------- lightbox */

.lightbox {
    max-width: min(92vw, 70rem);
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--cream);
    overflow: hidden;
}
.lightbox::backdrop { background: rgba(20, 30, 32, .82); }
.lightbox img { max-height: calc(92vh - 3.5rem); width: auto; margin: 0 auto; }
.lightbox-caption {
    padding: .8rem 1rem;
    text-align: center;
    font-family: var(--serif);
    font-size: 1.2rem;
}
.lightbox-close {
    position: absolute;
    top: .6rem; right: .6rem;
    width: 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(251, 249, 244, .92);
    color: var(--ink);
    cursor: pointer;
}

/* ------------------------------------------------------------- mobile top bar */

.topbar { display: none; }
.scrim { display: none; }

@media (max-width: 1100px) {
    :root { --side-w: 18rem; }
}

@media (max-width: 900px) {
    body { font-size: 16px; }
    html { scroll-padding-top: 4.5rem; }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: .75rem;
        height: 3.5rem;
        padding: 0 .5rem 0 1rem;
        background: rgba(251, 249, 244, .94);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--line);
    }
    .topbar-brand {
        display: flex;
        align-items: center;
        gap: .6rem;
        margin-right: auto;
        font-family: var(--serif);
        font-size: 1.3rem;
        font-weight: 600;
        text-decoration: none;
    }
    .topbar-brand img { border-radius: 50%; }
    .lang-pill {
        padding: .25rem .7rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-decoration: none;
        color: var(--sea-deep);
    }
    .topbar-toggle {
        width: 2.75rem; height: 2.75rem;
        display: grid; place-items: center;
        border: 0;
        border-radius: 10px;
        background: var(--sea);
        color: #fff;
        cursor: pointer;
    }

    .side {
        width: min(20rem, 86vw);
        transform: translateX(100%);
        transition: transform .3s ease, box-shadow .3s ease, visibility 0s linear .3s;
        visibility: hidden;
    }
    body.nav-open .side {
        transform: none;
        visibility: visible;
        transition-delay: 0s;
        box-shadow: -20px 0 40px -20px rgba(0, 0, 0, .4);
    }
    body.nav-open .scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 25;
        background: rgba(20, 30, 32, .35);
    }
    .monogram { width: 6.5rem; height: 6.5rem; }
    .side-head { padding-top: 2rem; }

    .page { margin-right: 0; }
    .hero { height: 13rem; }
    .intro { padding-top: 2.25rem; }
    .tagline-main { display: block; }
    .cat { padding-top: 2.75rem; }
    .banner { height: 7rem; margin-top: 3.5rem; }
}

@media (max-width: 480px) {
    .sheet { padding: 0 1.1rem; }
    .banner { margin-left: -1.1rem; margin-right: -1.1rem; }
    .item-name { font-size: 1.3rem; }
    .cat-drinks .item-name { font-size: 1.16rem; }
    .foot { flex-direction: column; text-align: center; }
}

/* ------------------------------------------------------------- allergens */

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

.allergy-note {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    max-width: 34rem;
    margin: 1.75rem auto 0;
    padding: .9rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--sand);
    font-size: .86rem;
    line-height: 1.55;
    color: #4b5455;
}
.allergy-note .ico { width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--sunset); }
.allergy-note strong { color: var(--ink); font-weight: 700; }

.item-allergens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem;
    margin-top: .45rem;
}
.allergen {
    padding: .05rem .55rem;
    border: 1px solid #e2d6c3;
    border-radius: 999px;
    background: #fbf5ea;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.6;
    color: #8a5a2b;
}

/* ------------------------------------------------------------- ingredients */

.item-ingredients {
    max-width: 30rem;
    margin: .25rem auto 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--muted);
}
.item-ingredients span { font-weight: 700; letter-spacing: .02em; color: #4b5455; }