/* ===================================================
   Header & Navigation Styles
   ================================================== */

header{
  position:sticky; top:0; z-index:30;
  background:rgba(251,252,250,.8);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);
}

/* Skip link for keyboard users */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:12px; top:12px; width:auto; height:auto; padding:8px 12px; background:#fff; color:var(--ink); z-index:1000; border-radius:6px; box-shadow:var(--shadow);
}

@media (max-width: 860px){
  header{
    position:relative;
  }
  
  .nav {
    flex-wrap: wrap;
    padding: 12px 0;
  }
  
  .brand {
    font-size: 16px;
  }
  
  .brand img {
    height: 40px;
  }
  
  nav ul {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 8px 0;
  }
  
  nav a {
    padding: 8px 12px;
    font-size: 14px;
  }
}

@media (max-width: 480px){
  .nav {
    padding: 10px 0;
  }
  
  .brand {
    font-size: 14px;
  }
  
  .brand img {
    height: 36px;
  }
  
  .brand span {
    display: none;
  }
  
  nav ul {
    gap: 8px;
    width: 100%;
  }
  
  nav a {
    padding: 6px 10px;
    font-size: 13px;
  }
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  min-height:48px; padding:8px 0;
}

.brand{display:flex; align-items:center; gap:10px; font-weight:700;}
.brand img{
  height:clamp(28px, 4vw, 56px);
  width:auto;
  display:block;
  max-height:56px;
}

nav ul{display:flex; gap:20px; list-style:none; padding:0; margin:0}
nav a{padding:8px 10px; border-radius:10px; transition:background 0.2s}
nav a:hover{background:var(--sage)}
nav a:focus{background:var(--sage); outline:2px solid var(--deep); outline-offset:2px}

/* Mobile nav toggle */
.nav-toggle{display:none; background:transparent; border:0; padding:8px; cursor:pointer}
.nav-toggle svg{width:22px; height:22px}

@media (max-width: 860px){
  .nav-toggle{display:inline-flex}
  nav[aria-hidden="true"]{display:none}
  nav[aria-hidden="false"]{display:block}
  nav ul{flex-direction:column; gap:12px; align-items:center}
}

/* Visible focus outlines for accessibility */
:focus{outline:2px solid #254a31; outline-offset:2px}