/* mulylevy-faq.css v2: the visible Q&A block of the mulylevy-schema plugin, closed by default (12B, 13.11.2026).
   Markup (MARKUP-CONTRACT.md v2): <section class="mlfaq" data-mlfaq aria-labelledby><details class="mlfaq__wrap"><summary class="mlfaq__head"><h2 class="mlfaq__title">…</h2></summary>
     <div class="mlfaq__list"><details class="mlfaq__item" name><summary class="mlfaq__q">Q</summary><div class="mlfaq__a">A</div></details>…</div></details></section>
   One file, no external asset, no JavaScript, no colour literal: only the Elementor kit variables (`.elementor-kit-8362`):
     --e-global-color-text / -primary white, --e-global-color-db0b4a6 orange accent, --e-global-color-6a6aa99 black ground, --e-global-typography-text-font-family "Assistant". */
.mlfaq {
  --mlf-ink: var(--e-global-color-text, currentColor);
  --mlf-accent: var(--e-global-color-db0b4a6, currentColor);
  --mlf-ground: var(--e-global-color-6a6aa99, Canvas);
  --mlf-line: color-mix(in srgb, var(--e-global-color-primary, currentColor) 18%, transparent);
  --mlf-line-strong: color-mix(in srgb, var(--e-global-color-primary, currentColor) 46%, transparent);
  --mlf-muted: color-mix(in srgb, var(--e-global-color-text, currentColor) 88%, transparent);
  box-sizing: border-box; width: 100%; max-width: 1140px; margin-inline: auto;
  color: var(--mlf-ink); font-family: var(--e-global-typography-text-font-family), sans-serif; font-weight: 400; text-align: start;
}
.mlfaq *, .mlfaq *::before, .mlfaq *::after { box-sizing: border-box; }
.mlfaq__item { margin: 0; }
.mlfaq__q { display: flex; align-items: center; cursor: pointer; list-style: none; color: var(--mlf-ink); scroll-margin-block: 24px 88px; }  /* the mobile bottom bar must not cover a focused row */
.mlfaq__q::-webkit-details-marker { display: none; }
.mlfaq__q::marker { content: ""; }
.mlfaq__a { color: var(--mlf-ink); }
.mlfaq :focus-visible { outline: 2px solid var(--mlf-accent); outline-offset: 2px; }
@keyframes mlfaq-in { from { opacity: 0; } to { opacity: 1; } }
/* M2 (12E): an unmapped page prints only <span class="mly-faq-none" hidden> inside the footer's Shortcode widget.
   Hide that widget, and the footer top-level section that holds only it, so the footer is exactly as today (no 20px widget spacing, no flex gap). */
.elementor-widget-shortcode:has(.mly-faq-none) { display: none; }
footer.elementor-location-footer > :has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-shortcode .mly-faq-none:only-child) { display: none; }

/* direction "closed" (v2, 13.11, Ran: the block opens as an accordion, nothing listed up front).
   Closed: one row on the footer surface: hairline, the real <h2> "שאלות ותשובות", a +/- disc, hairline. Nothing else.
   Open: the b list (01, 02 … index as decoration, +/- discs, one question open at a time by name=). The sticky two-column title is dropped:
   the title now lives inside <summary>, so it cannot sit in its own column. */
.mlfaq { padding: clamp(28px, 4vw, 48px) 25px; }
.mlfaq__wrap { margin: 0; }
.mlfaq__head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: 16px; min-height: 84px; padding-block: 16px;
  cursor: pointer; list-style: none; color: var(--mlf-ink); border-block: 1px solid var(--mlf-line); scroll-margin-block: 24px 88px; }
.mlfaq__head::-webkit-details-marker { display: none; }
.mlfaq__head::marker { content: ""; }
.mlfaq__title { margin: 0; font-family: inherit; font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; line-height: 1.2; color: inherit; }
.mlfaq__head::after { content: ""; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--mlf-accent);
  background: linear-gradient(var(--mlf-accent), var(--mlf-accent)) center / 16px 2px no-repeat, linear-gradient(var(--mlf-accent), var(--mlf-accent)) center / 2px 16px no-repeat; }
.mlfaq__wrap[open] > .mlfaq__head::after { background: linear-gradient(var(--mlf-ground), var(--mlf-ground)) center / 16px 2px no-repeat, var(--mlf-accent); }
.mlfaq__list { counter-reset: mlf; }
.mlfaq__item { counter-increment: mlf; border-block-end: 1px solid var(--mlf-line); }
.mlfaq__q { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; align-items: center; column-gap: 12px; padding-block: 22px; font-size: clamp(17px, 1.5vw, 19px); font-weight: 700; line-height: 1.4; }
.mlfaq__q::before { content: counter(mlf, decimal-leading-zero) / ""; font-size: 14px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--mlf-accent); }
.mlfaq__q::after { content: ""; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--mlf-accent);
  background: linear-gradient(var(--mlf-accent), var(--mlf-accent)) center / 12px 1.5px no-repeat, linear-gradient(var(--mlf-accent), var(--mlf-accent)) center / 1.5px 12px no-repeat; }
.mlfaq__item[open] > .mlfaq__q::after { background: linear-gradient(var(--mlf-ground), var(--mlf-ground)) center / 12px 1.5px no-repeat, var(--mlf-accent); }
.mlfaq__a { max-width: 68ch; padding: 0 0 26px; padding-inline: 46px 42px; font-size: 17px; line-height: 1.75; color: var(--mlf-muted); }
@media (hover: hover) and (pointer: fine) {
  .mlfaq__head:hover { border-block-color: var(--mlf-line-strong); }
  .mlfaq__head:hover, .mlfaq__q:hover { color: var(--mlf-accent); }
  .mlfaq__wrap:not([open]) > .mlfaq__head:hover::after { background-color: color-mix(in srgb, var(--mlf-accent) 16%, transparent); }
  .mlfaq__item:hover { border-block-end-color: var(--mlf-line-strong); }
}
@media (max-width: 767px) {
  .mlfaq { padding: 24px 16px; }
  .mlfaq__head { grid-template-columns: minmax(0, 1fr) 40px; column-gap: 12px; min-height: 68px; padding-block: 12px; }
  .mlfaq__head::after { width: 40px; height: 40px; }
  .mlfaq__title { font-size: 24px; }
  .mlfaq__q { grid-template-columns: 28px minmax(0, 1fr) 28px; column-gap: 10px; padding-block: 18px; font-size: 17px; }
  .mlfaq__q::after { width: 28px; height: 28px; }
  .mlfaq__a { padding-inline: 38px 38px; font-size: 16px; line-height: 1.7; }
}
@media (prefers-reduced-motion: no-preference) {
  .mlfaq__wrap[open] > .mlfaq__list { animation: mlfaq-in .24s ease-out; }
  .mlfaq__item[open] > .mlfaq__a { animation: mlfaq-in .22s ease-out; }
}
