/* ==========================================================
   ЗАКРИТЕ СУСПІЛЬСТВО ТА ЙОГО ДРУЗІ — спільні стилі сайту
   Підключається на кожній сторінці разом з локальними стилями.
   ========================================================== */

:root{
  --purple-top:#0a0a0c;
  --purple-mid:#22103a;
  --bg-bottom:#4a1a72;
  --bg:#160b22;
  --bg-raised:#20122f;
  --paper:#ece7de;
  --paper-dim:#c9c2b4;
  --red:#cf2020;
  --red-dark:#7a1010;
  --muted:#9a8fae;
  --line:rgba(236,231,222,0.16);
  --display-font:'Press Start 2P',cursive;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:linear-gradient(180deg,var(--purple-top) 0%,var(--purple-mid) 42%,var(--bg-bottom) 100%) fixed;
  color:var(--paper);
  font-family:'Tektur',ui-monospace,'Courier New',monospace;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:var(--paper);}
a{color:inherit;}

/* ===== ШАПКА: навігація зліва, лого по центру, (опційно) категорії справа ===== */
.site-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:30px 20px 16px;
}
.logo-wrap{
  position:relative;
  display:inline-block;
  justify-self:center;
}
.site-logo-link{
  display:inline-block;
  line-height:0;
}
.site-logo-link img{
  width:min(200px,50vw);
  height:auto;
  aspect-ratio:640/269;
  object-fit:contain;
  display:block;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:36px;
}
.site-nav-left{justify-self:start;}
.site-nav-right{justify-self:end;}
/* меню по центру лого, але трохи вище — візуальний центр лого вище за геометричний */
@media (min-width:761px){
  .site-nav{position:relative;top:-5px;}
}
.site-nav a{
  text-decoration:none;
  color:var(--paper-dim);
  font-size:13px;
  letter-spacing:0.3px;
  padding:8px 12px;
  white-space:nowrap;
}
.site-nav a:first-child{padding-left:0;}
.site-nav a:hover{color:var(--paper);}
.site-nav a.active{color:var(--red);}

/* ===== Кнопка "Підтримка" — помітний акцент праворуч від лого ===== */
.support-btn{
  position:absolute;
  top:calc(50% - 5px);
  left:100%;
  text-decoration:none;
  transform:translateY(-50%);
  margin-left:16px;
  white-space:nowrap;
  font-family:inherit;
  font-size:13px;
  letter-spacing:0.3px;
  background:transparent !important;
  color:var(--red) !important;
  border:1.5px solid var(--red) !important;
  border-radius:3px;
  padding:7px 12px !important;
  font-weight:600;
  line-height:1.2;
  animation:supportPulse 2.6s ease-in-out infinite;
}
.support-btn:hover{background:var(--red-dark) !important;border-color:var(--red-dark) !important;color:var(--paper) !important;}
.support-btn.active{background:var(--red-dark) !important;border-color:var(--red-dark) !important;color:var(--paper) !important;}
@keyframes supportPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(207,32,32,0.7);}
  50%{box-shadow:0 0 0 9px rgba(207,32,32,0);}
}
@media (prefers-reduced-motion:reduce){
  .support-btn{animation:none;}
}

/* ===== КОНТЕНТ ===== */
.site-content{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px 16px;
}

.site-footer{
  max-width:1200px;
  margin:0 auto;
  padding:14px 20px 28px;
  color:var(--muted);
  font-size:12px;
}
.site-footer a{color:var(--red);}

/* ===== Заголовок і заглушка для сторінок без наповнення ===== */
.page-title{
  font-family:var(--display-font);
  font-weight:normal;
  font-size:clamp(18px,3vw,24px);
  text-transform:uppercase;
  letter-spacing:0.3px;
  border-bottom:2px solid var(--paper);
  padding-bottom:12px;
  margin:0px 0 24px;
}
.placeholder-block{
  padding:0;
  max-width:520px;
  color:var(--paper-dim);
  font-size:13.5px;
}

/* ===== Мобільна версія: шапка стає колонкою ===== */
@media (max-width:760px){
  .site-header{
    grid-template-columns:1fr;
    justify-items:center;
    gap:12px;
    padding:18px 0 12px;
  }
  .site-nav{
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    justify-content:flex-start;
    padding:0 20px;
  }
  .site-nav::-webkit-scrollbar{display:none;}
  .site-nav-left,.site-nav-right{justify-self:stretch;}
  .logo-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .support-btn{
    position:static;
    transform:none;
    margin-left:0;
  }
}

/* Прихований візуально, але доступний для пошукових систем і скрінрідерів */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}