/* ============================================================================
   blog.css — TEMA VISUAL AUTOSSUFICIENTE DO BLOG (white-label)
   ----------------------------------------------------------------------------
   Este arquivo torna a pasta /blog/ independente do site host: fornece o
   "chrome" (cabeçalho fixo, rodapé, botões, container, menu, dropdown,
   responsividade e fontes) que antes vinha de /css/premium.css + /js/premium.js.

   As CORES vêm de marca.php: index.php e render-post.php injetam
   --primary / --secondary / --primary-light etc. num <style> inline DEPOIS
   deste arquivo, então mudar a paleta é só editar marca.php. Os valores em
   :root abaixo são apenas FALLBACK (azul médico padrão), caso a injeção
   não ocorra. NÃO contém logo — o logo é asset por-cliente (LOGO_PATH).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@600;700;800;900&display=swap');

:root{
  /* Fallback azul médico — marca.php sobrescreve via <style> inline. */
  --primary:#1D4ED8;
  --secondary:#1E3A8A;
  --secondary-dark:#0F172A;
  --primary-light:#3B82F6;
  --primary-rgb:29,78,216;
  --secondary-rgb:30,58,138;
  --primary-light-rgb:59,130,246;
  --text:#1F2937;
  --font-display:'Outfit','Inter',system-ui,sans-serif;
  --nav-height:72px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:var(--primary);text-decoration:none;}
h1,h2,h3,h4,h5{font-family:var(--font-display);}

/* ── Container central ──────────────────────────────────────────────────── */
.container-premium{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}

/* ── Cabeçalho fixo ─────────────────────────────────────────────────────── */
.premium-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-height);
  display:flex;align-items:center;
  background:var(--secondary);
  box-shadow:0 2px 24px rgba(0,0,0,.18);
}
.premium-nav .container-premium{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.premium-nav a{color:#fff;}
.nav-logo{height:40px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links>a{
  color:#fff;font-family:var(--font-display);font-weight:600;font-size:.95rem;
  opacity:.9;transition:opacity .2s;position:relative;white-space:nowrap;
}
.nav-links>a:hover{opacity:1;}
.nav-links>a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:var(--primary-light);border-radius:2px;
}
.nav-social{opacity:.85;transition:opacity .2s;}
.nav-social:hover{opacity:1;}

/* Botão do menu mobile (escondido no desktop) */
.mobile-menu-toggle{
  display:none;background:none;border:0;color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;padding:4px 8px;
}

/* ── Dropdown (submenu) ─────────────────────────────────────────────────── */
.nav-item-dropdown{position:relative;}
.nav-link-tratamentos{color:#fff;font-family:var(--font-display);font-weight:600;font-size:.95rem;opacity:.9;cursor:pointer;}
.nav-link-tratamentos:hover{opacity:1;}
.dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:0;min-width:230px;
  background:#fff;border-radius:14px;padding:8px;
  box-shadow:0 18px 44px rgba(15,23,42,.18);border:1px solid #eef2f7;
  display:none;flex-direction:column;
}
.nav-item-dropdown:hover .dropdown-menu{display:flex;}
.dropdown-menu::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px;} /* ponte p/ hover */
.dropdown-menu a{
  color:var(--text);font-size:.9rem;font-weight:500;
  padding:9px 12px;border-radius:9px;white-space:nowrap;
}
.dropdown-menu a:hover{background:#f1f5f9;color:var(--primary);}

/* ── Botões premium (pílula) ────────────────────────────────────────────── */
.btn-premium{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  border:2px solid transparent;border-radius:50px;padding:12px 26px;
  cursor:pointer;text-decoration:none;line-height:1;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn-premium-primary{
  background:var(--primary-light);color:#fff;
  box-shadow:0 6px 18px rgba(var(--primary-light-rgb),.4);
}
.btn-premium-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(var(--primary-light-rgb),.55);}
.btn-premium-outline{background:transparent;border-color:var(--primary);color:var(--primary);}
.btn-premium-outline:hover{background:var(--primary);color:#fff;}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.premium-footer{
  background:var(--secondary);color:#fff;
  padding:64px 0 40px;margin-top:80px;
}
.premium-footer a{color:rgba(255,255,255,.85);}
.premium-footer a:hover{color:#fff;}

/* ── Responsivo (menu mobile) ───────────────────────────────────────────── */
@media (max-width:900px){
  .mobile-menu-toggle{display:block;}
  .nav-links{
    position:fixed;top:var(--nav-height);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--secondary);padding:8px 0 16px;
    box-shadow:0 16px 34px rgba(0,0,0,.28);
    display:none;max-height:calc(100vh - var(--nav-height));overflow-y:auto;
  }
  .premium-nav.nav-open .nav-links{display:flex;}
  .nav-links>a,.nav-item-dropdown>.nav-link-tratamentos{padding:14px 24px;width:100%;}
  .nav-links>a.active::after{display:none;}
  .nav-links .btn-premium{margin:12px 24px 0;justify-content:center;}
  .nav-item-dropdown{width:100%;}
  .dropdown-menu{
    position:static;display:none;box-shadow:none;border:0;border-radius:0;
    background:rgba(255,255,255,.06);padding:0;margin:0;
  }
  .nav-item-dropdown.open .dropdown-menu{display:flex;}
  .dropdown-menu a{color:rgba(255,255,255,.85);padding:11px 40px;}
  .dropdown-menu a:hover{background:rgba(255,255,255,.1);color:#fff;}
}