/* ==========================================================================
   3. Header  (spec 5)
   ========================================================================== */

.wg-header{ position:relative; z-index:20; }

/* --- Masthead ------------------------------------------------------------- */
.wg-masthead{ background:var(--wg-masthead); }

.wg-masthead__inner{
  min-height:var(--wg-masthead-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.wg-masthead__brand img{ max-width:286px; height:auto; }

/* Text wordmark stand-in for the logo */
.wg-wordmark{
  font-family:var(--wg-font-display);
  font-size:40px;
  line-height:1;
  letter-spacing:-.5px;
  text-decoration:none;
  display:inline-block;
}
.wg-wordmark:hover{ text-decoration:none; }
.wg-wordmark__weekly{ color:#FFFFFF; }
.wg-wordmark__groove{ color:var(--wg-accent); }

/* --- Search (input 220x34, button 34x34) ---------------------------------- */
.wg-search{ display:flex; align-items:stretch; }

.wg-search__input{
  width:220px; height:34px;
  padding:0 10px;
  font-family:var(--wg-font-body);
  font-size:var(--wg-fs-nav);
  color:var(--wg-text);
  background:#FFFFFF;
  border:1px solid var(--wg-rule);
  border-right:0;
  border-radius:var(--wg-radius-sm) 0 0 var(--wg-radius-sm);
}
.wg-search__input::placeholder{ color:var(--wg-muted); }

.wg-search__btn{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--wg-accent);
  color:#FFFFFF;
  border:0;
  border-radius:0 var(--wg-radius-sm) var(--wg-radius-sm) 0;
}
.wg-search__btn:hover{ filter:brightness(.92); }

/* --- Nav bar --------------------------------------------------------------
   Spec 9.1: the reference nav bar is transparent and read as white only
   because the content below was almond. On a white page it needs a border. */
.wg-navbar{
  background:#FFFFFF;
  border-bottom:1px solid var(--wg-rule);
}

.wg-navbar__inner{
  min-height:var(--wg-navbar-h);
  display:flex;
  align-items:center;
}

.wg-nav__list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}

.wg-nav__list a{
  display:block;
  padding:13px 20px;
  font-family:var(--wg-font-display);
  font-size:var(--wg-fs-nav);
  line-height:1;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--wg-heading);
  text-decoration:none;
}
.wg-nav__list a:hover,
.wg-nav__list a:focus{ color:var(--wg-nav-hover); text-decoration:none; }

.wg-nav__list > li:first-child a{ padding-left:0; }

/* Final item reads as a CTA, matching the reference treatment */
.wg-nav__list > li:last-child a{ text-decoration:underline; text-underline-offset:3px; }

/* --- Mobile toggle (hidden at desktop) ------------------------------------ */
.wg-navtoggle{
  display:none;
  align-items:center; gap:10px;
  padding:10px 0;
  background:none; border:0;
  font-family:var(--wg-font-display);
  font-size:var(--wg-fs-nav);
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--wg-heading);
}
.wg-navtoggle__bars{
  position:relative;
  width:20px; height:2px;
  background:currentColor;
  display:inline-block;
}
.wg-navtoggle__bars::before,
.wg-navtoggle__bars::after{
  content:""; position:absolute; left:0;
  width:20px; height:2px; background:currentColor;
}
.wg-navtoggle__bars::before{ top:-6px; }
.wg-navtoggle__bars::after{ top:6px; }