/**
 * Styling for multicontent category radio buttons to display like clickable pills.
 */

/* Hide the actual radio inputs */
.multicontent-filter-pills input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Remove browser default fieldset spacing so header height equals pill/button height */
.multicontent-filter-pills {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Scroll wrapper — constrains the pill row; parent scroll-container clips and scrolls */
.multicontent-filter-pills-scroll-wrapper {
  display: flex;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scroll-behavior: smooth;
  position: relative;
  z-index: 0;
}

.multicontent-filter-pills-scroll-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Container for radio pills — single horizontal row, no wrapping.
 * The theme's radios.html.twig renders the pills list as .news-category-pills-list.
 * Use the scroll wrapper as parent to gain specificity over the theme's flex-wrap: wrap. */
.multicontent-filter-pills-scroll-wrapper .news-category-pills-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

/* Individual pill items must not shrink */
.multicontent-filter-pills-scroll-wrapper .news-category-pills-list > * {
  flex: 0 0 auto;
}

/* Style for the Radio__label class */
.multicontent-filter-pills .Radio__label {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  background-color: #DCEAF7;
  color: #000000;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  user-select: none;
  font-weight: 700;
  /* line-height: 16px; */
}

/* Hover state */
.multicontent-filter-pills .Radio__label:hover {
  background-color: #0367E1;
  color: #fff;
  font-weight: 700;
  /* line-height: 16px; */
}

/* Active/selected state */
.multicontent-filter-pills .Radio__label.active {
  background-color: #0367E1;
  color: #fff;
  font-weight: 700;
  /* line-height: 16px; */
}

/* Focus state for accessibility */
.multicontent-filter-pills input[type="radio"]:focus + .Radio__label {
  box-shadow: 0 0 0 2px rgba(3, 103, 225, 0.5);
  outline: none;
}

/* ── Scroll navigation layout ─────────────────────────────────────────────── */

/* Outer flex row: scroll area + buttons */
.multicontent-filter-pills-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  position: relative;
  z-index: 1;
}

/* Scroll container: takes remaining width, clips overflow; this element
 * is the one we scroll programmatically (scrollLeft) for the nav buttons */
.multicontent-filter-pills-nav__scroll-container {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
  overflow: hidden;
  min-width: 0;
  scroll-behavior: smooth;
}

/* Gradient overlay — anchored to the nav buttons area.
 * Renders a right-edge fade over the end of the pill row without
 * moving across individual items while scrolling. */
.multicontent-filter-pills-nav__gradient {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  height: 2.5rem;
  width: 56px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 45%,
    #FFFFFF 100%);
  pointer-events: none;
}

/* Buttons wrapper — does not shrink */
.multicontent-filter-pills-nav__buttons {
  display: flex;
  flex-shrink: 0;
  gap: 0.25rem;
  position: relative;
  z-index: 1;
}

/* Individual scroll button */
.multicontent-filter-pills-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #DCEAF7;
  background-color: #DCEAF7;
  color: #333;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.multicontent-filter-pills-nav__btn:hover {
  background-color: #0367E1;
  border-color: #0367E1;
  color: #fff;
}

.multicontent-filter-pills-nav__btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(3, 103, 225, 0.5);
}

/* Disabled state: visual only; buttons stay clickable so JS can no-op at edge */
.multicontent-filter-pills-nav__btn:disabled,
.multicontent-filter-pills-nav__btn[aria-disabled="true"],
.multicontent-filter-pills-nav__btn.is-disabled {
  opacity: 0.3;
  cursor: default;
}

/* Allow the pills fieldset (Hanna FieldGroup) to expand beyond the scroll
 * wrapper width so that horizontal scrolling is enabled. Without this,
 * FieldGroup's width: 100% makes scrollWidth === clientWidth and disables
 * both navigation buttons immediately on load. */
.multicontent-filter-pills-scroll-wrapper .multicontent-filter-pills {
  width: auto;
  min-width: max-content;
}

/* The inner fieldset-wrapper div must also not constrain the pills list width. */
.multicontent-filter-pills-scroll-wrapper .fieldset-wrapper {
  min-width: max-content;
}

/* On mobile and tablet, hide arrow buttons and enable native touch scrolling. */
@media (max-width: 1023px) {
  .multicontent-filter-pills-nav__buttons {
    display: none;
  }

  .multicontent-filter-pills-nav__scroll-container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .multicontent-filter-pills-nav__scroll-container::-webkit-scrollbar {
    display: none;
  }
}