/* wood-header.css — shared site-wide header matching forum.arcomage.org.
   Used on every www.arcomage.org page via layout.php. */

/* ── kill the old generic topbar entirely ─────────────────────────── */
header.topbar { display: none !important; }

/* ── wood-header shell ────────────────────────────────────────────── */
.wood-header {
  position: relative;
  width: 100%;
  min-height: 120px;
  background:
    url("/static/img/header/header_right.png") right center / auto 100% no-repeat,
    url("/static/img/header/header_left.png") left center / auto 100% no-repeat,
    url("/static/img/header/header_center_tiled.png") center / auto 100% repeat-x,
    #2a1a0a;
  border-bottom: 4px solid #e3b15a;
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
  z-index: 100;
}
.wood-header__inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: 120px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 28px 0 0;
}

/* ── brand block (left cap, spellbook + ARCOMAGE COMMUNITY) ───────── */
.wood-header__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 120px;
  padding-left: 24px;          /* left cap art only; brand wordmark now an <img> */
  margin-right: 18px;
  text-decoration: none;
  color: transparent;
  user-select: none;
}
.wood-header__logo-img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 260px;
  vertical-align: middle;
}

/* ── nav row ──────────────────────────────────────────────────────── */
.wood-header__nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 120px;
}
.wood-header__nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 96px;
  text-decoration: none;
  color: #f3e6c4;
  font-family: 'Cinzel', 'Cinzel Decorative', Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.6);
  transition: transform .15s ease, color .15s ease;
  padding-top: 4px;
}
.wood-header__nav a:hover {
  color: #ffe9a8;
  transform: translateY(-2px);
}
.wood-header__nav a:hover img,
.wood-header__nav a:hover svg {
  filter: drop-shadow(0 0 12px rgba(255,217,108,.7));
}
.wood-header__nav img,
.wood-header__nav svg {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 4px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7));
  color: #e3b15a;
  fill: currentColor;
}

/* ── search box ───────────────────────────────────────────────────── */
.wood-header__search {
  flex: 0 0 auto;
  position: relative;
  margin-left: 18px;
}
.wood-header__search input {
  width: 220px;
  height: 36px;
  padding: 0 16px 0 38px;
  background: rgba(20,12,4,.55);
  border: 1px solid #6a4a22;
  border-radius: 18px;
  color: #f3e6c4;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.wood-header__search input::placeholder { color: rgba(243,230,196,.55); }
.wood-header__search input:focus {
  border-color: #e3b15a;
  background: rgba(20,12,4,.75);
}
.wood-header__search::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e3b15a'><path d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 5L20.49 19l-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/></svg>") center / contain no-repeat;
  pointer-events: none;
}

/* ── auth chips ───────────────────────────────────────────────────── */
.wood-header__auth {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
}
.wood-header__auth a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 18px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wood-header__signup {
  background: transparent;
  color: #f3e6c4;
  border: 1px solid #6a4a22;
}
.wood-header__signup:hover {
  border-color: #e3b15a;
  color: #ffe9a8;
  transform: translateY(-1px);
}
.wood-header__login {
  background: linear-gradient(180deg, #5a3a18, #3b260e);
  color: #ffe9a8;
  border: 1px solid #8a5a26;
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,217,108,.18);
}
.wood-header__login:hover {
  background: linear-gradient(180deg, #6a4a22, #4b360e);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,217,108,.28);
}
.wood-header__userchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f3e6c4;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.wood-header__userchip img {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #8a5a26;
}
.wood-header__userchip .logout {
  margin-left: 6px;
  padding: 4px 10px;
  border: 1px solid #6a4a22;
  border-radius: 14px;
  color: #f3e6c4;
  text-decoration: none;
  font-size: 11px;
}
.wood-header__userchip .logout:hover {
  border-color: #e3b15a;
  color: #ffe9a8;
}

/* ── responsive: shrink at narrow viewports ───────────────────────── */
@media (max-width: 1280px) {
  .wood-header__nav a { width: 68px; font-size: 10px; }
  .wood-header__nav img, .wood-header__nav svg { width: 48px; height: 48px; }
  .wood-header__search input { width: 160px; }
  .wood-header__brand { padding-left: 20px; }
}
@media (max-width: 980px) {
  .wood-header__search { display: none; }
  .wood-header__nav a { width: 56px; }
  .wood-header__nav img, .wood-header__nav svg { width: 40px; height: 40px; }
  .wood-header__brand { padding-left: 16px; }
  .wood-header__logo-img { height: 38px; max-width: 200px; }
}
@media (max-width: 720px) {
  .wood-header__inner { padding: 0 8px; }
  .wood-header__nav { gap: 0; }
  .wood-header__nav a { width: 44px; font-size: 9px; }
  .wood-header__nav img, .wood-header__nav svg { width: 32px; height: 32px; }
  .wood-header__nav a span { display: none; }    /* icons only on phones */
  .wood-header__brand { padding-left: 10px; }
  .wood-header__logo-img { height: 34px; max-width: 150px; }
}