/* issue-menu.css — the issue picker in the hero-corner bar.
   Clicking the issue number opens a small menu of covers. Shared by the
   current cover and every archived one under issues/. */
.issue-picker { position: relative; display: inline-flex; }

.dir-a .hero-corner .meta .issue-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity .2s ease;
}
.dir-a .hero-corner .meta .issue-toggle:hover,
.dir-a .hero-corner .meta .issue-toggle[aria-expanded="true"] { opacity: 1; }
.issue-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.issue-toggle svg { display: block; transition: transform .25s cubic-bezier(0.25, 1, 0.5, 1); }
/* The chevron points the way the menu will open: up from the foot of the
   hero, down once the bar has pinned to the top of the page. */
.issue-picker.opens-down .issue-toggle svg { transform: rotate(180deg); }
.issue-picker .issue-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.issue-picker.opens-down .issue-toggle[aria-expanded="true"] svg { transform: none; }

.issue-menu {
  position: absolute;
  left: -16px;
  bottom: calc(100% + 18px);
  z-index: 40;
  min-width: 232px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .25s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear .25s;
}
.issue-picker.opens-down .issue-menu {
  bottom: auto;
  top: calc(100% + 18px);
  transform: translateY(-6px);
}
.issue-picker.is-open .issue-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.issue-menu a {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
/* The bar dims every span inside .meta; menu rows set their own contrast. */
.dir-a .hero-corner .meta .issue-menu span { opacity: 1; }
.dir-a .hero-corner .meta .issue-menu .issue-season { opacity: 0.6; }
.issue-menu a::before {
  content: "";
  width: 8px;
  height: 8px;
  background: transparent;
}
.issue-menu a[aria-current="page"]::before { background: #f10000; }
.issue-menu a:hover,
.issue-menu a:focus-visible { background: #f10000; outline: none; }
.issue-menu a:hover::before,
.issue-menu a:focus-visible::before { background: transparent; }
.issue-menu a[aria-current="page"]:hover::before,
.issue-menu a[aria-current="page"]:focus-visible::before { background: #fff; }
.dir-a .hero-corner .meta .issue-menu a:hover .issue-season,
.dir-a .hero-corner .meta .issue-menu a:focus-visible .issue-season { opacity: 1; }

@media (max-width: 767px) {
  /* On phones the picker sits mid-bar; anchor the menu to its right edge
     so it can't run off the screen. */
  .issue-menu { left: auto; right: -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .issue-menu, .issue-toggle svg { transition: none; }
}