/* ==========================================================================
   SITE HEADER — UI v1 component
   Visual-equivalent consolidation of the approved header cascade.
   Typography remains owned by typography.css.
   ========================================================================== */

.topbar{
  height:44px;
  position:absolute;
  inset:0 0 auto;
  z-index:5;
}
.topbar-row{
  height:100%;
  display:flex;
  align-items:center;
  gap:24px;
}
.brand-logo-header{
  width:160px;
}
.nav{
  display:flex;
  align-items:center;
  gap:26px;
  padding:0 8px;
}
.top-search{
  height:30px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  width:310px;
  background:#fff;
  border:1px solid #d6dedb;
  border-radius:6px;
  padding:2px 2px 2px 11px;
}
.top-search>.icon{
  width:14px;
  height:14px;
  color:var(--muted);
}
.top-search input{
  width:100%;
  border:0;
  background:transparent;
  outline:none;
}
.top-search button{
  min-width:32px;
  height:25px;
  border-radius:4px;
  background:#00844f;
  color:#fff;
}
.top-search button .icon{
  width:15px;
  height:15px;
}
.menu-button{
  display:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px;
}
.menu-button b{
  display:block;
  width:20px;
  height:2px;
  margin:3px 0;
  background:var(--ink);
}

@media (max-width:1190px){
  .topbar-row{gap:16px}
  .nav{gap:14px}
  .top-search{width:220px}
}
@media (max-width:1190px) and (min-width:601px){
  .brand-logo-header{width:146px}
}

@media (max-width:1000px){
  .nav{
    display:none;
    position:absolute;
    top:48px;
    right:24px;
    min-width:200px;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
  }
  .nav.open{display:flex}
  .menu-button{display:block}
  .topbar{
    height:54px;
    background:#fffffff0;
  }
  .top-search{width:260px}
}

@media (max-width:600px){
  .topbar{
    position:relative;
    height:62px;
    background:#fff;
    border-bottom:1px solid var(--line);
  }
  /* The expanded search row must not cover the page heading. */
  .topbar:has(.top-search.expanded){margin-bottom:56px}
  .topbar-row{gap:10px}
  .brand-logo-header{width:132px}
  .nav{
    top:63px;
    left:14px;
    right:14px;
  }
  .top-search{
    width:40px;
    height:40px;
    margin-left:auto;
    padding:0;
    border:0;
    background:none;
  }
  .top-search>.icon,
  .top-search input{
    display:none;
  }
  .top-search button{
    width:40px;
    height:40px;
    border-radius:7px;
  }
  .top-search.expanded{
    position:absolute;
    top:63px;
    left:14px;
    right:14px;
    width:auto;
    height:44px;
    padding-left:12px;
    border:1px solid var(--line);
    background:#fff;
    box-shadow:0 3px 10px #122c2417;
  }
  .top-search.expanded input{
    display:block;
    font-size:14px;
  }
  /* Keep the hamburger right-aligned when the search form leaves the flex row. */
  .top-search.expanded + .menu-button{
    margin-left:auto;
  }
  .menu-button{
    width:40px;
    height:40px;
    padding:8px;
    border-radius:7px;
  }
}

@media (min-width:1001px){
  .topbar{
    position:relative;
    inset:auto;
    height:64px;
    background:#fff;
    border-bottom:1px solid #edf2ef;
    z-index:10;
  }
  .topbar-row{
    height:64px;
    gap:28px;
  }
  .brand-logo-header{width:172px}
  .nav{gap:26px}
  .top-search{
    width:340px;
    height:38px;
    border-radius:8px;
    background:#f8faf9;
  }
  .top-search button{
    min-width:36px;
    height:32px;
    border-radius:6px;
  }
}

@media (min-width:1200px){
  .nav{padding-inline:10px}
}