/**
 * @file
 * Menu row overlay tone and hover behaviour (templates/biopama-menu-row.html.twig).
 * Hover changes opacity, colour and rotation only, never a size. The overlay
 * takes the page's dark token (Conservation Tracking grey on the tool pages).
 */

/* Card edge: a downward shadow without spread plus a hairline light edge, so
   stacked rows read as separate cards (Conservation Tracking's global .card
   glow has a 5px spread that merges into one dark band at 8px gaps). The
   shadow deepens on hover; no size changes. */
.card.biopama-menu-row {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.3s ease;
}

.card.biopama-menu-row:hover,
.card.biopama-menu-row:has(:focus-visible) {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Square icon buttons (Bootstrap has no fixed rem width/height utility). */
.biopama-icon-btn {
  width: 1.75rem;
  height: 1.75rem;
}

/* Tinted overlay over the background image; the image shows through more on
   hover, as on the Conservation Tracking dataset card. */
.biopama-menu-row-overlay {
  background-color: rgba(var(--bs-dark-rgb, 60, 60, 60), 0.87);
  transition: background-color 0.3s ease;
}

.biopama-menu-row:hover .biopama-menu-row-overlay,
.biopama-menu-row:has(:focus-visible) .biopama-menu-row-overlay {
  background-color: rgba(var(--bs-dark-rgb, 60, 60, 60), 0.6);
}

/* Secondary actions fade in on hover / keyboard focus; they keep their space.
   :has(:focus-visible) rather than :focus-within, so a mouse click on the plus
   (which leaves focus on it) does not keep them visible. */
.biopama-menu-row-actions {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.biopama-menu-row:hover .biopama-menu-row-actions,
.biopama-menu-row:has(:focus-visible) .biopama-menu-row-actions {
  opacity: 1;
}

/* Title: body colour toned to 80% at rest (the group headings keep the full
   colour), accent on row hover; no background change. The
   theme preset sets --bs-btn-hover-bg on :root and .btn-link does not
   override it, so the light hover fill has to be cleared here. Two classes
   outrank Bootstrap's .btn-link whatever the stylesheet order. The zero
   flex basis lets a long title truncate instead of pushing the buttons. */
.biopama-menu-row .biopama-menu-row-toggle {
  flex: 1 1 0;
  min-width: 0;
  --bs-btn-color: rgba(var(--bs-body-color-rgb, 255, 255, 255), 0.8);
  --bs-btn-hover-color: var(--bs-warning, #ffc107);
  --bs-btn-active-color: var(--bs-warning, #ffc107);
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb, 255, 193, 7);
  transition: color 0.3s ease;
}

.biopama-menu-row:hover .biopama-menu-row-toggle {
  color: var(--bs-btn-hover-color);
}

/* The plus circle (Conservation Tracking size) keeps its background on
   hover/active and rotates once. */
.biopama-menu-row .biopama-menu-row-state {
  width: 2.25rem;
  height: 2.25rem;
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-bg: var(--bs-btn-bg);
  --bs-btn-active-border-color: var(--bs-btn-border-color);
}

.biopama-menu-row-state i {
  transition: transform 0.3s ease;
}

.biopama-menu-row:hover .biopama-menu-row-state i.fa-plus,
.biopama-menu-row:has(:focus-visible) .biopama-menu-row-state i.fa-plus {
  transform: rotate(90deg);
}

/* Touch: no hover, so the actions are always visible. */
@media (hover: none) {
  .biopama-menu-row-actions {
    opacity: 1;
  }
}

/* Cards opened inline under a row (country / PA pages, no floating stack):
   the row opens and closes the card, so the card header (close, minimise,
   drag) is hidden and the body gets its own top spacing; the action icons
   are centred instead of hanging off the row's negative gutter. */
.biopama-menu-row-card .card-header {
  display: none !important;
}

.biopama-menu-row-card .indicator-content-wrapper {
  padding-top: 0.5rem;
}

.biopama-menu-row-card .row:has(> .layer-btn-up) {
  justify-content: center;
  margin: 0;
}