/**
 * Shared default header (homepage / article / site shell)
 * Aligns with nang-nav look from social home.
 */
:root {
  --eb-header-h: 56px;
  --eb-header-max: 1180px;
  --eb-header-plum: #2a1c22;
  --eb-header-coral: #e07a5f;
  --eb-header-coral-hot: #d4654a;
  --eb-header-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.eb-header,
.nang-nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(42, 28, 34, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--eb-header-font);
}

.eb-header-inner,
.nang-nav-inner {
  max-width: var(--eb-header-max);
  margin: 0 auto;
  min-height: var(--eb-header-h);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.eb-header-logo,
.nang-logo {
  display: flex;
  align-items: center;
  text-decoration: none !important;
  flex-shrink: 0;
  line-height: 0;
}

.eb-header-logo img,
.nang-logo-img,
.nang-logo-dark {
  height: 34px;
  width: auto;
  max-width: 148px;
  object-fit: contain;
  display: block;
}

/* Search — fixed look on ALL pages */
.eb-header-search,
.nang-search {
  flex: 1 1 auto;
  max-width: 320px;
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  padding: 0.4rem 0.9rem !important;
  color: rgba(250, 246, 241, 0.55);
  margin: 0 !important;
  box-shadow: none !important;
  position: relative;
}

.eb-header-search i,
.nang-search i {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: rgba(250, 246, 241, 0.5);
  pointer-events: none;
}

.eb-header-search input,
.nang-search input {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.85rem !important;
  font-family: var(--eb-header-font) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #faf6f1 !important;
  -webkit-appearance: none;
  appearance: none;
}

.eb-header-search input::placeholder,
.nang-search input::placeholder {
  color: rgba(250, 246, 241, 0.45) !important;
  opacity: 1;
}

.eb-header-search:focus-within,
.nang-search:focus-within {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Kill theme form overrides that break search */
.eb-header .searchform,
.eb-header .woodmart-ajax-search,
body.eb-site-shell .nang-search .s,
body.eb-site-shell .nang-search input[type="text"],
body.eb-site-shell .nang-search input[type="search"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.eb-header-links,
.nang-nav-links {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}

.eb-header-links a,
.nang-nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: rgba(250, 246, 241, 0.62) !important;
  text-decoration: none !important;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border-bottom: none !important;
  white-space: nowrap;
}

.eb-header-links a i,
.nang-nav-links a i {
  font-size: 1rem;
}

.eb-header-links a.is-active,
.eb-header-links a:hover,
.nang-nav-links a.is-active,
.nang-nav-links a:hover {
  color: #faf6f1 !important;
  background: rgba(255, 255, 255, 0.08);
}

.eb-header-actions,
.nang-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: 0;
}

.eb-header-write,
.nang-btn-write {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--eb-header-coral);
  color: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap;
  border: 0 !important;
  line-height: 1.2;
}

.eb-header-write:hover,
.nang-btn-write:hover {
  background: var(--eb-header-coral-hot);
  color: #fff !important;
}

.eb-header-login,
.nang-btn-ghost {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: rgba(250, 246, 241, 0.9) !important;
  text-decoration: none !important;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}

.eb-header-login:hover,
.nang-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}

/* Site shell: hide legacy theme header when default header present */
body.eb-site-shell .header-wrap,
body.eb-social-home .header-wrap,
body.eb-social-article .header-wrap {
  display: none !important;
}

/* Legacy eb-site-nav aliases → same as default header */
.eb-site-nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(42, 28, 34, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-height: var(--eb-header-h);
}

.eb-site-nav-inner {
  max-width: var(--eb-header-max);
  margin: 0 auto;
  min-height: var(--eb-header-h);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* If old markup still uses .nang-search inside .eb-site-nav, force styles */
.eb-site-nav .nang-search {
  flex: 1 1 auto;
  max-width: 320px;
}

@media (max-width: 991px) {
  .eb-header-links span,
  .nang-nav-links span {
    display: none;
  }
  .eb-header-links a,
  .nang-nav-links a {
    padding: 0.45rem 0.55rem;
  }
  .eb-header-write span,
  .nang-btn-write span {
    display: none;
  }
  .eb-header-write,
  .nang-btn-write {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
  }
  .eb-header-search,
  .nang-search {
    max-width: none;
  }
}

@media (max-width: 575px) {
  .eb-header-links,
  .nang-nav-links {
    display: none;
  }
  .eb-header-search,
  .nang-search {
    max-width: 100%;
  }
}