/* Общие стили сайта «Слышно»: шрифты, шапка (меню и переключатель языка),
   плашка согласия на счётчики, доступность. Подключается ПОСЛЕ встроенного
   <style> страницы и поэтому может уточнять его правила.

   Адрес файла в страницах несёт отпечаток (?v=...), его ставит i18n/build.mjs:
   после правки этого файла запустите сборку, иначе браузеры возьмут старый
   из долгого кэша. */

/* ── Шрифты ────────────────────────────────────────────────────────────────
   Inter и Manrope лежат на своём сервере (лицензия OFL, тексты - рядом с
   файлами в fonts/). Раньше их отдавал Google Fonts: лишнее соединение
   блокировало первый показ текста примерно на секунду и сообщало Google адрес
   каждого посетителя. Файлы вариативные: один файл на письменность покрывает
   все веса. unicode-range - чтобы браузер брал только ту письменность, что
   есть на странице. Имена файлов не меняются; если шрифт обновится, файл
   нужно переименовать (сервер кэширует их на год). */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/manrope-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Доступность ───────────────────────────────────────────────────────── */

/* Текст только для экранного диктора. */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* «К содержанию» - первая остановка Tab. Вне фокуса убрана за край экрана. */
.skip{
  position:absolute;inset-inline-start:12px;top:-80px;z-index:200;
  padding:11px 18px;border-radius:12px;
  background:#35d6c2;color:#052018;
  font:700 15px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-decoration:none;
}
.skip:focus{top:12px}

/* Ссылку внутри текста должно быть видно и без цвета: бирюзовая ссылка рядом
   с серо-зелёным текстом отличалась от него на 1,1:1. */
main p a,main li a,footer .legal a,footer p a,.updated a{
  text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.2em;
}
a.btn,a.tier-cta{text-decoration:none}

/* Ссылки подвала - цель для пальца не ниже 24 px (было 18-24). */
footer .row a,footer .row .cookie-link,.wn-more a{display:inline-block;padding:6px 0}

/* ── Шапка: меню и переключатель языка ─────────────────────────────────── */

.nav .links{
  margin-left:0;margin-inline-start:auto;
  /* Страховка для длинных переводов: меню, которому не хватило места,
     прокручивается внутри себя, а не наезжает на соседей. Поля - чтобы
     прокрутка не обрезала рамку фокуса у ссылок. */
  min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;
  padding:6px 4px;
}
.nav .links::-webkit-scrollbar{display:none}

