/* theme.css — единая палитра klue.by для всех трёх групп страниц.
 *
 * Группа A: /            -> style.css
 * Группа B: /p/*         -> p-style.css
 * Группа C: /w /f /week/* и хабы -> инлайновый <style> в шаблоне
 *
 * Файл подключается ПОСЛЕ остальных таблиц (последний <link> в <head>),
 * поэтому его :root перекрывает палитры style.css и p-style.css без
 * необходимости вычищать их оттуда. Правила layout у групп не трогаем —
 * здесь только переменные.
 *
 * Существующие тёмные палитры НЕ удаляются: они остаются в style.css и
 * p-style.css. Здесь они продублированы, чтобы ручное переключение
 * (body.dark) и автопереключение (prefers-color-scheme) давали ОДИН И ТОТ ЖЕ
 * результат. Раньше они расходились: media-query давал #122130/#5ec6f0,
 * а body.dark в style.css — #1e1e1e/#4fc3f7.
 */

:root {
  color-scheme: light;

  /* тёплая бумага вместо чистого белого */
  --surface:        #fffefb;
  --surface-alt:    #f2f0ea;
  --surface-raised: #ffffff;

  --text:           #1f2429;
  --text-secondary: #5c6670;

  --primary:        #01579b;
  --primary-light:  #4fc3f7;
  --primary-hover:  #01497f;
  --primary-bg:     rgba(1,87,155,.07);
  --primary-ink:    #01579b;

  /* Контраст 5.31:1 на --surface и 4.70:1 на --surface-alt.
   * ТЗ предлагало #a8620a — оно давало 4.17:1 на --surface-alt, а там
   * акцент реально встречается (.bite-month в p-style.css: цвет акцента
   * лежит на фоне --surface-alt). Значение из ТЗ не проходило критерий
   * самого ТЗ (>=4.5:1 на своём фоне), поэтому затемнено на 5.5%.
   * Старые #e08a1e / #ff8f00 были хуже. */
  --accent:         #9c5b09;
  --accent-bg:      rgba(156,91,9,.10);

  --border:         rgba(31,36,41,.10);
  --border-strong:  rgba(31,36,41,.18);

  --shadow:         0 1px 2px rgba(31,36,41,.05), 0 4px 12px rgba(31,36,41,.05);
  --shadow-hover:   0 4px 20px rgba(31,36,41,.10);

  /* Цвета индекса клёва (bite-model.js красит текст через них).
     Светлая тема: тёмные оттенки (проходят WCAG на светлом фоне). */
  --idx-excellent:  #1b5e20;
  --idx-good:       #2e7d32;
  --idx-fair:       #ef6c00;
  --idx-weak:       #d84315;
  --idx-bad:        #b71c1c;

  --radius:    12px;
  --radius-sm:  8px;
  --radius-lg: 16px;

  --font:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ac: 'Play', var(--font);
  --measure: 74ch;
}

/* Автопереключение по системной теме. Значения взяты ДОСЛОВНО из
 * style.css (медиазапрос) — переносим, а не изобретаем. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
    --surface:        #122130;
    --surface-alt:    #0b1620;
    --surface-raised: #16242f;
    --text:           #e6f0f5;
    --text-secondary: #93aec1;
    --primary:        #5ec6f0;
    --primary-light:  #8ad6f7;
    --primary-hover:  #8ad6f7;
    --primary-bg:     rgba(94,198,240,.12);
    --primary-ink:    #5ec6f0;
    --accent:         #f0a53e;
    --accent-bg:      rgba(240,165,62,.14);
    --border:         rgba(140,195,220,.16);
    --border-strong:  rgba(140,195,220,.30);
    --shadow:         0 2px 12px rgba(0,0,0,.45);
    --shadow-hover:   0 10px 34px rgba(0,0,0,.6);

    /* Цвета индекса клёва, тёмная версия: светлые оттенки
       (контраст ≥6:1 на #0b1620/#122130). */
    --idx-excellent:  #66bb6a;
    --idx-good:       #a5d6a7;
    --idx-fair:       #ffb74d;
    --idx-weak:       #ff8a65;
    --idx-bad:        #ef9a9a;
  }
}

