/* 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 {
  /* Sticky site-wide so the header never scrolls away (was position:relative,
     which scrolled up and exposed the bare body strip above the page bg). It
     stays in normal flow at the top, so no content offset is needed, and pins
     to the top on scroll - covering the top strip at all times. */
  position: sticky;
  top: 0;
  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: 1840px;
  margin: 0 auto;
  padding: 0 20px;
}

/* -- 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;
}
.wood-header__logo-vid {
  display: block;
  height: 50px;
  width: auto;
  max-width: 300px;
  vertical-align: middle;
  /* gold-on-black sting: screen drops the black on the dark header and also
     covers the Safari/iOS mp4 fallback (which has no alpha) */
  mix-blend-mode: screen;
  pointer-events: none;
}

/* -- nav row -------------------------------------------------------- */
.wood-header__nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 120px;
}
.wood-header__nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 64px;
  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: 44px;
  height: 44px;
  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: 200px;
  height: 43px;
  /* right pad clears the magnifier baked into the search.png frame */
  padding: 0 46px 0 18px;
  background: url("/static/img/header/search.png") center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  color: #f3e6c4;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  outline: none;
  transition: filter .15s ease;
}
.wood-header__search input::placeholder { color: rgba(243,230,196,.62); }
.wood-header__search input:focus { filter: brightness(1.1); }
/* magnifier is part of the search.png frame, so the CSS icon is removed */

/* -- right stack: search on top, mailing-list signup under it -------- */
.wood-header__right { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; margin-left: 18px; justify-content: center; }
.wood-header__right .wood-header__search { margin-left: 0; }
/* flex-direction:row + max-width override the global `form{flex-direction:
   column;max-width:520px}` (style.css) - without it the input/button stack. */
.wood-header__ml { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; max-width: none; }
.wood-header__ml input {
  /* sized to match the search box (same height, input.png's 5.6:1 ratio so
     no distortion). Balanced with search instead of dwarfing it. */
  flex: 0 0 auto;
  width: 178px; height: 43px;
  background: url("/static/img/header/input.png?v=8") center / 100% 100% no-repeat;
  border: 0; border-radius: 0; text-indent: 10px;
  /* match the search box typography exactly (was falling back to the UA font) */
  color: #f3e6c4;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.wood-header__ml input::placeholder { color: rgba(243,230,196,.55); }
.wood-header__ml input:focus { filter: brightness(1.12); }
.wood-header__ml button {
  flex: 0 0 auto;
  height: 34px; padding: 0 13px; cursor: pointer;
  background: linear-gradient(180deg, #5a3a18, #3b260e); color: #ffe9a8;
  border: 1px solid #8a5a26; border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,217,108,.18);
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 11px; letter-spacing: .04em;
  transition: transform .12s, filter .12s;
}
.wood-header__ml button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.wood-header__ml-done { color: #b8e6c4; font-family: 'Cinzel', Georgia, serif; font-size: 11.5px; letter-spacing: .03em; }
.wh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* -- 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;
  flex-direction: column;   /* avatar+name on top, Log out underneath */
  align-items: center;
  gap: 5px;
  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: 0;
  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: progressively shrink the single-row header so it fits without
   horizontal overflow from the 1840px max down to ~1024px, then stack on phones.
   The header is dense (brand + 13 nav items + search + mailing-list + auth), so
   each step shrinks the nav and sheds the optional right-side widgets in order.
   (Earlier this set width:68px at 1280 - BIGGER - which caused the overflow.) */
@media (max-width: 1800px) {
  .wood-header__inner { padding: 0 16px; }
  .wood-header__nav { gap: 4px; }
  .wood-header__nav a { width: 58px; font-size: 10px; }
  .wood-header__nav img, .wood-header__nav svg { width: 40px; height: 40px; }
  .wood-header__search input { width: 178px; }
  .wood-header__ml input { width: 150px; }
}
@media (max-width: 1480px) {
  .wood-header__brand { padding-left: 16px; margin-right: 12px; }
  .wood-header__nav { gap: 3px; }
  .wood-header__nav a { width: 54px; font-size: 9px; letter-spacing: .03em; }
  .wood-header__nav img, .wood-header__nav svg { width: 38px; height: 38px; margin-bottom: 3px; }
  .wood-header__ml { display: none; }            /* shed mailing-list first */
  .wood-header__search input { width: 160px; height: 40px; }
  .wood-header__auth a { padding: 0 13px; font-size: 11px; }
}
@media (max-width: 1240px) {
  .wood-header__inner { padding: 0 12px; }
  .wood-header__brand { padding-left: 12px; margin-right: 8px; }
  .wood-header__logo-img { max-width: 210px; }
  .wood-header__nav a { width: 50px; }
  .wood-header__nav img, .wood-header__nav svg { width: 34px; height: 34px; }
  .wood-header__right { display: none; }         /* shed search too */
  .wood-header__auth a { padding: 0 11px; letter-spacing: .05em; }
}
@media (max-width: 1080px) {
  .wood-header__brand { padding-left: 8px; }
  .wood-header__logo-img { max-width: 180px; height: 40px; }
  .wood-header__nav { gap: 2px; }
  .wood-header__nav a { width: 46px; }
  .wood-header__nav img, .wood-header__nav svg { width: 31px; height: 31px; margin-bottom: 2px; }
  .wood-header__auth { margin-left: 8px; gap: 6px; }
  .wood-header__auth a { padding: 0 9px; font-size: 10px; height: 32px; }
}
@media (max-width: 720px) {
  /* Stack the logo ABOVE the nav so nothing gets cut off on phones. */
  .wood-header { min-height: 0; }
  .wood-header__inner {
    flex-direction: column;
    height: auto;
    padding: 8px 6px;
    gap: 6px;
  }
  .wood-header__brand {
    height: auto;
    padding-left: 0;
    margin-right: 0;
    justify-content: center;
  }
  .wood-header__logo-img { height: 40px; max-width: 200px; }
  .wood-header__logo-vid { height: 46px; max-width: 230px; }
  .wood-header__nav {
    height: auto;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 2px 4px;
  }
  .wood-header__nav a { width: 42px; height: auto; font-size: 9px; padding: 2px 0; }
  .wood-header__nav img, .wood-header__nav svg { width: 30px; height: 30px; margin-bottom: 2px; }
  .wood-header__nav a span { display: none; }    /* icons only on phones */
  .wood-header__auth { margin-left: 0; }
}