:root{
  --bg:#09101A;
  --bg2:#192430;
  --text:#C0C2C3;
  --muted:#838486;
  --brand:#045FA5;
  --brand2:#1590CD;
  --card:#111a27;
  --border:rgba(255,255,255,.08);
  --radius:18px;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 30% 10%, rgba(21,144,205,.20), transparent 55%),
              radial-gradient(900px 700px at 80% 20%, rgba(4,95,165,.22), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{color:inherit}
.container{width:min(1120px, 92%); margin:0 auto;}
.section{padding:72px 0;}
.section-alt{background: linear-gradient(180deg, transparent, rgba(255,255,255,.03));}
.section-head{margin-bottom:22px;}
.section-head h1,.section-head h2{margin:0 0 10px;}
.muted{color:var(--muted); line-height:1.6}

.skip-link{position:absolute; left:-999px; top:auto;}
.skip-link:focus{left:12px; top:12px; background:#000; padding:10px 12px; border-radius:10px; z-index:9999;}

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(9,16,26,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; gap:18px; padding:14px 0;}
.brand{display:flex; flex-direction:column; text-decoration:none}
.brand-name{font-weight:800; letter-spacing:.4px}
.brand-tag{font-size:.86rem; color:var(--muted)}

.nav{margin-left:auto}
.nav-list{display:flex; gap:16px; list-style:none; margin:0; padding:0}
.nav-list a{text-decoration:none; color:var(--text); opacity:.9}
.nav-list a:hover{opacity:1}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px; text-decoration:none;
  border:1px solid var(--border); gap:8px;
}
.btn-primary{background: linear-gradient(135deg, var(--brand), var(--brand2)); border-color:transparent; color:white;}
.btn-secondary{background: rgba(255,255,255,.06);}
.btn-ghost{background: transparent;}
.btn:hover{transform: translateY(-1px);}
.btn:active{transform: translateY(0);}

.hero{padding:72px 0 30px;}
.hero-grid{display:grid; grid-template-columns: 1.4fr .8fr; gap:22px; align-items:stretch;}
.pill{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid var(--border);
  color:var(--text); font-size:.9rem;
}
.hero h1{font-size: clamp(2rem, 4vw, 3.2rem); margin:14px 0 10px; line-height:1.08;}
.hero-actions{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;}
.hero-card{
  background: rgba(17,26,39,.55);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}
.hero-card ul{margin:10px 0 0; padding-left:18px; color:var(--muted); line-height:1.8}

.grid{display:grid; gap:16px;}
.cards-3{grid-template-columns: repeat(3, minmax(0,1fr));}

.card{
  background: rgba(17,26,39,.55);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}
.card h3{margin:0 0 10px;}
.project-card{padding:0; overflow:hidden;}
.project-link{display:block; text-decoration:none; padding:18px;}
.thumb{border-radius:14px; overflow:hidden; border:1px solid var(--border); background: rgba(255,255,255,.03);}
.thumb img{display:block; width:100%; height:auto;}
.thumb-placeholder{height:180px;}
.project-title{margin:14px 0 8px;}
.project-cta{display:inline-block; margin-top:10px; color: var(--brand2); font-weight:700;}

.cta{padding:52px 0;}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background: linear-gradient(135deg, rgba(4,95,165,.25), rgba(21,144,205,.20));
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:22px;
  box-shadow: var(--shadow);
}

.content{width:min(900px,92%); margin:0 auto;}
.post-hero-img img{width:100%; height:auto; border-radius:18px; border:1px solid var(--border);}

.site-footer{border-top:1px solid var(--border); padding:36px 0 20px; background: rgba(0,0,0,.12);}
.footer-grid{display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:16px;}
.footer-links{list-style:none; padding:0; margin:10px 0 0;}
.footer-links a{text-decoration:none; color:var(--muted)}
.footer-links a:hover{color:var(--text)}
.footer-bottom{margin-top:18px; padding-top:14px; border-top:1px solid var(--border); color:var(--muted);}

@media (max-width: 920px){
  .hero-grid{grid-template-columns: 1fr;}
  .cards-3{grid-template-columns: 1fr;}
  .footer-grid{grid-template-columns: 1fr;}
}
/* Logo (custom logo do WP) */
.brand .custom-logo {
  display: block;
  height: auto;
  max-height: 48px; /* ajuste se quiser */
  width: auto;
}

.brand .custom-logo-link {
  display: inline-flex;
  align-items: center;
}

/* ===== Logo / Brand ===== */
.brand{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  gap:2px;
}

.brand .custom-logo-link{
  display:inline-flex;
  align-items:center;
  line-height:0;
}

.brand .custom-logo{
  display:block;
  width:auto;
  height:auto;
  max-height:64px; /* ajuste conforme seu header */
}

