/* Water Tower Music — header bar
 *
 * One solid black row: logo left, nav, SHOP pill, then search and socials
 * right. Replaces the old three-column layout that centred the logo and
 * pinned the socials with position:fixed.
 *
 * The old header changed on scroll (jQuery adds .headerBlack, .navScroll,
 * .socialsScroll, .porter_logo_scroll). This bar is black at every scroll
 * position, so those states are neutralised below rather than left to fight
 * the new layout — .porter_logo_scroll in particular inverts the logo to dark,
 * which on a black bar made it vanish.
 */

.site-header {
  position: fixed;              /* .header was already fixed; only the fill changes */
  top: 0; left: 0;
  z-index: 9999100;
  width: 100%;
  background: #000;
  min-height: 0;
}

/* On scroll the old theme adds .headerBlack, which despite the name sets a
   WHITE background. The new bar stays black at every scroll position. */
.site-header.headerBlack { background: #000 !important; }

/* The theme drives .header's height with min-height: 75px, then 90px from
   768px up, then back to 75px once .headerBlack lands on scroll. That made the
   bar change height as you scrolled, and left page templates with no reliable
   number to clear. Let the bar's own content set the height instead, and pin
   it so templates can pad by a known amount. */
.site-header, .site-header.headerBlack { min-height: 0 !important; }
.site-header-bar { min-height: 84px; }

.site-header-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 26px;
  min-height: 74px;
  box-sizing: border-box;
}

/* ---- logo ---- */
.site-header-logo { display: flex; align-items: center; flex: 0 0 auto; border: 0; }
.site-header-logo:hover, .site-header-logo:focus { border: 0; }

/* Beats .logo and the scroll state, which sets max-width:200px !important and
   inverts the colour. */
.site-header-logo .logo,
.site-header-logo .logo.porter_logo_scroll {
  display: block;
  max-width: 190px !important;
  width: auto;
  height: auto;
  margin: 0 !important;
  filter: brightness(0) invert(1) !important;   /* always white on the black bar */
  transition: none !important;
}

/* ---- nav ---- */
.site-header-nav { flex: 1 1 auto; min-width: 0; }

.site-header-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header-nav li { margin: 0; padding: 0; float: none; }

/* Every link carries the pill's padding and radius, so the active item's
   background appears in place rather than nudging the row when it is added.
   Selectors go through `ul li` deliberately: the menu's <ul> has the theme
   class "nav". Two rules in style_porter.css have to be beaten outright:
   `.nav li a { font-weight: 900 !important }` and, once the page is scrolled,
   `.navScroll li a { color: #fff !important }` — white text on the white
   active pill is invisible. Only !important beats !important, so the weight
   and the active colour carry it. */
