/* ============================================================
   IMPASTO — "Our Story", cinematic edition
   Bespoke side navigation ("title card" drawer)

   Everything here is scoped to body.sc-body so the shared
   custom-design.css overlay used by the rest of the site is
   left untouched. Loaded only by index.html.
   ============================================================ */

body.sc-body {
    --sc-nav-z: 999900;
    --sc-nav-chrome-z: 1000000;
}

/* ══════════════════════════════════════════════════════════
   HEADER CHROME — pinned, self-effacing
   It sits above the drawer and the cinema layers so the toggle
   and the language switcher stay reachable at every scroll
   depth; the logo retires once the first chapter takes over.
   ══════════════════════════════════════════════════════════ */
body.sc-body #header.sc-header {
    position: fixed;
    z-index: var(--sc-nav-chrome-z);
    transition: padding-top 0.6s var(--sc-ease);
}

body.sc-body #header.sc-header::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 190%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 7, 5, 0.62) 0%, rgba(10, 7, 5, 0.28) 46%, rgba(10, 7, 5, 0) 100%);
    opacity: 0.9;
    transition: opacity 0.6s var(--sc-ease);
}

body.sc-body #header.sc-header .navbar {
    position: relative;
    z-index: 1;
}

/* Lang + menu (+ theme on home) grouped on the header end */
body.sc-body #header.sc-header .sc-header__controls {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 14px);
    margin-inline-start: auto;
    flex-shrink: 0;
}

body.sc-body.sc-chrome-min #header.sc-header {
    padding-top: clamp(10px, 1.6vh, 18px);
}

body.sc-body.sc-chrome-min #header.sc-header .custom-logo-link {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* Once the chapters run, the header wash retires and only the
   controls remain — the toggle ring carries its own legibility. */
body.sc-body.sc-chrome-min #header.sc-header::before,
body.sc-body.menu-open #header.sc-header::before {
    opacity: 0;
}

/* Scrollbar compensation while the page is locked */
body.sc-body.menu-open {
    padding-inline-end: var(--sc-sbw, 0px);
}

body.sc-body.menu-open #header.sc-header {
    padding-inline-end: var(--sc-sbw, 0px);
}

/* ── Language switcher: a small brass pill beside the toggle ── */
body.sc-body .lang-switcher {
    position: relative;
    z-index: 2;
    margin-inline: 0;
    border: 1px solid rgba(216, 185, 106, 0.3);
    border-radius: 999px;
    background: rgba(10, 7, 5, 0.4);
    backdrop-filter: blur(10px) saturate(0.9);
    -webkit-backdrop-filter: blur(10px) saturate(0.9);
    transition: border-color 0.5s var(--sc-ease), background 0.5s var(--sc-ease);
}

body.sc-body .lang-switcher:hover {
    border-color: rgba(216, 185, 106, 0.55);
}

body.sc-body .lang-switcher .lang-btn {
    min-width: 34px;
    padding: 8px 12px;
    font-family: var(--sc-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(244, 239, 230, 0.66);
    transition: color 0.4s ease, background 0.4s ease;
}

body.sc-body .lang-switcher .lang-btn.is-active {
    background: linear-gradient(135deg, var(--sc-terra) 0%, #a8461f 100%);
    color: #fff;
}

body.sc-body .lang-switcher .lang-btn:hover:not(.is-active) {
    background: rgba(216, 185, 106, 0.14);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════
   TOGGLE — two long hairlines, one short, morphing to ×
   ══════════════════════════════════════════════════════════ */
body.sc-body #openNav.sc-toggle {
    position: relative;
    z-index: 2;
    width: clamp(44px, 4vw, 52px);
    height: clamp(44px, 4vw, 52px);
    border-radius: 999px;
    -webkit-tap-highlight-color: transparent;
}

body.sc-body #openNav.sc-toggle:focus-visible {
    outline: 1px solid rgba(216, 185, 106, 0.8);
    outline-offset: 4px;
}

body.sc-body #openNav .sc-toggle__ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid rgba(216, 185, 106, 0.26);
    background: rgba(10, 7, 5, 0.32);
    backdrop-filter: blur(10px) saturate(0.9);
    -webkit-backdrop-filter: blur(10px) saturate(0.9);
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.55s var(--sc-ease), transform 0.55s var(--sc-ease), border-color 0.55s ease;
}

