/*
Theme Name: TOSS STUDIO AI-Ready
Theme URI: toss-studio-ia-ready-docs-v1
Author: TOSS Studio
Description: Tema criado pela TOSS
Version: 1.0
*/

/* =========================
   0) Tokens & Reset leve
========================= */
:root{
  /* Cores */
  --c-bg:#202124;
  --c-text:#e8eaed;
  --c-muted:#6b7280;          /* cinza legível */
  --c-primary:#0967FD;
  --c-primary-700:#0649b5;
  --c-border:#e5e7eb12;

  /* Espaços (8px grid) */
  --sp-1: .5rem;   /* 8 */
  --sp-2: 1rem;    /* 16 */
  --sp-3: 1.5rem;  /* 24 */
  --sp-4: 2rem;    /* 32 */
  --sp-5: 3rem;    /* 48 */
  --sp-6: 4rem;    /* 64 */

  /* Larguras */
  --container-max: 1600px; /* 1920px é largo demais para texto */
}

/* Reset leve e acessível */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:300;
  /* tamanho base fluido entre 16 e 18px */
  font-size: clamp(16px, 1.2vw, 18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-primary); text-decoration:none; transition:color .2s ease, background .2s ease, border-color .2s ease; }
a:hover{ color:var(--c-primary-700); }

/* Foco visível e consistente */
:focus-visible{
  outline:2px solid var(--c-primary);
  outline-offset:2px;
}

/* =========================
   1) Tipografia responsiva
========================= */
h1,h2,h3,h4,h5,h6{ margin:0 0 var(--sp-2); color:var(--c-text); font-weight:600; line-height:1.15; }
p{ margin:0 0 var(--sp-2); color:var(--c-text); }
.small, small{ font-size:.9rem; color:var(--c-muted); }

/* Escala (clamp = fluido) */
h1{ font-weight:500; font-size: clamp(3rem, 6vw, 8rem); }   /* ~35→68px */
h2{ font-weight:400; font-size: clamp(1.6rem, 2.8vw, 3.2rem); }  /* ~26→51px */
h3{ font-weight:400; font-size: clamp(1.25rem, 2vw, 2rem); }      /* ~20→32px */
h4{ font-weight:400; font-size: clamp(1.125rem, 1.6vw, 1.5rem); } /* ~18→24px */

/* Listas legíveis */
ul,ol{ margin:0 0 var(--sp-1) var(--sp-2); }

/* =========================
   2) Layout (Materialize-like)
========================= */
.section{ position:relative; padding: var(--sp-5) 0; }
.row{ position:relative; margin:0; padding:0; }
.container{
  width: min(90%, var(--container-max));
  margin: 0 auto;
  padding: 0;
}

/* Título de páginas */
.titulo-paginas{ padding: var(--sp-6) 0 var(--sp-3); }

/* =========================
   3) Header / Nav
========================= */
.nav{ width:100%; }
nav{
  min-height: 80px;
  display:flex; align-items:center;
  border-bottom:1px solid var(--c-border);
}
nav .brand-logo{ display:flex; align-items:center; line-height:1; }

  .menu-desktop ul { display: flex; margin: 0; padding: 0; }
  .menu-desktop ul li { margin: 0; padding: 0; list-style: none; }
  .menu-desktop ul li  a { color: #fff; border-left: 1px solid #e5e7eb12; padding: 0 10px; }
  .menu-desktop ul li:last-child a { border-right: 1px solid #e5e7eb12; }



/* Botão do menu mobile (se tiver) */
.menu-toggle{ display:none; }

/* =========================
   4) Botões
========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  height: 48px;
  padding: 0 22px;
  border-radius:10px;
  border:2px solid var(--c-primary);
  background:#fff;
  color:var(--c-text);
  font-size:1rem; font-weight:500;
  cursor:pointer;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ background: var(--c-primary); color:#fff; }
.btn:active{ transform: translateY(1px); }

/* Variante preenchida (opcional) */
.btn--primary{ background:var(--c-primary); color:#fff; }
.btn--primary:hover{ background:var(--c-primary-700); }

/* =========================
   5) Footer
========================= */
.site-footer{
  padding: var(--sp-4) 0;
  border-top:1px solid var(--c-border);
}
.site-footer .divider{ margin: 0 .5rem; opacity:.6; }

.site-footer ul { display: flex; margin: 0; padding: 0; }
.site-footer ul li { margin: 0; padding: 0; list-style: none; }
.site-footer ul li  a { color: #fff; border-left: 1px solid #e5e7eb12; padding: 0 10px; }
.site-footer ul li:last-child a { border-right: 1px solid #e5e7eb12; }

.site-info { padding: 10px 0; font-size: 0.8rem;}


/* =========================
   6) Utilitários
========================= */
.m-0{ margin:0; } .mt-2{ margin-top:var(--sp-2);} .mt-4{ margin-top:var(--sp-4);}
.pb-0{ padding-bottom:0; } .pt-0{ padding-top:0; }
.text-muted{ color:var(--c-muted); }

/* Skip link (acessibilidade) */
.screen-reader-text{
  position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;
}
.screen-reader-text:focus{
  position:static; width:auto; height:auto; padding:.5rem 1rem; background:#000; color:#fff;
}

/* =========================
   7) Responsivo
========================= */
@media (max-width: 992px){
  nav{ min-height: 72px; }
  .menu-toggle{ display:inline-flex; }
  nav .menu ul{ display:none; } /* mostre via JS ao abrir */
  .container{ width: min(92%, var(--container-max)); }
}
@media (max-width: 600px){
  .section{ padding: var(--sp-4) 0; }
  .titulo-paginas{ padding: var(--sp-5) 0 var(--sp-2); }
}

/* =========================
   8) Preferências do usuário
========================= */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}