/* Ручное переключение. Те же значения, что и в автозапросе выше. */
body.dark {
  color-scheme: dark;
  --surface:        #122130;
  --surface-alt:    #0b1620;
  --surface-raised: #16242f;
  --text:           #e6f0f5;
  --text-secondary: #93aec1;
  --primary:        #5ec6f0;
  --primary-light:  #8ad6f7;
  --primary-hover:  #8ad6f7;
  --primary-bg:     rgba(94,198,240,.12);
  --primary-ink:    #5ec6f0;
  --accent:         #f0a53e;
  --accent-bg:      rgba(240,165,62,.14);
  --border:         rgba(140,195,220,.16);
  --border-strong:  rgba(140,195,220,.30);
  --shadow:         0 2px 12px rgba(0,0,0,.45);
  --shadow-hover:   0 10px 34px rgba(0,0,0,.6);

  /* Цвета индекса клёва, тёмная версия — те же значения, что сверху. */
  --idx-excellent:  #66bb6a;
  --idx-good:       #a5d6a7;
  --idx-fair:       #ffb74d;
  --idx-weak:       #ff8a65;
  --idx-bad:        #ef9a9a;
}

/* ============================================================
   Шаг 4. Единый хедер и футер для всех трёх групп.
   Правила намеренно размечены под .site-head / .site-foot,
   а не под .sp-head / .footer: у группы A класс .footer связан
   с её собственными правилами в style.css и с SPA-переключателем
   show(), поэтому трогать его нельзя.
   ============================================================ */

.site-head{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:60;
}
.site-head-in{
  max-width:1200px;margin:0 auto;padding:10px 16px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.site-head a{
  color:var(--text);text-decoration:none;font-size:14px;font-weight:500;
}
.site-head a:hover{color:var(--primary)}
.site-head .site-logo{
  font-weight:800;font-size:17px;color:var(--primary);white-space:nowrap;
}
.site-nav{display:flex;gap:14px;flex-wrap:wrap;flex:1 1 auto}
/* Тап-таргет: без паддинга ссылки навигации — 17 px по высоте, это ниже
   минимума 22 px, который смотрит audit_layout. Паддинг 4px сверх/снизу
   даёт 25 px и не меняет высоту шапки: ряд .site-cta и так выше (≈31 px). */
.site-nav a{padding:4px 0}
.site-nav a.is-current{color:var(--primary);font-weight:700}
.site-cta{
  background:var(--primary-bg);color:var(--primary-ink);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:6px 12px;font-weight:600;white-space:nowrap;
}
.site-cta:hover{background:var(--primary);color:var(--surface);border-color:var(--primary)}
.site-theme{
  background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:15px;line-height:1;padding:6px 8px;cursor:pointer;color:var(--text);
}
.site-theme:hover{border-color:var(--primary)}

.site-foot{
  background:var(--surface);border-top:1px solid var(--border);
  padding:40px 20px 24px;margin-top:40px;
}
.site-foot .footer-inner{max-width:1200px;margin:0 auto}
.site-foot .footer-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:32px;margin-bottom:24px;
}
.site-foot .footer-col h3{
  color:var(--text);font-size:0.9em;font-weight:700;margin-bottom:12px;
  text-transform:uppercase;letter-spacing:0.05em;
}
.site-foot .footer-col a{
  display:block;color:var(--text-secondary);text-decoration:none;
  font-size:0.9em;line-height:1.9;
}
.site-foot .footer-col a:hover{color:var(--primary)}
.site-foot .footer-bottom,
.site-foot .footer-contacts{grid-column:1/-1;text-align:center}
.site-foot .footer-bottom{
  padding-top:20px;border-top:1px solid var(--border);
  color:var(--text-secondary);font-size:0.82em;
}
.site-foot .footer-contacts{color:var(--text-secondary);font-size:0.82em;margin-top:8px}
.site-foot .footer-contacts a{color:var(--primary)}

@media (max-width:900px){
  .site-nav{order:3;width:100%}
  .site-foot .footer-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:600px){
  .site-foot .footer-grid{grid-template-columns:1fr}
}

