/* Global header (AV-495).
 *
 * Replaces the ace/Bootstrap navbar chrome with a flex bar: 4px brand gradient
 * over a 59px row = 63px, down from the old 80px. The search is a glyph that
 * expands leftward into the nav row.
 *
 * Loaded globally and last in the chain (layout/stylesheets.phtml), so these
 * rules outrank ace.css / customchanges.css on the elements the header owns.
 * Every selector is scoped to .gpdt-header — nothing here reaches another page.
 *
 * Three legacy contracts are deliberately preserved in the markup and must not
 * be renamed:
 *   .form-search   stlib.js submits it to /learning and enforces the 3-char
 *                  minimum. That is the real search route; the header needs no
 *                  navigation JS of its own.
 *   .search-query  commonformelement.js binds predictive search to it, and
 *                  reads getElementsByClassName(...)[0] — so the desktop input
 *                  must stay ahead of the mobile one in the DOM.
 *   .input-group + .teamNameDropBody
 *                  the predictive panel shows via .open > .dropdown-menu, so
 *                  the panel has to stay a direct child of the .input-group.
 *
 * .ace-nav / .nav-item survive on TOPICS and Account because hover-dropdown.js
 * keys its mouseover on '.ace-nav .nav-item'. Their ace geometry is undone
 * below rather than their classes removed.
 */

/* --- shell ---------------------------------------------------------------- */

.gpdt-header {
  display: block;
  min-height: 0;
  background: var(--gpd-white);
  border: 0;
  box-shadow: none;
  font-family: var(--gpd-font-body);
}

.gpdt-header__brandbar {
  height: 4px;
  background: var(--gpd-gradient-brandbar);
}

.gpdt-header__bar {
  display: flex;
  align-items: center;
  gap: var(--gpd-space-5);
  height: 59px;
  padding: 0 28px;
  border-bottom: 1px solid var(--gpd-border-subtle);
}

.gpdt-header__spacer { flex: 1 1 auto; min-width: 0; }

.gpdt-header__logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

/* Custom-state logos are arbitrary uploads, so cap rather than set the height.
   34px is the comp value. The GPD lockup is 713x187, so height is the binding
   cap here (34px -> 130px wide) and the width cap only takes over past ~50px. */
.gpdt-header__logo img {
  display: block;
  height: auto;
  width: auto;
  max-height: 34px;
  max-width: 190px;
}

/* --- nav ------------------------------------------------------------------ */

.gpdt-header__nav {
  display: flex;
  align-items: center;
  gap: var(--gpd-space-4);
  height: 100%;
  white-space: nowrap;
}

.gpdt-header__link {
  flex: none;
  font-family: inherit;
  font-weight: var(--gpd-fw-semi);
  font-size: var(--gpd-fs-xs);
  letter-spacing: 0.05em;
  /* Labels come out of navInfo mixed-case ("Magazine", "Ebooks", "PLAYLISTS"),
     so the caps are applied here rather than assumed in the data. */
  text-transform: uppercase;
  color: var(--gpd-gray-600);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--gpd-space-1);
}

.gpdt-header__link:hover,
.gpdt-header__link:focus { color: var(--gpd-blue); text-decoration: none; }

/* --gpd-sky is decorative only (2.73:1), so the active link uses blue. Bold is
   the non-colour half of the state — aria-current carries it for assistive tech. */
.gpdt-header__link--active {
  font-weight: var(--gpd-fw-bold);
  color: var(--gpd-blue);
}

.gpdt-header__icon { flex: none; }