.i18n-switch{
  position:relative;flex:0 0 auto;
  font:500 13px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.i18n-switch>summary{
  list-style:none;cursor:pointer;display:block;
  min-height:36px;padding:9px 13px;border-radius:999px;
  border:1px solid #1e3438;background:#102428;color:#b9d8d3;
  max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.i18n-switch>summary::-webkit-details-marker{display:none}
.i18n-switch>summary:hover,.i18n-switch[open]>summary{border-color:#27c6b5;color:#70f0da}
.i18n-switch>nav{
  position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:60;
  display:flex;flex-direction:column;min-width:200px;
  max-height:min(70vh,560px);overflow:auto;padding:6px;
  border-radius:12px;border:1px solid #1e3438;background:#0c2024;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.95);
}
.i18n-switch>nav a{padding:9px 10px;border-radius:8px;color:#b9d8d3;text-decoration:none}
.i18n-switch>nav a:hover{background:#182e34;color:#eafffb;text-decoration:none}
.i18n-switch>nav a[aria-current]{color:#70f0da}
/* В шапке без меню (страница заказа) переключатель сам уходит к краю. */
.brand+.i18n-switch{margin-inline-start:auto}

/* Документы (политика, оферта): у них нет меню, переключатель стоит своей
   строкой над заголовком. */
.doc-bar{display:flex;justify-content:flex-end;margin:0 0 18px}

/* Кнопка меню. В разметке она скрыта (hidden) и появляется, когда site.js
   готов её обслуживать: без скриптов мёртвой кнопки не будет. */
.menu-btn{
  display:none;flex:0 0 auto;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;margin-inline-start:auto;
  border-radius:12px;border:1px solid #1e3438;background:#102428;color:#eafffb;
  cursor:pointer;
}
.menu-btn svg{display:block;width:22px;height:22px}
.menu-btn[aria-expanded="true"]{border-color:#27c6b5;color:#70f0da}

@media(max-width:860px){
  .nav{position:relative}
  .menu-btn:not([hidden]){display:inline-flex}
  /* Пока кнопки нет, к правому краю прижимается сам переключатель. */
  .menu-btn[hidden]+.links+.i18n-switch{margin-inline-start:auto}
  .nav .links{
    display:none;position:absolute;inset-inline:0;top:100%;z-index:50;
    flex-direction:column;gap:2px;margin:0;padding:8px 14px 14px;
    background:#071719;border-bottom:1px solid #1e3438;
    box-shadow:0 24px 40px -24px rgba(0,0,0,.95);
    white-space:normal;overflow:auto;max-height:calc(100vh - 64px);
    font-size:16px;
  }
  .nav .links.open{display:flex}
  .nav .links a{display:block;padding:12px 8px;border-radius:10px}
  .nav .links a:hover{background:#102428}
}

/* ── Плашка согласия на счётчики ───────────────────────────────────────── */

.consent{
  position:fixed;inset-inline:0;bottom:0;z-index:90;padding:12px;
  pointer-events:none; /* по краям плашки страница остаётся кликабельной */
}
.consent[hidden]{display:none}
.consent-box{
  pointer-events:auto;max-width:780px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  padding:16px 18px;border-radius:16px;
  border:1px solid #27c6b5;background:#0c2024;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.95);
  font-size:14.5px;line-height:1.5;
}
.consent-text{flex:1 1 320px;margin:0;color:#b9d8d3}
.consent-text strong{display:block;margin-bottom:2px;color:#eafffb;font-size:15.5px}
.consent-actions{display:flex;gap:10px;flex:0 0 auto}
/* Обе кнопки одного вида: отказаться так же просто, как согласиться. */
.consent-btn{
  min-height:44px;padding:10px 20px;border-radius:12px;
  border:1px solid #27c6b5;background:#102428;color:#eafffb;
  font:inherit;font-weight:700;cursor:pointer;
}
.consent-btn:hover{background:#182e34}
@media(max-width:560px){
  .consent{padding:8px}
  .consent-actions{flex:1 1 100%}
  .consent-btn{flex:1 1 0}
}
/* На странице покупки плашка стоит в потоке, над подвалом: закреплённая внизу
   экрана, она могла бы закрыть кнопку оплаты. */
body.pay .consent{position:static;padding:0 22px;margin:8px 0 34px}

/* «Настройки cookie» в подвале - кнопка в виде ссылки. */
.cookie-link{
  background:none;border:0;margin:0;padding:0;cursor:pointer;
  font:inherit;color:var(--muted,#b9d8d3);
  text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.2em;
}
.cookie-link:hover{color:#70f0da}

/* ── Мелочи ────────────────────────────────────────────────────────────── */

/* Пометка «приложение пока на русском» нужна только переводам: в русской
   версии она сообщала бы очевидное. */
.lang-note{font-size:14.5px;color:var(--muted,#b9d8d3)}
html[data-locale="ru"] .lang-note{display:none}

/* Широкая таблица прокручивается внутри своей рамки, а не раздвигает
   страницу; длинные имена разрешений переносятся. */
.table-wrap{max-width:100%;overflow-x:auto;margin:14px 0;-webkit-overflow-scrolling:touch}
.table-wrap table{margin:0}
.table-wrap code{overflow-wrap:anywhere;word-break:break-word}

@media print{.i18n-switch,.menu-btn,.consent,.skip{display:none}}