/* ============================================================
   Тап-таргеты на мобильных (<=900px). Интерактивные элементы
   меньше 44x44 увеличиваются до минимума (Apple/WCAG 2.5.5).
   Инлайн-ссылки внутри текста не трогаем — для них действует
   исключение WCAG 2.5.8 («inline»), а растяжение сломало бы поток.
   ============================================================ */
@media (max-width:900px){
  /* Все размеры ТОЛЬКО с border-box. Иначе min-height:44 включал лишь
     контент, и с padding элементы вырастали до 64–70px (c-style.css не
     задаёт глобального border-box, как style.css) — шапка раздувалась. */

  /* Шапка: ряд 1 — лого, CTA, тема; ряд 2 — меню РОВНО в одну строку
     (пять равных ячеек, каждая ~44px по высоте и ~60px по ширине).
     Селектор .site-head .site-logo — потому что базовое правило то же
     (0,2,0); без .site-head наш font-size проигрывает по специфичности. */
  .site-head-in{gap:8px;padding:8px 14px}
  .site-nav{gap:6px;flex-wrap:nowrap}
  .site-nav a{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;
    display:inline-flex;align-items:center;min-height:44px;padding:10px 2px;
    font-size:13px;box-sizing:border-box}
  .site-head .site-logo{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;box-sizing:border-box;font-size:15px;white-space:nowrap}
  .site-cta{display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;font-size:13px;box-sizing:border-box;white-space:nowrap}
  .site-theme,.nav-toggle{min-width:44px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}

  /* футер: ссылки-разделы колонок */
  .site-foot .footer-col a{display:flex;align-items:center;min-height:44px;padding:8px 0;line-height:1.3;box-sizing:border-box}

  /* FAQ-аккордеон: display не меняем, чтобы сохранить маркер-стрелку */
  summary{min-height:44px;padding:9px 0;box-sizing:border-box}

  /* чипсы рыб на карточках водоёмов: растим «пилюлю» + тап-таргет ссылки */
  .chips a span{padding:14px 14px}
  .chips a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}

  /* сетки карточек (где ловить, соседи, каталоги) */
  .grid a{display:flex;align-items:center;min-height:44px;padding:12px;box-sizing:border-box}

  /* кнопки: сезоны, фильтры, «Разделы», «В избранное» */
  button{min-height:44px}
  .sp-sbtn{min-height:44px;padding:12px 14px;box-sizing:border-box}
  .fav-btn{min-height:44px}

  /* формы: поля ввода и выбора */
  select,input,textarea{min-height:44px;box-sizing:border-box}

  /* каталог рыб /ryby/ */
  .fish-grid a{display:flex;align-items:center;min-height:44px;padding:10px 12px;box-sizing:border-box}
  /* блок «Смотрите также» на /p/* и карточках */
  .sp-rel a{display:inline-flex;align-items:center;min-height:44px;padding:11px 14px;box-sizing:border-box}
  /* хлебные крошки */
  .sp-crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:8px 4px;box-sizing:border-box}
  /* дополнительная навигация раздела */
  .sec-nav-in a{display:inline-flex;align-items:center;min-height:44px;padding:8px;box-sizing:border-box}
  /* компактная строка футера «Для связи…» */
  .footer-contacts a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;vertical-align:middle;box-sizing:border-box}
}

/* Кнопка «наверх»: единый вид на главной (style.css) и на подстраницах.
   На /p/*, /w/*, /f/* раньше её не было вовсе — после длинного скролла
   приходилось тянуть полосу до самого верха. */
.back-top{
  position:fixed;bottom:24px;right:24px;width:46px;height:46px;
  border-radius:50%;background:var(--primary);color:#fff;border:none;
  font-size:1.3em;cursor:pointer;z-index:99;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .25s,transform .25s,box-shadow .25s;
  display:flex;align-items:center;justify-content:center;
}
.back-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-top:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.3)}
@media(max-width:600px){
  .back-top{bottom:calc(18px + env(safe-area-inset-bottom,0px));right:14px}
}

/* ==== site-section-nav (add_section_nav.js) ==== */