.gpdt-header__link:focus-visible,
.gpdt-header__logo:focus-visible {
  outline: 2px solid var(--gpd-blue);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- TOPICS / Account / bell ----------------------------------------------
   ace lays .ace-nav out with floats, a 15px top pad and a 100%-height li; the
   flex row wants none of that. .nav-item.dropdown also carries height:112%
   from customchanges.css, a fudge against the old 80px bar that would now push
   the dropdown 7px clear of the header.
   -------------------------------------------------------------------------- */

.gpdt-header .ace-nav {
  flex: none;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  list-style: none;
}

.gpdt-header .ace-nav > li,
.gpdt-header .ace-nav > li.nav-item.dropdown {
  float: none !important;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  border: 0;
  position: relative;
}

/* display:block, NOT flex — hover-dropdown.js puts .show on the trigger anchor
   itself, and bootstrap's `.show { display: block !important }` wins over any
   display set here. A flex anchor would therefore re-flow to normal flow on
   hover and the label would jump. Block is what the anchor computes to in both
   states, so hovering changes nothing but colour; the li's align-items centres
   it and the caret aligns on the text baseline. */
.gpdt-header .ace-nav > li > a {
  display: block;
  /* Must be stated, not just omitted. ace sets height:100% on this anchor, and
     a block box that tall renders its text against the top edge — dropping the
     declaration hands the property back to ace rather than neutralising it.
     auto lets the li's align-items do the centring. */
  height: auto;
  min-width: 0;
  width: auto;
  padding: 0;
  text-align: left;
  line-height: normal;
  white-space: nowrap;
  font-family: inherit;
  font-weight: var(--gpd-fw-bold);
  /* !important only to beat customchanges.css:8043, a `font-size: 12px
     !important` inside a 1180-1440px block added to stop the OLD header
     overflowing at 150% Windows DPI. The new bar has the room; the rule is
     dead weight but still applies, and .ace-nav is shared with the admin
     header so it cannot simply be deleted. */
  font-size: var(--gpd-fs-sm) !important;
  letter-spacing: 0.06em;
  color: var(--gpd-gray-600);
  text-decoration: none;
}

.gpdt-header .ace-nav > li > a:hover,
.gpdt-header .ace-nav > li > a:focus { color: var(--gpd-blue); }

/* Same reason the original markup carried style="vertical-align:middle" inline:
   there is no flex box here to centre the caret. */
.gpdt-header .ace-nav > li > a > .gpdt-header__icon {
  vertical-align: middle;
  margin-left: var(--gpd-space-1);
}

/* Outranks the shared .ace-nav trigger colour on specificity rather than
   !important, so Account still gets the hover state below. */
.gpdt-header .ace-nav > li.gpdt-header__account > a { color: var(--gpd-navy); }
.gpdt-header .ace-nav > li.gpdt-header__account > a:hover,
.gpdt-header .ace-nav > li.gpdt-header__account > a:focus { color: var(--gpd-blue); }

/* The dropdowns hang off a full-height li, so top:100% is the bar's bottom
   edge and no hover-bridge padding is needed beyond a small visual gap. */
.gpdt-header .hover-menu.menu-top-pad { padding-top: var(--gpd-space-2); }
.gpdt-header .dropdown-menu { margin-top: 0; }

/* Account and the bell are one group, so they sit closer than the gap between
   nav links — but not touching, which is how .ace-nav leaves them. */
.gpdt-header .gpdt-header__util { gap: var(--gpd-space-3); }

/* The bell keeps its ace icon sizing; only the row geometry changes. Scoped
   past the shared trigger rule above, which zeroes min-width. */
.gpdt-header .ace-nav > li.gpdt-header__bell > a { min-width: 24px; }

/* --- collapsible search ---------------------------------------------------
   .gpdt-search is the layout slot and animates its width so no nav item shifts.
   .gpdt-search__box is pinned right:0 and animates in step, which is what reads
   as growing leftward. The predictive panel lives on the box (outside the
   clipped field) so the collapse animation cannot cut it off.
   -------------------------------------------------------------------------- */

.gpdt-search {
  position: relative;
  flex: none;
  width: 22px;
  height: 34px;
  transition: width 220ms ease-out;
}

.gpdt-search__form { margin: 0; height: 100%; }

.gpdt-header .gpdt-search__box {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 34px;
  border-collapse: separate;
  transition: width 220ms ease-out;
}

/* No overflow:hidden here — it would clip the trigger's focus ring against the
   22px collapsed slot. The gap collapses instead, so the row's base size is the
   glyph alone and nothing needs clipping; the input clips its own text. */
.gpdt-search__field {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--gpd-radius-sm);
  box-shadow: none;
  transition: gap 160ms ease-out, border-color 160ms ease-out,
              background-color 160ms ease-out, box-shadow 160ms ease-out,
              padding 160ms ease-out;
}

.gpdt-search__trigger,
.gpdt-search__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--gpd-gray-600);
}

.gpdt-search__trigger:hover { color: var(--gpd-blue); }
.gpdt-search__close { color: var(--gpd-gray-400); }
.gpdt-search__close:hover { color: var(--gpd-navy); }

