/* Inline-friendly button so it sits right next to the word it belongs to. */
.iwl-play-btn {
	display: inline-flex;
  align-items: flex-end;
	/* align-items: center; */
	/* justify-content: center;
	vertical-align: middle; */
	/* margin-inline-start: 0.35em; */
	padding: 0.15em;
  /* margin-bottom: .7rem; */
	border: none;
	background: transparent;
	color: currentColor;
  background-color: var(--base-2) !important;
	cursor: pointer;
	line-height: 0; /* prevents the button from adding extra line-height around the icon */
  border-radius: 400px !important;
}

.halq .iwl-play-btn {
  margin-left: .5rem;
}

.halq .iwl-play-btn svg {
  --iwl-play-btn-size: 1.8rem;
  width: var(--iwl-play-btn-size);
  height: var(--iwl-play-btn-size);

}

.iwl-play-btn:hover,
.iwl-play-btn:focus-visible {
	opacity: 0.7;
}

.iwl-play-btn.iwl-playing .iwl-icon-play {
	display: none;
}

/* Row wrapper used in the plant template example -- keeps label, word, and
   button aligned on one line regardless of label length. */

.iwl-term-row {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: center;
  column-gap: 0.4em;
}

.iwl-term-words {
  display: flex;
  /* align-items: last baseline; */
}

.iwl-term-words h2,
.iwl-term-words p {
  display: inline;
}

.iwl-term-words h2 {
  width: fit-content;
  font-weight: bold;
}



.halq  .iwl-term-words h2 {
  /* font-size: 1.2rem; */
}

.halq .first h2 {
  /* font-size: 2rem !important; */
}

.iwl-term-words p {
  align-self: center;
  margin-top: .5rem !important;
  padding-left: .5rem;
  font-size:large;
  vertical-align: middle;
}

.iwl-icon-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  flex-shrink: 0;   /* icons stay their natural size, never get squished */
  white-space: nowrap; /* the two icons stay side-by-side, never split apart */
}

.iwl-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    margin-inline-start: 0.25em;
    /* margin-bottom: .65rem; */
}

.iwl-tooltip-icon {
    display: inline-flex;
    border: none;
    background-color: transparent !important;
    color: none;
    opacity: 0.6;
    cursor: pointer;
    line-height: 0;
    padding: 0 !important;
}

.iwl-tooltip-icon svg {
  color: #222;
}

.halq .iwl-tooltip-icon svg {
  --iwl-tooltip-size: 2.3rem;
  width: var(--iwl-tooltip-size);
  height: var(--iwl-tooltip-size);
}

.iwl-tooltip-icon:hover,
.iwl-tooltip-icon:focus-visible {
    opacity: 1;
}

.iwl-tooltip-bubble {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0.5em;
    width: max-content;
    max-width: 220px;
    white-space: wrap;
    background: #222;
    color: #fff;
    font-size: 1rem;
    padding: 0.6em 0.6em;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.iwl-tooltip-bubble::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #222;
}

.iwl-tooltip-wrap:hover .iwl-tooltip-bubble,
.iwl-tooltip-wrap:focus-within .iwl-tooltip-bubble,
.iwl-tooltip-wrap.iwl-tooltip-active .iwl-tooltip-bubble {
    opacity: 1;
    visibility: visible;
}





.iwl-play-btn svg,
.iwl-tooltip-icon svg {
	width: var(--iwl-icon-size, 1.4rem);
	height: var(--iwl-icon-size, 1.4rem);
}

/* Elementor-instance reset: widgets already get their own margin/padding
   controls from Elementor's built-in Advanced tab, so the button's default
   margin-inline-start (meant for sitting inline in a text template) would
   just be unwanted extra spacing here. Scoped to this class only, so the
    plant-template usage above is completely unaffected. */
.iwl-elementor-instance .iwl-play-btn,
.iwl-elementor-instance .iwl-tooltip-wrap {
	margin: 0;
	padding: 0;
}

/* Shortcode-placed icons (Elementor Text Editor, post content, etc.) --
  smaller and tighter than the plant-template default, since these
  typically sit mid-sentence in body text rather than as a standalone row. */
.iwl-shortcode-icon {
--iwl-icon-size: 1.2rem;
}

.iwl-shortcode-icon .iwl-play-btn svg {
	width: var(--iwl-icon-size, 1rem);
	height: var(--iwl-icon-size, 1rem);
}

.iwl-shortcode-icon .iwl-play-btn,
.iwl-shortcode-icon .iwl-tooltip-wrap {
margin-inline-start: 0.15em;
padding: 0;
}





@media (max-width: 1279px) {
  .iwl-term-row {
    margin-inline-end: 0;
    /* justify-content: space-between;
    width: 100%; */
  }


}

@media (max-width: 480px) {
  .iwl-icon-group {
    display: flex;
    flex-direction: column;
    justify-items: center;
    gap: 0.3em;
    flex-shrink: 0;   /* icons stay their natural size, never get squished */
    white-space: nowrap; /* the two icons stay side-by-side, never split apart */
  }
  .iwl-play-btn, .iwl-tooltip-wrap {
    margin: 0;
  }
  .iwl-play-btn svg {
    --iwl-play-btn-size: 1.5rem;
  }
  .iwl-tooltip-icon svg {
    --iwl-tooltip-size: 2rem;
  }
  .iwl-term-words p {
    font-size: .9rem;
  }
}