/* Explore mega menu - clickable Watch / Read / Listen columns.

   The .jdv-mega-col class and the anchor inside it are injected by
   assets/js/mega-menu-links.js. Everything here is scoped to that class, so
   only the columns the script touched are affected. */

.jdv-mega-col {
  position: relative;
}

/* Learn is not built yet, so its column is pulled from the menu rather than
   left as a dead end. !important because the column's display comes from
   Elementor's own .e-con rule at the same specificity, and that stylesheet
   can win on source order. Remove 'learn' from the hidden list in
   functions.php to bring the column back. */
.jdv-mega-col--hidden {
  display: none !important;
}

/* One anchor covering the column: heading, arrow, description and thumbnail
   all become part of the same click target, and the browser still gets a real
   link - status bar preview, middle-click, keyboard focus, open in new tab. */
.jdv-mega-col__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  border-radius: 6px;
  cursor: pointer;
}

.jdv-mega-col__link:focus-visible {
  outline: 2px solid #4C423C;
  outline-offset: 6px;
}

.jdv-mega-col h1,
.jdv-mega-col h2,
.jdv-mega-col h3,
.jdv-mega-col h4,
.jdv-mega-col h5,
.jdv-mega-col h6,
.jdv-mega-col img {
  transition: transform .25s ease, opacity .25s ease;
}

/* :focus-within keeps the affordance for keyboard users, who never trigger
   :hover. */
.jdv-mega-col:hover h1,
.jdv-mega-col:hover h2,
.jdv-mega-col:hover h3,
.jdv-mega-col:hover h4,
.jdv-mega-col:hover h5,
.jdv-mega-col:hover h6,
.jdv-mega-col:focus-within h1,
.jdv-mega-col:focus-within h2,
.jdv-mega-col:focus-within h3,
.jdv-mega-col:focus-within h4,
.jdv-mega-col:focus-within h5,
.jdv-mega-col:focus-within h6 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* First image in the column is the arrow, last is the thumbnail. */
.jdv-mega-col:hover img:first-of-type,
.jdv-mega-col:focus-within img:first-of-type {
  transform: translateX(6px);
}

.jdv-mega-col:hover img:last-of-type,
.jdv-mega-col:focus-within img:last-of-type {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .jdv-mega-col h1,
  .jdv-mega-col h2,
  .jdv-mega-col h3,
  .jdv-mega-col h4,
  .jdv-mega-col h5,
  .jdv-mega-col h6,
  .jdv-mega-col img {
    transition: none;
  }

  .jdv-mega-col:hover img:first-of-type,
  .jdv-mega-col:focus-within img:first-of-type,
  .jdv-mega-col:hover img:last-of-type,
  .jdv-mega-col:focus-within img:last-of-type {
    transform: none;
  }
}