/*
 * comsolit_content — the accordion plugin's own stylesheet.
 *
 * Hand-written plain CSS. No Sass, no Tailwind, no build, no node_modules.
 * Only stgag/theme compiles Tailwind: its @source globs scan its own package
 * and nothing else, so a utility class written here would never be compiled
 * and would render unstyled with nothing logged.
 *
 * Until now this extension shipped NO stylesheet at all — every rule came from
 * comsolit_t3base's built `app.css`, which stgag/theme bundles verbatim as its
 * `legacy` cascade layer. That layer is being deleted (#82), and with it the
 * whole `.accordion` / `.accordion-title` / `.accordion-content` contract this
 * plugin used to render against. These rules replace it.
 *
 * Colours and fonts come from the theme's published design tokens, read at
 * runtime as custom properties, each with a fallback so the plugin still looks
 * like itself under a different sitepackage:
 *
 *   border-color: var(--color-border, #d5d6da);
 *
 * ⚠️ Every selector is anchored on this plugin's own markup (`.comsolit-content`).
 * Nothing here touches page chrome, and nothing here depends on a class the
 * theme owns — depending on another package's class names is what made the
 * t3base migration break silently in the first place (#62, #81). Tokens are
 * versioned and tested (Tests/JavaScript/tokenContract.test.mjs in the theme);
 * class names are not.
 *
 * ⚠️ Fallbacks are PRODUCTION's values, which are not always the token's value.
 * The clearest case is the hairline: production draws #d5d6da, a cool grey, and
 * the theme's --color-border is #d6d3d1, a warm one. Taking the token is the
 * deliberate choice — matching the redesigned site is the point of the contract
 * — and the fallback keeps the old appearance where no theme is present.
 */

.comsolit-content {
  background: var(--color-surface, #fff);

  /*
   * Required to transition a height to `auto`. Scoped to this component rather
   * than `:root` on purpose — it changes how keyword sizes animate for
   * everything that inherits it, and this package has no business setting that
   * for the whole page.
   */
  interpolate-size: allow-keywords;
}

/*
 * Opening and closing slide, with no JavaScript.
 *
 * Foundation animated this with jQuery `slideDown`/`slideUp` (its `slideSpeed`
 * default, 250ms, is kept here). A `<details>` cannot be animated the same way:
 * while closed the browser does not render its non-summary children at all, so
 * there is no box to transition. `::details-content` is the way in — it targets
 * exactly that hidden box — and `transition-behavior: allow-discrete` carries
 * `content-visibility` across the open/closed flip instead of snapping it.
 *
 * ℹ️ Progressive enhancement, deliberately unguarded by @supports: a browser
 * without `::details-content` ignores these rules and opens instantly. That is
 * the native behaviour, fully functional, and it is what the plugin does today
 * for anyone whose JavaScript failed to load.
 */
.comsolit-content__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 250ms ease,
    content-visibility 250ms allow-discrete;
}

.comsolit-content__item[open]::details-content {
  block-size: auto;
}

/*
 * ℹ️ The plus/minus swap is deliberately NOT animated. The two glyphs are
 * toggled with `display`, which does not transition, so a fade would need them
 * stacked and cross-faded on opacity — more markup for an effect the old
 * JavaScript did not have either: it repointed the sprite instantly.
 */

@media (prefers-reduced-motion: reduce) {
  .comsolit-content__item::details-content {
    transition: none;
  }
}

/*
 * The disclosure control.
 *
 * ⚠️ `list-style: none` alone does not remove the triangle in WebKit, which
 * draws its own marker from a pseudo-element; both are needed. `display: block`
 * matters for the same reason — a summary defaults to `display: list-item`.
 */
