/* Section: header
   Structure:
     .site-header
       .site-header__top     ← announcement + social + locale
       .site-header__main    ← logo, nav, actions
*/

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-cream);
}

/* ———————— Top bar ———————— */
.site-header__top {
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 0.875rem;
}
.site-header__top-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  min-height: 44px;
  padding-block: 8px;
  /* full-bleed: ignore the shared container max-width */
  max-width: none;
  padding-inline: var(--sp-6);
}

.top-social {
  display: flex;
  gap: 14px;
  align-items: center;
}
.top-social a {
  color: var(--color-white);
  opacity: 0.92;
  display: inline-flex;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.top-social a:hover { opacity: 1; transform: translateY(-1px); }
.top-social svg { width: 18px; height: 18px; fill: currentColor; }

.top-announce {
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-announce strong { font-weight: var(--fw-semibold); }
.top-announce .sep {
  opacity: 0.4;
  padding: 0 8px;
}

.top-locale {
  justify-self: end;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.top-locale button {
  background: none;
  border: 0;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  opacity: 0.92;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.top-locale button:hover { opacity: 1; }
.top-locale svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ———————— Main bar ———————— */
.site-header__main {
  background: var(--color-cream);
  border-bottom: 1px solid var(--line);
}
.site-header__main-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  min-height: 108px;
  padding-block: var(--sp-3);
  /* full-bleed: ignore the shared container max-width */
  max-width: none;
  padding-inline: var(--sp-6);
}

/* logo */
.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.site-logo img {
  height: 80px;
  width: auto;
  display: block;
}

/* primary nav */
.site-nav {
  justify-self: center;
}
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-6);
  align-items: center;
}
.site-nav__item { position: relative; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  color: var(--color-navy);
  text-decoration: none;
  padding: 10px 4px;
  letter-spacing: 0.01em;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover,
.site-nav__item--open > .site-nav__link {
  color: var(--color-red);
}
.site-nav__chev {
  width: 12px;
  height: 12px;
  transition: transform var(--dur-med) var(--ease-out);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.site-nav__item--open .site-nav__chev { transform: rotate(180deg); }

/* dropdown panel */
.site-nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--color-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 240px;
  padding: var(--sp-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              visibility 0s linear var(--dur-med);
}
.site-nav__item--open .site-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.site-nav__panel ul { list-style: none; margin: 0; padding: 0; }
.site-nav__panel a {
  display: block;
  padding: 10px 12px;
  font-size: 0.95rem;
  color: var(--color-navy-ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.site-nav__panel a:hover {
  background: var(--color-cream);
  color: var(--color-red);
}

/* actions */
.site-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--color-navy);
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  position: relative;
}
.icon-btn:hover {
  background: var(--color-bone);
  color: var(--color-red);
}
.icon-btn svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn__count {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-red);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* mobile menu toggle */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  color: var(--color-navy);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ———————— Mobile drawer ———————— */
.mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(340px, 90vw);
  background: var(--color-cream);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-out);
  z-index: 60;
  overflow-y: auto;
}
.mobile-nav--open { transform: translateX(0); }
.mobile-nav__close {
  align-self: flex-end;
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--color-navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
}
.mobile-nav__close svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.mobile-nav__list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.mobile-nav__list li { border-bottom: 1px solid var(--line); }
.mobile-nav__list a, .mobile-nav__list button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 1.1rem;
  color: var(--color-navy);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.mobile-nav__sublist {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0 0 0 var(--sp-3);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out);
}
.mobile-nav__item--open .mobile-nav__sublist { max-height: 500px; }
.mobile-nav__sublist a {
  font-weight: var(--fw-regular);
  font-size: 0.95rem;
  padding: 8px 4px;
  border: 0;
}

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(11, 17, 45, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out),
              visibility 0s linear var(--dur-med);
  z-index: 55;
}
.nav-scrim--open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ———————— Responsive ———————— */
@media (max-width: 960px) {
  :root { --sticky-top: 128px; }  /* 44 top + 84 main */
  .site-nav,
  .site-actions .icon-btn--account,
  .site-actions .icon-btn--search {
    display: none;
  }
  .nav-toggle { display: inline-flex; }
  .site-header__main-inner {
    grid-template-columns: auto 1fr auto;
    min-height: 84px;
  }
  .site-logo img { height: 56px; }
}

@media (max-width: 720px) {
  .top-social { display: none; }
  .top-locale { display: none; }
  .site-header__top-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .top-announce { font-size: 0.8rem; white-space: normal; }
}

/* Tight side padding on narrow devices so content isn't eating all the width. */
@media (max-width: 520px) {
  :root { --sticky-top: 144px; }
  .site-header__top-inner,
  .site-header__main-inner {
    padding-inline: var(--sp-4);
  }
  .site-logo img { height: 48px; }
}