/* =========================================================
   CUSTOM HEADER
========================================================= */

.site-custom-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    width: 100%;
    padding: 20px max(60px, calc((100vw - 1200px) / 2));
    box-sizing: border-box;

    background: #ffffff;
    border-bottom: 1px solid rgba(90, 70, 56, 0.25);

    position: sticky;
    top: 0;
    z-index: 1000;
}


/* =========================================================
   HAMBURGER
========================================================= */

.site-custom-header .menu-toggle {
    justify-self: start;

    width: 44px;
    height: 44px;
    padding: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 7px;

    background: transparent;
    border: none;
    color: #111111;

    cursor: pointer;
}

.site-custom-header .menu-toggle:hover,
.site-custom-header .menu-toggle:focus,
.site-custom-header .menu-toggle:active {
    background: transparent;
    border: none;
    color: #111111;
}

.site-custom-header .menu-toggle span {
    display: block;

    height: 1px;
    background: #111111;

    transition: width 0.25s ease;
}

.site-custom-header .menu-toggle span:first-child {
    width: 28px;
}

.site-custom-header .menu-toggle span:last-child {
    width: 20px;
}

.site-custom-header .menu-toggle:hover span:first-child {
    width: 20px;
}

.site-custom-header .menu-toggle:hover span:last-child {
    width: 28px;
}

.site-custom-header .menu-toggle:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    justify-self: center;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
    text-decoration: none;

    color: #111111;
    line-height: 1;
}

.brand:visited,
.brand:hover,
.brand:focus,
.brand:active {
    color: #111111;
    text-decoration: none;
}