.gpdt-search__trigger:focus-visible,
.gpdt-search__close:focus-visible {
  outline: 2px solid var(--gpd-blue);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Collapsed, the close button must occupy no width or the field's content
   overflows its 22px slot. */
.gpdt-search__close {
  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 160ms ease-out, width 160ms ease-out;
}

/* .form-control brings ace's input chrome — height, border, shadow, and
   display:table-cell from .input-group. All of it is unwanted here, but the
   class stays because search.js selects on .form-control.search-query. */
.gpdt-header .gpdt-search__input,
.gpdt-header .gpdt-search__input.form-control {
  display: block;
  float: none;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  font-family: var(--gpd-font-body);
  font-size: var(--gpd-fs-base);
  font-weight: var(--gpd-fw-regular);
  letter-spacing: normal;
  color: var(--gpd-text-body);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
}

.gpdt-header .gpdt-search__input::placeholder { color: var(--gpd-gray-400); }

/* expanded ----------------------------------------------------------------- */

/* The slot deliberately does NOT grow. Only the box, which is pinned right: 0,
   so the field expands leftward into the spacer and the row's width is identical
   open or closed. Growing the slot pushed every link right by 258px, and whether
   that overflowed depended on how many nav items the user's permissions produce
   — a data-dependent overflow no breakpoint can catch. z-index carries it over
   TOPICS and the logo on narrower desktops, where the spacer runs out first. */
.gpdt-header .gpdt-search.is-open .gpdt-search__box { width: 280px; z-index: 5; }

.gpdt-search.is-open .gpdt-search__field {
  gap: var(--gpd-space-2);
  padding: 0 9px;
  background: var(--gpd-white);
  border-color: var(--gpd-sky);
  box-shadow: var(--gpd-shadow-sm);
}

.gpdt-search.is-open .gpdt-search__trigger { color: var(--gpd-blue); }

.gpdt-header .gpdt-search.is-open .gpdt-search__input {
  opacity: 1;
  pointer-events: auto;
}

.gpdt-search.is-open .gpdt-search__close {
  width: 14px;
  opacity: 1;
  pointer-events: auto;
}

/* predictive panel --------------------------------------------------------- */

.gpdt-header .teamNameDropBody {
  top: 100%;
  right: 0;
  left: auto;
  width: 420px;
  max-width: 90vw;
  margin-top: var(--gpd-space-1);
  padding: 0;
  border-radius: var(--gpd-radius-sm);
  box-shadow: var(--gpd-shadow-md);
}

/* commonformelement.js opens every .input-group on the page at once, so a
   collapsed field would otherwise pop the panel open under a bare glyph. */
.gpdt-search:not(.is-open) .teamNameDropBody { display: none !important; }

/* The panel is a descendant of .gpdt-header__nav, which is nowrap so the utility
   nav never wraps. Result titles inherited that, ran on one line and scrolled the
   panel sideways — reset it rather than widening the panel. */
.gpdt-header .teamNameDropBody { white-space: normal; }

/* prepareSearch() emits cols nested directly inside cols, so each .row's -12px
   gutter margins stack and push past the panel edge. Vertical scrolling is the
   only axis this panel should ever have. */
.gpdt-header .teamNameDropBody .row { margin-left: 0; margin-right: 0; }
.gpdt-header .teamNameDropBody img { max-width: 100%; height: auto; }

.gpdt-header .widget-search-container {
  max-height: 550px;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .gpdt-search,
  .gpdt-header .gpdt-search__box,
  .gpdt-search__field,
  .gpdt-search__trigger,
  .gpdt-header .gpdt-search__input,
  .gpdt-search__close { transition: none; }
}

/* The hamburger's menu is a sibling of the bar now, not a child of the
   fixed-height .navbar-container that used to swallow it. ace hides
   #menu-toggler above 991px, so its menu has no business being in flow there. */
@media only screen and (min-width: 992px) {
  .gpdt-header .topnav { display: none; }
}

/* --- hamburger menu -------------------------------------------------------
   .topnav (mobilecustomchanges.css:1372) sets background:#fff AND
   mix-blend-mode:overlay. Overlay against a white backdrop resolves to
   1 - 2(1-1)(1-Cs) = 1 for every channel, so the whole menu — links included —
   composites to solid white. The links are still there and still clickable,
   which is exactly how it read: a blank panel that responds to taps.
   The 5% top margin is what left the gap above them.
   -------------------------------------------------------------------------- */

.gpdt-header .topnav {
  mix-blend-mode: normal;
  margin-top: 0;
  background-color: var(--gpd-white);
}

/* --- notifications, now a row in that menu -------------------------------- */

.gpdt-header .gpdt-mobile-notify { margin: 0; padding: 0; list-style: none; }

.gpdt-header .gpdt-mobile-notify > li { position: relative; display: block; float: none; }

.gpdt-header .gpdt-mobile-notify > li > a {
  display: flex;
  align-items: center;
  gap: var(--gpd-space-2);
  padding: var(--gpd-space-3) var(--gpd-space-4);
  color: var(--gpd-text-body);
}

.gpdt-mobile-notify__label { flex: 1 1 auto; }

/* The panel is a .dropdown-menu, so it would otherwise open absolutely
   positioned over the menu it now lives inside. In flow it just expands. */
.gpdt-header .topnav .notificationDivMobile {
  position: static;
  display: none;
  float: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--gpd-gray-50);
}

