.site-header{position:relative;width:100%;transition:background-color .28s ease,box-shadow .28s ease,backdrop-filter .28s ease,transform .28s ease}
.main-nav{display:flex;align-items:center}
.hamburger{
    display:none;
    border:0;
    background:none;
    font-size:28px;
    cursor:pointer;

    background-image: var(--logotext);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
}

@media (max-width:768px){
  .main-nav{display:none}
  .hamburger{display:block}
}

.main-nav.open{display:flex;flex-direction:column;position:absolute;top:100%;right:16px;background:var(--card);padding:12px;border-radius:10px;box-shadow:var(--shadow);z-index:1200;min-width:200px}

/* Logo image styling */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.logo img{height:64px;width:64px;border-radius:10px;object-fit:contain;box-shadow:none;background:transparent;padding:0}
.site-title{
    background: var(--logotext);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: 2rem;
}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media(max-width:768px){.logo img{height:56px;width:56px;padding:0}.site-title{font-size:2rem}}
@media(max-width:480px){.logo img{height:44px;width:44px;padding:0}.site-title{font-size:1.5rem}}

/* Scrolled / fixed header */
.site-header.scrolled{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  background-color:rgba(255,255,255,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  z-index:1000;
}

/* Ensure main content beneath header doesn't jump visually when header becomes fixed */
.site-header,
.site-header.scrolled{will-change:transform}