/* ConectaBRUSA — style.css (base estável)
   Objetivo: restaurar layout do site (grid, cards, forms, botões, header/footer)
   Observação: após o site voltar ao normal, aplicamos o dark mode por override.
*/

:root{
  --bg: #f4f6fb;
  --text: #111827;
  --muted: rgba(17,24,39,.75);
  --card: #ffffff;
  --border: rgba(17,24,39,.12);
  --primary: #2563eb;
  --primaryText: #ffffff;
  --danger: #dc2626;
  --success: #16a34a;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
  --radius: 14px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.35;
}

img{ max-width:100%; height:auto; }

a{
  color: var(--primary);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }

.container{
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

/* Header */
.cb-header{
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.cb-header nav a{
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 10px;
}
.cb-header nav a:hover{
  background: rgba(37,99,235,.08);
  text-decoration:none;
}

/* Sections */
.cb-section{
  padding: 18px 0 28px;
}

/* Cards */
.cb-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

/* Grid */
.cb-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1100px){
  .cb-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px){
  .cb-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .cb-grid{ grid-template-columns: 1fr; }
}

/* Forms */
.cb-form-group{
  margin-bottom: 12px;
}
label{
  display:block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
input, textarea, select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  outline: none;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
small{ color: var(--muted); }

/* Buttons */
.btn{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 700;
  cursor:pointer;
  text-decoration:none;
  transition: transform .06s ease, opacity .12s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--primary);
  color: var(--primaryText);
}
.btn-primary:hover{ opacity: .92; text-decoration:none; }

.btn-outline{
  background: transparent;
  border-color: rgba(17,24,39,.2);
  color: var(--text);
}
.btn-outline:hover{
  background: rgba(17,24,39,.04);
  text-decoration:none;
}

/* Alerts */
.cb-alert{
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
}
.cb-alert-error{
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.25);
  color: #7f1d1d;
}
.cb-alert-success{
  background: rgba(22,163,74,.08);
  border-color: rgba(22,163,74,.25);
  color: #14532d;
}

/* Typography helpers */
h1{ font-size: 26px; margin: 0 0 10px; }
h2{ font-size: 20px; margin: 0 0 10px; }
h3{ font-size: 16px; margin: 0 0 8px; }
p{ margin: 0 0 10px; color: var(--text); }

/* Footer / Sticky bar (se existir) */
.cb-footer, footer{
  margin-top: 22px;
  padding: 18px 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  color: var(--muted);
}

/* Sticky mobile bar (caso você tenha no footer.php) */
.cb-sticky-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  z-index: 999;
}

/* ==========================================================
   FIX (FEED / RECENTES / HOME): evita “apagado/desabilitado”
   Motivo: algum override do dark/inline pode aplicar opacity/filter
   ========================================================== */
.cb-recentes-section,
.cb-recentes-section *,
.cb-home-post,
.cb-home-post *,
.home-carousel,
.home-carousel *{
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Classes opcionais (caso o index use essas) */
.cb-home-post{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.cb-home-media{
  background: #f8fafc !important;
}
.cb-home-title{
  color: #0f172a !important;
  opacity: 1 !important;
}
.cb-home-meta{
  color: rgba(15,23,42,.78) !important;
  opacity: 1 !important;
}
.cb-home-actions{
  background: #fff !important;
}
.cb-home-btn{
  opacity: 1 !important;
  color: #0f172a !important;
  background: #fff !important;
  border-color: rgba(0,0,0,.16) !important;
}