html,body{overflow-x:hidden}
.nav{background:var(--surface);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,0.04)}.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:6px;padding:8px 20px;flex-wrap:wrap}.nav-logo{font-size:1.3em;font-weight:800;color:var(--primary);white-space:nowrap;margin-right:12px;letter-spacing:-0.02em}.nav-logo span{color:var(--accent)}.nav-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.nav-separator{width:1px;height:24px;background:var(--border);margin:0 4px}.nav-btn{padding:7px 14px;background:transparent;border:1px solid transparent;color:var(--text-secondary);
border-radius:var(--radius-sm);cursor:pointer;font-size:0.82em;font-weight:500;transition:all 0.2s;white-space:nowrap;font-family:var(--font)}.nav-btn:hover{background:var(--primary-bg);color:var(--primary);border-color:rgba(2,119,189,0.15)}.nav-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.nav-toggle{display:none;padding:8px 12px;background:var(--primary-bg);border:1px solid var(--border);color:var(--primary);border-radius:var(--radius-sm);cursor:pointer;font-size:1.1em}body.dark .nav{border-bottom-color:rgba(255,255,255,0.06);box-shadow:0 1px 3px rgba(0,0,0,0.3)}body.dark .nav-btn{color:var(--text-secondary)}body.dark .nav-btn:hover{background:var(--primary-bg);color:var(--primary)}.nav-item{position:relative}.nav-item .nav-btn{display:flex;align-items:center;gap:4px}.nav-item.open .caret{transform:rotate(180deg)}.nav-drop{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:225px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 12px 32px rgba(0,0,0,0.18);padding:6px;z-index:1500}.nav-item.open .nav-drop{display:block}.nav-drop button{display:block;width:100%;text-align:left;padding:9px 14px;background:none;border:none;color:var(--text);font-size:0.86em;font-family:var(--font);border-radius:6px;cursor:pointer;white-space:nowrap}.nav-drop button:hover{background:var(--primary-bg);color:var(--primary)}.nav-search input{padding:8px 15px;border:1px solid var(--border);background:transparent;color:var(--text);border-radius:20px;font-size:0.82em;font-family:var(--font);width:100%;outline:none;transition:border .2s}.nav-search input:focus{border-color:var(--primary)}h1,h2,h3,.nav-logo,.hero-btn,.hero-badge{font-family:'Play',var(--font)}h2.ph,h2,h3,.nav-logo,.hero-btn,.hero-badge{font-family:'Play',var(--font)}.nav-logo{font-weight:700;letter-spacing:0.3px}.nav{background:rgba(255,255,255,0.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(12,109,168,0.14);box-shadow:0 1px 0 rgba(12,109,168,.05)}body.dark .nav{background:rgba(11,22,32,0.84);border-bottom-color:rgba(140,195,220,.12)}.nav-btn.active{background:linear-gradient(135deg,#0c6da8,#2f9fd6);border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(12,109,168,.4)}body.dark .nav-btn.active{background:linear-gradient(135deg,#16688f,#5ec6f0);color:#06202e}.nav-drop::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}.nav-drop{transition:opacity .12s ease}.msc{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.45)}.msc.open{display:block}.msc-panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);background:var(--surface);box-shadow:-12px 0 32px rgba(0,0,0,0.25);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}.msc.open .msc-panel{transform:translateX(0)}.msc-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:800;font-size:1.05em;flex-shrink:0}.msc-x{width:44px;height:44px;border:none;border-radius:10px;background:var(--surface-alt);color:var(--text);font-size:1.05em;cursor:pointer}.msc-search{padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0}.msc-search input{width:100%;min-height:46px;padding:8px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:16px;font-family:var(--font);outline:none}.msc-search input:focus{border-color:var(--primary)}.msc-body{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}.msc-gr{border-bottom:1px solid var(--border)}.msc-gr-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:8px 16px;background:none;border:none;color:var(--text);font-family:var(--font);font-size:0.95em;font-weight:700;cursor:pointer;text-align:left}.msc-gr.open .msc-gr-btn .car{transform:rotate(180deg)}.msc-gr-btn .car{font-size:0.7em;opacity:.55;transition:transform .2s}.msc-gr-btn .cnt{font-size:0.75em;font-weight:600;color:var(--text-secondary);background:var(--surface-alt);border-radius:999px;padding:2px 10px}.msc-list{display:none;padding:0 0 6px}.msc-gr.open .msc-list{display:block}.msc-list button{display:block;width:100%;text-align:left;min-height:48px;padding:11px 18px;background:none;border:none;color:var(--text-secondary);font-family:var(--font);font-size:0.9em;cursor:pointer;border-radius:0}.msc-list button:active{background:var(--primary-bg);color:var(--primary)}.msc-pop{padding:10px 12px 6px;display:grid;grid-template-columns:1fr 1fr;gap:8px;border-bottom:1px solid var(--border)}.msc-pop .lbl{grid-column:1/-1;font-size:0.7em;font-weight:800;color:var(--text-secondary);letter-spacing:.06em;padding:0 2px 2px}.msc-pop button{min-height:46px;padding:8px 8px;border:1px solid var(--border);border-radius:10px;background:var(--surface-alt);color:var(--text);font-family:var(--font);font-size:0.84em;font-weight:600;cursor:pointer}.msc-pop button:active{background:var(--primary-bg);color:var(--primary);border-color:var(--primary)}.msc-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);flex-shrink:0}.msc-foot button{min-height:46px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-family:var(--font);font-size:0.86em;font-weight:600;cursor:pointer}h2.ph,h2,h3,.nav-logo,.hero-btn,.hero-badge{font-family:'Play',var(--font)}.nav-search{position:relative;flex:0 0 270px;width:270px;margin-left:auto}.msc-search{position:relative}.nav-logo span{ color:var(--accent-ink) }.nav-btn:focus-visible,.tab-btn:focus-visible,.hero-btn:focus-visible, button:focus-visible,a:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--primary-ink);
  outline-offset:2px;
  box-shadow:var(--focus-ring);
}.nav-btn.active,.tab.active{ position:relative }.nav-btn.active::after,.tab.active::after{
  content:''; position:absolute; left:var(--s3); right:var(--s3); bottom:-1px;
  height:3px; background:var(--accent); border-radius:2px 2px 0 0;
}/*PATCH_NAV_CSS_A*/.nav-drop a,.nav-drop button{display:block;width:100%;text-align:left;padding:9px 14px;background:none;border:none;color:var(--text);font-size:0.86em;font-family:var(--font);border-radius:6px;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1.35}.nav-drop a:hover,.nav-drop button:hover{background:var(--primary-bg);color:var(--primary)}.nav-drop a[data-page].active{background:var(--primary);color:#fff;border-color:var(--primary)}.msc-list a,.msc-list button{display:block;width:100%;text-align:left;min-height:48px;padding:11px 18px;background:none;border:none;color:var(--text-secondary);font-family:var(--font);font-size:0.9em;cursor:pointer;border-radius:0;text-decoration:none;line-height:1.35}.msc-list a:hover,.msc-list button:hover{background:var(--primary-bg);color:var(--primary)}.msc-pop a,.msc-pop button{min-height:46px;padding:8px 8px;border:1px solid var(--border);border-radius:10px;background:var(--surface-alt);color:var(--text);font-size:0.84em;font-weight:600;cursor:pointer;text-decoration:none;display:block;text-align:center}.msc-pop a:hover,.msc-pop button:hover{background:var(--primary);color:#fff}.msc-flat,.msc-btn{text-decoration:none}
@media(max-width:900px){
.nav-inner{gap:4px;padding:8px 12px}.nav-group{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,0.1);padding:12px;flex-direction:column;z-index:99}.nav-group.open{display:flex}.nav-toggle{display:block}.nav-separator{display:none}
}

@media(max-width:600px){
.msc-flat{display:block;width:100%;text-align:left;min-height:52px;padding:12px 18px;background:none;border:none;border-bottom:1px solid var(--border);color:var(--text);font-family:var(--font);font-size:0.95em;font-weight:600;cursor:pointer}.msc-flat:active{background:var(--primary-bg);color:var(--primary)}.msc-body .msc-gr:first-child .msc-gr-btn{border-top:1px solid var(--border)}
}

@media (prefers-reduced-motion:no-preference){
.card,.nav-btn,.tab-btn,.hero-btn,.seocat-g a,.seocat a{
    transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease;
  }
}