/* ===== FAQ (Частые вопросы) ===== */
:root{
  --faq-surface: oklch(0.99 0.01 160 / .92);
  --faq-stroke:  oklch(0.86 0.02 160 / .28);
  --faq-ink:     oklch(0.18 0.02 160);
  --faq-muted:   oklch(0.48 0.02 160);
  --faq-brand:   oklch(0.79 0.15 160);
  --faq-brand-2: oklch(0.82 0.10 165);
  --faq-ring:    oklch(0.77 0.15 160 / .55);
  --faq-shadow-1: 0 .6rem 1.6rem oklch(0.20 0.02 160 / .12);
  --faq-shadow-2: 0 1.2rem 3rem  oklch(0.20 0.02 160 / .10);
  --faq-radius:  1rem;
}

.faq .h3{
  margin-block: 0 1rem;
}

.faq-item{
  margin-block: .75rem;
  border-radius: calc(var(--faq-radius) * 1.1);
  background: linear-gradient(180deg, var(--faq-surface), white);
  border: 1px solid var(--faq-stroke);
  box-shadow: var(--faq-shadow-1);
  overflow: hidden;
}

.faq-item:hover{
  box-shadow: var(--faq-shadow-2);
  border-color: oklch(0.80 0.04 160 / .45);
}

.faq-item summary{
  cursor: pointer;
  list-style: none; /* Firefox */
  -webkit-user-select: none; user-select: none;
  font-weight: 700;
  color: var(--faq-ink);
  padding: 1.05rem 1.25rem 1.05rem 2.9rem;
  position: relative;
  outline: none;
}

/* убрать стандартный маркер WebKit */
.faq-item summary::-webkit-details-marker{ display:none }

/* своя стрелка */
.faq-item summary::before{
  content:"";
  position: absolute;
  inset-inline-start: 1.1rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 1.15rem; block-size: 1.15rem;
  background: linear-gradient(135deg, var(--faq-brand), var(--faq-brand-2));
  /* chevron-right */
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path d='M8 5l8 7-8 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
  </svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path d='M8 5l8 7-8 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
  </svg>") center/contain no-repeat;
  transition: transform .25s ease;
}

.faq-item[open] summary::before{
  transform: rotate(90deg); /* вниз */
}

/* фокус-контур по всему details */
.faq-item:has(> summary:focus-visible){
  box-shadow: var(--faq-shadow-2), 0 0 0 .18rem var(--faq-ring);
}

/* тело ответа — плавное раскрытие */
.faq-item .faq-a{
  color: var(--faq-ink);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 1.25rem;
  border-top: 1px dashed oklch(0.85 0.02 160 / .6);
  transition:
    max-height .35s ease,
    opacity .22s ease,
    padding .35s ease;
  will-change: max-height;
}

/* при раскрытии */
.faq-item[open] .faq-a{
  padding: .75rem 1.25rem 1.1rem;
  opacity: 1;
  max-height: 40rem; /* заведомо больше любого ответа */
}

/* вторичный тон */
.faq-item .faq-a,
.faq-item .faq-a p{ color: var(--faq-muted); }

/* адаптивная типографика */
.faq-item summary{
  font-size: clamp(1rem, .92rem + .6vw, 1.25rem);
}
.faq-item .faq-a{
  font-size: clamp(.95rem, .9rem + .3vw, 1.05rem);
  line-height: 1.55;
}

/* сокращаем анимации по настройкам ОС */
@media (prefers-reduced-motion: reduce){
  .faq-item summary::before,
  .faq-item .faq-a{
    transition: none;
  }
}

/* ——— Тёмная тема ——— */
[data-theme="dark"] .faq-item{
  background: oklch(0.22 0.02 160 / .8);
  border-color: oklch(0.40 0.02 160 / .35);
}
[data-theme="dark"] .faq-item summary{ color: oklch(0.92 0.02 160); }
[data-theme="dark"] .faq-item .faq-a{ border-top-color: oklch(0.48 0.02 160 / .5); color: oklch(0.85 0.02 160); }

/* Толстая стрелка у FAQ */
.faq-item summary::before{
  inline-size: 1.25rem; 
  block-size: 1.25rem; /* было ~1.15rem */

  /* тот же градиент фона, но маска со Stroke потолще */
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path d='M8 5l8 7-8 7' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/>\
  </svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path d='M8 5l8 7-8 7' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/>\
  </svg>") center/contain no-repeat;
}

.faq-item .faq-a{ transition: opacity .22s ease, padding .35s ease; } /* убрали переход по max-height */
.faq-item[open] .faq-a{ max-height: none; }