/* ===========================================================
   HEADER.CSS
   People & Culture at Work
   =========================================================== */

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

.top-bar{

    background:var(--dark);

    color:white;

    font-size:.9rem;

    padding:12px 0;

}

.top-bar-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.top-left,
.top-right{

    display:flex;

    align-items:center;

    gap:24px;

}

.top-bar a{

    color:white;

    transition:var(--transition);

}

.top-bar a:hover{

    color:var(--primary-orange);

}

.top-bar i{

    margin-right:8px;

}

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

.site-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:var(--z-header);

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

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:var(--transition);

}

/* Shrinks on scroll */

.site-header.scrolled{

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

}

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

.navbar{

    padding:20px 0;

}

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

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

.logo img{

    height:64px;

    width:auto;

    transition:var(--transition);

}

.logo:hover img{

    transform:scale(1.04);

}

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

.nav-menu{

    display:flex;

    align-items:center;

    gap:38px;

}

.nav-menu li{

    position:relative;

}

.nav-menu a{

    font-weight:600;

    color:var(--dark);

    position:relative;

    padding:8px 0;

}

/* Animated Underline */

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:3px;

    background:var(--primary-orange);

    border-radius:20px;

    transition:var(--transition);

}

.nav-menu a:hover::after,

.nav-menu a.active::after{

    width:100%;

}

.nav-menu a:hover{

    color:var(--primary-blue);

}

.nav-menu a.active{

    color:var(--primary-blue);

}

/* ===========================================================
   NAV BUTTON
=========================================================== */

.nav-button{

    white-space:nowrap;

}

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

.hamburger{

    display:none;

    width:48px;

    height:48px;

    position:relative;

    cursor:pointer;

}

.hamburger span{

    position:absolute;

    left:10px;

    width:28px;

    height:3px;

    background:var(--dark);

    border-radius:20px;

    transition:var(--transition);

}

.hamburger span:nth-child(1){

    top:14px;

}

.hamburger span:nth-child(2){

    top:22px;

}

.hamburger span:nth-child(3){

    top:30px;

}

/* Active Hamburger */

.hamburger.active span:nth-child(1){

    transform:rotate(45deg);

    top:22px;

}

.hamburger.active span:nth-child(2){

    opacity:0;

}

.hamburger.active span:nth-child(3){

    transform:rotate(-45deg);

    top:22px;

}

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

.mobile-menu{

    position:fixed;

    top:92px;

    left:-100%;

    width:100%;

    background:white;

    display:flex;

    flex-direction:column;

    padding:40px;

    gap:22px;

    transition:.45s ease;

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

    z-index:999;

}

.mobile-menu.active{

    left:0;

}

.mobile-menu a{

    font-weight:600;

    color:var(--dark);

}

.mobile-button{

    margin-top:20px;

}

/* ===========================================================
   SCROLL PROGRESS
=========================================================== */

.scroll-progress-container{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:transparent;

    z-index:2000;

}

.scroll-progress-bar{

    height:100%;

    width:0;

    background:linear-gradient(
        90deg,
        var(--primary-orange),
        var(--primary-blue)
    );

}

/* ===========================================================
   SKIP LINK
=========================================================== */

.skip-link{

    position:absolute;

    left:-9999px;

    top:auto;

}

.skip-link:focus{

    left:20px;

    top:20px;

    background:var(--primary-orange);

    color:white;

    padding:14px 20px;

    border-radius:10px;

    z-index:9999;

}

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media(max-width:1100px){

    .nav-menu,

    .nav-button{

        display:none;

    }

    .hamburger{

        display:block;

    }

}

@media(max-width:768px){

    .top-bar{

        display:none;

    }

    .navbar{

        padding:14px 0;

    }

    .logo img{

        height:52px;

    }

    .mobile-menu{

        top:78px;

    }

}
/* ==========================================================
   ANNOUNCEMENT BAR
========================================================== */

.announcement-bar{

    background:linear-gradient(
        90deg,
        var(--primary-orange),
        #ff9c42
    );

    color:#fff;

    font-size:.95rem;

    position:relative;

    overflow:hidden;

}

.announcement-bar::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transform:translateX(-100%);

    animation:announcementShine 7s infinite;

}

@keyframes announcementShine{

    100%{

        transform:translateX(200%);

    }

}

.announcement-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:54px;

    gap:20px;

}

.announcement-left{

    display:flex;

    align-items:center;

    gap:16px;

}

.announcement-badge{

    background:#fff;

    color:var(--primary-orange);

    font-weight:700;

    border-radius:50px;

    padding:6px 12px;

    font-size:.75rem;

    letter-spacing:.08em;

}

.announcement-link{

    color:#fff;

    font-weight:700;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:8px;

}

.announcement-link:hover{

    opacity:.9;

}