/* ============================================================
   Стили статей блога (посты с разметкой site-header / post-layout)
   Тёмная тема в цветах сайта — переменные приходят из styles.css
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border, #3A3027);
  padding: 14px 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header nav { display: flex; gap: 20px; }
.site-header nav a { color: var(--secondary, #A2937C); font-size: 0.95rem; }
.site-header nav a:hover { color: var(--text, #EDE2CC); }

.logo {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text, #EDE2CC);
  letter-spacing: 0.5px;
}
.logo span { color: var(--accent, #C4551F); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.post-layout { padding: 40px 0 60px; position: relative; z-index: 1; }
.post-content { max-width: 800px; margin: 0 auto; padding: 0 20px; }

.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  color: var(--secondary, #A2937C);
  font-size: 0.9rem;
}
.back-link { color: var(--secondary, #A2937C); }
.back-link:hover { color: var(--accent, #C4551F); }
.post-category {
  background: rgba(255, 87, 34, 0.12);
  color: var(--accent, #C4551F);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.post-content h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 16px; }
.post-lead { color: var(--secondary, #A2937C); font-size: 1.1rem; margin-bottom: 28px; }
.post-content h2 { font-size: 1.45rem; margin: 36px 0 14px; }
.post-content h3 { font-size: 1.15rem; margin: 28px 0 10px; }
.post-content p { margin: 0 0 16px; color: var(--text, #EDE2CC); }
.post-content ul, .post-content ol { margin: 0 0 16px; padding-left: 22px; color: var(--text, #EDE2CC); }
.post-content li { margin-bottom: 6px; }
.post-content a { color: var(--accent-h, #FF7043); }
.post-content strong { color: var(--text, #EDE2CC); }

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.95rem;
  display: block;
  overflow-x: auto;
}
.post-content th, .post-content td {
  border: 1px solid var(--border, #3A3027);
  padding: 10px 12px;
  text-align: left;
}
.post-content th { background: var(--card, #1C1C1C); }

.faq-block {
  background: var(--card, #1C1C1C);
  border: 1px solid var(--border, #3A3027);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 28px 0;
}

.related-posts { background: var(--surface, #141414); }

.site-footer {
  border-top: 1px solid var(--border, #3A3027);
  padding: 28px 0;
  color: var(--secondary, #A2937C);
  font-size: 0.9rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.site-footer a { color: var(--accent-h, #FF7043); }
.site-footer p { margin: 4px 0; }

/* Блок «Узнать оптовую цену» в конце статьи */
.post-cta{
  background: var(--surface, #1F1915);
  border: 1px solid var(--border, #3A3027);
  border-radius: 12px;
  padding: 24px;
  margin: 36px 0 20px;
  text-align: center;
}
.post-cta b{
  display:block; font-family:'Oswald',sans-serif; font-weight:600;
  font-size:1.35rem; color: var(--text, #EDE2CC); margin-bottom:8px;
}
.post-cta p{ color: var(--secondary, #A2937C); font-size:.94rem; margin:0 0 18px; line-height:1.55; }
.post-cta-btn{
  background: var(--accent, #C4551F); color:#FFF6EE; border:none; border-radius:999px;
  padding:13px 30px; cursor:pointer; font-family:'JetBrains Mono',monospace;
  font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  transition:opacity .15s;
}
.post-cta-btn:hover{ opacity:.88; }
.post-more{ text-align:center; margin-bottom:8px; }
.post-more a{ color: var(--accent-h, #E08A3C); font-size:.94rem; }

/* Блок действия в конце статьи */
.post-cta-row{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-bottom:1rem; }
.post-cta-row .post-cta-btn{ display:inline-block; text-decoration:none; }

/* Ссылка на канал — главный способ удержать читателя */
.post-channel{
  display:flex; align-items:center; gap:.9rem; text-decoration:none;
  border:1px solid var(--border, #3A3027);
  background: var(--card, #241D17);
  border-radius:10px; padding:.9rem 1.1rem; margin-top:.9rem;
  text-align:left; transition:border-color .15s, background .15s;
}
.post-channel:hover{ border-color: var(--accent, #C4551F); background: rgba(196,85,31,.08); }
.post-channel-i{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background: rgba(196,85,31,.14); color: var(--accent-h, #E08A3C);
  display:flex; align-items:center; justify-content:center;
}
.post-channel-i svg{ width:20px; height:20px; }
.post-channel-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.post-channel-t b{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:1rem;
  color: var(--text, #EDE2CC);
}
.post-channel-t span{ font-size:.83rem; color: var(--secondary, #A2937C); line-height:1.4; }
.post-channel-a{ flex-shrink:0; color: var(--accent-h, #E08A3C); font-size:1.2rem; }

@media (max-width:520px){
  .post-channel{ padding:.8rem .9rem; gap:.7rem; }
  .post-channel-t b{ font-size:.94rem; }
  .post-channel-t span{ font-size:.78rem; }
}