.wvum-atlas-accordion__title {
  margin: 0 0 16px 0;
}

/*
  Layout alignment overrides

  The base accordion adds horizontal padding to both the header and content.
  For Atlas Accordion, we want the title (header) and panel content to align
  consistently with each other and not appear "indented".

  Use CSS variables so this can be adjusted centrally if needed.
*/
.wvum-atlas-accordion {
  --wvum-atlas-accordion-hpad: 16px;
  /* Extra indent for expanded content so it lines up with the title visually. */
  --wvum-atlas-accordion-content-indent: 8px;
  --wvum-atlas-accordion-vpad-header: 16px;
  --wvum-atlas-accordion-vpad-content-top: 12px;
  --wvum-atlas-accordion-vpad-content-bottom: 24px;
  --wvum-atlas-accordion-icon-space: 48px;
}

/*
  Accordion item title alignment

  We intentionally do NOT rely on inline styles from the WYSIWYG (they are stripped for safety).
  Instead, we expose a module setting and apply alignment via a scoped wrapper class.
*/
.wvum-atlas-accordion .wvum-adv-accordion-header-title {
  /* Remove perceived indent; keep vertical padding and reserve space for the icon. */
  padding-left: var(--wvum-atlas-accordion-hpad) !important;
  padding-right: calc(var(--wvum-atlas-accordion-hpad) + var(--wvum-atlas-accordion-icon-space)) !important;
  padding-top: var(--wvum-atlas-accordion-vpad-header) !important;
  padding-bottom: var(--wvum-atlas-accordion-vpad-header) !important;
}

.wvum-atlas-accordion .wvum-adv-accordion-header-title:before {
  /* Keep the icon inside the padded area for this module only. */
  right: var(--wvum-atlas-accordion-hpad) !important;
}

/* Match content padding with the header so left/right alignment is consistent. */
.wvum-atlas-accordion .wvum-adv-accordion-content-inner {
  padding-left: 27px !important;
  padding-right: var(--wvum-atlas-accordion-hpad) !important;
  padding-top: 0px !important;
  padding-bottom: var(--wvum-atlas-accordion-vpad-content-bottom) !important;

  /* Base module uses flex gap; zero it so spacing is controlled explicitly here. */
  gap: 0 !important;
}

.wvum-atlas-accordion--title-align-left .wvum-adv-accordion-header-title {
  justify-content: flex-start;
}

.wvum-atlas-accordion--title-align-center .wvum-adv-accordion-header-title {
  justify-content: center;
}

.wvum-atlas-accordion--title-align-right .wvum-adv-accordion-header-title {
  justify-content: flex-end;
}

.wvum-atlas-accordion__meta {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 12px;
}

/*
  Hide truly empty paragraph tags across Atlas Accordion content.
  (Note: paragraphs containing only &nbsp; or <br> are stripped server-side in this module.)
*/
.wvum-atlas-accordion .wvum-adv-accordion-content-inner p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wvum-atlas-accordion__list {
  margin: 0;
  padding-left: 18px;
}

/*
  Divi/TinyMCE often wraps row content in <p>. A block-level <p> inside <li>
  causes the list marker (bullet) to sit on its own line.
  Force paragraphs to behave like inline content inside list items.
*/
.wvum-atlas-accordion .wvum-atlas-accordion__list li p {
  display: inline;
}

/*
  Divi/TinyMCE sometimes wraps content in <p> tags and can inject empty paragraphs.
  Those empty <p> tags create confusing extra space above/below list rows.
  Hide them aggressively (scoped to this module) and normalize paragraph margins.
*/
.wvum-atlas-accordion .wvum-atlas-accordion__list li p {
  margin: 0;
  /* Divi themes sometimes add global paragraph padding (e.g., p { padding-bottom: 1em; }).
     Remove it here so list spacing is controlled solely by the module spacing setting. */
  padding: 0 !important;
}

.wvum-atlas-accordion .wvum-atlas-accordion__list li p:empty {
  display: none !important;
}

/* Default to Standard spacing unless overridden by a class. */
.wvum-atlas-accordion .wvum-atlas-accordion__list li {
  margin: 0 0 8px 0;
}

.wvum-atlas-accordion .wvum-atlas-accordion__list li:last-child {
  margin-bottom: 0;
}

.wvum-atlas-accordion__list--plain {
  list-style: none;
  padding-left: 0;
}

/* Spacing variants (applies to both bullets and plain styles). */
.wvum-atlas-accordion--li-space-none .wvum-atlas-accordion__list li {
  margin-bottom: 0;
}

.wvum-atlas-accordion--li-space-compact .wvum-atlas-accordion__list li {
  margin-bottom: 4px;
}

.wvum-atlas-accordion--li-space-standard .wvum-atlas-accordion__list li {
  margin-bottom: 8px;
}

.wvum-atlas-accordion--li-space-extra .wvum-atlas-accordion__list li {
  margin-bottom: 16px;
}

.wvum-atlas-accordion__item-description {
  margin: 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.4;
}

.wvum-atlas-accordion__item-description > :last-child {
  margin-bottom: 0;
}

/* Description vertical padding variants */
.wvum-atlas-accordion--desc-pad-none .wvum-atlas-accordion__item-description {
  padding-top: 0;
  padding-bottom: 0;
}

.wvum-atlas-accordion--desc-pad-compact .wvum-atlas-accordion__item-description {
  padding-top: 6px;
  padding-bottom: 6px;
}

.wvum-atlas-accordion--desc-pad-normal .wvum-atlas-accordion__item-description {
  padding-top: 12px;
  padding-bottom: 12px;
}

.wvum-atlas-accordion--desc-pad-extra .wvum-atlas-accordion__item-description {
  padding-top: 20px;
  padding-bottom: 20px;
}

.wvum-atlas-accordion__schema-warning {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  padding: 10px 12px;
  border-radius: 4px;
  margin: 0 0 12px 0;
}

.wvum-atlas-accordion__token-panel {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 12px;
  border-radius: 6px;
  margin: 0 0 12px 0;
}

.wvum-atlas-accordion__token-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.wvum-atlas-accordion__token-label {
  font-size: 13px;
  color: #374151;
  min-width: 48px;
}

.wvum-atlas-accordion__token-select {
  min-width: 240px;
  max-width: 420px;
}

.wvum-atlas-accordion__token-input {
  min-width: 220px;
  flex: 1;
}