/* === Header Styles === */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 10000;
  background:#fff;
  border-bottom:1px solid var(--border);
  transform: translateY(0);
  transition: transform .28s ease;
}
/* Offset the page for fixed header */
body{ padding-top: var(--header-h); }
.header-inner{
  height: var(--header-h);
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  gap: 16px;
  max-width: 1444px; margin: 0 auto; padding-inline: 24px;
}
.logo-img{ 
  height: 40px; 
  display: block; 
  width: auto;
}

.nav{ position: relative; }
.nav-toggle{
  display:none;
  background:transparent; border:0; padding:10px; cursor:pointer;
}
.burger{ display:inline-block; width:24px; height:2px; background:var(--text); position:relative; }
.burger::before,.burger::after{ content:""; position:absolute; left:0; width:24px; height:2px; background:var(--text); }
.burger::before{ top:-7px; } .burger::after{ top:7px; }

.nav-list{
  display:flex; justify-content:center; align-items:center;
  gap: 44px;
  list-style:none; margin:0; padding:0;
}
.nav-list a{
  text-decoration:none;
  color:var(--text);
  font-family: Syne;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
}
.nav-list a:hover{ opacity:.8; }

.header-cta{ display:flex; justify-content:flex-end; }

.nav-overlay{ display:none; }
.offcanvas {
  display: none;
}

/* === Header Responsive === */
@media (max-width: 1100px){
  .header-inner{ grid-template-columns: 1fr auto; }
  /* Off-canvas drawer */
  .nav-list{ display:none; }
  .nav-overlay{ display:block; position: fixed; left:0; right:0; bottom:0; top: var(--header-h); background: rgba(0,0,0,.32); z-index: 10900; opacity:0; pointer-events:none; transition: opacity .2s ease; }
  .nav.open + .nav-overlay{ opacity:1; pointer-events: auto; }
  .nav-toggle{ display:inline-block; }
  .header-cta{ display:none; }

  /* Dedicated offcanvas component */
  .offcanvas{
    position: fixed; right:0; top: var(--header-h); z-index: 11000;
    width: min(84vw, 360px);
    background:#fff; border-left:1px solid var(--border);
    transform: translateX(100%);
    transition: transform .28s ease;
    display: flex; flex-direction: column;
    border-radius:15px;
  }
  .offcanvas.is-open{ transform: translateX(0); }
  .offcanvas-header{ display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; border-bottom:1px solid var(--border); }
  .offcanvas-close{ background:transparent; border:0; font-size: 28px; line-height: 1; padding: 6px 10px; cursor:pointer; }
  .offcanvas-list{ list-style:none; margin:0; padding: 50px 20px; display:flex; flex-direction:column; gap: 20px; }
  .offcanvas-list a{ color: var(--text); text-decoration:none; font-weight:600; font-size:18px; }
}

/* When offcanvas is open, slide header out of view */
.offcanvas-open .site-header{ transform: translateY(-100%); }
/* And allow panel/overlay to occupy from top */
.offcanvas-open .nav-overlay{ top:0; }
.offcanvas-open .offcanvas{ top:0; }