body.sc-body.sc-chrome-min #openNav .sc-toggle__ring,
body.sc-body #openNav:hover .sc-toggle__ring,
body.sc-body #openNav:focus-visible .sc-toggle__ring,
body.sc-body #openNav[aria-expanded='true'] .sc-toggle__ring {
    opacity: 1;
    transform: scale(1);
}

body.sc-body #openNav[aria-expanded='true'] .sc-toggle__ring {
    border-color: rgba(216, 185, 106, 0.5);
}

body.sc-body #openNav .hamburger-icon {
    position: relative;
    width: 100%;
    height: 100%;
    gap: 7px;
    background: none;
    box-shadow: none;
}

body.sc-body #openNav .line {
    width: 26px;
    height: 1px;
    border-radius: 0;
    background: rgba(244, 239, 230, 0.88);
    transition:
        transform 0.75s var(--sc-ease),
        width 0.65s var(--sc-ease),
        opacity 0.3s ease,
        background 0.4s ease;
}

body.sc-body #openNav .line-2 {
    width: 15px;
    align-self: flex-start;
    margin-inline-start: calc(50% - 13px);
}

body.sc-body #openNav:hover .line-2 {
    width: 26px;
}

/* Closed — neutralises the shared theme's transform while closing */
body.sc-body #openNav[aria-expanded='false'] .line-1,
body.sc-body #openNav[aria-expanded='false'] .line-3 {
    transform: none;
}

body.sc-body #openNav[aria-expanded='false'] .line-2 {
    opacity: 1;
}

/* Open — the × */
body.sc-body #openNav[aria-expanded='true'] .line {
    background: #f0e0b6;
}

body.sc-body #openNav[aria-expanded='true'] .line-1 {
    transform: translateY(8px) rotate(45deg);
}

body.sc-body #openNav[aria-expanded='true'] .line-2 {
    opacity: 0;
    transform: scaleX(0.2);
}

body.sc-body #openNav[aria-expanded='true'] .line-3 {
    transform: translateY(-8px) rotate(-45deg);
}

/* The shared stylesheet parks the toggle top-left while open — keep ours
   in the header, where it becomes the close button in place. */
body.sc-body.menu-open #openNav.sc-toggle {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}

body.sc-body.menu-open #header.sc-header .custom-logo-link {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   THE DRAWER
   ══════════════════════════════════════════════════════════ */
body.sc-body #myNav.sc-nav {
    position: fixed;
    inset: 0;
    z-index: var(--sc-nav-z);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

body.sc-body.menu-open #myNav.sc-nav {
    visibility: visible;
    pointer-events: auto;
}

/* Kept on screen while the closing sequence plays out */
body.sc-body #myNav.sc-nav.is-closing {
    visibility: visible;
    pointer-events: none;
}

/* ── Scrim: the room goes quiet ───────────────────────── */
.sc-nav__scrim {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(120% 90% at 22% 40%, rgba(10, 7, 5, 0.62) 0%, rgba(6, 4, 3, 0.88) 62%, rgba(4, 3, 2, 0.95) 100%);
    backdrop-filter: blur(7px) saturate(0.72);
    -webkit-backdrop-filter: blur(7px) saturate(0.72);
    transition: opacity 0.6s var(--sc-ease);
}

body.sc-body.menu-open .sc-nav__scrim {
    opacity: 1;
}

/* ── Panel ────────────────────────────────────────────── */
.sc-nav__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(100%, clamp(320px, 42vw, 620px));
    display: flex;
    overflow: hidden;
    isolation: isolate;
    outline: none;
    transform: translateX(100%);
    background-color: #0a0705;
    box-shadow: 0 0 130px rgba(0, 0, 0, 0.7);
    transition: transform 0.75s var(--sc-ease);
}

