/* blog.css - styles for full blog pages */
:root{
  --primary:#cc0000;
  --muted:#d9cfcf;
  --bg: linear-gradient(180deg,#2b0707 0%, #170203 60%);
  --panel: rgba(255,255,255,0.03);
  --text:#fff;
  --heading:'Poppins', sans-serif;
  --body:'Lato', sans-serif;
  --maxw:1100px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--body);background:var(--bg);color:var(--text);}
.container{max-width:var(--maxw);margin:0 auto;padding:20px}

/* header */
.site-header{background:linear-gradient(180deg, rgba(20,6,6,0.92), rgba(10,4,4,0.7));padding:12px 0;position:sticky;top:0;z-index:60;border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand-logo{height:56px}
.back-btn{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.02)}

/* blog */
.blog-post{background:var(--panel);padding:20px;border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,0.6)}
.hero-image{width:100%;height:300px;object-fit:cover;border-radius:8px;margin-bottom:16px}
.blog-post h1{font-family:var(--heading);color:var(--primary);margin:8px 0}
.meta{color:#ffbcbc;margin-bottom:12px}
.content p{line-height:1.7;color:var(--muted);margin-bottom:12px}

/* footer */
.site-footer{margin-top:26px;padding:18px 0;border-top:1px solid rgba(255,255,255,0.03)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* Simple fade-in animation (same as original) */
.fade-in {
  animation: fadeIn 0.9s ease forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* responsive */
@media (max-width:680px){
  .hero-image{height:180px}
  .container{padding:16px}
  .blog-post{padding:16px}
  .back-btn{padding:6px 10px}
}

@media(max-width:960px){
  .brand-logo{height:64px}
  .hero{padding:80px 0}
  .contact-panel{grid-template-columns:1fr}
}
@media(max-width:680px){
  .nav-toggle{display:block}
  .nav-list{
    display:none;position:absolute;top:74px;right:18px;
    flex-direction:column;gap:8px;background:rgba(0,0,0,.5);
    padding:12px;border-radius:10px
  }
  .nav-list.show{display:flex}
  .brand-logo{height:56px}
  .hero-title{white-space:normal;font-size:clamp(26px,8vw,40px)}
}
@media(max-width:480px){
  .container{padding:20px 14px}
  h1,h2,h3{line-height:1.2}
  .feature-card{padding:18px}
}
@media(min-width:1400px){
  .container{max-width:1350px}
  .hero{padding:120px 0}
  .grid-3{gap:30px}
}

@media(max-width:680px){
  .header-inner {
    display: flex;
    justify-content: space-between !important;
    align-items: center;
    width: 100%;
  }

  .nav-toggle {
    margin-left: auto;
  }

  .brand {
    margin-right: auto;
  }
}