/* ==========================================================================
   RB FAQ — блок rbfaq/section + shared с rb-faq shortcode.
   Все цвета/размеры — из токенов темы (Blocksy --theme-* + WP --wp--preset--*).
   Хардкод запрещён (docs/rb-blocks/css-tokens.md).
   ==========================================================================
   Custom properties --rbfaq-* = public contract, rb-faq Settings шлёт
   их через wp_add_inline_style(). Имена не менять.
*/

:root {
    /* Colors — Blocksy chain defaults (contract §4.7.11):
       semantic var темы → palette fallback. Customizer Blocksy
       настраивает text/link/border глобально, блоки наследуют. */
    --rbfaq-card-bg:           var(--theme-palette-color-8);
    --rbfaq-text-color:        var(--theme-text-color, var(--theme-palette-color-3));
    --rbfaq-text-secondary:    var(--theme-palette-color-4);
    --rbfaq-accent:            var(--theme-link-initial-color, var(--theme-palette-color-1));
    --rbfaq-arrow-color:       var(--theme-text-color, var(--theme-palette-color-3));
    --rbfaq-pill-bg:           var(--theme-palette-color-5);
    --rbfaq-pill-active-bg:    var(--theme-link-initial-color, var(--theme-palette-color-1));
    --rbfaq-pill-active-color: var(--theme-palette-color-8);

    /* Geometry — на WP spacing/theme presets */
    --rbfaq-gap:               var(--wp--preset--spacing--20);
    --rbfaq-card-radius:       var(--theme-border-radius);
    --rbfaq-card-padding:      var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
    --rbfaq-card-shadow:       var(--theme-box-shadow);
    --rbfaq-divider-color:     var(--theme-border-color, var(--theme-palette-color-6));
    --rbfaq-divider:           1px solid var(--rbfaq-divider-color);

    /* Typography — legacy; per-element weight/spacing/transform/line-height теперь
       через DesignCenter tokens (--rbfaq-{element}-*). Остались только те что
       не element-specific: group-title-size / pill-size shortcode режима. */
    --rbfaq-group-title-size:  1.2em;
    --rbfaq-pill-size:         0.93em;
}

/* Dark theme — palette-swap без хардкода hex.
   Два селектора:
     [data-ct-dark]       — глобальный Blocksy dark mode (переключатель темы).
     .rbfaq--theme-dark   — per-instance force-dark (атрибут блока в редакторе).
   DesignCenter публикует свои overrides также на [data-ct-dark]. */
[data-ct-dark],
.rbfaq--theme-dark {
    --rbfaq-card-bg:           var(--theme-palette-color-2);
    --rbfaq-text-color:        var(--theme-palette-color-8);
    --rbfaq-text-secondary:    var(--theme-palette-color-7);
    --rbfaq-arrow-color:       var(--theme-palette-color-8);
    --rbfaq-pill-bg:           var(--theme-palette-color-3);
    --rbfaq-divider-color:     var(--theme-palette-color-3);
}

/* Reset — descendants only; root наследует font от темы.
   Общий шрифт блока = --rbfaq-font-family (DesignCenter override),
   fallback на inherit = шрифт окружения (body темы). */
.rbfaq {
    box-sizing: border-box;
    color: var(--rbfaq-text-color);
    font-family: var(--rbfaq-font-family, inherit);
    font-size: var(--rbfaq-root-font-size, inherit);
}
.rbfaq *, .rbfaq *::before, .rbfaq *::after {
    box-sizing: border-box; margin: 0; padding: 0; border: 0;
    font: inherit; line-height: inherit;
}
.rbfaq a { color: var(--rbfaq-accent); text-decoration: none; }
.rbfaq a:hover { text-decoration: underline; }
.rbfaq img { display: block; max-width: 100%; }

/* Filter */
.rbfaq__filter { display: flex; flex-wrap: wrap; gap: var(--rbfaq-gap); margin-bottom: var(--wp--preset--spacing--40); }
.rbfaq__pill {
    background: var(--rbfaq-pill-bg); border-radius: 999px;
    color: var(--rbfaq-text-color); cursor: pointer; font-size: var(--rbfaq-pill-size);
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    transition: background 0.2s, color 0.2s;
}
.rbfaq__pill:hover { background: var(--rbfaq-accent); color: var(--rbfaq-pill-active-color); }
.rbfaq__pill--active { background: var(--rbfaq-pill-active-bg); color: var(--rbfaq-pill-active-color); }