/* ===== Layout do header ===== */
.header-inner{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 0;
}

/* Padrão (esquerda) mantém comportamento atual */
.logo-align-left .nav{ margin-left:auto; }
.logo-align-left .btn{ margin-left:0; }

/* Centralizado: logo no centro, menu à esquerda e botão à direita */
.logo-align-center .header-inner{
  justify-content:space-between;
}
.logo-align-center .brand{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  align-items:center;
  text-align:center;
}
.logo-align-center .nav{ margin-left:0; }
.logo-align-center .btn{ margin-left:0; }

/* Direita: logo à direita, menu à esquerda, botão antes do logo (opcional) */
.logo-align-right .header-inner{
  justify-content:space-between;
}
.logo-align-right .nav{ margin-left:0; }
.logo-align-right .brand{
  margin-left:auto;   /* empurra a marca para a direita */
  align-items:flex-end;
  text-align:right;
}

/* Garante que o absolute do centro funcione */
.site-header .container{
  position:relative;
}
@media (max-width: 920px){
  .logo-align-center .brand{
    position:static;
    transform:none;
    align-items:flex-start;
    text-align:left;
  }
}
.brand .custom-logo-link + .brand-tag{
  display:none;
}
/* ===== Dropdown do menu principal ===== */
.nav-list{display:flex; gap:16px; list-style:none; margin:0; padding:0; align-items:center;}
.nav-list > li{position:relative;}
.nav-list > li > a{display:inline-flex; align-items:center; gap:8px; padding:10px 10px; border-radius:12px;}

.nav-list .sub-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  list-style:none;
  margin:0;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(17,26,39,.96);
  box-shadow: var(--shadow);
  z-index:60;
}

.nav-list .sub-menu li a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  opacity:.92;
  white-space:nowrap;
}

.nav-list .sub-menu li a:hover{
  background: rgba(255,255,255,.06);
  opacity:1;
}

/* Abre dropdown no hover e no teclado (acessível) */
.nav-list > li:focus-within > .sub-menu{
  display:block;
}

/* Indicador visual de que tem submenu */
.nav-list > li.menu-item-has-children > a::after{
  content:"▾";
  font-size:.8em;
  opacity:.75;
}
/* evita que o hover se perca ao mover o mouse */
.nav-list > li{
  padding-bottom: 10px;
}
/* estado aberto controlado por JS */
.nav-list .sub-menu{
  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.nav-list .sub-menu.is-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Dropdown controlado por JS (com animação elegante) */
.nav-list > li{ position:relative; padding-bottom:10px; }

.nav-list .sub-menu{
  list-style:none;
  margin:0;
  padding:10px;

  position:absolute;
  top:100%;
  left:0;
  min-width:220px;

  background: rgba(17,26,39,.96);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  z-index:999;

  opacity:0;
  transform: translateY(8px) scale(.98);
  pointer-events:none;

  transition: opacity .18s ease, transform .18s ease;
}

/* ABRE quando o LI estiver com classe is-open */
.nav-list > li.is-open > .sub-menu{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
/* =========================
   Mobile optimization
========================= */

/* Botão hambúrguer (esconde no desktop) */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  background: var(--text);
  opacity:.9;
  border-radius:2px;
}

/* Ajustes mobile */
@media (max-width: 920px){
  .section{padding:56px 0;}
  .hero{padding:56px 0 24px;}
  .card{padding:16px;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
  .header-cta{display:none;} /* opcional: esconder o botão grande no mobile */

  .nav-toggle{display:inline-flex; margin-left:auto;}

  /* Drawer do menu */
  .nav{
    position: fixed;
    inset: 68px 0 auto 0; /* abaixo do header */
    background: rgba(9,16,26,.98);
    border-bottom:1px solid var(--border);
    padding:14px 0 18px;
    transform: translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 100;
  }

  body.nav-open .nav{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .nav-list{
    flex-direction:column;
    gap:8px;
    padding:0;
    margin:0;
  }

  .nav-list > li > a{
    display:flex;
    justify-content:space-between;
    padding:12px 14px;
    border-radius:14px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
  }

  /* Submenu no mobile (vira “accordion”) */
  .nav-list .sub-menu{
    position: static;
    min-width: auto;
    margin: 6px 0 0;
    padding: 6px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);

    opacity: 1;
    transform: none;
    pointer-events: auto;

    display:none; /* no mobile a gente controla com display */
  }

  .nav-list > li.is-open > .sub-menu{
    display:block;
  }

  .nav-list .sub-menu a{
    padding:10px 12px;
  }
}

/* Telas bem pequenas */
@media (max-width: 520px){
  .container{width:min(1120px, 90%);}
  .hero h1{font-size: clamp(1.75rem, 7vw, 2.4rem);}
}