/* ══ HelpCenter.css — Центр допомоги /dopomoha і юридичні сторінки.
   Розкладка як у центрів допомоги на Zendesk (Fixly): герой із пошуком,
   картки категорій 3 у ряд, стаття з бічною колонкою розділу.
   Типографіка — класи textP*/heading з main/typography. ══ */

.hc { background:#f6f6f6; padding-bottom:60px; }
.hc-h1 { font-family:'Poppins',sans-serif; font-size:32px; line-height:44px; font-weight:600;
         color:var(--text-strong); margin:0 0 10px; }
.hc-h2 { font-family:'Poppins',sans-serif; font-size:20px; line-height:28px; font-weight:600;
         color:var(--text-strong); margin:40px 0 16px; }
.hc-lead { margin:0 0 28px; max-width:640px; }

/* ── Герой ── */
.hc-hero { background:var(--green); padding:56px 0 48px; text-align:center; }
.hc-hero-title { font-family:'Poppins',sans-serif; font-size:32px; line-height:40px; font-weight:600;
                 color:#fff; margin:0 0 22px; }
.hc-search { display:flex; align-items:center; gap:8px; max-width:640px; margin:0 auto;
             background:#fff; border:1px solid #ebebeb; border-radius:4px; padding:0 8px 0 14px;
             height:52px; box-shadow:0 2px 9px rgba(0,0,0,.1); }
.hc-search svg { width:20px; height:20px; color:var(--text-faint); flex:0 0 auto; }
.hc-search input { flex:1; border:0; outline:0; font:400 16px/24px 'Lato',sans-serif;
                   color:var(--text-strong); background:none; min-width:0; }
.hc-search input::placeholder { color:var(--text-faint); }
.hc-search button { font:600 14px/24px 'Poppins',sans-serif; color:#fff; background:#0071bc;
                    border:0; border-radius:4px; padding:7px 18px; cursor:pointer; text-transform:uppercase; }
.hc-search button:hover { background:#0090de; }

/* ── Смуга на внутрішніх сторінках ── */
.hc-bar { background:var(--green); padding:14px 0; }
.hc-bar .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.hc-bar-home { color:#fff; font:600 16px/24px 'Poppins',sans-serif; white-space:nowrap; }
.hc-search_sm { height:40px; max-width:360px; margin:0; box-shadow:none; flex:1; }
.hc-search_sm input { font-size:15px; }
.hc-page { padding-top:30px; }

/* ── Категорії ── */
.hc-cats { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.hc-cat { display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid #ebebeb;
          border-radius:8px; padding:24px 22px 20px; color:var(--text-strong);
          transition:box-shadow .2s, border-color .2s; }
.hc-cat:hover { border-color:#0071bc; box-shadow:0 2px 15px rgba(0,0,0,.06); color:var(--text-strong); }
.hc-cat-ic { width:36px; height:36px; color:var(--green); margin-bottom:6px; }
.hc-cat-ic svg { width:36px; height:36px; }
.hc-cat-t { font:600 16px/24px 'Poppins',sans-serif; }
.hc-cat-b { color:var(--text-muted); }
.hc-cat-n { margin-top:auto; padding-top:8px; color:var(--text-faint); }

.hc-promo { list-style:none; margin:0; padding:0; background:#fff; border:1px solid #ebebeb; border-radius:8px; }
.hc-promo li { display:flex; justify-content:space-between; align-items:center; gap:16px;
               padding:14px 22px; border-bottom:1px solid #ebebeb; }
.hc-promo li:last-child { border-bottom:0; }
.hc-promo a { font:400 16px/24px 'Lato',sans-serif; }

.hc-contact { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:44px;
              background:#fff; border:1px solid #ebebeb; border-radius:8px; padding:24px 26px; }
.hc-btn { display:inline-block; font:600 14px/24px 'Poppins',sans-serif; color:#414141; background:#ffd700;
          border-radius:4px; padding:10px 22px 9px; text-transform:uppercase; white-space:nowrap; }
.hc-btn:hover { background:#ffea00; color:#414141; }
.hc-btn_sm { padding:7px 16px 6px; font-size:13px; }

/* ── Категорія / розділ ── */
.hc-crumbs { color:var(--text-faint); margin:0 0 14px; }
.hc-crumbs a { color:#0071bc; }
.hc-secs { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.hc-sec { background:#fff; border:1px solid #ebebeb; border-radius:8px; padding:22px 24px 18px; }
.hc-sec h2 { font:600 16px/24px 'Poppins',sans-serif; margin:0 0 10px; }
.hc-sec h2 a { color:var(--text-strong); }
.hc-sec ul, .hc-list { list-style:none; margin:0; padding:0; }
.hc-sec li, .hc-list li { padding:7px 0; border-top:1px solid #f0f0f0; }
.hc-sec li:first-child { border-top:0; }
.hc-sec li a, .hc-list li a { font:400 15px/22px 'Lato',sans-serif; }
.hc-more { display:inline-block; margin-top:10px; font:700 13px/17px 'Lato',sans-serif; }
.hc-list { background:#fff; border:1px solid #ebebeb; border-radius:8px; padding:6px 24px; }
.hc-list li { padding:12px 0; }
.hc-list li a { font-size:16px; line-height:24px; }

/* ── Стаття ── */
.hc-cols { display:grid; grid-template-columns:260px minmax(0,1fr); gap:30px; align-items:start; }
.hc-side { position:sticky; top:20px; background:#fff; border:1px solid #ebebeb; border-radius:8px; padding:18px 20px; }
.hc-side h4 { margin:0 0 8px; color:var(--text-strong); }
.hc-side ul { list-style:none; margin:0; padding:0; }
.hc-side li a { display:block; padding:7px 0; font:400 14px/20px 'Lato',sans-serif; color:var(--text-muted); }
.hc-side li.on a { color:var(--text-strong); font-weight:700; }
.hc-side li a:hover { color:#0071bc; }
.hc-body { background:#fff; border:1px solid #ebebeb; border-radius:8px; padding:36px 40px 30px; min-width:0; }
.hc-body .hc-h1 { font-size:28px; line-height:38px; }
.hc-upd { margin:0 0 18px; }
.hc-toc { background:#fafafa; border:1px solid #ebebeb; border-radius:6px; padding:14px 18px; margin:0 0 24px; }
.hc-toc ol { margin:6px 0 0; padding-left:18px; }
.hc-toc li { font:400 14px/22px 'Lato',sans-serif; }
.hc-text { font:400 16px/27px 'Lato',sans-serif; color:var(--text-muted); }
.hc-text p { margin:0 0 16px; }
.hc-text h2 { font-family:'Poppins',sans-serif; font-size:19px; line-height:28px; font-weight:600;
              color:var(--text-strong); margin:30px 0 10px; scroll-margin-top:20px; }
.hc-text h3 { font-family:'Poppins',sans-serif; font-size:16px; line-height:24px; font-weight:600;
              color:var(--text-strong); margin:22px 0 8px; }
.hc-text ul, .hc-text ol { margin:0 0 16px; padding-left:24px; }
.hc-text li { margin:0 0 6px; }
.hc-text b { color:var(--text-strong); font-weight:700; }
.hc-text a { color:#0071bc; }
.hc-text a:hover { text-decoration:underline; }
.hc-note { background:#fff7e7; border-left:3px solid #ffd700; border-radius:0 4px 4px 0;
           padding:12px 16px; margin:0 0 18px; color:var(--text-strong); font-size:15px; line-height:24px; }
.hc-vote { display:flex; align-items:center; gap:10px; margin-top:32px; padding-top:20px; border-top:1px solid #ebebeb; }
.hc-vote-b { font:600 13px/20px 'Poppins',sans-serif; color:#0071bc; background:#fff; border:1px solid #ebebeb;
             border-radius:4px; padding:5px 16px; cursor:pointer; }
.hc-vote-b:hover { border-color:#0071bc; }
.hc-ask { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px;
          background:#fafafa; border-radius:6px; padding:12px 16px; }
.hc-related { margin-top:28px; }
.hc-related h4 { margin:0 0 6px; color:var(--text-strong); }
.hc-related ul { list-style:none; margin:0; padding:0; }
.hc-related li a { display:inline-block; padding:5px 0; font:400 15px/22px 'Lato',sans-serif; }

/* Юридичні документи — ширша колонка, без бічної панелі на ПК */
.hc_legal .hc-cols { grid-template-columns:minmax(0,1fr); }
.hc_legal .hc-side { display:none; }
.hc_legal .hc-body { max-width:860px; }

/* ── Пошук ── */
.hc-results { list-style:none; margin:0; padding:0; }
.hc-results li { background:#fff; border:1px solid #ebebeb; border-radius:8px; padding:16px 22px; margin-bottom:10px; }
.hc-res-t { display:block; font:700 16px/24px 'Lato',sans-serif; }
.hc-results p { margin:6px 0 0; }

@media (max-width:900px) {
  .hc-hero { padding:32px 0 28px; }
  .hc-hero-title { font-size:24px; line-height:32px; }
  .hc-h1, .hc-body .hc-h1 { font-size:24px; line-height:32px; }
  .hc-cats, .hc-secs { grid-template-columns:1fr; gap:12px; }
  .hc-bar .wrap { flex-direction:column; align-items:stretch; gap:10px; }
  .hc-search_sm { max-width:none; }
  .hc-cols { grid-template-columns:1fr; gap:16px; }
  .hc-side { position:static; order:2; }
  .hc-body { padding:22px 18px; }
  .hc-text { font-size:15px; line-height:25px; }
  .hc-contact, .hc-ask { flex-direction:column; align-items:flex-start; }
  .hc-search button { padding:7px 12px; font-size:12px; }
}