/* ============================================================
Shared site navigation — booksnmuchmore.com
One nav, one look, on every page.
USAGE:
1. tag
============================================================ */
nav#navbar{
position:fixed;top:0;left:0;width:100%;z-index:500;
padding:1.1rem 6%;
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
background:rgba(251,246,236,0.94);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid rgba(200,129,58,0.18);
box-shadow:0 4px 32px rgba(44,26,14,0.13);
transition:padding 0.3s;
box-sizing:border-box;
}
nav#navbar.scrolled{padding:0.75rem 6%;}
nav#navbar .nav-logo{text-decoration:none;flex-shrink:0;line-height:0;}
nav#navbar .nav-logo img{
height:56px;width:56px;object-fit:cover;border-radius:50%;display:block;
}
nav#navbar .nav-links{
display:flex;gap:2rem;list-style:none;align-items:center;
margin:0;padding:0;flex-wrap:wrap;
}
nav#navbar .nav-links a{
font-family:'Raleway',sans-serif;font-size:0.75rem;font-weight:500;
letter-spacing:0.12em;text-transform:uppercase;
color:#2C1A0E;text-decoration:none;white-space:nowrap;
position:relative;padding-bottom:3px;transition:color 0.2s;
}
nav#navbar .nav-links a::after{
content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;
background:#C8813A;transition:width 0.3s ease;
}
nav#navbar .nav-links a:hover,
nav#navbar .nav-links a.active{color:#C8813A;}
nav#navbar .nav-links a:hover::after,
nav#navbar .nav-links a.active::after{width:100%;}
nav#navbar #nav-account-slot{
font-size:0.78rem;display:flex;align-items:center;gap:0.6rem;flex-shrink:0;
}
nav#navbar #nav-account-slot span,
nav#navbar #nav-account-slot .nav-account-link{color:#2C1A0E;white-space:nowrap;text-decoration:none;}
nav#navbar #nav-account-slot .nav-account-link:hover{color:#C07A2A;text-decoration:underline;}
nav#navbar #nav-account-slot button{
background:#C8813A;color:#fff;border:none;padding:0.4rem 1rem;border-radius:16px;
font-family:'Raleway',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.03em;
white-space:nowrap;cursor:pointer;transition:background 0.2s;
}
nav#navbar #nav-account-slot button:hover{background:#A06020;}
/* Spacer helper — add class="nav-spacer" to the first section on a
page if it doesn't already have enough top padding to clear the
fixed nav (nav is ~78px tall, ~65px once scrolled). */
.nav-spacer{padding-top:6.5rem;}
/* Hamburger toggle — hidden on desktop, shown only on small screens */
nav#navbar .nav-toggle{
display:none;
width:26px;height:20px;
background:none;border:none;padding:0;cursor:pointer;
flex-direction:column;justify-content:space-between;
flex-shrink:0;
}
nav#navbar .nav-toggle span{
display:block;width:100%;height:2px;background:#2C1A0E;border-radius:2px;
transition:transform 0.25s ease,opacity 0.2s ease;
}
nav#navbar.nav-open .nav-toggle span:nth-child(1){transform:translateY(9px) rotate(45deg);}
nav#navbar.nav-open .nav-toggle span:nth-child(2){opacity:0;}
nav#navbar.nav-open .nav-toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
@media (max-width:860px){
nav#navbar{flex-wrap:wrap;}
nav#navbar .nav-toggle{display:flex;}
nav#navbar .nav-cta{display:none;}
nav#navbar #nav-account-slot{font-size:0.68rem;gap:0.35rem;}
nav#navbar #nav-account-slot span{display:none;} /* "Hi, email" hidden on mobile to save space; Logout still shows */
nav#navbar #nav-account-slot button{padding:0.32rem 0.7rem;font-size:0.66rem;}
nav#navbar .nav-links{
display:none;
width:100%;
flex-direction:column;
align-items:flex-start;
gap:0;
margin-top:1rem;
padding-top:0.9rem;
border-top:1px solid rgba(200,129,58,0.18);
}
nav#navbar.nav-open .nav-links{display:flex;}
nav#navbar .nav-links a{display:block;width:100%;padding:0.65rem 0;}
}