/* The dining room, remembered rather than shown */
.sc-nav__panel::before {
    content: '';
    position: absolute;
    inset: -8%;
    z-index: 0;
    background-image: url('../wp-content/uploads/2025/06/impasto1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(3px) saturate(0.45) brightness(0.32) contrast(1.04);
    transform: scale(1.02);
}

html[dir='rtl'] .sc-nav__panel {
    transform: translateX(-100%);
}

body.sc-body.menu-open .sc-nav__panel,
html[dir='rtl'] body.sc-body.menu-open .sc-nav__panel {
    transform: translateX(0);
}

/* Film grain */
.sc-nav__grain {
    position: absolute;
    inset: -40%;
    z-index: 3;
    pointer-events: none;
    opacity: 0.13;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: scNavGrain 1s steps(3) infinite;
}

@keyframes scNavGrain {
    0% { transform: translate3d(0, 0, 0); }
    33% { transform: translate3d(-2%, 1.5%, 0); }
    66% { transform: translate3d(1.5%, -2%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* Colour wash, vignette, and a hint of letterbox at head and foot */
.sc-nav__vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10, 7, 5, 0.9) 0%, rgba(10, 7, 5, 0.76) 40%, rgba(10, 7, 5, 0.92) 100%),
        radial-gradient(120% 52% at 100% 0%, rgba(197, 88, 39, 0.2) 0%, rgba(197, 88, 39, 0) 62%),
        radial-gradient(95% 55% at 0% 100%, rgba(47, 62, 44, 0.36) 0%, rgba(47, 62, 44, 0) 68%),
        radial-gradient(120% 78% at 50% 50%, rgba(4, 3, 2, 0) 40%, rgba(4, 3, 2, 0.7) 100%),
        linear-gradient(180deg, rgba(4, 3, 2, 0.92) 0%, rgba(4, 3, 2, 0) 13%, rgba(4, 3, 2, 0) 87%, rgba(4, 3, 2, 0.92) 100%);
}

/* Gold hairline down the inner edge */
.sc-nav__edge {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 5;
    width: 1px;
    transform: scaleY(0);
    transform-origin: center;
    background: linear-gradient(180deg,
            rgba(216, 185, 106, 0) 0%,
            rgba(216, 185, 106, 0.55) 16%,
            rgba(216, 185, 106, 0.55) 84%,
            rgba(216, 185, 106, 0) 100%);
    transition: transform 0.9s var(--sc-ease);
}

body.sc-body.menu-open .sc-nav__edge {
    transform: scaleY(1);
}

/* Vertical wordmark along the inner edge */
.sc-nav__watermark {
    position: absolute;
    z-index: 4;
    inset-inline-start: clamp(12px, 1.5vw, 26px);
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--sc-font-display);
    font-size: clamp(1.4rem, 2vw, 2.1rem);
    font-weight: 700;
    letter-spacing: 0.62em;
    text-transform: uppercase;
    color: rgba(216, 185, 106, 0.11);
    user-select: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s var(--sc-ease);
}

body.sc-body.menu-open .sc-nav__watermark {
    opacity: 1;
}

/* ── Content column ───────────────────────────────────── */
.sc-nav__inner {
    position: relative;
    z-index: 6;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-block: clamp(96px, 14vh, 148px) clamp(30px, 6vh, 62px);
    padding-inline-start: clamp(52px, 6vw, 104px);
    padding-inline-end: clamp(26px, 4.2vw, 68px);
}

.sc-nav__body {
    margin-block: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3.4vh, 40px);
    width: 100%;
}

/* Eyebrow */
.sc-nav__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: var(--sc-font-body);
    font-size: clamp(0.6rem, 0.85vw, 0.72rem);
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(216, 185, 106, 0.78);
}

.sc-nav__eyebrow::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(216, 185, 106, 0.42), rgba(216, 185, 106, 0));
}

html[dir='rtl'] .sc-nav__eyebrow::after {
    background: linear-gradient(270deg, rgba(216, 185, 106, 0.42), rgba(216, 185, 106, 0));
}

/* Links */
.sc-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.8vh, 10px);
}

.sc-nav__link {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: clamp(12px, 1.5vw, 22px);
    padding-block: clamp(6px, 1.1vh, 13px);
    text-decoration: none;
    font-family: var(--sc-font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 4.2vw, 2.9rem);
    line-height: 1.24;
    letter-spacing: 0.005em;
    color: rgba(244, 239, 230, 0.86);
    transition: color 0.6s var(--sc-ease), letter-spacing 0.9s var(--sc-ease);
}

.sc-nav__num {
    flex: 0 0 auto;
    font-family: var(--sc-font-num);
    font-style: italic;
    font-weight: 400;
    font-size: 0.34em;
    letter-spacing: 0.18em;
    color: rgba(216, 185, 106, 0.5);
    transition: color 0.6s ease;
}

.sc-nav__label {
    position: relative;
    display: inline-block;
}

.sc-nav__label::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: -0.14em;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--sc-gold), rgba(197, 88, 39, 0.85));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.75s var(--sc-ease), opacity 0.5s ease;
}

html[dir='rtl'] .sc-nav__label::after {
    transform-origin: right center;
}

.sc-nav__link:hover,
.sc-nav__link:focus-visible {
    color: #f0e0b6;
    letter-spacing: 0.05em;
    outline: none;
}