.brand-name {
    font-family: "Noto Serif Display", serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.brand-subtitle {
    margin-top: 5px;

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: 0.18em;

    color: #111111;
}


/* =========================================================
   BOOKSY BUTTON
========================================================= */

.header-booksy {
    justify-self: end;

    padding: 11px 20px;

    border: 1px solid #111111;
    background: #ffffff;
    color: #111111;

    text-decoration: none;
    text-transform: uppercase;

    font-size: 13px;
    letter-spacing: 0.08em;

    white-space: nowrap;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

.header-booksy:hover,
.header-booksy:focus {
    background: #111111;
    color: #ffffff;
}


/* =========================================================
   MENU OVERLAY
========================================================= */

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

    width: 100%;
    height: 100dvh;

    background: transparent;

    z-index: 999;

    opacity: 0;
    visibility: hidden;

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

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


/* =========================================================
   MENU PANEL
========================================================= */

.menu-panel {
    position: absolute;

    top: 88px;
    left: 0;
    right: 7%;
    bottom: 40px;

    background: #ffffff;

    border-top: 2px solid #111111;
    border-bottom: 2px solid #111111;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;

    transform: translateX(-110%);
    transition: transform 0.45s ease;
}

.menu-overlay.is-open .menu-panel {
    transform: translateX(0);
}


/* =========================================================
   MENU CONTENT
========================================================= */

.menu-content {
    display: grid;
    grid-template-columns: 52% 48%;

    width: 100%;
    height: 100%;

    box-sizing: border-box;
}


/* =========================================================
   MENU NAVIGATION
========================================================= */

.menu-navigation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    width: 100%;

    gap: 34px;
    padding: 50px 65px;

    box-sizing: border-box;

    letter-spacing: 0.025em;
}

.menu-navigation > a {
    display: inline-block;

    color: #111111;

    font-family: "Noto Serif Display", serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 300;
    line-height: 1;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.menu-navigation > a:hover,
.menu-navigation > a:focus {
    color: #3F3028;
    transform: translateX(6px);
}


/* =========================================================
   MENU BOOKSY
========================================================= */

.menu-navigation > .menu-booksy {
    margin-top: 10px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* =========================================================
   MENU IMAGE
========================================================= */

.menu-image {
    width: 100%;
    height: 100%;

    overflow: hidden;
}

.menu-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.menu-close {
    position: absolute;

    top: 20px;
    right: 24px;

    z-index: 10;

    padding: 0;

    border: none;
    background: transparent;

    color: #111111;

    font-size: 38px;
    font-weight: 200;
    line-height: 1;

    cursor: pointer;
}

.menu-close:hover,
.menu-close:focus {
    background: transparent;
    color: #111111;
}


/* =========================================================
   BLOKADA SCROLLA STRONY
========================================================= */

body.menu-open {
    overflow: hidden;
}


/* =========================================================
   ZABIEGI — POZIOM 1
========================================================= */

.menu-treatments {
    width: 100%;
    max-width: 100%;

    margin: 0;

    box-sizing: border-box;
}

.menu-treatments > summary {
    position: relative;
    display: block;

    width: 100%;
    max-width: 100%;

    padding: 0 42px 0 0;

    box-sizing: border-box;

    cursor: pointer;
    list-style: none;

    color: #111111;

    font-family: "Noto Serif Display", serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 300;
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.menu-treatments > summary::-webkit-details-marker {
    display: none;
}

.menu-treatments > summary::marker {
    display: none;
    content: "";
}

.menu-treatments > summary::after {
    content: "+";

    position: absolute;

    top: 50%;
    right: 4px;

    transform: translateY(-50%);

    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}

.menu-treatments[open] > summary::after {
    content: "−";
}


/* =========================================================
   ZABIEGI — SUBMENU
========================================================= */


.menu-treatments__submenu {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;

    gap: 10px;

    padding: 16px 0 0 18px;

    box-sizing: border-box;
}


/* =========================================================
   KOSMETOLOGIA ESTETYCZNA / PIELĘGNACYJNA
========================================================= */

.menu-treatments__group {
    width: 100%;
    max-width: 100%;

    margin: 0;

    box-sizing: border-box;
}

.menu-treatments__group > summary {
    position: relative;
    display: block;

    width: 100%;
    max-width: 100%;

    padding: 8px 42px 8px 0;

    box-sizing: border-box;

    cursor: pointer;
    list-style: none;

    color: #111111;

    font-family: "Noto Serif Display", serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.15;

    text-transform: uppercase;
    letter-spacing: 0;
}

.menu-treatments__group > summary::-webkit-details-marker {
    display: none;
}

.menu-treatments__group > summary::marker {
    display: none;
    content: "";
}

.menu-treatments__group > summary::after {
    content: "+";

    position: absolute;

    top: 50%;
    right: 4px;

    transform: translateY(-50%);

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
}

.menu-treatments__group[open] > summary::after {
    content: "−";
}


/* =========================================================
   GRUPY ZABIEGÓW
   np. Regeneracja naturalna, Stymulatory
========================================================= */

.menu-treatments__links {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;

    padding: 8px 0 10px 16px;

    box-sizing: border-box;
}

.menu-treatment-category {
    width: 100%;
    max-width: 100%;

    margin-top: 18px;

    box-sizing: border-box;
}

.menu-treatment-category:first-child {
    margin-top: 8px;
}


/* nazwa grupy */

.menu-navigation
.menu-treatment-category
> .menu-treatment-category__title {
    display: block;

    margin-bottom: 7px;

    color: #111111;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;

    transform: none;
}

.menu-navigation
.menu-treatment-category
> .menu-treatment-category__title:hover,
.menu-navigation
.menu-treatment-category
> .menu-treatment-category__title:focus {
    color: #3F3028;
    transform: translateX(3px);
}


/* =========================================================
   KONKRETNE USŁUGI — WCIĘCIE
========================================================= */

.menu-treatment-category__services {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;

    gap: 10px;

    padding-left: 16px;

    border-left: 1px solid #dedede;

    box-sizing: border-box;
}

.menu-navigation
.menu-treatment-category__services
a {
    display: block;

    color: #444444;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;

    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;

    opacity: 0.72;

    transform: none;

    transition:
        opacity 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.menu-navigation
.menu-treatment-category__services
a:hover,
.menu-navigation
.menu-treatment-category__services
a:focus {
    color: #111111;

    opacity: 1;

    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .menu-panel {
        left: 4%;
        right: 4%;
        bottom: 28px;
    }

    .menu-content {
        grid-template-columns: 50% 50%;
    }

    .menu-navigation {
        gap: 28px;
        padding: 40px 45px;
    }

    .menu-navigation > a {
        font-size: clamp(26px, 3.5vw, 38px);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    /* HEADER */

    .site-custom-header {
        grid-template-columns: 40px minmax(0, 1fr) auto;

        gap: 8px;

        padding: 12px 16px;
    }

    .site-custom-header .menu-toggle {
        width: 40px;
        height: 40px;
    }

    .site-custom-header .menu-toggle span:first-child {
        width: 24px;
    }

    .site-custom-header .menu-toggle span:last-child {
        width: 17px;
    }


    /* BRAND */

    .brand {
        justify-self: center;

        text-align: center;
    }

    .brand-name {
        font-size: 14px;
    }

    .brand-subtitle {
        margin-top: 4px;

        font-size: 8px;
        letter-spacing: 0.14em;

        color: #5A4638;
    }


    /* BOOKSY */

    .header-booksy {
        padding: 7px 8px;

        font-size: 9px;
        letter-spacing: 0.03em;
    }


    /* =====================================================
       OVERLAY — PEŁNA SZEROKOŚĆ
    ===================================================== */

    .menu-overlay {
        position: fixed;

        inset: 0;

        width: 100vw;
        height: 100dvh;

        margin: 0;
        padding: 0;

        background: transparent;
    }


    /* =====================================================
       PANEL — ZERO PRZEŚWITU PO LEWEJ
    ===================================================== */

    .menu-panel {
        top: 72px;

        left: 0;
        right: auto;
        bottom: 0;

        width: 100vw;
        max-width: 100vw;

        margin: 0;
        padding: 0;

        background: #ffffff;

        border-top: 2px solid #111111;
        border-bottom: 0;

        box-sizing: border-box;

        overflow-y: auto;
        overflow-x: hidden;
    }


    /* CONTENT */

    .menu-content {
        display: block;

        width: 100%;
        min-height: 100%;

        margin: 0;

        box-sizing: border-box;
    }


    /* =====================================================
       GŁÓWNA NAWIGACJA
    ===================================================== */

    .menu-navigation {
        justify-content: flex-start;
        align-items: flex-start;

        width: 100%;
        max-width: 100%;

        gap: 28px;

        padding: 40px 24px 55px;

        box-sizing: border-box;
    }

    .menu-navigation > a {
        font-size: 30px;
        letter-spacing: -0.025em;
    }


    /* zdjęcie chowamy */

    .menu-image {
        display: none;
    }


    /* X */

    .menu-close {
        top: 14px;
        right: 16px;

        font-size: 34px;

        color: #111111;
    }


    /* =====================================================
       ZABIEGI — PLUS NIE WYCHODZI ZA EKRAN
    ===================================================== */

    .menu-treatments {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }

    .menu-navigation
    .menu-treatments
    > summary {
        position: relative;

        display: block;

        width: 100%;
        max-width: 100%;

        padding-right: 42px !important;

        box-sizing: border-box;

        font-size: 30px;
        line-height: 1;

        letter-spacing: -0.025em;
    }

    .menu-navigation
    .menu-treatments
    > summary::after {
        right: 4px !important;

        font-size: 20px;
    }


    /* =====================================================
       SUBMENU
    ===================================================== */

    .menu-treatments__submenu {
        width: 100%;
        max-width: 100%;

        gap: 8px;

        padding:
            14px
            0
            0
            12px;

        box-sizing: border-box;
    }


    /* =====================================================
       KOSMETOLOGIA ESTETYCZNA / PIELĘGNACYJNA
    ===================================================== */

    .menu-treatments__group {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }

    .menu-navigation
    .menu-treatments__group
    > summary {
        position: relative;

        display: block;

        width: 100%;
        max-width: 100%;

        padding:
            7px
            42px
            7px
            0 !important;

        box-sizing: border-box;

        font-size: 22px;
        line-height: 1.15;

        letter-spacing: 0;
    }

    .menu-navigation
    .menu-treatments__group
    > summary::after {
        right: 4px !important;

        font-size: 18px;
    }


    /* =====================================================
       KATEGORIE ZABIEGÓW
    ===================================================== */

    .menu-treatments__links {
        width: 100%;
        max-width: 100%;

        padding:
            6px
            0
            8px
            12px;

        box-sizing: border-box;
    }

    .menu-treatment-category {
        width: 100%;
        max-width: 100%;

        margin-top: 20px;

        box-sizing: border-box;
    }

    .menu-treatment-category:first-child {
        margin-top: 10px;
    }


    /* Regeneracja naturalna / Stymulatory itd. */

    .menu-navigation
    .menu-treatment-category
    > .menu-treatment-category__title {
        margin-bottom: 7px;

        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;

        opacity: 1;
    }


    /* konkretne usługi */

    .menu-treatment-category__services {
        width: 100%;
        max-width: 100%;

        gap: 8px;

        padding-left: 14px;

        box-sizing: border-box;
    }

    .menu-navigation
    .menu-treatment-category__services
    a {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;

        opacity: 0.72;
    }
}