/*
 * GENERATED FILE - do not edit.
 *
 * Source: app/pipeline/block_styles.py (_RAW_CSS)
 * Regenerate: python scripts/dump_block_css.py
 *
 * This is the same stylesheet the pipeline inlines into an article when the
 * plugin is absent. When the plugin IS present it reports block_styles on
 * /capabilities, the publish step takes the whole style element out of the
 * article, and this file is served instead.
 *
 * That matters more than saving bytes. WooCommerce renders a product category
 * description through wp_kses_post() on EVERY page load, so a style element
 * left in the content is stripped on the way OUT of the database and its rules
 * print as visible text at the top of the archive. Content is not a place CSS
 * can live.
 *
 * The per-client link palette is NOT here - it differs per client. It travels
 * as term meta and the plugin emits it with wp_add_inline_style() against this
 * sheet, for the same reason.
 */
.sp-toc, .sp-faq {
  /* Adopt the site's own primary colour when it publishes one, so the FAQ
     matches the theme instead of imposing a colour on it. Elementor exposes its
     global primary as --e-global-color-primary; WordPress block themes expose
     theme.json palette entries as --wp--preset--color--*. var() fallbacks chain
     right-to-left, so the literal at the end only applies when a site defines
     none of them. The TOC overrides this with the client's configured colour. */
  --sp-accent: var(
    --e-global-color-primary,
    var(--wp--preset--color--primary, var(--wp--preset--color--accent, #e6007e))
  );
  --sp-border: #e6e8ef;
  --sp-title: #1f2a44;
  --sp-text: #6b7280;
  --sp-surface: #fff;
}

/* ---------------- Table of contents ---------------- */
.sp-toc {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 32px;
}
.sp-toc__title { margin: 0 0 10px; font-size: 1.15em; color: var(--sp-title); }
.sp-toc__list, .sp-toc__sublist { list-style: none; margin: 0; padding: 0; }
.sp-toc__item + .sp-toc__item { border-top: 1px solid var(--sp-border); }
.sp-toc__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
/* No colour declared here on purpose — link colours live entirely in
   link_palette_css, so a client on theme colours simply gets none of them and
   the theme's own anchor rules apply. Anything set here would win over the
   theme. (Avoid backticks in these comments: polish_article strips paired
   backticks as markdown and would corrupt the stylesheet.) */
.sp-toc__link, .sp-toc__sublink { text-decoration: none; line-height: 1.9; }
.sp-toc__link:hover, .sp-toc__sublink:hover { text-decoration: underline; }
.sp-toc__sublink { font-size: .95em; }

/* The "+" toggle, built from details/summary.
   NOT a hidden checkbox any more. The input element is not in $allowedposttags,
   and WooCommerce runs wp_kses_post over a category description on EVERY page
   load (woocommerce_taxonomy_archive_description), so a checkbox never reached
   the browser however it was written. details and summary are both allowed
   everywhere, so the toggle now survives the round trip. No animation: a closed
   details element is display:none, which a max-height transition cannot animate
   out of.
   (No angle brackets in these comments on purpose: when this sheet is inlined
   rather than served, kses reads a bracketed word as a tag and strips it,
   which would cut the stylesheet in half. Same reason the note above avoids
   backticks.) */
.sp-toc__group { display: block; }
.sp-toc__row { list-style: none; cursor: pointer; }
.sp-toc__row::-webkit-details-marker { display: none; }
.sp-toc__row::marker { content: ""; }
.sp-toc__row:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.sp-toc__toggle, .sp-toc__spacer { flex: 0 0 auto; width: 18px; height: 18px; }
.sp-toc__toggle {
  position: relative;
  border: 1px solid var(--sp-border);
  border-radius: 4px;
  background: var(--sp-surface);
  cursor: pointer;
}
.sp-toc__toggle::before, .sp-toc__toggle::after {
  content: "";
  position: absolute;
  background: var(--sp-accent);
  transition: transform .18s ease;
}
.sp-toc__toggle::before { top: 50%; inset-inline: 3px; height: 2px; margin-top: -1px; }
.sp-toc__toggle::after { left: 50%; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; }
.sp-toc__group[open] .sp-toc__toggle::after { transform: scaleY(0); }
.sp-toc__sublist { padding-inline-start: 28px; }

/* Legacy: articles published before 2026-08-27 carry the checkbox markup this
   sheet used to style. Their own copy of the old CSS is inlined in the post, so
   they render correctly on their own - but only while that inline copy exists.
   A post published in the window where the static half was already being
   dropped would fall back to THIS file, find no rule for a checkbox, and show a
   raw tick-box with every sublist permanently open. Six rules is a cheap way to
   never find that out from a customer. */
.sp-toc__cb { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.sp-toc__cb:checked + .sp-toc__row .sp-toc__toggle::after { transform: scaleY(0); }
.sp-toc__cb:focus-visible + .sp-toc__row .sp-toc__toggle {
  outline: 2px solid var(--sp-accent);
  outline-offset: 2px;
}
.sp-toc__cb ~ .sp-toc__sublist { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.sp-toc__cb:checked ~ .sp-toc__sublist { max-height: 60em; }
.sp-toc__subitem { padding: 4px 0; }

/* ---------------- FAQ accordion ---------------- */
.sp-faq { margin: 36px 0 0; }
.sp-faq__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--sp-title);
}
.sp-faq__title::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1em;
  border-radius: 2px;
  background: var(--sp-accent);
}
.sp-faq__item {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  margin: 0 0 12px;
}
.sp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.sp-faq__q::-webkit-details-marker { display: none; }
.sp-faq__q::marker { content: ""; }
.sp-faq__q:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: -2px; }
.sp-faq__question {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.8;
  color: var(--sp-title);
}
.sp-faq__chev {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-inline-end: 2px solid var(--sp-accent);
  border-bottom: 2px solid var(--sp-accent);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.sp-faq__item[open] .sp-faq__chev { margin-top: 4px; transform: rotate(-135deg); }
.sp-faq__answer {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--sp-text);
  line-height: 2;
}