.sc-nav__link:hover .sc-nav__num,
.sc-nav__link:focus-visible .sc-nav__num {
    color: var(--sc-terra-soft);
}

.sc-nav__link:hover .sc-nav__label::after,
.sc-nav__link:focus-visible .sc-nav__label::after {
    transform: scaleX(1);
}

.sc-nav__link:focus-visible .sc-nav__label {
    text-shadow: 0 0 26px rgba(216, 185, 106, 0.35);
}

.sc-nav__link.is-current {
    color: var(--sc-gold);
}

.sc-nav__link.is-current .sc-nav__num {
    color: var(--sc-terra);
}

.sc-nav__link.is-current .sc-nav__label::after {
    transform: scaleX(1);
    opacity: 0.34;
}

/* Rule */
.sc-nav__rule {
    display: block;
    width: min(240px, 60%);
    height: 1px;
    background: linear-gradient(90deg, rgba(216, 185, 106, 0.5), rgba(216, 185, 106, 0));
}

html[dir='rtl'] .sc-nav__rule {
    background: linear-gradient(270deg, rgba(216, 185, 106, 0.5), rgba(216, 185, 106, 0));
}

/* Foot */
.sc-nav__foot {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.8vh, 18px);
}

.sc-nav__logo {
    width: clamp(94px, 8.5vw, 122px);
    height: auto;
    opacity: 0.8;
}

.sc-nav__address {
    margin: 0;
    font-style: normal;
    font-family: var(--sc-font-body);
    font-size: clamp(0.76rem, 0.95vw, 0.88rem);
    font-weight: 300;
    line-height: 1.95;
    color: rgba(244, 239, 230, 0.55);
}

.sc-nav__contact {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.sc-nav__contact > a[href^='tel'] {
    font-family: var(--sc-font-body);
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: rgba(244, 239, 230, 0.78);
    border-bottom: 1px solid rgba(216, 185, 106, 0.28);
    padding-bottom: 3px;
    transition: color 0.4s ease, border-color 0.4s ease;
}

.sc-nav__contact > a[href^='tel']:hover {
    color: #f0e0b6;
    border-color: var(--sc-gold);
}

.sc-nav__ig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(216, 185, 106, 0.3);
    color: var(--sc-terra-soft);
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.5s var(--sc-ease), color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.sc-nav__ig:hover {
    transform: translateY(-3px);
    color: #fff;
    border-color: rgba(216, 185, 106, 0.6);
    background: rgba(197, 88, 39, 0.18);
}

/* ══════════════════════════════════════════════════════════
   MOTION HAND-OFF
   When GSAP drives the sequence, CSS transitions step aside so
   the two never fight over the same properties.
   ══════════════════════════════════════════════════════════ */
#myNav.sc-nav.is-anim .sc-nav__scrim,
#myNav.sc-nav.is-anim .sc-nav__panel,
#myNav.sc-nav.is-anim .sc-nav__edge,
#myNav.sc-nav.is-anim .sc-nav__watermark,
#myNav.sc-nav.is-anim [data-sc-nav-item] {
    transition: none;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .sc-nav__watermark {
        display: none;
    }

    .sc-nav__inner {
        padding-inline-start: clamp(26px, 8vw, 54px);
        padding-inline-end: clamp(22px, 6vw, 44px);
    }
}

@media (max-width: 600px) {
    .sc-nav__panel {
        width: min(100%, 420px);
    }

    .sc-nav__inner {
        padding-block-start: clamp(92px, 15vh, 120px);
    }

    .sc-nav__body {
        gap: clamp(18px, 3vh, 30px);
    }

    .sc-nav__link {
        font-size: clamp(1.6rem, 8.6vw, 2.2rem);
    }

    .sc-nav__logo {
        width: 96px;
    }
}

/* Short landscape phones: keep the whole column reachable */
@media (max-height: 560px) {
    .sc-nav__inner {
        padding-block: clamp(78px, 16vh, 96px) 26px;
    }

    .sc-nav__body {
        gap: 14px;
    }

    .sc-nav__link {
        font-size: clamp(1.3rem, 4vh, 1.9rem);
        padding-block: 4px;
    }

    .sc-nav__logo {
        width: 88px;
    }
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .sc-nav__grain {
        animation: none;
    }

    .sc-nav__scrim,
    .sc-nav__panel,
    .sc-nav__edge,
    .sc-nav__watermark,
    body.sc-body #openNav .line,
    body.sc-body #openNav .sc-toggle__ring {
        transition-duration: 0.12s;
    }
}