/* List / Grid */
.rbfaq__list { display: flex; flex-direction: column; gap: var(--rbfaq-gap); }
.rbfaq__grid { display: grid; gap: var(--rbfaq-gap); }
@media (max-width: 767px) { .rbfaq__grid { grid-template-columns: 1fr !important; } }

/* Item — default (accordion / list): carding */
.rbfaq__item {
    background: var(--rbfaq-card-bg); border-radius: var(--rbfaq-card-radius);
    box-shadow: var(--rbfaq-card-shadow); overflow: hidden;
}

/* Group (rb-faq shortcode: grouped by CPT) */
.rbfaq__group { margin-bottom: var(--wp--preset--spacing--50); }
.rbfaq__group:last-child { margin-bottom: 0; }
.rbfaq__group-title {
    font-size: var(--rbfaq-group-title-size); font-weight: var(--rbfaq-question-font-weight, 600);
    color: var(--rbfaq-text-color);
    margin-bottom: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--20);
    border-bottom: 2px solid var(--rbfaq-accent);
}

/* Question */
.rbfaq__question {
    align-items: center; background: none; cursor: pointer; display: flex;
    gap: var(--wp--preset--spacing--30); padding: var(--rbfaq-card-padding); width: 100%; text-align: left;
    color: var(--rbfaq-text-color);
}
.rbfaq__question--static { cursor: default; }
/* Question — полный набор 7 tokens. Color через A+ chain на общий text-color.
   DesignCenter: group «Вопрос» содержит все настройки этого поля. */
.rbfaq__question-text {
    flex: 1;
    color:          var(--rbfaq-question-color, var(--rbfaq-text-color));
    font-family:    var(--rbfaq-question-font-family, inherit);
    font-size:      var(--rbfaq-question-font-size, inherit);
    font-weight:    var(--rbfaq-question-font-weight, 600);
    letter-spacing: var(--rbfaq-question-letter-spacing, inherit);
    text-transform: var(--rbfaq-question-text-transform, inherit);
    line-height:    var(--rbfaq-question-line-height, inherit);
}

/* Arrow (+ → × через rotate обеих палочек на ±45°) — единый паттерн
   для accordion и numbered. Размер 20×20, без border/фона. */
.rbfaq__arrow { width: 20px; height: 20px; flex-shrink: 0; position: relative; }
.rbfaq__arrow::before, .rbfaq__arrow::after {
    content: ''; position: absolute; background: var(--rbfaq-arrow-color);
    top: 50%; left: 50%; transition: transform 0.3s ease;
}
.rbfaq__arrow::before { width: 12px; height: 2px;  transform: translate(-50%, -50%); }
.rbfaq__arrow::after  { width: 2px;  height: 12px; transform: translate(-50%, -50%); }
.rbfaq__item--open .rbfaq__arrow::before { transform: translate(-50%, -50%) rotate(45deg); }
.rbfaq__item--open .rbfaq__arrow::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Answer — плавное expand через height transition.
   JS измеряет реальный scrollHeight и анимирует между 0 ↔ actual px (без max-height
   рывка). После открытия inline height: auto (для resize content при Blocksy
   responsive или add-on script). overflow:hidden — на container, НЕ на children
   (padding внутри не обрезается, контракт §Animation lessons). */
