/*
 * Каркас портала, общий для всех публичных страниц: шапка .sr-hdr.
 * Тема `sitesreviews-portal` (CORE/DESIGN-SYSTEM.md). Тёмные значения — под html[data-theme="dark"],
 * включатся вместе с глобальным переключателем темы.
 */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');

:root {
    --sr-hdr-h: 68px;
    --sr-hdr-bg: rgba(255, 255, 255, .92);
    --sr-hdr-line: rgba(16, 24, 40, .08);
    --sr-hdr-text: #11141a;
    --sr-hdr-muted: #5b6474;
    --sr-hdr-btn: #f1f3f6;
    --sr-hdr-btn-hover: #e3e8f0;
    --sr-hdr-accent: #2a7bff;
    --sr-hdr-accent-text: #1f63d6;
    --sr-font: "Onest", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[data-theme="dark"] {
    --sr-hdr-bg: rgba(17, 19, 23, .92);
    --sr-hdr-line: rgba(255, 255, 255, .08);
    --sr-hdr-text: #f1f3f7;
    --sr-hdr-muted: #98a1b1;
    --sr-hdr-btn: #1b1e24;
    --sr-hdr-btn-hover: #242832;
    --sr-hdr-accent-text: #8db0ff;
}

/* Старая шапка была фиксированной высотой 85px — отступ body задавался под неё. */
body:has(> .sr-hdr) { padding-top: var(--sr-hdr-h); }

.sr-hdr {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1030;
    background: var(--sr-hdr-bg);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--sr-hdr-line);
    font-family: var(--sr-font);
    color: var(--sr-hdr-text);
}
.sr-hdr a { color: inherit; text-decoration: none; }
.sr-hdr :focus-visible { outline: 2px solid var(--sr-hdr-accent); outline-offset: 2px; border-radius: 8px; }

.sr-hdr-in { max-width: 1240px; margin: 0 auto; padding-inline: 16px; height: var(--sr-hdr-h); display: flex; align-items: center; gap: 14px; }

.sr-logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; flex: none; }
.sr-logo svg { display: block; }
.sr-logo b { color: var(--sr-hdr-accent); font-weight: 800; }

.sr-hdr-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
/* 9 пунктов в контейнере 1240 — размер подобран так, чтобы строка влезала на любом десктопе от 1200. */
.sr-hdr-nav a { padding: 7px 6px; border-radius: 10px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .2s; }
.sr-hdr-nav a:hover { background: var(--sr-hdr-btn); }
.sr-hdr-nav a[aria-current="page"] { color: var(--sr-hdr-accent-text); }

.sr-hdr-act { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.sr-icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--sr-hdr-btn); color: var(--sr-hdr-text); display: grid; place-items: center; cursor: pointer; transition: background .2s; padding: 0; }
.sr-icon-btn:hover { background: var(--sr-hdr-btn-hover); }
.sr-icon-btn svg { width: 19px; height: 19px; }
.sr-hdr-lang .drop-down-btn.sr-icon-btn { padding: 0; margin: 0; }
.sr-hdr-lang .language-img { margin: 0 !important; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; }
.sr-hdr-lang .language-img img { width: 100%; height: 100%; object-fit: cover; }
.sr-hdr .drop-down .drop-down-menu { right: 0; left: auto; min-width: 200px; }
.sr-user .drop-down-btn { padding: 0; }
.sr-user-img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; display: block; }

