/* ===========================
   WholeBing — Core Styles (unified)
   v1.3.3 — clear footer with no color, text in one line
   =========================== */

:root {
  /* Fonts */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Colors */
  --accent: #a37bde;
  --accent-contrast: #ffffff;
  --accent-pink: #ff6ebd;
  --text: #000000;
  --muted: #555555;

  /* Backgrounds */
  --page-gradient: linear-gradient(145deg, #ff85c1 10%, #c08ef0 30%, #7ef0e3 60%, #63e2d2 100%);

  /* Surfaces */
  --card-bg: rgba(255, 255, 255, 0.92);
  --card-border: 2px solid rgba(0, 0, 0, 0.06);
  --shadow: 0 8px 25px rgba(58, 41, 84, 0.15);

  /* Scale */
  --pad: 20px;
  --lh: 1.6;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --radius-lg: 24px;

  /* Sector colors */
  --color-safety: #6de0d2;
  --color-self: #32d1f0;
  --color-love: #ff6ebd;
  --color-freedom: #ffc66e;
  --color-source: #b399d4;
}

/* ===== Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--fs-16);
  line-height: var(--lh);
  color: var(--text);
  min-height: 100vh;
  background: var(--page-gradient);
  background-size: cover;
  display: flex;
  flex-direction: column;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.92; }
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--pad); }

/* ===== Header ===== */
.site-header{ position:relative; z-index:10; padding:16px 0; background:transparent; }
.site-header__bar{
  display:flex; align-items:center; gap:16px;
  white-space:nowrap; overflow-x:auto; flex-wrap:nowrap;
}
.site-header__bar::-webkit-scrollbar{ display:none; }
.site-header__left, .site-header__right{
  display:flex; align-items:center; gap:18px; min-width:0;
}
.site-logo{ height:40px; }
.site-header__left{ flex:1 1 auto; }
.site-header__right{ flex:0 0 auto; margin-left:auto; }
.site-nav{ display:flex; gap:18px; align-items:center; }
.site-nav a, .header-link{
  font-weight:var(--weight-regular); font-size:.95rem; letter-spacing:.01em;
}

/* ===== Language Switcher ===== */
.lang{ display:flex; gap:6px; align-items:center; }
.lang__btn{
  background:transparent; border:none; cursor:pointer;
  padding:2px 8px; border-radius:8px;
  font: var(--weight-medium) .9rem/1 var(--font-sans);
  color:var(--text); transition:.2s;
}
.lang__btn:hover, .lang__btn.is-active{ background:#000; color:#fff; }

/* ===== Cards / Boxes ===== */
.card, .intro-box, .info-box, .practice-container{
  background:var(--card-bg); border:var(--card-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); backdrop-filter:blur(10px);
}
.card-body{ padding:24px; }
.card--center .card-body, .error-card .card-body{ text-align:center; }
.card--center .btn, .error-card .btn{ margin-left:auto; margin-right:auto; }
.card h2, .card h3, .card .subtitle,
.intro-box h2, .intro-box h3, .intro-box .bold-subtitle,
.info-box h2, .info-box h3, .info-box .bold-subtitle,
.practice-container h2, .practice-container h3, .practice-container .bold-subtitle{
  color:var(--accent); font-weight:var(--weight-semibold);
}
.card strong, .intro-box strong, .info-box strong, .practice-container strong{
  color:var(--accent); font-weight:var(--weight-semibold);
}

/* ===== Buttons ===== */ 
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border:none; border-radius:999px;
  font:var(--weight-medium) var(--fs-18)/1 var(--font-sans);
  cursor:pointer; transition:transform .15s, box-shadow .2s, background .15s, filter .15s;
  box-shadow:0 6px 16px rgba(0,0,0,.12); color:var(--text); background:#fff;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.15); }
.btn:active{ transform:translateY(0); }
.btn--accent, .btn--pink{ background:var(--accent); color:var(--accent-contrast); }
.btn--accent:hover, .btn--pink:hover{ background:var(--accent-pink)!important; }
.btn--accent:active, .btn--pink:active{ background:#ff5fb3!important; }

/* ===== Highlight Box ===== */
.highlight-box{
  background:rgba(255,255,255,0.85); color:var(--text);
  border-radius:22px; padding:22px 26px; box-shadow:0 6px 20px rgba(0,0,0,.1);
  backdrop-filter:blur(6px);
}
.highlight-box .bold-subtitle{ color:var(--accent); }

/* ===== Footer (final clean one-line) ===== */
.site-footer{
  margin-top:auto;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  color:var(--text);
  padding:12px 0;
  font-size:.95rem;
  text-align:center;
}

.site-footer .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0 var(--pad);
  background:transparent;
}

.site-footer__row{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  line-height:1.3;
  margin:0;
}

.site-footer__row > * + *{
  border-left:1px solid rgba(0,0,0,.25);
  padding-left:12px;
}

.site-footer__row a,
.site-footer__row span{
  display:inline-flex !important;
  white-space:nowrap !important;
  word-break:keep-all;
}

.site-footer__social{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:0;
}

.site-footer__social img{
  width:20px; height:20px; transition:transform .2s;
}
.site-footer__social a:hover img{ transform:scale(1.1); }

/* пробел после года в копирайте */
.site-footer__row #year {
  margin-right: .35ch;             /* небольшой отступ */
}
.site-footer__row #year::after {
  content: "\00A0";                /* неразрывный пробел на всякий */
}

