/* Accordion Module — module chrome only.

   All item / summary / icon / open-close styling comes from the theme's single
   global accordion system (css/components/accordion.css). This module renders
   native <details>/<summary> and maps its fields to that system's --accordion-*
   custom properties and .accordion--* variant classes (see module.html). Only
   the module-specific wrapper (section heading, container, divider/shadow
   variants and answer typography) lives here. */

.accordion {
  padding: var(--acc-pt, 48px) 0 var(--acc-pb, 48px);
}

/* Header */
.accordion__header {
  max-width: var(--acc-max-width, 800px);
  margin: 0 auto var(--spacing-xl, 2.5rem);
  text-align: center;
}

.accordion--align-left .accordion__header {
  text-align: left;
  margin-left: 0;
}

.accordion__heading {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--spacing-md, 0.75rem);
  color: var(--color-text);
}

.accordion__subheading {
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0;
}

/* Container */
.accordion__container {
  max-width: var(--acc-max-width, 800px);
  display: flex;
  flex-direction: column;
  gap: var(--acc-gap, 0);
}

.accordion--align-center .accordion__container {
  margin: 0 auto;
}

/* Space items apart by 1em. Scoped to between-items (skips the first) so it
   doesn't add a gap directly under the section heading. This replaces the
   global `details + details` mobile margin. */
.accordion__item + .accordion__item {
  margin-top: 1em;
}

/* Divider / shadow variants layered on top of the global item styling */
.accordion--dividers .accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion--dividers .accordion__item:last-child {
  border-bottom: none;
}

.accordion--shadow .accordion__item {
  box-shadow: var(--shadow-sm);
}

/* Answer typography. The global system supplies the answer's padding, font-size
   and open animation; these rules add the rich-text styling. */
.accordion__answer {
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.accordion__answer p {
  margin: 0 0 var(--spacing, 1rem);
}

.accordion__answer p:last-child {
  margin-bottom: 0;
}

.accordion__answer ul,
.accordion__answer ol {
  margin: 0 0 var(--spacing, 1rem);
  padding-left: var(--spacing-md, 1.5rem);
}

.accordion__answer li {
  margin-bottom: var(--spacing-sm, 0.5rem);
}

.accordion__answer a {
  color: var(--color-primary);
  text-decoration: underline;
}