.rbfaq__answer {
    overflow: hidden;
    height: 0;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rbfaq__item--open .rbfaq__answer,
.rbfaq--layout-list .rbfaq__answer {
    height: auto;
}

/* Answer — полный набор 7 tokens. Color через A+ chain на общий text-secondary. */
.rbfaq__answer-content {
    padding: var(--rbfaq-card-padding);
    color:          var(--rbfaq-answer-color, var(--rbfaq-text-color));
    font-family:    var(--rbfaq-answer-font-family, inherit);
    font-size:      var(--rbfaq-answer-font-size, inherit);
    font-weight:    var(--rbfaq-answer-font-weight, inherit);
    letter-spacing: var(--rbfaq-answer-letter-spacing, inherit);
    text-transform: var(--rbfaq-answer-text-transform, inherit);
    line-height:    var(--rbfaq-answer-line-height, 1.7);
}
.rbfaq__answer-content p { margin-bottom: var(--wp--preset--spacing--20); }
.rbfaq__answer-content ul, .rbfaq__answer-content ol {
    padding-left: var(--theme-list-indent, 1.25em);
    margin: var(--wp--preset--spacing--20) 0;
}
.rbfaq__answer-content li { margin-bottom: 0.25em; }
.rbfaq__read-more { display: inline-block; margin-top: var(--wp--preset--spacing--20); font-weight: 500; }

/* Single */
.rbfaq--single .rbfaq__item { max-width: 700px; }
.rbfaq--single .rbfaq__question--static { padding-bottom: 0; }

/* Load more */
.rbfaq__load-more-wrap { margin-top: var(--wp--preset--spacing--40); text-align: center; }
.rbfaq__load-more {
    background: none; border: 1px solid var(--rbfaq-divider-color); border-radius: var(--theme-border-radius);
    color: var(--rbfaq-text-color); cursor: pointer; font-size: 0.93em;
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
    transition: background 0.2s;
}
.rbfaq__load-more:hover { background: var(--rbfaq-pill-bg); }

/* Hidden */
.rbfaq__item[data-hidden] { display: none; }

/* ==========================================================================
   Layout: numbered — плоский список с Q.01/Q.02, divider между вопросами,
   круглая кнопка-тоггл +/× справа. Карточки отключены.
   ========================================================================== */
.rbfaq--layout-numbered .rbfaq__list { gap: 0; }
.rbfaq--layout-numbered .rbfaq__item {
    background: transparent; border-radius: 0; box-shadow: none;
    border-top: var(--rbfaq-divider); overflow: visible;
}
.rbfaq--layout-numbered .rbfaq__item:first-child { border-top: 0; }
.rbfaq--layout-numbered .rbfaq__item:last-child  { border-bottom: var(--rbfaq-divider); }

/* Symmetric padding на сам item — чтобы gap между items был consistent
   независимо open/closed. Question/Answer внутри — без vertical padding,
   Q→A gap реализован через padding-top у answer-content. */
.rbfaq--layout-numbered .rbfaq__item {
    padding-top:    var(--rbfaq-item-top-space,    var(--wp--preset--spacing--40));
    padding-bottom: var(--rbfaq-item-bottom-space, var(--wp--preset--spacing--40));
}

.rbfaq--layout-numbered .rbfaq__question {
    gap: var(--wp--preset--spacing--40);
    padding: 0;
    /* Counter / текст / кнопка toggle — по вертикали центром. */
    align-items: center;
}
.rbfaq--layout-numbered .rbfaq__list { counter-reset: rbfaq-q; }
.rbfaq--layout-numbered .rbfaq__item { counter-increment: rbfaq-q; }
.rbfaq--layout-numbered .rbfaq__question::before {
    content: counter(rbfaq-q, decimal-leading-zero);
    /* Counter использует свой набор 7 tokens. Color A+ chain на accent. */
    color:          var(--rbfaq-counter-color, var(--rbfaq-accent));
    font-family:    var(--rbfaq-counter-font-family, inherit);
    font-size:      var(--rbfaq-counter-font-size, 0.95em);
    font-weight:    var(--rbfaq-counter-font-weight, 700);
    letter-spacing: var(--rbfaq-counter-letter-spacing, 0.04em);
    text-transform: var(--rbfaq-counter-text-transform, none);
    line-height:    var(--rbfaq-counter-line-height, 1);
    flex-shrink: 0;
    min-width: 2em;
}
.rbfaq--layout-numbered .rbfaq__question-text {
    font-family: var(--theme-heading-font-family, inherit);
    /* DesignCenter question-font-size перебивает default пресета. Если не задан —
       numbered даёт визуальный акцент через WP preset large. */
    font-size: var(--rbfaq-question-font-size, var(--wp--preset--font-size--large, 1.25em));
    line-height: 1.3;
    color: inherit;
}

/* Numbered использует общий `.rbfaq__arrow` — без кольца, без swap (единообразие
   с accordion; паттерн + → × наследуется от базового правила выше). */

.rbfaq--layout-numbered .rbfaq__answer-content {
    /* Выравнивание с началом Вопроса: counter width (min-width 2em
       × font-size 0.95em = 1.9em родителя) + gap-flex.
       padding-top = qa-gap (Q → A), bottom = 0 (bottom у самого item). */
    padding: var(--rbfaq-qa-gap, var(--wp--preset--spacing--20)) 0 0 calc(1.9em + var(--wp--preset--spacing--40));
    color: var(--rbfaq-text-secondary);
    font-family: var(--rbfaq-answer-font-family, inherit);
}

/* ==========================================================================
   Layout: mixed — closed плоские (divider), open → карточка на открытии.
   Арrow = chevron (> → v) вместо +/×.
   ========================================================================== */
.rbfaq--layout-mixed .rbfaq__list { gap: 0; }
.rbfaq--layout-mixed .rbfaq__item {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border-top: var(--rbfaq-divider);
    transition: background 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease;
}
.rbfaq--layout-mixed .rbfaq__item:first-child { border-top: 0; }
.rbfaq--layout-mixed .rbfaq__item--open {
    background: var(--rbfaq-card-bg);
    box-shadow: var(--rbfaq-card-shadow);
    border-radius: var(--rbfaq-card-radius);
    border-top: 0;
}
.rbfaq--layout-mixed .rbfaq__item--open + .rbfaq__item { border-top: 0; }
.rbfaq--layout-mixed .rbfaq__question {
    padding: var(--rbfaq-card-padding);
    gap: var(--wp--preset--spacing--30);
    align-items: center;
}
.rbfaq--layout-mixed .rbfaq__answer-content {
    padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
    font-family: var(--rbfaq-answer-font-family, inherit);
    font-size: var(--rbfaq-answer-font-size, inherit);
    color: var(--rbfaq-text-color);
}

/* ==========================================================================
   Layout: outlined — все items карточки; counter крупный контурный (01, 02).
   Изюминка: counter absolute-positioned, смещён влево за край карточки
   (overflow:hidden обрезает часть). На раскрытии — outline заменяется
   на solid fill (акцентный цвет). Ответ выровнен с началом question-text.
   ========================================================================== */
.rbfaq--layout-outlined .rbfaq__list {
    display: flex;
    flex-direction: column;
    gap: var(--rbfaq-gap);
    counter-reset: rbfaq-q;
}
.rbfaq--layout-outlined .rbfaq__item {
    counter-increment: rbfaq-q;
    background: var(--rbfaq-card-bg);
    box-shadow: var(--rbfaq-card-shadow);
    border-radius: var(--rbfaq-card-radius);
    /* Overflow clip обязателен — counter translate(-X) уводит часть за edge,
       без него цифра visible за картой. !important блокирует
       переопределение themes/shared CSS. */
    overflow: hidden !important;
    position: relative;
}
.rbfaq--layout-outlined .rbfaq__question {
    position: relative;
    /* padding-left = counter visible width (~2.7em при 3em font-size минус 10px overflow)
       + gap до text. 4em даёт заметный отступ вопроса от counter'а. */
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) 4em;
    gap: 0;
    align-items: center;
}
.rbfaq--layout-outlined .rbfaq__question::before {
    content: counter(rbfaq-q, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-10px, -50%);
    color: transparent;
    -webkit-text-stroke: 1.5px var(--rbfaq-counter-color, var(--rbfaq-accent));
            text-stroke: 1.5px var(--rbfaq-counter-color, var(--rbfaq-accent));
    /* Counter 7 tokens — те же что в numbered, только font-size для outlined
       крупнее (3em) т.к. здесь это графический элемент с stroke-эффектом. */
    font-family:    var(--rbfaq-counter-font-family, var(--theme-heading-font-family, inherit));
    font-size:      var(--rbfaq-counter-font-size, 3em);
    font-weight:    var(--rbfaq-counter-font-weight, 800);
    letter-spacing: var(--rbfaq-counter-letter-spacing, 0.02em);
    text-transform: var(--rbfaq-counter-text-transform, none);
    line-height:    var(--rbfaq-counter-line-height, 1);
    pointer-events: none;
    /* Синхронизация с анимацией открытия ответа — тот же timing + easing. */
    transition:
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-text-stroke-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Открытый item — counter solid fill (акцентный цвет, stroke убран). */
.rbfaq--layout-outlined .rbfaq__item--open .rbfaq__question::before {
    color: var(--rbfaq-counter-color, var(--rbfaq-accent));
    -webkit-text-stroke-width: 0;
            text-stroke-width: 0;
}
.rbfaq--layout-outlined .rbfaq__question-text {
    font-family: var(--rbfaq-question-font-family, var(--theme-heading-font-family, inherit));
    font-size: var(--rbfaq-question-font-size, var(--wp--preset--font-size--large, 1.25em));
    line-height: 1.3;
}
.rbfaq--layout-outlined .rbfaq__answer-content {
    /* Выравнивание с началом question-text: тот же padding-left = 4em. */
    padding: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) 4em;
    font-family: var(--rbfaq-answer-font-family, inherit);
    font-size: var(--rbfaq-answer-font-size, inherit);
    color: var(--rbfaq-text-secondary);
}

