/**
 * Theme Accordion Styles
 * 
 * This file contains all custom styles for accordion blocks using the 
 * ESAB accordion component.
 * 
 * If additional accordion styles or variants are added and the file becomes 
 * too large, create a sub-file (e.g., theme_accordion-mobile.css) to organize 
 * the code better.
 */

.wp-block-esab-accordion .esab__container {
  gap: 0 !important;
}

.wp-block-esab-accordion .esab__head.esab__head_reverse {
  flex-direction: row;
}

.wp-block-esab-accordion .esab__heading_tag {
  display: flex;
  gap: var(--gap-s);
  padding: var(--gap-s);
  font-size: var(--base-font-size) !important;
  font-weight: 300;
  line-height: 1.72;
  text-transform: none;
  letter-spacing: 0.36px;
  border-bottom: 3px solid white;
  width: 100%;
  align-items: center;
}

.wp-block-esab-accordion
  .wp-block-esab-accordion-child:first-child
  .esab__heading_tag {
  padding: 0 var(--gap-s) var(--gap-s) var(--gap-s);
}

.wp-block-esab-accordion .esab__heading_tag::before {
  content: "";
  display: block;
  --my-size: 0.5em;
  width: var(--my-size);
  height: var(--my-size);
  transition: rotate 0.5s ease 0s;
  rotate: 360deg;
  background-image: url("/wp-content/themes/astra-impuls-child/img/acc-plus.svg");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.esab__head[aria-expanded="true"] .esab__heading_tag:before {
  --my-size: 0.5em;
  width: var(--my-size);
  height: var(--my-size);
  rotate: 0deg;
  background-image: url("/wp-content/themes/astra-impuls-child/img/acc-minus.svg");
}

.wp-block-esab-accordion .esab__body {
  padding: var(--gap-m) var(--gap-l);
}

@media (max-width: 768px) {
  .wp-block-esab-accordion .esab__heading_tag {
    line-height: 1.5;
    align-items: flex-start;
  }

  .wp-block-esab-accordion .esab__heading_tag::before {
    --my-size: 0.7em;
  }

  .wp-block-esab-accordion .esab__heading_tag::before {
    rotate: 180deg;
    margin-top: 0.35em;
  }

  .esab__head[aria-expanded="true"] .esab__heading_tag:before {
    --my-size: 0.7em;

    rotate: 360deg;
  }
}