/* Benefit cards: icon + description shortcodes, and the carousel. */

.oeme-benefit-description {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--wp--preset--color--contrast);
}

/* Bundled SVG icons (assets/icons/{page-slug}.svg). Recolor every icon by
   overriding --oeme-benefit-icon-color; resize with --oeme-benefit-icon-size. */
span.oeme-benefit-icon {
  display: inline-flex;
  width: var(--oeme-benefit-icon-size, 48px);
  height: var(--oeme-benefit-icon-size, 48px);
  color: var(--oeme-benefit-icon-color, var(--wp--preset--color--accent-1, currentColor));
}

span.oeme-benefit-icon svg {
  width: 100%;
  height: 100%;
}

/* SVGs that don't set their own fill take the icon color. */
span.oeme-benefit-icon svg:not([fill]) {
  fill: currentColor;
}

/* Carousel. The one-row layout is pure CSS and applies from the first paint, so
   the cards never flash up as the full grid before benefit-carousel.js runs (the
   script only adds the arrows, the looping and the auto-scroll). Without JS the
   cards stay a swipeable row. Slides per view can be changed per block by
   overriding --oeme-carousel-slides.

   Selectors start with .wp-block-query for specificity, to beat the theme's
   has-global-padding and the static card grid in custom-styles.css. */
.oeme-benefit-carousel {
  --oeme-carousel-slides: 4;
  --oeme-carousel-gap: 24px;
  position: relative;
}

@media (max-width: 1024px) {
  .oeme-benefit-carousel { --oeme-carousel-slides: 2; }
}

@media (max-width: 599px) {
  .oeme-benefit-carousel { --oeme-carousel-slides: 1; }
}

.wp-block-query.oeme-benefit-carousel .wp-block-post-template {
  display: flex;
  flex-wrap: nowrap;
  /* Must start at the left edge. A centered row (some designs set
     justify-content: center on the Query Loop) overflows equally to both sides,
     and the left half can never be scrolled to: the track then runs out of room
     before the loop point and visibly stops on the last card. */
  justify-content: flex-start !important;
  gap: var(--oeme-carousel-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.wp-block-query.oeme-benefit-carousel .wp-block-post-template::-webkit-scrollbar {
  display: none;
}

/* The li.wp-block-post selector is there for specificity: it has to beat the
   static benefit-card grid in custom-styles.css (".oeme-benefit-blurbs...
   li.wp-block-post", 3 per row), which otherwise sets the card width. */
.wp-block-query.oeme-benefit-carousel .wp-block-post-template > li,
.wp-block-query.oeme-benefit-carousel .wp-block-post-template > li.wp-block-post {
  flex: 0 0 calc((100% - (var(--oeme-carousel-slides) - 1) * var(--oeme-carousel-gap)) / var(--oeme-carousel-slides));
  max-width: none;
  margin: 0;
  scroll-snap-align: start;
}

/* Continuous auto-scroll (benefit-carousel.js): snapping would fight the drift. */
.oeme-benefit-carousel.is-drifting .oeme-carousel-track {
  scroll-snap-type: none;
}

/* The whole card is a link (Oeme_Benefit_Cards::link_scroll_box). Keep the
   card's own text colors and no underline; mark the title on hover instead. */
a.oeme-benefit-scroll-box,
a.oeme-benefit-scroll-box:hover,
a.oeme-benefit-scroll-box:visited {
  color: inherit;
  text-decoration: none;
}

a.oeme-benefit-scroll-box:hover .wp-block-post-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.oeme-benefit-scroll-box:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Soft fade at both edges, so cards ease in and out of view rather than being
   cut off. A mask rather than a white overlay: it fades into whatever background
   the section has. Width can be changed per block with --oeme-carousel-fade. */
.wp-block-query.oeme-benefit-carousel {
  --oeme-carousel-fade: 64px;
}

@media (max-width: 599px) {
  .wp-block-query.oeme-benefit-carousel { --oeme-carousel-fade: 32px; }
}

.wp-block-query.oeme-benefit-carousel .wp-block-post-template {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--oeme-carousel-fade), #000 calc(100% - var(--oeme-carousel-fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--oeme-carousel-fade), #000 calc(100% - var(--oeme-carousel-fade)), transparent 100%);
}

/* Benefit icons in the menu (added by Oeme_Benefit_Cards::add_menu_icons).
   Shown only in the dropdowns of menus with the class "oeme-menu-nd", on
   desktop; custom-styles.css sizes the box. Elsewhere they stay hidden. */
.wp-block-navigation .oeme-submenu-icon {
  display: none;
}

@media (min-width: 768px) {
  .wp-block-navigation.oeme-menu-nd .wp-block-navigation-submenu span.oeme-submenu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .wp-block-navigation.oeme-menu-nd .wp-block-navigation-submenu img.oeme-submenu-icon {
    display: block;
  }
}