/* =================================
MIRAI GUARD BLOG STYLE OVERRIDE
================================= */

:root{
--background:#05080a;
--foreground:#e5f6f6;
--accent:#00ffd5;
}

/* body background igual site */

body{
background: radial-gradient(circle at top,#0f1b1f,#05080a);
color:#e5f6f6;
font-family:'Inter',sans-serif;
}

/* container central */

main{
width:100%;
margin:0 auto;
padding:60px 20px;
}

/* links */

a{
color:#00ffd5;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

/* títulos */

h1,h2,h3{
text-transform:uppercase;
letter-spacing:2px;
}

/* título do post */

article h1{
font-size:40px;
margin-bottom:20px;
}

/* meta info */

.post-date{
opacity:.6;
font-size:13px;
letter-spacing:1px;
}

/* imagens */

.wp-post-image,
.post-thumbnail img{
max-width:100%;
height:auto;
border-radius:6px;
border:1px solid rgba(255,255,255,0.1);
}

/* blocos de código */

pre{
background:rgba(0,0,0,0.45);
border:1px solid rgba(255,255,255,0.1);
color:#00ffd5;
}

/* blockquote */

blockquote{
border-left:3px solid #00ffd5;
padding-left:20px;
opacity:.8;
}

/* separador */

hr{
background:linear-gradient(
90deg,
transparent,
rgba(0,255,213,0.35),
transparent
);
height:1px;
border:none;
}

/* =================================
AUTHOR BOX (MIRAI STYLE)
================================= */

.post-author-box{
margin-top:60px;
padding-top:30px;
border-top:1px solid rgba(255,255,255,0.08);
text-align:center;
}

.post-author-box img{
width:90px;
height:90px;
border-radius:50%;
border:2px solid #00ffd5;
box-shadow:0 0 15px rgba(0,255,213,.4);
}

.post-author-name{
margin-top:10px;
font-size:18px;
font-weight:600;
}

.post-author-links a{
color:#00ffd5;
}

/* =================================
POST LIST (BLOG HOME)
================================= */

.blog article{
padding:30px;
margin-bottom:30px;
background:rgba(0,0,0,0.45);
border:1px solid rgba(255,255,255,0.08);
transition:.25s;
}

.blog article:hover{
border:1px solid rgba(0,255,213,0.4);
box-shadow:0 0 25px rgba(0,255,213,0.15);
transform:translateY(-3px);
}

/* botão read more */

.read-more{
display:inline-block;
margin-top:15px;
padding:10px 18px;
border:1px solid #00ffd5;
color:#00ffd5;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
}

.read-more:hover{
background:#00ffd5;
color:#002b27;
}

/* =================================
RESPONSIVE
================================= */

@media(max-width:768px){

article h1{
font-size:30px;
}

main{
padding:40px 15px;
}

}
footer{

max-width:1100px;

margin:80px auto 40px auto;

padding-top:30px;

border-top:1px solid rgba(255,255,255,0.08);

text-align:center;

font-size:13px;

letter-spacing:1px;

opacity:.6;

}

footer a{

color:#00ffd5;

text-decoration:none;

}

footer a:hover{

text-decoration:underline;

}

/* container */
/* CONTAINER */

.blog-container{

max-width:900px;
margin:auto;
padding:40px 20px;

}

/* CARD */

.blog-card{

margin-bottom:50px;

}

/* IMAGEM */

.blog-thumb img{

width:100%;
height:240px;
object-fit:cover;

border-radius:6px;
border:1px solid rgba(255,255,255,0.08);

margin-bottom:15px;

}

/* TITULO */

.blog-title{

font-family:'Orbitron',sans-serif;

font-size:22px;

letter-spacing:2px;

margin-bottom:6px;

}

.blog-title a{

color:#00ffd5;
text-decoration:none;

}

.blog-title a:hover{

opacity:.8;

}

/* META */

.blog-meta{

font-size:12px;
opacity:.6;
margin-bottom:10px;

}

/* TEXTO */

.blog-excerpt{

font-size:14px;
line-height:1.6;
opacity:.8;
margin-bottom:14px;

}

/* BOTÃO */

.read-more{

display:inline-block;

padding:8px 16px;

border:1px solid #00ffd5;

color:#00ffd5;

text-decoration:none;

font-size:12px;

letter-spacing:2px;

transition:.2s;

}

.read-more:hover{

background:#00ffd5;
color:#002b27;

}
.post-title{
font-family:'Orbitron',sans-serif;
letter-spacing:2px;
}

.post-content h2,
.post-content h3{
font-family:'Orbitron',sans-serif;
letter-spacing:2px;
}

.post-meta{
font-size:12px;
opacity:.7;
}

.widget {
    background: #111;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.widget-title {
    font-size: 16px;
    margin-bottom: 10px;
}

/* =========================
LAYOUT FINAL (CORRIGIDO)
========================= */

/* =========================
LAYOUT FINAL (CORRIGIDO PRO)
========================= */

.container {
    display: flex;
    gap: 40px;
    max-width: 1200px; /* 🔥 reduz pra evitar espaço morto */
    margin: 0 auto;
    padding: 40px 20px;
    align-items: flex-start;
}

/* POST EXPANDE CORRETAMENTE */
.post-container {
    flex: 1;
    min-width: 0; /* 🔥 ESSENCIAL pra flex funcionar */
}

/* SIDEBAR FIXA */
.sidebar {
    width: 260px;
    flex-shrink: 0;
}
/* IMAGEM */
.sidebar img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

/* WIDGET */
.widget {
    background: #0b0f14;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid rgba(0,255,200,0.1);
}

/* CTA MID */

.mid-cta{
margin:40px 0;
padding:20px;
border:1px solid rgba(0,255,213,0.2);
background:rgba(0,255,213,0.05);
text-align:center;
}

.mid-cta a{
display:inline-block;
margin-top:10px;
padding:10px 20px;
background:#00ffd5;
color:#002b27;
}

/* CTA FINAL */

.final-cta{
margin-top:60px;
padding:30px;
text-align:center;
border:1px solid rgba(0,255,213,0.3);
}

.final-cta a{
display:inline-block;
margin-top:15px;
padding:12px 25px;
background:#00ffd5;
color:#002b27;
}

/* SIDEBAR DDoS */
.ddos-cta{
    position: sticky;
    top: 120px;
    background:#0b0f14;
    padding:20px;
    border:1px solid rgba(0,255,213,0.2);
    border-radius:10px;
}
.ddos-cta a{
display:block;
margin-top:15px;
padding:12px;
text-align:center;
background:#00ffd5;
color:#002b27;
font-weight:600;
}

/* =========================
MOBILE FIX (CRÍTICO)
========================= */

@media(max-width: 900px){

.container{
    flex-direction: column;
    padding: 20px 15px;
}

/* POST ocupa 100% */
.post-container{
    max-width: 100%;
    width: 100%;
}

/* SIDEBAR vai pra baixo */
.sidebar{
    width: 100%;
    position: relative;
    top: 0;
    margin-top: 30px;
}

/* CTA sidebar mais bonito no mobile */
.ddos-cta{
    text-align:center;
}

.ddos-cta a{
    width:100%;
}

}

/* REMOVE SCROLL LATERAL BUGADO */
html, body {
    overflow-x: hidden;
}
/* =========================
MOBILE SPACING FIX
========================= */

@media(max-width:768px){

/* garante respiro nas laterais */
body{
padding:0 12px;
}

/* container sem quebrar */
.container{
padding:20px 0;
}

/* garante que nada ultrapasse */
*{
max-width:100%;
box-sizing:border-box;
}

/* botão principal (ABRIR TICKET) */
.cta-btn{
display:block;
width:100%;
max-width:100%;
margin:10px auto;
text-align:center;
}

/* NAV ajustes */
.mirai-nav{
width:100%;
justify-content:center;
flex-wrap:wrap;
gap:10px;
}

/* títulos não cortarem */
.post-title{
word-break:break-word;
}

/* conteúdo não encostar na borda */
.post-container{
padding:0 5px;
}

}
img, iframe {
max-width:100%;
height:auto;
}