/* =========================================
   88-accordion.css
   Otter Accordion unified styling
   Apply class "wpw-faq" to the Accordion block.
   ========================================= */


:root{
  /* ===== FAQ / Accordion (Otter) ===== */
  --faq-left: 0px;                 /* общий отступ слева (всего блока FAQ) */

  --faq-item-gap-closed: 6px;      /* расстояние между пунктами в закрытом состоянии */
  --faq-item-gap-open: 12px;       /* расстояние между пунктами, когда текущий открыт */

  --faq-title-pad-y: 10px;
  --faq-title-pad-x: 12px;

  --faq-body-pad-y: 10px;
  --faq-body-pad-x: 20px;

  --faq-radius: 12px;
  --faq-border: rgba(0,0,0,.10);
  --faq-bg: rgba(255,255,255,.70);

  --faq-title-font: inherit;       /* можно поставить вашу переменную шрифта */
  --faq-title-size: 16px;
  --faq-title-weight: 400;

  --faq-body-font: inherit;
  --faq-body-size: 14px;
  --faq-body-weight: 400;
  --faq-body-line: 1.45;

  --faq-icon-size: 18px;           /* размер стрелки/иконки */
  --faq-icon-gap: 10px;            /* расстояние между иконкой и текстом */
}


.wpw-faq{
  padding-left: var(--faq-left);
}

/* ---- Base item spacing (works for details OR div items) ---- */
.wpw-faq details,
.wpw-faq .otter-accordion-item,
.wpw-faq .wp-block-themeisle-blocks-accordion-item,
.wpw-faq .wp-block-otter-blocks-accordion-item{
  margin: 0 0 var(--faq-item-gap-closed) 0 !important;
}

/* When item is OPEN -> bigger gap after it (between content and next item) */
.wpw-faq details[open],
.wpw-faq .is-open,
.wpw-faq .is-active{
  margin-bottom: var(--faq-item-gap-open) !important;
}

/* ---- Title row (summary/button) ---- */
/* details/summary variant */
.wpw-faq summary{
  list-style: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: var(--faq-icon-gap);

  padding: var(--faq-title-pad-y) var(--faq-title-pad-x);
  border-radius: var(--faq-radius);
  background: var(--faq-bg);
  border: 1px solid var(--faq-border);
  backdrop-filter: blur(6px);

  font-family: var(--faq-title-font);
  font-size: var(--faq-title-size);
  font-weight: var(--faq-title-weight);

  /* чтобы заголовок был ровный по левому краю */
  text-align: left;
}

/* remove default marker in some browsers */
.wpw-faq summary::-webkit-details-marker{ display:none; }

/* Otter/div/button variants (покрываем разные возможные классы) */
.wpw-faq .otter-accordion-item__title,
.wpw-faq .accordion-item__title,
.wpw-faq button[aria-expanded],
.wpw-faq .wp-block-themeisle-blocks-accordion-item__title{
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: var(--faq-icon-gap);

  width: 100%;
  padding: var(--faq-title-pad-y) var(--faq-title-pad-x);
  border-radius: var(--faq-radius);
  background: var(--faq-bg);
  border: 1px solid var(--faq-border);
  backdrop-filter: blur(6px);

  font-family: var(--faq-title-font);
  font-size: var(--faq-title-size);
  font-weight: var(--faq-title-weight);

  text-align: left;
}

/* ---- Content ---- */
/* details variant: content is everything after summary */
.wpw-faq details > :not(summary){
  padding: var(--faq-body-pad-y) var(--faq-body-pad-x);
  margin: 0 !important;

  font-family: var(--faq-body-font);
  font-size: var(--faq-body-size);
  font-weight: var(--faq-body-weight);
  line-height: var(--faq-body-line);
}

/* Otter/div content variants */
.wpw-faq .otter-accordion-item__content,
.wpw-faq .accordion-item__content,
.wpw-faq .wp-block-themeisle-blocks-accordion-item__content{
  padding: var(--faq-body-pad-y) var(--faq-body-pad-x);
  margin: 0 !important;

  font-family: var(--faq-body-font);
  font-size: var(--faq-body-size);
  font-weight: var(--faq-body-weight);
  line-height: var(--faq-body-line);
}

/* ---- Left indent for the arrow/icon area (if icons are separate elements) ---- */
.wpw-faq svg,
.wpw-faq .otter-accordion-item__icon,
.wpw-faq .accordion-item__icon{
  width: var(--faq-icon-size);
  height: var(--faq-icon-size);
  flex: 0 0 var(--faq-icon-size);
}

/* ---- Mobile tuning ---- */
@media (max-width: 640px){
  .wpw-faq{
    padding-left: 0;
  }
  .wpw-faq summary,
  .wpw-faq .otter-accordion-item__title,
  .wpw-faq .accordion-item__title,
  .wpw-faq button[aria-expanded]{
    font-size: 15px;
    padding: 10px 10px;
  }
  .wpw-faq details > :not(summary),
  .wpw-faq .otter-accordion-item__content,
  .wpw-faq .accordion-item__content{
    font-size: 14px;
    padding: 10px 10px;
  }
}