/* ==========================================================================
   Layout: ghost — прозрачные карточки с border. Для любого фона
   (цветные hero-секции, градиенты). Текст и border = currentColor → inherit
   от контейнера; если блок расположен на тёмном bg, всё автоматически светлеет.
   ========================================================================== */
.rbfaq--layout-ghost .rbfaq__list {
    display: flex;
    flex-direction: column;
    gap: var(--rbfaq-gap);
}
.rbfaq--layout-ghost .rbfaq__item {
    background: transparent;
    box-shadow: none;
    border: 1px solid currentColor;
    border-radius: var(--rbfaq-card-radius);
    opacity: 1;
    overflow: hidden;
}
.rbfaq--layout-ghost .rbfaq__question {
    padding: var(--rbfaq-card-padding);
    gap: var(--wp--preset--spacing--30);
    color: inherit;
    align-items: center;
}
.rbfaq--layout-ghost .rbfaq__answer-content {
    padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
    color: inherit;
    opacity: 0.85;
    font-family: var(--rbfaq-answer-font-family, inherit);
    font-size: var(--rbfaq-answer-font-size, inherit);
}

/* ==========================================================================
   Chevron arrow (› → ⌄) для mixed / outlined / ghost пресетов.
   Reset общий +/× → одна border-right+border-bottom диагональка, rotate 45°.
   ========================================================================== */