/* iOS: не увеличивать шрифт и не ломать строку */
html{-webkit-text-size-adjust:100%;}

/* mobile: строго одна строка, без column */
@media (max-width:640px){
  .site-footer__row{
    flex-direction:row !important;
    gap:10px !important;
  }
}

/* ===== Play-page helpers ===== */
.practice-nav, .play-nav, .bottom-nav{
  position:sticky;
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:5;
  padding-bottom:env(safe-area-inset-bottom);
}
.page--play .practice-container{ margin-bottom:18px; }
.safe-bottom{ padding-bottom:calc(20px + env(safe-area-inset-bottom)); }

/* ===== Sector themes (optional per page) ===== */
body.page--play.safety{
  --accent: var(--color-safety);
  --page-gradient: linear-gradient(135deg,#32ccff 0%,#6de0d2 100%);
}
body.page--play.self{
  --accent: var(--color-self);
  --page-gradient: linear-gradient(135deg,#32d1f0 0%,#a7e4ff 100%);
}
body.page--play.love{
  --accent: var(--color-love);
  --page-gradient: linear-gradient(135deg,#ff6ebd 0%,#ffc1e5 100%);
}
body.page--play.freedom{
  --accent: var(--color-freedom);
  --page-gradient: linear-gradient(135deg,#ffc66e 0%,#ff9955 100%);
}
body.page--play.source{
  --accent: var(--color-source);
  --page-gradient: linear-gradient(135deg,#b399d4 0%,#a37bde 100%);
}

/* ===== A11y ===== */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ===== PWA safe-area fixes (iOS standalone & notched) ===== */
:root{
  /* Фолбэки = 0, чтобы на десктопе ничего не менялось */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Добавляем «защиту» сверху хедеру */
.site-header{
  padding-top: calc(16px + var(--safe-top)) !important;
}

/* Добавляем «защиту» снизу футеру (и делаем его немного компактным) */
.site-footer{
  padding-top: 8px !important;
  padding-bottom: calc(10px + var(--safe-bottom)) !important;
}

/* Если используете верхний компактный .top-nav на play-странице */
.top-nav{
  padding-top: calc(10px + var(--safe-top)) !important;
}

/* Все плавающие / фиксированные снизу кнопки — приподнимаем над сундуком iOS */
.practice-nav,
.bottom-nav,
.play-nav{
  /* если они position:sticky — им не нужен bottom. Для fixed — нужен: */
  bottom: calc(16px + var(--safe-bottom)) !important;
  padding-bottom: var(--safe-bottom) !important;
}

.ai-chat-button,       /* Butterfly */
#reset-float-btn{      /* Reset */
  bottom: calc(24px + var(--safe-bottom)) !important;
}

/* На очень узких экранах чуть уменьшим шрифт футера, чтобы точно в 1 строку */
@media (max-width: 360px){
  .site-footer__row{ font-size: .9rem; }
}
/* === Header logo fix (global) ========================================== */
/* не даём флексу сжимать логотип и запрещаем растягивание по ширине */
.site-header .site-logo{
  height: 28px;               /* аккуратная высота для мобилы */
  width: auto !important;     /* ширина — по пропорциям картинки */
  max-width: none;            /* обойти глобальное img{max-width:100%} */
  flex: 0 0 auto;             /* не сжимать в флекс-контейнере */
  object-fit: contain;
  display: block;
}

/* на всякий — чтобы именно ссылка с логотипом тоже не сжималась */
.site-header__left > a:first-child{
  flex: 0 0 auto;
}

/* навигацию можно сжимать/скроллить, но не давить логотип */
.site-header__bar{
  align-items: center;
  gap: 12px;
  overflow-x: auto;
}
.site-nav{
  display: flex;
  gap: 18px;
  align-items: center;
  white-space: nowrap;
  min-width: 0;               /* чтобы текст в меню не выталкивал логотип */
}

/* чуть крупнее логотип на шире экранах */
@media (min-width: 480px){
  .site-header .site-logo{ height: 32px; }
}
@media (min-width: 1024px){
  .site-header .site-logo{ height: 36px; }
}