/* Локальные стили страницы FAQ. Используют глобальные переменные из ../styles.css,
   поэтому светлая и тёмная темы работают автоматически. */

/* Компактная раскладка: hero на всю ширину и небольшие отступы между разделами,
   чтобы поиск и список разделов были видны сразу, без «пустого» экрана. */
.faq-page .seo-page-hero{grid-template-columns:1fr;padding-block:clamp(24px,4vw,44px)}
.faq-page .seo-page-copy{max-width:1080px}
.faq-page .lead-copy{margin-top:12px;max-width:760px;font-size:clamp(16px,1.6vw,19px)}
.faq-page .section{padding-block:clamp(22px,3.4vw,40px)}
.faq-page .section-head{margin-bottom:16px}
/* Якорь секции останавливается ниже липкой шапки и полосы разделов. */
.faq-page .section[id]{scroll-margin-top:172px}
@media(max-width:760px){.faq-page .section[id]{scroll-margin-top:60px}}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-actions .button{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:1px solid var(--green);border-radius:12px;text-decoration:none;font-weight:700}
.hero-actions .primary{background:var(--green);color:#fff}
.hero-actions .secondary{color:var(--green);background:var(--white)}

/* Переключатель языка */
.language-switch{display:inline-flex;align-items:center;gap:7px;margin:14px 0 0;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--green-dark);text-decoration:none;font-weight:700;font-size:14px;width:max-content}
.language-switch:hover{border-color:var(--green);color:var(--green)}

/* Поиск по вопросам */
.faq-search{max-width:620px;margin:22px 0 4px}
.faq-search label{display:block;font-weight:700;margin-bottom:8px;color:var(--text)}
.faq-search-field{position:relative}
.faq-search input{width:100%;box-sizing:border-box;padding:14px 44px 14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--text);font-size:16px}
.faq-search input:focus{outline:none;border-color:var(--green)}
.faq-search-field:before{content:"🔎";position:absolute;right:16px;top:50%;transform:translateY(-50%);opacity:.6}
.faq-search-hint{margin-top:8px;color:var(--muted);font-size:14px}

/* Липкая полоса разделов: остаётся вверху при прокрутке. */
.faq-nav{position:sticky;top:0;z-index:20;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 6px 16px rgba(16,92,56,.06)}
@media(min-width:761px){.faq-nav{top:68px}}
/* Мобильно: одна строка со свайпом. Десктоп: чипы переносятся в несколько строк. */
.faq-nav-inner{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px clamp(16px,5vw,72px);scrollbar-width:thin}
@media(min-width:761px){.faq-nav-inner{flex-wrap:wrap;overflow-x:visible}}
.faq-nav-inner a{flex:0 0 auto;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--green-dark);text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap}
.faq-nav-inner a:hover{border-color:var(--green);color:var(--green)}
.faq-nav-inner a.active{background:var(--green);border-color:var(--green);color:#fff}

/* Путь к настройке внутри приложения */
.faq-path{margin:2px 20px 12px;padding:9px 12px;background:var(--mint);border-left:3px solid var(--green);border-radius:6px;color:var(--text);font-size:14px;line-height:1.55}
.faq-path b{color:var(--green-dark);font-weight:800}

/* Ссылка «Подробнее» под ответом */
.faq-more{display:inline-block;margin:2px 20px 18px;font-weight:700;color:var(--green);text-decoration:none}
.faq-more:hover{text-decoration:underline}
.faq-list details .faq-more{padding:0}

/* Служебные состояния поиска */
.faq-empty{display:none;padding:18px clamp(16px,5vw,72px);color:var(--muted)}
.faq-empty.show{display:block}
.section.faq-hidden{display:none}

/* Блок «Не нашли ответ?» */
.faq-cta{background:var(--mint);border:1px solid var(--line);border-radius:16px;padding:26px}
.faq-cta h2{margin-top:0}
.faq-cta p{color:var(--muted)}
.faq-cta .hero-actions{margin-top:16px}

@media(max-width:760px){
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-actions .button{width:100%;min-height:52px}
}