/*
|--------------------------------------------------------------------------
| Corpo e Alma Spa Urbano
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
|
| Estilos do cabeçalho principal e navegação.
|
| Dependências:
|
| assets/css/reset.css
| assets/css/base.css
| assets/js/header.js
|
*/


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

.header {

    position: relative;

    z-index: 1000;

    width: 100%;

    background-color: rgba(255, 255, 255, 0.96);

    border-bottom: 1px solid var(--color-border-light);

    transition:
        background-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-base);

}


/* ==========================================================================
   HEADER STICKY / SCROLLED
   ========================================================================== */

.header.is-scrolled {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    background-color: rgba(255, 255, 255, 0.97);

    box-shadow: var(--shadow-sm);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

}


/* ==========================================================================
   HEADER CONTAINER
   ========================================================================== */

.header > .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 88px;

    gap: var(--space-8);

}


/* ==========================================================================
   LOGO
   ========================================================================== */

.logo {

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    max-width: 210px;

}

.logo img {

    display: block;

    width: 210px;

    height: auto;

    max-height: 68px;

    object-fit: contain;

}


/* ==========================================================================
   NAVEGAÇÃO DESKTOP
   ========================================================================== */

.navigation {

    display: flex;

    align-items: center;

    margin-left: auto;

}

.navigation-list {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: clamp(
        1.25rem,
        2.2vw,
        2.5rem
    );

}

.navigation-item {

    position: relative;

}

.navigation-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 88px;

    color: var(--color-text);

    font-size: 0.84rem;

    font-weight: var(--font-weight-medium);

    letter-spacing: 0.025em;

    white-space: nowrap;

    transition:
        color var(--transition-fast);

}

.navigation-link::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 22px;

    width: 0;

    height: 1px;

    background-color: var(--color-secondary);

    transform: translateX(-50%);

    transition:
        width var(--transition-base);

}

.navigation-link:hover {

    color: var(--color-primary);

}

.navigation-link:hover::after,

.navigation-link.active::after {

    width: 24px;

}

.navigation-link.active {

    color: var(--color-primary);

}


/* ==========================================================================
   AÇÕES DO HEADER
   ========================================================================== */

.header-actions {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


/* ==========================================================================
   BOTÃO AGENDAR
   ========================================================================== */

.header .btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding:
        0.7rem
        1.35rem;

    border-radius: var(--radius-pill);

    background-color: var(--color-primary);

    border: 1px solid var(--color-primary);

    color: #ffffff;

    font-size: 0.8rem;

    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.04em;

    white-space: nowrap;

    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);

}

.header .btn-primary:hover {

    background-color: var(--color-primary-dark);

    border-color: var(--color-primary-dark);

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: var(--shadow-sm);

}


/* ==========================================================================
   BOTÃO MOBILE
   ========================================================================== */

.mobile-toggle {

    display: none;

    position: relative;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    width: 46px;

    height: 46px;

    padding: 0;

    border: 1px solid var(--color-border);

    border-radius: 50%;

    background-color: var(--color-surface);

    color: var(--color-primary);

    gap: 5px;

}

.mobile-toggle span {

    display: block;

    width: 19px;

    height: 1.5px;

    background-color: currentColor;

    transition:
        transform var(--transition-base),
        opacity var(--transition-base);

}

.mobile-toggle.is-active span:nth-child(1) {

    transform: translateY(6.5px) rotate(45deg);

}

.mobile-toggle.is-active span:nth-child(2) {

    opacity: 0;

}

.mobile-toggle.is-active span:nth-child(3) {

    transform: translateY(-6.5px) rotate(-45deg);

}


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

.mobile-menu {

    position: fixed;

    top: 0;

    right: 0;

    z-index: 1100;

    width: min(
        88vw,
        390px
    );

    height: 100dvh;

    background-color: var(--color-background-light);

    box-shadow:
        -20px 0 50px rgba(39, 71, 55, 0.12);

    transform: translateX(100%);

    visibility: hidden;

    transition:
        transform var(--transition-slow),
        visibility var(--transition-slow);

    overflow-y: auto;

    overscroll-behavior: contain;

}

.mobile-menu.is-open {

    transform: translateX(0);

    visibility: visible;

}

.mobile-menu-container {

    display: flex;

    flex-direction: column;

    min-height: 100%;

    padding:
        1.5rem
        1.5rem
        2rem;

}


/* ==========================================================================
   CABEÇALHO MOBILE
   ========================================================================== */

.mobile-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 68px;

    padding-bottom: var(--space-6);

    border-bottom:
        1px solid
        var(--color-border-light);

}

