/* ===================================================
   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:sticky;
    top: 0;
  }
  
  .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;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@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; gap:20px;
  min-height:48px; padding:8px 0;
  /* Header bar is a touch wider than the 1020px body so the logo,
     6 menu items and the language pill all fit on one line. */
  max-width:1200px; width:min(96%, 1200px);
}

.brand{display:flex; align-items:center; gap:10px; font-weight:700; flex:0 0 auto;}
/* Push the menu (and the language pill after it) to the right; brand stays left. */
nav#main-nav{margin-left:auto;}
.brand img{
  height:clamp(28px, 4vw, 56px);
  width:auto;
  display:block;
  max-height:56px;
}

nav ul{display:flex; flex-wrap:nowrap; gap:18px; list-style:none; padding:0; margin:0}
nav li{flex:0 0 auto}
nav a{padding:8px 10px; border-radius:10px; transition:background 0.2s; white-space:nowrap}
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}

/* Below ~1100px the 6 labels + language pill can't share one row, so we
   switch to the hamburger: brand left, toggle + pill right, and the menu
   drops to its own full-width row when opened. */
@media (max-width: 1100px){
  .nav{flex-wrap:wrap; row-gap:10px}
  .nav-toggle{display:inline-flex; order:1}
  .brand{margin-right:auto}            /* keep brand left, push toggle+pill right */
  .lang-switch{order:2}
  nav#main-nav{order:3; flex-basis:100%; margin-left:0}
  nav[aria-hidden="true"]{display:none}
  nav[aria-hidden="false"]{display:block}
  nav ul{flex-direction:column; gap:12px; align-items:center}
}

/* Language switcher */
.lang-switch{
  display:inline-flex; align-items:center; gap:2px;
  flex:0 0 auto; padding:3px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.5);
}
.lang-switch__opt{
  padding:4px 9px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.5px;
  color:var(--ink, #254a31); text-decoration:none; line-height:1;
  transition:background .2s, color .2s;
}
.lang-switch__opt:hover{background:var(--sage)}
.lang-switch__opt.is-active{background:var(--deep, #254a31); color:#fff}
.lang-switch__opt.is-active:hover{background:var(--deep, #254a31)}


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