.rbfaq--layout-mixed    .rbfaq__arrow::before,
.rbfaq--layout-outlined .rbfaq__arrow::before,
.rbfaq--layout-ghost    .rbfaq__arrow::before,
.rbfaq--layout-mixed    .rbfaq__arrow::after,
.rbfaq--layout-outlined .rbfaq__arrow::after,
.rbfaq--layout-ghost    .rbfaq__arrow::after {
    display: none;
}
.rbfaq--layout-mixed    .rbfaq__arrow,
.rbfaq--layout-outlined .rbfaq__arrow,
.rbfaq--layout-ghost    .rbfaq__arrow {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border: 0;
    border-right:  2px solid var(--rbfaq-arrow-color);
    border-bottom: 2px solid var(--rbfaq-arrow-color);
    transform: translateY(-2px) rotate(-45deg);
    transition: transform 0.25s ease;
}
.rbfaq--layout-mixed    .rbfaq__item--open .rbfaq__arrow,
.rbfaq--layout-outlined .rbfaq__item--open .rbfaq__arrow,
.rbfaq--layout-ghost    .rbfaq__item--open .rbfaq__arrow {
    transform: translateY(2px) rotate(45deg);
}

/* ==========================================================================
   Accessibility — focus-visible на <button> question (Phase 4a §Ось 4).
   Chrome/Safari дефолтный outline на <button> внутри focus-trap'а часто
   недостаточно контрастный на акцентных фонах; явный ring через accent.
   ========================================================================== */
.rbfaq__question:focus-visible {
    outline: 2px solid var(--rbfaq-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Reduced motion — отключаем accordion height + arrow rotate (контракт §Ось 4).
   JS-логика open/close работает мгновенно; visual indicator остаётся через
   `.rbfaq__item--open` класс + стрелку (без анимации).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .rbfaq__answer,
    .rbfaq__arrow,
    .rbfaq__arrow::before,
    .rbfaq__arrow::after,
    .rbfaq--layout-mixed .rbfaq__arrow,
    .rbfaq--layout-outlined .rbfaq__arrow,
    .rbfaq--layout-ghost .rbfaq__arrow,
    .rbfaq--layout-outlined .rbfaq__question::before {
        transition: none !important;
    }
}

/* ==========================================================================
   Editor (iframe) — parity с фронтом: ответы раскрыты, appender виден.
   ========================================================================== */
.rbfaq--editor .rbfaq__item { margin-bottom: var(--rbfaq-gap); }
.rbfaq--editor .rbfaq__question-text[data-rich-text-placeholder]::after { opacity: 0.4; }
.rbfaq--editor .rbfaq__answer { max-height: none !important; }
.rbfaq--editor .block-list-appender { margin-top: var(--rbfaq-gap); }
.rbfaq--editor.rbfaq--layout-numbered .rbfaq__item { margin-bottom: 0; }