.mobile-logo {

    display: inline-flex;

    align-items: center;

    max-width: 180px;

}

.mobile-logo img {

    display: block;

    width: 180px;

    height: auto;

    max-height: 58px;

    object-fit: contain;

}


/* ==========================================================================
   BOTÃO FECHAR
   ========================================================================== */

.mobile-close {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    border:
        1px solid
        var(--color-border);

    border-radius: 50%;

    background-color: var(--color-surface);

    color: var(--color-primary);

    font-size: 1.8rem;

    font-weight: var(--font-weight-light);

    line-height: 1;

    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        transform var(--transition-base);

}

.mobile-close:hover {

    background-color: var(--color-primary);

    color: #ffffff;

    transform: rotate(90deg);

}

.mobile-close span {

    display: block;

    margin-top: -3px;

}


/* ==========================================================================
   NAVEGAÇÃO MOBILE
   ========================================================================== */

.mobile-navigation {

    flex: 1;

    padding:
        var(--space-8)
        0;

}

.mobile-navigation-list {

    display: flex;

    flex-direction: column;

}

.mobile-navigation-item {

    border-bottom:
        1px solid
        var(--color-border-light);

}

.mobile-navigation-link {

    display: flex;

    align-items: center;

    min-height: 62px;

    color: var(--color-text);

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

    font-size: 1.45rem;

    font-weight: var(--font-weight-medium);

    transition:
        color var(--transition-base),
        padding-left var(--transition-base);

}

.mobile-navigation-link:hover {

    padding-left: 8px;

    color: var(--color-primary);

}

.mobile-navigation-link.active {

    color: var(--color-secondary-dark);

}


/* ==========================================================================
   FOOTER DO MENU MOBILE
   ========================================================================== */

.mobile-footer {

    padding-top: var(--space-6);

}

.mobile-btn {

    width: 100%;

    min-height: 54px;

}


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

.mobile-overlay {

    position: fixed;

    inset: 0;

    z-index: 1050;

    background-color: rgba(24, 36, 29, 0.42);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity var(--transition-base),
        visibility var(--transition-base);

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

}

.mobile-overlay.is-visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* ==========================================================================
   BLOQUEIO DO SCROLL
   ========================================================================== */

body.menu-open {

    overflow: hidden;

}


/* ==========================================================================
   BACK TO TOP
   ========================================================================== */

.back-to-top {

    position: fixed;

    right: 24px;

    bottom: 24px;

    z-index: 900;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    border:
        1px solid
        var(--color-border);

    border-radius: 50%;

    background-color: var(--color-surface);

    color: var(--color-primary);

    box-shadow: var(--shadow-sm);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(12px);

    transition:
        opacity var(--transition-base),
        visibility var(--transition-base),
        transform var(--transition-base),
        background-color var(--transition-base),
        color var(--transition-base);

}

.back-to-top.is-visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

}

.back-to-top:hover {

    background-color: var(--color-primary);

    color: #ffffff;

    transform: translateY(-3px);

}


/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */

@media (max-width: 1100px) {

    .header > .container {

        gap: var(--space-5);

    }

    .navigation-list {

        gap: 1.25rem;

    }

    .navigation-link {

        font-size: 0.78rem;

    }

}


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

@media (max-width: 900px) {

    .header > .container {

        min-height: 76px;

    }

    .logo img {

        width: 185px;

    }

    .navigation,
    .header-actions {

        display: none;

    }

    .mobile-toggle {

        display: inline-flex;

    }

}


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

@media (max-width: 600px) {

    .header > .container {

        min-height: 70px;

    }

    .logo {

        max-width: 170px;

    }

    .logo img {

        width: 170px;

    }

    .mobile-menu {

        width: min(
            92vw,
            370px
        );

    }

    .mobile-menu-container {

        padding:
            1rem
            1.25rem
            1.5rem;

    }

    .mobile-navigation {

        padding:
            var(--space-6)
            0;

    }

    .mobile-navigation-link {

        min-height: 58px;

        font-size: 1.3rem;

    }

    .back-to-top {

        right: 16px;

        bottom: 16px;

        width: 42px;

        height: 42px;

    }

}


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

@media (max-width: 400px) {

    .logo img {

        width: 155px;

    }

    .mobile-toggle {

        width: 42px;

        height: 42px;

    }

    .mobile-menu {

        width: 94vw;

    }

}


/* ==========================================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .header,
    .navigation-link,
    .header .btn-primary,
    .mobile-toggle span,
    .mobile-menu,
    .mobile-close,
    .mobile-navigation-link,
    .mobile-overlay,
    .back-to-top {

        transition: none;

    }

}