/* Shared website header: brand, centered navigation, and account actions. */
.site-header {
  height: 64px;
}

.header-inner.shell {
  width: min(1180px, calc(100% - 40px));
  display: grid;
  grid-template-columns:max-content minmax(190px,280px) minmax(max-content,1fr) max-content;
  align-items: center;
  gap: 32px;
}

.header-search { display:flex; width:clamp(190px,19vw,280px); height:38px; overflow:hidden; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface-raised); }
.header-search input,.mobile-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--color-text); font-size:var(--type-size-body-sm); }
.header-search input { padding:0 12px; }
.header-search button { width:44px; padding:0; border:0; background:var(--color-primary); color:var(--color-on-primary); font-size:0; cursor:pointer; }
.header-search button::before { content:"⌕"; font-size:20px; line-height:1; }
.header-search:focus-within { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-focus-ring); }

.header-inner .brand {
  justify-self: start;
}

.header-inner .nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.4vw, 36px);
}

.header-inner .nav a,
.header-actions a:not(.primary) {
  padding: 10px 2px;
  border-radius: 0;
  color: var(--color-text);
  background: transparent;
  line-height: 1;
  font-weight: var(--type-weight-bold, 750);
  white-space: nowrap;
}

.header-inner .nav a:hover,
.header-actions a:not(.primary):hover {
  color: var(--color-primary-hover);
  background: transparent;
}

.header-inner .nav a.active {
  position: relative;
  color: var(--color-text);
  background: transparent;
}

.header-inner .nav a.active::after { content:""; position:absolute; left:25%; right:25%; bottom:2px; height:2px; border-radius:999px; background:var(--color-text-muted); }

.header-inner .header-actions {
  justify-self: end;
  margin-left: 0;
  gap: 24px;
}

.header-actions [data-session="guest"] {
  display: flex;
  align-items: center;
  gap: 24px;
}

.theme-toggle { width:38px; height:38px; padding:0; border:0; border-radius:10px; display:grid; place-items:center; background:transparent; color:var(--color-text-muted); cursor:pointer; font-size:21px; line-height:1; transition:background-color 160ms ease,color 160ms ease; }
.theme-toggle:hover { color:var(--color-text); background:var(--color-primary-soft); }

.mobile-menu-toggle,
.mobile-navigation {
  display: none;
}

@media (max-width: 768px) {
  .header-inner.shell {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
  }

  .header-inner .nav {
    display: none;
  }

  .header-search { display:none; }

  .header-inner .header-actions {
    grid-column: 2;
  }

  .mobile-menu-toggle {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-content: center;
    gap: 5px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    cursor: pointer;
  }

  .mobile-menu-toggle > span {
    width: 23px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease;
  }

  .mobile-menu-toggle[aria-expanded="true"] > span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-menu-toggle[aria-expanded="true"] > span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle[aria-expanded="true"] > span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    padding: 20px max(20px, calc((100% - 1180px) / 2));
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 18px 30px var(--color-shadow);
  }

  .mobile-navigation:not([hidden]) {
    display: block;
  }

  .mobile-navigation nav {
    display: grid;
  }

  .mobile-search { display:flex; gap:8px; margin-bottom:10px; }
  .mobile-search input { height:42px; padding:0 12px; border:1px solid var(--color-border); border-radius:9px; background:var(--color-surface-raised); }
  .mobile-search button { padding:0 16px; border:0; border-radius:9px; background:var(--color-primary); color:var(--color-on-primary); font-weight:var(--type-weight-bold); }

  .mobile-navigation nav a {
    padding: 15px 0;
    color: var(--color-text);
    font-weight: var(--type-weight-bold, 750);
  }

  .mobile-navigation nav a:hover,
  .mobile-navigation nav a.active {
    color: var(--color-text);
  }

  .mobile-navigation nav a.active { font-weight:var(--type-weight-bold); }

}

@media (min-width: 769px) { .mobile-search { display:none; } }

@media (max-width: 620px) {
  .header-inner.shell {
    width: min(100% - 26px, 1180px);
    gap: 12px;
  }

  .header-inner .header-actions {
    gap: 14px;
  }

  .header-actions [data-session="guest"] {
    gap: 14px;
  }

  .header-inner .header-actions .register-link {
    display: inline-flex;
  }
}

@media (max-width: 400px) {
  .header-inner .brand > span:last-child {
    display: none;
  }
}