/*
 * comsolit_infos — the contact-form list (ContactFormList.html).
 *
 * Hand-written plain CSS. No Sass, no Tailwind, no build. Only stgag/theme
 * compiles Tailwind, and it scans its own package only, so a utility class
 * written here would never be compiled and would render unstyled with nothing
 * logged.
 *
 * These rules replace the `.contact-form-list*` block that lived in
 * comsolit_t3base's built stylesheet, which stgag/theme bundles verbatim as its
 * `legacy` cascade layer. That layer is being deleted (app repo open-issues #82)
 * and this template no longer consumes it.
 *
 * ⚠️ Scope is deliberately just this template. `.contact-card__*` — the address
 * / phone / e-mail rows rendered inside each panel by the Info/Contactcard
 * partial — is still styled from the legacy layer, because the SAME partial is
 * used by SidebarContactInfo.html, which has not been ported yet. Moving those
 * rules here would style the panel and silently un-style the sidebar card. They
 * come over when that template does.
 *
 * Colours and fonts are stgag/theme's published design tokens, read at runtime
 * with a fallback so this still renders under a different sitepackage.
 *
 * ⚠️ A separate FILE rather than an addition to comsolit-infos.css: that
 * stylesheet is 5,755 lines, is BACKEND CSS, and is GENERATED — the gulp SCSS
 * build writes it from Resources/Public/scss/. Its frontend registration in
 * Resources/Private/Layouts/Default.html has been commented out for a long time,
 * so appending frontend rules to it would ship nothing and be overwritten by the
 * next `make css` besides.
 *
 * ⚠️ Which is also why this file lives in Resources/Public/Css/ rather than
 * Resources/Public/stylesheets/: the latter is that build's output directory
 * (`scss.build` in gulp.config.json). See contact-form.css for the full note.
 */

.contact-form-list {
  margin-bottom: 2rem;
}

.contact-form-list__accordion {
  margin: 0;
  padding: 0;
}

.contact-form-list__item {
  border: 1px solid var(--color-border, #d5d6da);
}

/* Collapse the shared border between adjacent items into one hairline. */
.contact-form-list__item + .contact-form-list__item {
  margin-top: -1px;
}

/*
 * ⚠️ `list-style: none` alone leaves WebKit's own triangle, which is drawn from
 * a pseudo-element; both declarations are needed. `display: block` matters too —
 * a <summary> defaults to `display: list-item`.
 */
.contact-form-list__title {
  display: block;
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1rem 3rem 1rem 1.25rem;
  color: var(--color-action, #67b021);
  font-family: var(--font-heading, mulibold, Helvetica, Roboto, Arial, sans-serif);
}

.contact-form-list__title::-webkit-details-marker {
  display: none;
}

/*
 * ⚠️ The legacy rule was `font-weight: 700` on the body family, which the brand's
 * fonts cannot honour: Muli ships as two separate families (muliregular /
 * mulibold), so a weight request gets a browser-synthesised fake bold. Switching
 * family is the documented way to get the real cut — see the design token
 * contract, --font-heading is a FAMILY and not a weight. The heading here
 * therefore renders slightly differently from production, and correctly.
 */

.contact-form-list__title:hover,
.contact-form-list__title:focus-visible {
  color: var(--color-action, #67b021);
}

/*
 * The +/− indicator is typographic here, not the SVG sprite the section
 * navigation and comsolit_content's accordion use. Kept as it is: production
 * draws exactly this, the two symbols already read the same way, and content is
 * the one thing a pseudo-element can swap without any script.
 */
.contact-form-list__title::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  line-height: 1;
  font-weight: 400;
}

.contact-form-list__item[open] > .contact-form-list__title::after {
  content: "–";
}

.contact-form-list__content {
  border-top: 1px solid var(--color-border, #d5d6da);
  padding: 1.5rem 1.25rem;
}

.contact-form-list__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/*
 * ⚠️ 40em here is 640px, NOT 672px. Lengths in a media query are resolved
 * against the initial font size and are immune to the legacy layer's
 * `html { font-size: 105% }` — unlike every em/rem inside a rule body, which is
 * 5% larger than it reads. Same number as production, same breakpoint.
 */
@media print, screen and (min-width: 40em) {
  .contact-form-list__layout {
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
  }
}

.contact-form-list__info,
.contact-form-list__form {
  min-width: 0;
}

/*
 * Opening and closing slide, with no JavaScript — the same technique, duration
 * and reasoning as comsolit_content's accordion and the theme's section
 * navigation, so the site has one disclosure idiom. `::details-content` is the
 * only way in: while a <details> is closed the browser does not render its
 * non-summary children, so there is no box to transition until you target that
 * one. Foundation ran this at `slideSpeed: 250`.
 *
 * ℹ️ Progressive enhancement, deliberately unguarded by @supports: without
 * `::details-content` these rules are ignored and the panel opens instantly,
 * which is the native behaviour and fully usable.
 */
.contact-form-list__accordion {
  /* Scoped here, not :root — it changes how keyword sizes animate for
     everything that inherits it. */
  interpolate-size: allow-keywords;
}

.contact-form-list__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 250ms ease,
    content-visibility 250ms allow-discrete;
}

.contact-form-list__item[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  .contact-form-list__item::details-content {
    transition: none;
  }
}