/* ==========================================
   Header Section
   Brutalsurfcam v0.9.0
========================================== */

header{

    position:fixed;
    top:0;
    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px clamp(20px,5vw,80px);

    z-index:999;

    transition:background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);

}

.logo{

    font-size:var(--text-lg);
    font-weight:700;
    color:var(--primary);
    letter-spacing:var(--tracking-tight);

}

.logo a{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 18px;
    border-radius:999px;
    text-decoration:none;
    color:inherit;

}

nav{

    display:flex;
    align-items:center;
    gap:clamp(14px,2vw,30px);

}

nav a{

    text-decoration:none;
    color:#444;
    font-weight:600;
    letter-spacing:var(--tracking-normal);
    transition:var(--transition);

}

body[data-page="home"] .logo,
body[data-page="home"] nav a{

    color:#fff;

}

body[data-page="home"] .logo a{

    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.24);
    backdrop-filter:blur(18px);
    box-shadow:0 16px 34px rgba(9,20,40,.16);

}

body[data-page="home"] header.is-scrolled .logo,
body[data-page="home"] header.is-scrolled nav a{

    color:var(--primary);

}

body[data-page="home"] header.is-scrolled .logo a{

    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,53,102,.08);
    box-shadow:0 14px 28px rgba(12,33,71,.08);

}

body[data-page="home"] header.is-scrolled .book-btn{

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

}

.book-btn{

    background:var(--accent);
    color:white;

    border:none;

    min-height:44px;
    padding:10px 18px;

    border-radius:30px;

    cursor:pointer;
    font-weight:700;
    letter-spacing:var(--tracking-normal);

    transition:var(--transition);

}

.book-btn:hover{

    transform:translateY(-2px);
    opacity:.9;

}