/* /assets/theme.css — ЕДИНАЯ ТЕМА */

/* ---------- Переменные бренда ---------- */
:root{
  --brand-bg:#fcedd0;
  --brand-primary:#df995b;
  --brand-secondary:#496f82;
  --brand-text:#1f2937;
  --brand-muted:rgba(0,0,0,.06);

  /* Совместимость со старой разметкой */
  --bg:var(--brand-bg);
  --pri:var(--brand-primary);
  --sec:var(--brand-secondary);
  --txt:var(--brand-text);
}

/* ---------- База ---------- */
html,body{height:100%;}
body{
  background:var(--brand-bg);
  color:var(--brand-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand-secondary);text-decoration:none;}
a:hover{opacity:.9;}

/* selection */
::selection{background:color-mix(in srgb, var(--brand-primary) 35%, white);color:#111;}
::-moz-selection{background:color-mix(in srgb, var(--brand-primary) 35%, white);color:#111;}

/* ---------- Карточки / рамки ---------- */
.brand-card,
.card{
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(1.08) blur(6px);
  border:1px solid rgba(73,111,130,.18);
  border-color:color-mix(in srgb, var(--brand-secondary) 18%, transparent);
}
.bd{
  border:1px solid rgba(73,111,130,.18);
  border-color:color-mix(in srgb, var(--brand-secondary) 18%, transparent);
}

/* ---------- Кнопки ---------- */
.btn-primary, .btn-pri{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-primary); color:#fff;
  box-shadow:0 12px 22px rgba(223,153,91,.25);
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-primary:hover, .btn-pri:hover{ transform:translateY(-1px); }
.btn-primary:active, .btn-pri:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(223,153,91,.25); }

.btn-outline, .btn-ol{
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.01); color:var(--brand-secondary);
  border:1px solid var(--brand-secondary);
  transition:background .15s ease, color .15s ease, opacity .2s ease;
}
.btn-outline:hover, .btn-ol:hover{ background:color-mix(in srgb, var(--brand-secondary) 6%, white); }
.btn-primary, .btn-pri, .btn-outline, .btn-ol{ border-radius:12px; padding:.7rem 1rem; font-weight:600; }

/* ---------- Бейджи / kbd ---------- */
.badge{
  background:var(--brand-muted);
  color:var(--brand-secondary);
  border:1px solid color-mix(in srgb, var(--brand-secondary) 12%, transparent);
  display:inline-flex; align-items:center; gap:.35rem;
}
.kbd{
  padding:.15rem .45rem;
  border:1px solid rgba(0,0,0,.15);
  border-bottom-width:2px;
  border-radius:6px;
  background:#fff;
  font:600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

/* ---------- Хедер / Футер ---------- */
header, .site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  color: var(--brand-text);
  background: rgba(255,255,255,.60);
  -webkit-backdrop-filter: saturate(1.05) blur(8px);
  backdrop-filter: saturate(1.05) blur(8px);
  isolation: isolate;
}


/* обычные ссылки в хедере — КРОМЕ кнопок */
header a:not(.btn-primary):not(.btn-outline),
.site-header a:not(.btn-primary):not(.btn-outline),
header a:not(.btn-primary):not(.btn-outline):visited,
.site-header a:not(.btn-primary):not(.btn-outline):visited{
  color: var(--brand-text) !important;
}


/* мобильное меню из header.html */
#mobile-menu .menu-link{ color:var(--brand-text); }

/* Футер как был */
footer, .site-footer{
  color:var(--brand-text);
  border-top:1px solid color-mix(in srgb, var(--brand-secondary) 12%, transparent);
}

/* ---------- Декор ---------- */
.blob-sec{ background:var(--brand-secondary); filter:blur(30px); opacity:.4; }
.blob-pri{ background:var(--brand-primary);  filter:blur(30px); opacity:.4; }

/* ---------- Режимы удобства ---------- */
body.focus-mode .brand-card, body.focus-mode .card{ box-shadow:none !important; background:rgba(255,255,255,.9); }
body.focus-mode .badge{ background:#fff; }
body.focus-mode .fixed, body.focus-mode .absolute{ filter:grayscale(.1) opacity:.85; }

/* === Misha WOW popup (slide-in справа, фиксирован) === */
#misha-pop{
  position: fixed;
  right: 0px;
  bottom: calc(0px + env(safe-area-inset-bottom, 0px));
  z-index: 60;                    /* выше мобильного CTA (z-40), ниже шапки */
  line-height: 0;
  /* старт: полностью за правым краем и слегка ниже */
  transform: translateX(120%) translateY(8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}

/* появление — «выпрыгивает» справа */
#misha-pop.show{
  transform: translateX(0) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* якорим крестик к самому изображению (а не гадать ширину) */
#misha-pop-link{
  position: relative;             /* базис для абсолютного крестика */
  display: inline-block;
}

#misha-pop-img{
  display: block;
  width: 320px;                   /* подгони при желании */
  max-width: 42vw;
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18));
  border-radius: 12px;
}

/* Кнопка закрытия — чуть выше угла и по центру внутри кружка */
#misha-pop-close{
  position: absolute;
  top: -10px;                     /* «чуть выше» */
  right: 290px;                   /* у самого угла карточки */
  width: 28px;
  height: 28px;
  border-radius: 9999px;

  /* учёл твою настройку полупрозрачного фона */
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  color: var(--brand-text);

  /* идеально центрируем иконку/? */
  display: grid;
  place-items: center;
  line-height: 0;                 /* чтобы текст не «плавал» */
  backdrop-filter: saturate(1.05) blur(2px); /* можно убрать, если не нужно стекло */
}

/* hover-микрообратная связь */
#misha-pop-close:hover{
  border-color: rgba(0,0,0,.2);
  transform: translateY(-1px);
}

/* Мобилки — компактим и поднимаем повыше, чтобы не заехать на нижний CTA */
@media (max-width: 768px){
  #misha-pop{
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    transform: translateX(120%) translateY(0) scale(.98);
  }
  #misha-pop-img{ width: 160px; max-width: 55vw; }
}

/* ---------- Утилиты ---------- */
.text-brand-sec{ color:var(--brand-secondary); }
.text-brand-pri{ color:var(--brand-primary); }
.bg-brand-sec{ background:var(--brand-secondary); }
.bg-brand-pri{ background:var(--brand-primary); }
:where(.btn-primary,.btn-outline,.btn-pri,.btn-ol,.badge){ transition:.2s ease; }