.gpdt-header .topnav .open > .notificationDivMobile { display: block; }

/* mobilecustomchanges.css:954 pins BOTH of these with an id-level
   `position: absolute; top: 30px; bottom: 34.2% !important`, which is what
   floated Notifications up into the bar and left the hamburger mid-page. An
   id needs an id to outrank it. */
.gpdt-header .topnav ul#mobile-notification {
  position: static;
  top: auto;
  right: auto;
  bottom: auto !important;
  display: block;
  width: 100%;
  margin: 0;
}

/* --- menu colours: the same tokens the desktop nav uses -------------------- */

.gpdt-header .topnav a {
  color: var(--gpd-gray-600);
  border-bottom-color: var(--gpd-border-subtle) !important;
}

.gpdt-header .topnav li.active > a,
.gpdt-header .topnav a:hover,
.gpdt-header .topnav a:focus { color: var(--gpd-blue); }

.gpdt-header .topnav li.gpdt-mobile-account > a { color: var(--gpd-navy); }

/* --- hamburger ------------------------------------------------------------
   Now a flex item in the bar rather than an absolutely positioned stray. ace
   draws its three bars with borders on :before/:after plus .menu-text; those
   are replaced with three backgrounds so the top and bottom can rotate into an
   X while the middle fades.
   -------------------------------------------------------------------------- */

.gpdt-header__bar a#menu-toggler {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto !important;
  order: 99;
  flex: none;
  display: none;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0;
}

@media only screen and (max-width: 991px) {
  .gpdt-header__bar a#menu-toggler { display: block; }
}

/* ace builds its bars from borders on these two pseudo-elements with
   content-box sizing, so each renders ~4px thick and cannot rotate cleanly.
   Switched off in favour of the three real bars in the markup. */
.gpdt-header__bar a#menu-toggler:before,
.gpdt-header__bar a#menu-toggler:after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

.gpdt-header__bar a#menu-toggler > .menu-text {
  display: none !important;
  border: 0 !important;
}

.gpdt-burger {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  display: block;
}

.gpdt-burger__bar {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  display: block;
  background: var(--gpd-gray-600);
  border-radius: 2px;
  transition: transform 200ms var(--gpd-ease), top 200ms var(--gpd-ease),
              opacity 120ms linear;
}

.gpdt-burger__bar:nth-child(1) { top: 15px; }
.gpdt-burger__bar:nth-child(2) { top: 21px; }
.gpdt-burger__bar:nth-child(3) { top: 27px; }

/* Both outer bars land on the same centre line before rotating, so the X is
   symmetrical rather than two offset strokes. */
.gpdt-header__bar .menu-toggler.is-open .gpdt-burger__bar:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.gpdt-header__bar .menu-toggler.is-open .gpdt-burger__bar:nth-child(2) { opacity: 0; }

.gpdt-header__bar .menu-toggler.is-open .gpdt-burger__bar:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* --- menu open/close ------------------------------------------------------
   mobile.js toggles #myLinks' inline display, which cannot transition. The
   header script keeps it displayed and drives state from .is-open instead, so
   height and opacity can animate. max-height is a ceiling, not a measurement —
   it only has to exceed the tallest menu.
   -------------------------------------------------------------------------- */

.gpdt-header .topnav #myLinks {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 260ms var(--gpd-ease), opacity 180ms linear;
}

.gpdt-header .topnav.is-open #myLinks {
  max-height: 85vh;
  opacity: 1;
  overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
  .gpdt-header .topnav #myLinks,
  .gpdt-burger__bar { transition: none; }
}

