/* Details (Accordion) front - Frontend styles */

.wp-block-details {
  overflow: hidden;
}

/* Summary (header) */
.wp-block-details summary {
  padding: var(
      --wp--custom--component--accordion--header--padding--top,
      var(--wp--custom--semantic--spacing--200, 16px)
    )
    var(
      --wp--custom--component--accordion--header--padding--right,
      var(--wp--custom--semantic--spacing--300, 24px)
    )
    var(
      --wp--custom--component--accordion--header--padding--bottom,
      var(--wp--custom--semantic--spacing--200, 16px)
    )
    var(
      --wp--custom--component--accordion--header--padding--left,
      var(--wp--custom--semantic--spacing--300, 24px)
    );
  cursor: pointer;
  font-weight: var(
    --wp--custom--semantic--font--large-screens--title--05--weight,
    var(--wp--custom--primitive--font--weight--800, 800)
  );
  font-size: var(
    --wp--custom--semantic--font--large-screens--title--05--font-size,
    var(--wp--custom--primitive--font--size--400, 16px)
  );
  line-height: var(
    --wp--custom--semantic--font--large-screens--title--05--line-height,
    var(--wp--custom--primitive--font--line-height-figma--22, 22px)
  );
}

/* Marker color inherits text color */
.wp-block-details summary::-webkit-details-marker,
.wp-block-details summary::marker {
  color: inherit;
}

/* Content area (everything except summary) */
.wp-block-details > :not(summary) {
  padding: var(
      --wp--custom--component--accordion--content--padding--top,
      var(--wp--custom--semantic--spacing--base, 8px)
    )
    var(
      --wp--custom--component--accordion--content--padding--right,
      var(--wp--custom--semantic--spacing--300, 24px)
    )
    var(
      --wp--custom--component--accordion--content--padding--bottom,
      var(--wp--custom--semantic--spacing--200, 16px)
    )
    var(
      --wp--custom--component--accordion--content--padding--left,
      var(--wp--custom--semantic--spacing--300, 24px)
    );
}

/* ============================================
   Background colors - Text color adaptation
   ============================================ */

/* Dark backgrounds → inverse (white) text */
.wp-block-details.has-surface-brand-background-color,
.wp-block-details.has-surface-inverse-background-color,
.wp-block-details.has-surface-accent-dark-background-color,
.wp-block-details.has-surface-accent-darker-background-color,
.wp-block-details.has-surface-accent-darkest-background-color {
  color: var(
    --wp--custom--semantic--color--text--inverse,
    var(--wp--custom--primitive--color--neutral--0, #ffffff)
  ) !important;
}

.wp-block-details.has-surface-brand-background-color a,
.wp-block-details.has-surface-inverse-background-color a,
.wp-block-details.has-surface-accent-dark-background-color a,
.wp-block-details.has-surface-accent-darker-background-color a,
.wp-block-details.has-surface-accent-darkest-background-color a {
  color: var(
    --wp--custom--semantic--color--text--link--inverse,
    var(--wp--custom--primitive--color--neutral--0, #ffffff)
  );
}

/* Light backgrounds → primary (dark) text */
.wp-block-details.has-surface-body-background-color,
.wp-block-details.has-surface-primary-background-color,
.wp-block-details.has-surface-secondary-background-color,
.wp-block-details.has-surface-tertiary-background-color,
.wp-block-details.has-surface-accent-lightest-background-color,
.wp-block-details.has-surface-accent-lighter-background-color,
.wp-block-details.has-surface-accent-light-background-color {
  color: var(
    --wp--custom--semantic--color--text--primary,
    var(--wp--custom--primitive--color--neutral--900, #121212)
  ) !important;
}

.wp-block-details.has-surface-body-background-color a,
.wp-block-details.has-surface-primary-background-color a,
.wp-block-details.has-surface-secondary-background-color a,
.wp-block-details.has-surface-tertiary-background-color a,
.wp-block-details.has-surface-accent-lightest-background-color a,
.wp-block-details.has-surface-accent-lighter-background-color a,
.wp-block-details.has-surface-accent-light-background-color a {
  color: var(
    --wp--custom--semantic--color--text--link--default,
    var(--wp--custom--primitive--color--sncf-holding--parme--500, #6558b1)
  );
}