/**
 * Photo Gallery Manager — header "Photography" hover panel.
 *
 * Minimalist: plain hairline panel (var(--bg) background, 1px var(--hairline)
 * border, small padding), no counts, no label, no shadow, no lime accent bar.
 * Items are plain links, lime on hover. Opens on hover AND keyboard focus
 * (focus-within), with an invisible hover-bridge. Uses theme CSS vars so it is
 * light/dark aware. Inherits Archivo from the theme.
 */
.pgm-album-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger styled to visually match the other core nav links. */
.pgm-album-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg);
  text-decoration: none;
  line-height: 1;
  transition: color 0.2s ease;
}

.pgm-album-menu__trigger:hover,
.pgm-album-menu:hover .pgm-album-menu__trigger,
.pgm-album-menu:focus-within .pgm-album-menu__trigger {
  color: var(--acid-deep);
}

[data-theme="dark"] .pgm-album-menu__trigger:hover,
[data-theme="dark"] .pgm-album-menu:hover .pgm-album-menu__trigger,
[data-theme="dark"] .pgm-album-menu:focus-within .pgm-album-menu__trigger {
  color: var(--acid);
}

.pgm-album-menu__trigger:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

/* Small caret that flips when the panel opens. */
.pgm-album-menu__caret {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: currentColor transparent transparent transparent;
  transition: transform 0.2s ease;
}

.pgm-album-menu:hover .pgm-album-menu__caret,
.pgm-album-menu:focus-within .pgm-album-menu__caret {
  transform: rotate(180deg);
}

/* Invisible bridge so the panel does not close while moving the cursor down. */
.pgm-album-menu__bridge {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0.75rem;
}

/* The panel: hidden until hover/focus. */
.pgm-album-menu__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  z-index: 1000;
  min-width: 11rem;
  padding: 0.5rem 0;
  background: var(--bg);
  border: 1px solid var(--hairline);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.pgm-album-menu:hover .pgm-album-menu__panel,
.pgm-album-menu:focus-within .pgm-album-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pgm-album-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pgm-album-menu__link {
  display: block;
  padding: 0.4rem 1rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.pgm-album-menu__link:hover,
.pgm-album-menu__link:focus-visible {
  color: var(--acid-deep);
}

[data-theme="dark"] .pgm-album-menu__link:hover,
[data-theme="dark"] .pgm-album-menu__link:focus-visible {
  color: var(--acid);
}

.pgm-album-menu__link:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .pgm-album-menu__panel,
  .pgm-album-menu__caret,
  .pgm-album-menu__trigger,
  .pgm-album-menu__link {
    transition: none;
  }
}