/**
 * ==========================================================
 * PET WELLNESS 360
 * Header Component
 * ==========================================================
 *
 * Archivo:
 * assets/css/components/header.css
 *
 * Responsabilidades:
 * - Header fijo
 * - Top bar
 * - Contenedor principal
 * - Logo
 * - Estados visuales del Header
 *
 * La navegación pertenece a navbar.css.
 * ==========================================================
 */


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

.pw-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1100;

    background:var(--pw-white);

    color:var(--pw-navy);

    box-shadow:var(--pw-shadow-header);

}

.pw-header.is-scrolled{

    box-shadow:var(--pw-shadow-md);

}


/* ==========================================================
   TOP BAR
   ========================================================== */

.pw-header__topbar{

    display:block;

    background:var(--pw-navy);

    color:var(--pw-white);

}

.pw-header__topbar-container{

    width:min(
            calc(100% - 32px),
            var(--pw-container)
    );

    min-height:30px;

    margin-inline:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1rem;

}

.pw-header__topbar-info{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:1.1rem;

}

.pw-header__topbar-item{

    display:inline-flex;

    align-items:center;

    gap:.35rem;

    color:rgba(255,255,255,.9);

    font-family:var(--pw-font-body);

    font-size:.68rem;

    font-weight:500;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

}

.pw-header__topbar-item:hover,
.pw-header__topbar-item:focus-visible{

    color:var(--pw-white);

}

.pw-header__topbar-item svg{

    width:14px;

    height:14px;

    flex:0 0 14px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.pw-header__topbar-social{

    display:flex;

    align-items:center;

    gap:.4rem;

}

.pw-header__social-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    border-radius:var(--pw-radius-round);

    color:rgba(255,255,255,.85);

}

.pw-header__social-link:hover,
.pw-header__social-link:focus-visible{

    color:var(--pw-white);

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

}


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

.pw-header__main{

    background:var(--pw-white);

    border-bottom:1px solid var(--pw-border);

}

.pw-header__container{

    width:min(
            calc(100% - 32px),
            var(--pw-container)
    );

    min-height:64px;

    margin-inline:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1.25rem;

}


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

.pw-header__logo{

    display:inline-flex;

    align-items:center;

    flex:0 0 auto;

    position:relative;

    z-index:1004;

}

.pw-header__logo img{

    display:block;

    width:150px;

    height:auto;

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.pw-header a:focus-visible,
.pw-header button:focus-visible{

    outline:3px solid rgba(0,168,181,.35);

    outline-offset:3px;

}


/* ==========================================================
   MOBILE — HEADER
   ========================================================== */

@media (max-width:900px){

    .pw-header__topbar-container{

        min-height:30px;

        justify-content:center;

    }

    .pw-header__topbar-info{

        width:100%;

        justify-content:center;

        gap:.7rem;

    }

    .pw-header__topbar-info .pw-header__topbar-item:nth-child(n+3){

        display:none;

    }

    .pw-header__topbar-social{

        display:none;

    }

    .pw-header__main{

        position:relative;

        z-index:1001;

    }

    .pw-header__container{

        min-height:64px;

    }

    .pw-header__logo{

        z-index:1001;

    }

    .pw-header__logo img{

        width:135px;

    }

}

@media (max-width:480px){

    .pw-header__topbar-item{

        font-size:.62rem;

    }

    .pw-header__topbar-info{

        gap:.6rem;

    }

    .pw-header__container{

        width:min(
                calc(100% - 24px),
                var(--pw-container)
        );

    }

    .pw-header__logo img{

        width:130px;

    }

}


/* ==========================================================
   MOBILE MENU FINAL OVERRIDE
   ========================================================== */

@media (max-width:900px){

    #primary-navigation.pw-navbar.is-open{

        position:fixed !important;

        top:94px !important;

        right:0 !important;

        left:auto !important;

        width:min(88vw,360px) !important;

        height:calc(100dvh - 94px) !important;

        max-height:calc(100dvh - 94px) !important;

        display:flex !important;

        transform:translateX(0) !important;

        visibility:visible !important;

        opacity:1 !important;

        pointer-events:auto !important;

        z-index:1003 !important;

    }

}