/* Fawa Blog — Dark Theme (matches main site) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#e0e0e0;background:#0d0d0d;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:#F8CB59;text-decoration:none;transition:all .3s}
a:hover{color:#e6b840}
img{max-width:100%;height:auto}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;background:rgba(15,5,5,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.05);position:sticky;top:0;z-index:100}
.topbar a{color:rgba(255,255,255,.7);font-size:.85rem;font-weight:500}
.topbar a:hover{color:#F8CB59}

/* Content container */
.article-container,.article-body,.blog-content{max-width:760px;margin:0 auto;padding:2rem 1.5rem 4rem}

/* Meta bar */
.meta-bar{font-size:.82rem;color:rgba(255,255,255,.45);margin-bottom:1.5rem}

/* Headings — override inline light colors */
h1{color:#F8CB59 !important;font-size:1.8rem !important;font-weight:800;line-height:1.2;margin-bottom:1rem}
h2{color:#F8CB59 !important;font-size:1.3rem !important;font-weight:700;margin:2rem 0 .75rem;padding-bottom:.4rem;border-bottom:1px solid rgba(248,203,89,.15)}
h3{color:#F8CB59;font-size:1.1rem;font-weight:700;margin:1.5rem 0 .5rem}
h4{color:#F8CB59;font-size:1rem;font-weight:600;margin:1rem 0 .5rem}

/* Paragraphs */
p{color:rgba(255,255,255,.7);margin-bottom:1rem;font-size:.95rem}
strong{color:rgba(255,255,255,.9)}
em{color:rgba(255,255,255,.6)}

/* Lists */
ul,ol{padding-left:1.5rem;margin-bottom:1rem}
li{color:rgba(255,255,255,.65);margin-bottom:.4rem;font-size:.93rem}
li strong{color:#F8CB59}

/* Tables */
table{width:100%;border-collapse:collapse;margin:1.5rem 0;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden}
th{background:rgba(184,29,19,.3) !important;color:#F8CB59 !important;padding:.75rem 1rem;text-align:left;font-weight:700;font-size:.88rem;border-bottom:1px solid rgba(255,255,255,.08)}
td{padding:.65rem 1rem;border-bottom:1px solid rgba(255,255,255,.04);color:rgba(255,255,255,.7);font-size:.9rem}
tr:last-child td{border-bottom:none}
tr:hover{background:rgba(255,255,255,.03)}

/* Blog tag */
.blog-tag{display:inline-block;background:rgba(184,29,19,.15);color:#B81D13;font-size:.72rem;font-weight:600;padding:.2rem .6rem;border-radius:4px}

/* Alert boxes — override inline light backgrounds */
div[style*="background:#f8d7da"],
div[style*="background: rgb(248, 215, 218)"]{background:rgba(184,29,19,.12) !important;border-left-color:#B81D13 !important}
div[style*="background:#f8d7da"] p,
div[style*="background: rgb(248, 215, 218)"] p{color:rgba(255,255,255,.7) !important}

div[style*="background:#fff3cd"],
div[style*="background: rgb(255, 243, 205)"]{background:rgba(248,203,89,.08) !important;border-left-color:#F8CB59 !important}
div[style*="background:#fff3cd"] p,
div[style*="background: rgb(255, 243, 205)"] p{color:rgba(255,255,255,.7) !important}

div[style*="background:#e8f5e9"],
div[style*="background: rgb(232, 245, 233)"]{background:rgba(45,122,45,.1) !important}

/* Code / pre */
code{background:rgba(255,255,255,.06);padding:.15rem .4rem;border-radius:4px;font-size:.88rem;color:#F8CB59}
pre{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:1rem;overflow-x:auto;margin:1rem 0}
pre code{background:none;padding:0;color:rgba(255,255,255,.7)}

/* Blockquote */
blockquote{border-left:3px solid #B81D13;padding:.75rem 1rem;margin:1rem 0;background:rgba(255,255,255,.02);border-radius:0 8px 8px 0}
blockquote p{color:rgba(255,255,255,.6);font-style:italic}

/* CTA box at bottom */
.cta-box{background:rgba(15,15,15,.8);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:2rem;text-align:center;margin:2rem 0}
.cta-box h3{color:#F8CB59;margin-bottom:.5rem}
.cta-box p{color:rgba(255,255,255,.6)}
.cta-box a.btn{display:inline-block;padding:.75rem 2rem;border-radius:25px;font-weight:700;background:linear-gradient(135deg,#F8CB59,#e6b840);color:#000 !important;margin-top:.75rem;transition:all .3s}
.cta-box a.btn:hover{box-shadow:0 8px 28px rgba(248,203,89,.4);transform:translateY(-2px)}

/* Footer */
footer{background:rgba(10,3,3,.98);border-top:1px solid rgba(255,255,255,.06);padding:2rem 0;text-align:center;margin-top:3rem}
footer p{font-size:.82rem;color:rgba(255,255,255,.35)}
footer a{color:#F8CB59}

/* Responsive */
@media(max-width:768px){
  .article-container,.article-body,.blog-content{padding:1.5rem 1rem 3rem}
  h1{font-size:1.4rem !important}
  h2{font-size:1.15rem !important}
  table{font-size:.82rem}
  th,td{padding:.5rem .6rem}
}

/* Article body */
.article-body{max-width:760px;margin:0 auto;padding:2rem 1.5rem 4rem}
.article-container{max-width:760px;margin:0 auto;padding:0 1.5rem}
.article-hero{background:rgba(15,5,5,.9);padding:2rem 1.5rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.05)}
.article-hero h1{color:#F8CB59;font-size:1.8rem;font-weight:800;margin-bottom:.5rem}
.blog-link{text-align:center;margin:2rem 0}
.blog-link a{display:inline-block;padding:.6rem 1.5rem;border:1px solid rgba(248,203,89,.3);border-radius:20px;color:#F8CB59;font-size:.88rem;font-weight:600;transition:all .3s}
.blog-link a:hover{background:rgba(248,203,89,.1);border-color:#F8CB59}