/* ==========================================================
   HEADER (shared component)
========================================================== */

.header {
    position: fixed;
    top: var(--header-offset-top);
    left: 0;

    width: 100%;

    z-index: 1000;
}

/* ---------- INNER ---------- */

.header__inner {

    display: grid;
    grid-template-columns: auto 1fr auto;

    align-items: center;

    min-height: var(--header-height);

    padding-inline: 34px;
    padding: 0 42px;
    min-height: 120px;

    background: transparent;

    border: 1px solid transparent;

    border-radius: 20px;

    transition:
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        margin-top .35s ease,
        padding .35s ease;
}

/* ---------- STICKY ---------- */

body.header-scrolled .header__inner {

    margin-top: 18px;

    background: rgba(255,255,255,.98);

    box-shadow:
        0 12px 30px rgba(0,0,0,.06),
        0 2px 8px rgba(0,0,0,.03);

}

/* ---------- ACTIONS ---------- */

.header__actions{
    display: flex;
    align-items: center;
    gap: var(--header-button-gap);

    justify-self: end;
}

/* ---------- LOGO ---------- */

.logo{
    display:flex;
    align-items:center;
}

.logo__image{

    display:block;

    width:auto;

    height:var(--header-logo-height);

}

/* ---------- NAV ---------- */

.nav {
    display: grid;
    justify-items: center;
    align-items: center;
}

.nav__list{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:var(--header-nav-gap);

    margin:0;
    padding:0;

    list-style:none;

    grid-area: 1 / 1;

    transition:
        opacity .1s ease,
        visibility .1s ease;
}

.nav__list.is-inactive {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.nav__link{

    font-family:var(--font-heading);

    font-size:var(--header-nav-font-size);

    font-weight:var(--header-nav-font-weight);

    color:var(--header-link-color);

    text-decoration:none;

    letter-spacing:-0.01em;

    transition:color .35s ease;
}

button.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 0;
    border: none;
    background: none;

    cursor: pointer;
}

.nav__link:hover{
    color:var(--color-primary);
}

.nav__item--directions {
    position: relative;
}

.header-directions {
    position: relative;
}

.header-directions-mount {
    display: none;
}

.nav__directions-arrow {
    font-size: 0.6em;
    line-height: 1;

    transition: transform .25s ease;
}

.nav__item--directions:hover .nav__directions-arrow,
.nav__item--directions:focus-within .nav__directions-arrow,
.header-directions.is-open .nav__directions-arrow {
    transform: rotate(180deg);
}

.nav__directions {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;

    width: 280px;
    padding: 18px;

    background: var(--color-white);
    border-radius: 15px;

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.04);

    opacity: 0;
    visibility: hidden;

    transform: translateX(-50%) translateY(-8px);

    z-index: 1100;

    transition:
        opacity .28s ease,
        transform .28s ease,
        visibility .28s ease;
}

.nav__item--directions:hover .nav__directions,
.nav__item--directions:focus-within .nav__directions,
.header-directions.is-open .nav__directions {
    opacity: 1;
    visibility: visible;

    transform: translateX(-50%) translateY(0);
}

.nav__directions-list {
    display: flex;
    flex-direction: column;
    gap: 2px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.nav__directions-item {
    display: block;

    padding: 10px 4px;

    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 400;
    color: var(--color-text);

    text-decoration: none;
    cursor: pointer;

    transition: color .25s ease;
}

.nav__directions-item.is-current {
    color: var(--color-primary);
    font-weight: 500;
}

.nav__directions-item:hover {
    color: var(--color-primary);
}

/* ---------- MENU COLOR ---------- */

body:has([data-header-theme="light"]) {
    --header-link-color: var(--color-text);
    --header-link-hover-color: var(--color-primary);
}

body:has([data-header-theme="light"]) .burger {
    color: var(--color-text);
}

body:has([data-header-theme="light"]) .header-directions-mount .nav__link--directions {
    color: var(--color-text);
}

body.header-scrolled{

    --header-link-color:var(--color-text);

}

/* ---------- BURGER ---------- */

.burger {
    display: none;

    color: var(--header-link-color);
}

.burger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.is-active span:nth-child(2) {
    opacity: 0;
}

.burger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- MOBILE NAV ---------- */

.nav-overlay {
    position: fixed;
    inset: 0;

    background: rgba(44, 44, 44, 0.4);

    opacity: 0;
    visibility: hidden;

    z-index: 900;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

body.menu-open {
    overflow: hidden;
}

/* Mount: avoid layout jump before async inject */
[data-component="header"]:empty {
    min-height: 0;
}

/* ==========================================================
   TABLET / MOBILE NAV (≤1023px)
========================================================== */

@media (max-width: 1023px) {

    .burger {
        display: inline-flex;
    }

    .logo,
    .header__actions {
        position: relative;

        z-index: 960;
    }

    body.menu-open .burger {
        color: var(--color-text);
    }

    .header__actions .button {
        display: none;
    }

    .nav {
        position: fixed;
        top: 0;
        right: 0;

        display: block;

        width: min(360px, 85vw);
        height: 100vh;
        height: 100dvh;

        padding: 120px var(--space-6) var(--space-6);

        background: var(--color-white);

        box-shadow: -12px 0 40px rgba(0, 0, 0, 0.08);

        transform: translateX(100%);

        z-index: 950;

        transition: transform 0.35s ease;
    }

    .nav.is-open {
        transform: translateX(0);
    }

    .nav__list {
        flex-direction: column;
        align-items: flex-start;

        gap: var(--space-5);

        grid-area: auto;
    }

    .nav__list--primary {
        display: none;
    }

    .nav__list--anchors,
    .nav__list--anchors.is-inactive {
        display: flex;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.header-nav-primary-only .nav__list--primary {
        display: flex;
    }

    body.header-nav-primary-only .nav__list--anchors {
        display: none !important;
    }

    .nav__item--directions[hidden] {
        display: none;
    }

    .header-directions-mount {
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;

        z-index: 1001;
    }

    body.menu-open .header-directions-mount {
        display: none;

        pointer-events: none;
    }

    .header-directions-mount[hidden] {
        display: none;
    }

    .header-directions-mount .nav__link--directions {
        font-size: var(--header-nav-font-size);

        color: var(--header-link-color);
    }

    body.header-scrolled .header-directions-mount .nav__link--directions {
        color: var(--color-text);
    }

    .header-directions-mount .nav__directions {
        position: absolute;
        top: calc(100% + 14px);
        left: 50%;

        width: min(280px, calc(100vw - 40px));
        margin-top: 0;
        padding: 18px;

        background: var(--color-white);
        border-radius: 15px;

        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.08),
            0 4px 12px rgba(0, 0, 0, 0.04);

        opacity: 0;
        visibility: hidden;

        transform: translateX(-50%) translateY(-8px);
    }

    .header-directions-mount .header-directions.is-open .nav__directions {
        opacity: 1;
        visibility: visible;

        transform: translateX(-50%) translateY(0);
    }

    .nav__link {
        font-size: var(--text-xl);

        color: var(--color-text);
    }

    body.header-scrolled .nav__link {
        color: var(--color-text);
    }

    .nav__directions-item {
        padding: 6px 0;

        font-size: var(--text-lg);
    }
}

/* ==========================================================
   MOBILE (≤767px)
========================================================== */

@media (max-width: 767px) {

    .header__inner {
        padding: 0 20px;
        min-height: 80px;
    }
}