.site-header-nav ul li a {
  display: block;
  padding: 8px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500 !important;   /* beats .nav li a's !important */
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  opacity: .9;
  transition: opacity .15s ease, background .15s ease;
}
.site-header-nav ul li a:hover, .site-header-nav ul li a:focus { color: #fff; border: 0; opacity: 1; }

/* The white pill that used to sit on the SHOP button now marks the page you
   are on, and nothing else. Hover does not get it: only the current page. */
.site-header-nav ul li.current-menu-item > a,
.site-header-nav ul li.current_page_item > a,
.site-header-nav ul li.current-menu-ancestor > a,
.site-header-nav ul li.current-menu-item > a:hover,
.site-header-nav ul li.current_page_item > a:hover {
  background: #fff;
  color: #000 !important;        /* beats .navScroll li a's !important */
  opacity: 1;
  font-weight: 700 !important;
  text-decoration: none;
}

/* Any child menu left over from a nested item: do not let it hang open. */
.site-header-nav .sub-menu { display: none; }

/* ---- SHOP pill ---- */
.site-header-shop {
  flex: 0 0 auto;
  display: inline-block;
  padding: 11px 30px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.site-header-shop:hover, .site-header-shop:focus { background: #ddd; color: #000; border: 0; }

/* ---- icons ---- */
/* #socials was position:fixed, pinned to the top right independent of the
   header. In the bar it has to be a normal flex child. */
#socials.site-header-icons,
#socials.site-header-icons.socialsScroll {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-header-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  opacity: .9;
  transition: opacity .15s ease;
}
.site-header-icons a:hover, .site-header-icons a:focus { color: #fff; border: 0; opacity: 1; }
.site-header-icons img { display: block; height: 16px; width: auto; margin: 0 !important; }

/* ---- below the bar ---- */
/* The old header was fixed and overlaid the hero; keep that, but the bar is
   opaque now so pages that start with text need clearance. */
body.admin-bar .site-header { top: 32px; }

/* The nav at 1.1rem with 8px padding and no letter-spacing measures ~512px of
   content, and holds one line down to about 1100px of bar. Below that the six
   items wrap, so tighten them for the last stretch before the hamburger takes
   over rather than let the header grow a second row.
   The band was 1279px when the links were wider; keeping it there now would
   shrink text at widths where the full size fits. */
@media screen and (min-width: 992px) and (max-width: 1099px) {
  .site-header-bar { gap: 18px; padding: 0 18px; }
  .site-header-nav ul { gap: 4px; }
  .site-header-nav ul li a { font-size: .8rem; padding: 8px 9px; letter-spacing: .04em; }
}

/* ---- mobile ---- */
/* Three across: search left, logo centred, hamburger right. The hamburger is
   fixed rather than a flex child, so it is centred separately and the logo
   carries a right margin to balance the search icon on the left. */
@media screen and (max-width: 991px) {
  .site-header-bar { gap: 0; padding: 0 16px; min-height: 70px; }
  .site-header-nav { display: none; }
  .site-header-shop { display: none; }

  /* Search, first in the row. 44px is a comfortable tap target. */
  #socials.site-header-icons {
    order: -1;
    flex: 0 0 44px;
    justify-content: flex-start;
    margin: 0;
    gap: 0;
  }

  /* Socials live in the hamburger menu on mobile; only search stays in the
     bar, at every width. */
  #socials.site-header-icons a:not(#search_overlay) { display: none; }
  #socials.site-header-icons #search_overlay { display: inline-flex !important; font-size: 20px; }

  /* Logo centred in the viewport. The 44px right margin mirrors the search
     icon's 44px on the left, which is what puts it on the true centre line
     rather than the centre of the leftover space. */
  .site-header-logo {
    order: 0;
    flex: 1 1 auto;
    justify-content: center;
    margin-right: 44px;
  }
  .site-header-logo .logo,
  .site-header-logo .logo.porter_logo_scroll { max-width: 140px !important; }

  /* The theme pins the hamburger at top:20px, so its centre sat at y=50 while
     the logo and search sat at y=31. Span the bar instead and centre within. */
  #expand_menu {
    top: 0 !important;
    height: 70px;
    display: flex;
    align-items: center;
  }
}

/* ---- the hamburger menu overlay ---- */
/* The theme gives #top_nav z-index:21 and a 90% black fill, so page content
   showed straight through the open menu and the links were unreadable over
   the release grid. Sit it above the page but below the hamburger itself
   (#expand_menu is 9999110) so the close button still works. */
#top_nav {
  z-index: 9999050 !important;
  background: #000 !important;
}

/* ---- socials inside the hamburger menu ---- */
#top_nav .wtm-top-nav-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 26px auto 0;
  padding: 24px 20px 0;
  max-width: 320px;
  border-top: 1px solid rgba(255, 255, 255, .25);
}
#top_nav .wtm-top-nav-socials a { border: 0; color: #fff; font-size: 20px; line-height: 1; }
#top_nav .wtm-top-nav-socials a:hover { color: #ccc; border: 0; }
#top_nav .wtm-top-nav-socials img { display: block; height: 19px; width: auto; }

/* ---- a theme rule that breaks mobile layout ---- */
/* .btn carries min-width:200px, which is wider than a grid column once the
   viewport is small. On listing pages the LISTEN buttons pushed the document
   to 413px against a 375px viewport, so the page scrolled sideways and this
   fixed header stretched with it.
   The cut-off is 991px, not 767px: a tablet at exactly 768 still lays the grid
   out four across, leaving ~180px columns, and the overflow came back. From
   992px up the columns are wide enough for the 200px button. */
@media screen and (max-width: 991px) {
  .btn { min-width: 0 !important; padding-left: 22px !important; padding-right: 22px !important; max-width: 100%; }
}