.sr-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 12px; font: 600 15px var(--sr-font); white-space: nowrap; border: 0; cursor: pointer; transition: background .2s; }
.sr-btn-pri { background: var(--sr-hdr-accent); color: #fff !important; }
.sr-btn-sec { background: var(--sr-hdr-btn); color: var(--sr-hdr-text) !important; }
.sr-btn-sec:hover { background: var(--sr-hdr-btn-hover); }

.sr-hdr-burger { display: none; }

.sr-hdr-search { max-width: 1240px; margin: 0 auto; padding: 0 16px 14px; display: flex; gap: 8px; }
.sr-hdr-search[hidden] { display: none; }
.sr-hdr-search input { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 1px solid var(--sr-hdr-line); background: var(--sr-hdr-btn); color: var(--sr-hdr-text); font: 400 16px var(--sr-font); padding: 0 14px; outline: none; }
.sr-hdr-search .sr-btn { height: 46px; }

.sr-hdr-panel { max-height: calc(100vh - var(--sr-hdr-h)); overflow-y: auto; padding: 8px 16px 20px; border-top: 1px solid var(--sr-hdr-line); }
.sr-hdr-panel[hidden] { display: none; }
.sr-hdr-panel nav { display: grid; gap: 2px; }
.sr-hdr-panel nav a { padding: 12px 10px; border-radius: 10px; font-size: 16px; font-weight: 500; }
.sr-hdr-panel nav a:hover { background: var(--sr-hdr-btn); }
.sr-hdr-panel-more { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sr-hdr-line); }
.sr-hdr-panel-more a { color: var(--sr-hdr-muted) !important; font-size: 15px !important; }
.sr-hdr-panel-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* На десктопе панель не нужна: всё в строке; ниже 1200 — гамбургер. */
@media (min-width: 1200px) { .sr-hdr-panel { display: none !important; } }
@media (min-width: 1200px) and (max-width: 1299.98px) { .sr-hdr-nav a { padding: 6px 4px; font-size: 13.5px; } .sr-hdr-in { gap: 10px; } .sr-logo { font-size: 17px; } }
@media (max-width: 1199.98px) {
    .sr-hdr-nav { display: none; }
    .sr-hdr-burger { display: grid; }
}
@media (max-width: 480px) {
    .sr-hdr-in { gap: 12px; }
    .sr-logo { font-size: 17px; }
    .sr-hdr-login { display: none; }
}
/* Узкие телефоны (360 и уже): логотип и четыре кнопки иначе не помещаются — «меню» уезжает за край. */
@media (max-width: 400px) {
    .sr-hdr-in { gap: 8px; }
    .sr-logo { font-size: 16px; gap: 7px; }
    .sr-hdr-act { gap: 4px; }
    .sr-icon-btn { width: 36px; height: 36px; border-radius: 10px; }
}
@media (max-width: 340px) { .sr-logo span { display: none; } }

/* Подвал портала */
:root { --sr-ftr-bg: #ffffff; --sr-ftr-line: rgba(16, 24, 40, .08); --sr-ftr-text: #11141a; --sr-ftr-muted: #5b6474; }
html[data-theme="dark"] { --sr-ftr-bg: #16181d; --sr-ftr-line: rgba(255, 255, 255, .08); --sr-ftr-text: #f1f3f7; --sr-ftr-muted: #98a1b1; }
.sr-ftr { margin-top: 72px; background: var(--sr-ftr-bg); border-top: 1px solid var(--sr-ftr-line); font-family: var(--sr-font); color: var(--sr-ftr-text); }
.sr-ftr a { color: inherit; text-decoration: none; }
.sr-ftr-in { max-width: 1240px; margin: 0 auto; padding: 56px 16px 40px; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.sr-ftr-brand p { margin: 14px 0 0; color: var(--sr-ftr-muted); font-size: 14px; line-height: 1.55; max-width: 280px; }
.sr-ftr-col h4 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sr-ftr-muted); font-family: var(--sr-font); }
.sr-ftr-col a { display: block; padding: 5px 0; font-size: 15px; }
.sr-ftr-col a:hover, .sr-ftr-legal a:hover { color: var(--sr-hdr-accent-text); }
.sr-ftr-low { max-width: 1240px; margin: 0 auto; padding: 18px 16px 28px; border-top: 1px solid var(--sr-ftr-line); display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--sr-ftr-muted); }
.sr-ftr-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 900px) { .sr-ftr-in { grid-template-columns: 1fr 1fr; } .sr-ftr-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .sr-ftr-in { grid-template-columns: 1fr; } }

/* Переключатель темы: в светлой показываем луну (перейти в тёмную), в тёмной — солнце. */
.sr-theme-btn .sr-i-sun { display: none; }
html[data-theme="dark"] .sr-theme-btn .sr-i-sun { display: block; }
html[data-theme="dark"] .sr-theme-btn .sr-i-moon { display: none; }

/* Блок «Средний рейтинг» на карточке компании: белый текст на оранжевом (#FFB02E) не читался —
   тёмный текст в обеих темах. */
.rating-number { color: #2a1a00 !important; }
.rating-number .rating-desc { color: rgba(42, 26, 0, .78) !important; }

/* Заголовок инструмента на телефоне: иконка над заголовком, а не сбоку от двух строк. */
@media (max-width: 600px) {
    .sr-tools .sr-toolhead { flex-direction: column; gap: 10px; }
    .sr-tools .sr-toolhead h1 { font-size: 26px; }
}