/* --- narrow ---------------------------------------------------------------
   991px, not the comp's 900px: that is where ace reveals #menu-toggler, so the
   utility links have to leave at exactly the same point or the two menus
   overlap between 900 and 991. Bar grows to 65px (69px with the brand strip)
   for a 44px tap target.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 991px) {
  .gpdt-header__bar {
    gap: var(--gpd-space-3);
    height: 65px;
    padding: 0 16px;
  }

  /* The bar is the logo, the search glyph and the hamburger. TOPICS, the nav
     links and the Account/bell group all live inside the menu.
     These have to outrank .gpdt-header .ace-nav (0,2,0), which sets
     display:flex on both lists and otherwise wins on specificity. */
  .gpdt-header .gpdt-header__bar .gpdt-header__topics,
  .gpdt-header .gpdt-header__bar .gpdt-header__util { display: none !important; }

  .gpdt-header__nav > .gpdt-header__link { display: none; }

  /* The nav takes the slack instead of the spacer, so the glyph ends up hard
     against the hamburger and the open field has room to grow into. */
  .gpdt-header__spacer { display: none; }

  .gpdt-header__nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    gap: var(--gpd-space-3);
  }

  .gpdt-search { width: 44px; height: 44px; }
  .gpdt-header .gpdt-search__box { width: 44px; height: 44px; }
  .gpdt-search__field { justify-content: center; }
  .gpdt-search__trigger { min-width: 44px; min-height: 44px; }

  /* 100% is the nav, which is now whatever the logo and hamburger leave —
     so the field fills the gap rather than overflowing the row. */
  .gpdt-search.is-open { width: 100%; }
  .gpdt-header .gpdt-search.is-open .gpdt-search__box { width: 100%; }
  .gpdt-search.is-open .gpdt-search__field { justify-content: flex-start; }
  .gpdt-search.is-open .gpdt-search__close { width: 44px; min-height: 44px; }

  .gpdt-header .teamNameDropBody { width: 100%; }

  /* Pinned by id-level rules in two mobile stylesheets (position:absolute,
     top:30px, bottom:34.2% !important, left:80%), so every one of these has to
     be stated and stated loudly. margin-left:auto is what puts it hard right;
     it does not depend on the spacer or on source order. */
  .gpdt-header .gpdt-header__bar a#menu-toggler {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    display: block !important;
    align-self: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 0;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }
}

/* Under 450px the logo and a usable search field cannot both fit, so the logo
   slides out while the field is open and slides back when it closes. Timed to
   match the field's own 220ms so the two read as one movement. */
@media only screen and (max-width: 450px) {
  .gpdt-header__logo {
    max-width: 190px;
    overflow: hidden;
    transition: max-width 220ms ease-out, opacity 160ms ease-out,
                margin-right 220ms ease-out;
  }

  .gpdt-header__bar.is-searching .gpdt-header__logo {
    max-width: 0;
    opacity: 0;
    /* a zero-width flex item still draws its share of the row's gap */
    margin-right: calc(var(--gpd-space-3) * -1);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gpdt-header__logo { transition: none; }
}

/* Below 540px mobilecustomchanges.css hands the whole nav to the hamburger,
   which also pins .navbar to 115px — a height the old three-row header needed
   and this one does not. */
@media only screen and (max-width: 540px) {
  .gpdt-header { height: auto; }
}


/* --- hamburger menu hierarchy ---------------------------------------------
   The first submenu level carried no indent at all, so a topic sat flush with
   the TOPICS row that opened it, while the second level was indented by a
   percentage margin. Each level now steps in by a fixed amount and down in
   weight, so depth reads at a glance.
   -------------------------------------------------------------------------- */

/* The only list-style:none for these lists sits inside a max-width:540px block,
   so markers reappeared between 541 and 991px. Marker only — the lists keep
   their padding, so the indent scale below is unaffected. */
.gpdt-header .topnav ul { list-style: none; }

.gpdt-header .topnav #navigation > li > a { padding-left: var(--gpd-space-4); }

.gpdt-header .topnav .collaseibleSubMenuUL > li > a {
  padding-left: var(--gpd-space-6);
  margin-left: 0;
  font-size: var(--gpd-fs-md);
  font-weight: var(--gpd-fw-semi);
}

.gpdt-header .topnav .collaseibleSubTopicMenuUL > li { padding-left: 0; }

/* Twice the first level, expressed as the relationship rather than a literal so
   the two stay locked together if the step changes. */
.gpdt-header .topnav .collaseibleSubTopicMenuUL > li > a {
  padding-left: calc(var(--gpd-space-6) * 2);
  margin-left: 0;
  font-size: var(--gpd-fs-base);
  font-weight: var(--gpd-fw-regular);
}