@import "../../../../themes/recast2025/style.css";

/* Use Case Accordion Component */
.use-case-accordion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--margins-base-vert, 100px) var(--margins-base-hori, 100px);
  background: var(--neutrals-white, #ffffff);
  gap: var(--gap-l, 32px);
}

.use-case-accordion__wrapper {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--gap-xl, 56px);
  width: 100%;
  max-width: var(--global-maxwidth-maxwidth-m, 1200px);
  align-self: center;
}

/* Two Column Layout */
.use-case-accordion--two-column .use-case-accordion__wrapper {
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  gap: var(--gap-xl, 56px);
}

.use-case-accordion--two-column .use-case-accordion__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-m, 24px);
}

.use-case-accordion--two-column .use-case-accordion__image {
  flex: 1;
  display: flex;
  align-items: stretch;
}

.use-case-accordion--two-column .use-case-accordion__image .use-case-accordion__featured-img {
  width: 100%;
  object-fit: contain;
  border-radius: 0;
  align-self: self-start;
}
@media (max-width: 820px) {
  .use-case-accordion--two-column .use-case-accordion__image {
    display: none;
  }
}

/* Image Position */
.use-case-accordion--image-left .use-case-accordion__wrapper {
  flex-direction: row-reverse;
}

/* Header */
.use-case-accordion__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: var(--gap-s, 18px);
}

.use-case-accordion__title {
  color: var(--neutrals-black, #161f5b);
  margin: 0;
  letter-spacing: calc(var(--size-heading-l, 48px) * 0.02);
}

.use-case-accordion__title span{
  color: var(--primary-recast-blue, #0372ff) !important;
}

/* Accordion List */
.use-case-accordion__list {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}


/* Accordion Items */
.use-case-accordion__item {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: var(--gap-s, 16px);
  background: var(--neutrals-white, #ffffff);
  border: var(--stroke-width, 2px) solid transparent;
  border-color: var(--neutrals-grey-1, #e1e9f9);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.use-case-accordion__item:not(:last-child) {
  border-bottom: var(--stroke-width, 2px) solid transparent;
}


.use-case-accordion__item:hover {
  box-shadow: 0px 24px 24px 0px rgba(22, 31, 91, 0.1);
  border: var(--stroke-width, 2px) solid var(--neutrals-grey-2, #b2b5e5);
  background: var(--neutrals-grey-1, #b2b5e5);

}

.use-case-accordion__item:hover:not(:last-child){
  border-bottom: var(--stroke-width, 2px) solid var(--neutrals-grey-2, #b2b5e5);
}

/* Ensure content is above the overlay */
.use-case-accordion__item-header,
.use-case-accordion__item-content {
  position: relative;
  z-index: 2;
}

/* Accordion Item Header */
.use-case-accordion__item-header {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: var(--gap-s, 16px);
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}

.use-case-accordion__item-title {
  flex: 1;
  color: var(--neutrals-black, #161f5b);
  font-weight: 500;
  letter-spacing: calc(var(--size-heading-xs, 20px) * 0.03);
  margin: 0;
}

/* Accordion Toggle Button */
.use-case-accordion__toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: transparent;
  cursor: pointer;
  padding: 0;
  color: none;
}

.use-case-accordion__toggle:focus,
.use-case-accordion__toggle:hover {
  background-color: transparent;
}

.use-case-accordion__icon {
  transition: transform 0.3s ease;
}
.use-case-accordion__icon path {
  fill: var(--primary-recast-blue, #0372ff);
}

.use-case-accordion__item--expanded svg.use-case-accordion__icon {
  transform: rotate(-180deg);
}

/* Accordion Content */
.use-case-accordion__item-content {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--gap-xxs, 8px);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: ease all 0.1s;
}


.use-case-accordion__item--expanded .use-case-accordion__item-content {
  max-height: 1000px;
  opacity: 1;
  padding-top: var(--gap-xxs, 8px);
}

.use-case-accordion__item-text {
  color: var(--neutrals-black, #161f5b);
  margin: 0;
}
.use-case-accordion__item-text a {
  color: var(--primary-recast-blue, #0372ff) !important;
  text-decoration: none;
  font-weight: 600 !important;
}