.comsolit-content__title {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 4px) * 2);
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1rem;
  border: 1px solid var(--color-border, #d5d6da);
  border-bottom: 0;
  font-family: var(--font-heading, mulibold, Helvetica, Roboto, Arial, sans-serif);
  font-size: inherit;
  color: var(--color-action, #67b021);
}

/*
 * ⚠️ Two values here were measured off the rendered page, not read off the old
 * stylesheet, and both would have been wrong if transcribed.
 *
 * `color` — the old title was an `<a href="#">`, so its green came from the
 * link colour, not from any accordion rule. Foundation's own declaration was
 * `color: foreground(#ffffff, #67b021)`, an unresolved Sass function that ships
 * in the built file as invalid CSS and is dropped by every browser. A `<summary>`
 * is not a link and inherits body text, so the green has to be stated. Measured:
 * rgb(103, 176, 33) — exactly --color-action.
 *
 * `line-height` — legacy declares `line-height: 1` on `.accordion-title`, but the
 * rendered value is 23.52px against a 16.8px font, i.e. 1.4: something later in
 * the cascade beats it. Restating the declared `1` would have shortened every
 * row by ~7px. It is therefore left to inherit, deliberately, and is absent above.
 *
 * ⚠️ Taking the token is not the same as matching production, and three measured
 * values now differ on purpose. Against the released version, on the same page:
 *
 *   title colour    #67b021 → #69be28   --color-action, the theme's green
 *   hairline        #d5d6da → #d6d3d1   --color-border, warm rather than cool
 *   line-height     1.4     → 1.6       the theme's body rhythm; rows ~3px taller
 *
 * The first two follow the design token contract, which is the point of it. The
 * third is inheritance rather than a choice made here: production's 1.4 reached
 * the old title through the `<a>`, and a `<summary>` inherits the body value
 * instead. Pinning 1.4 to freeze production's row height would mean opting this
 * one component out of the redesign's vertical rhythm, so it is left alone.
 *
 * ℹ️ Whether inner-page green survives the redesign at all is open-issues #64,
 * decided once in the theme rather than per extension. Should it change there,
 * this component follows automatically — which is the whole reason for consuming
 * a token instead of a hex value.
 */

.comsolit-content__title::-webkit-details-marker {
  display: none;
}

/*
 * ⚠️ --font-heading is a FAMILY, not a weight. The brand ships Muli as two
 * separate families (muliregular / mulibold); `font-weight: 700` on the body
 * family gets a browser-synthesised fake bold instead of the real cut.
 */

.comsolit-content__label {
  flex: 1 1 auto;
}

.comsolit-content__title:focus-visible {
  background-color: #ebebeb;
}

/* The open panel's title gains the bottom rule its panel would otherwise lack. */
.comsolit-content__item[open] > .comsolit-content__title {
  border-bottom: 1px solid var(--color-border, #d5d6da);
}

/* The last closed item has nothing below it to draw the closing rule. */
.comsolit-content__item:last-child:not([open]) > .comsolit-content__title {
  border-bottom: 1px solid var(--color-border, #d5d6da);
}

.comsolit-content__panel {
  padding: 1rem;
  border-left: 1px solid var(--color-border, #d5d6da);
  border-right: 1px solid var(--color-border, #d5d6da);
  background-color: var(--color-surface, #fff);
}

.comsolit-content__item:last-child > .comsolit-content__panel:last-child {
  border-bottom: 1px solid var(--color-border, #d5d6da);
}

.comsolit-content__panel p,
.comsolit-content__panel li,
.comsolit-content__panel b {
  color: var(--color-text, #5c5c5d);
}

/*
 * The toggle glyph.
 *
 * Both symbols are rendered and CSS picks one, because `<use xlink:href>` cannot
 * be repointed without script — t3base swapped it from JavaScript, which is the
 * dependency being removed. The theme's section navigation solves the same
 * problem by rotating a single plus 45° into a cross; this keeps plus/minus
 * because that is what production draws here, and the sprite already carries
 * both symbols.
 *
 * ⚠️ The symbols come from the sitepackage's SVG sprite (#custom-plus,
 * #custom-minus). If the sprite is absent the glyph is simply empty — the
 * control still works, since the label and the native summary carry it.
 */
.comsolit-content__toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: center;
}

.comsolit-content__icon {
  width: 22px;
  height: 22px;
  color: transparent;
  fill: var(--color-action, #67b021);
}

.comsolit-content__icon--open,
.comsolit-content__item[open] > .comsolit-content__title .comsolit-content__icon--closed {
  display: none;
}

.comsolit-content__item[open] > .comsolit-content__title .comsolit-content__icon--open {
  display: block;
}

/* hideSideBorders: the plugin sits flush in a column that draws its own frame. */
.comsolit-content--flush .comsolit-content__title,
.comsolit-content--flush .comsolit-content__panel {
  border-left: 0;
  border-right: 0;
}