/*
Theme Name: Lotazap
Theme URI: https://exemplo.com/lotazap
Author: Flávio Henrique
Author URI: https://exemplo.com
Description: Tema ultra-enxuto para exibir grupos de WhatsApp e blog, baseado em Bootstrap 5.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lotazap
Tags: bootstrap, blog, minimal, responsive
*/

/* -------------------------------------------------
   RESET & BASE
-------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Inter', sans-serif;
	line-height: 1.6;
	color: #333;
	background: #fff;
}

/* Utilitário de cor (mesma usada nos títulos) */
.text-teal { color:#024746; }

/* Limite global p/ páginas (equivalente ao inline style max-width:960px) */
.container { max-width:960px; }

/* -------------------------------------------------
   HEADER
-------------------------------------------------- */
header { background:#024746; }
header a { color:#fff; text-decoration:none; font-weight:600; }

/* -------------------------------------------------
   CATEGORY MENU
-------------------------------------------------- */
.category-menu        { background:#e6f2f0; }
.category-menu ul     { margin:0; padding:0; list-style:none; }
.category-menu li a   {
	background:#cce7e3;
	color:#024746;
	padding:8px 12px;
	border-radius:20px;
	font-weight:500;
	display:inline-block;
	text-decoration:none;
}

/* -------------------------------------------------
   HERO
-------------------------------------------------- */
.hero { background:#f9f9f9; padding: 40px 0; }
.hero h1 { color:#024746; font-weight:700; font-size:2rem; margin-bottom:20px; }

/* -------------------------------------------------
   SEÇÕES
-------------------------------------------------- */
.section-title { color:#024746; font-size:1.6rem; font-weight:600; margin-bottom:20px; }

/* -------------------------------------------------
   CARDS (grupos & blog)
-------------------------------------------------- */
article.border { transition:all .15s ease-in-out; }
article.border:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.08); }

article img { width:100%; height:140px; object-fit:cover; }

/* -------------------------------------------------
   FOOTER
-------------------------------------------------- */
footer { background:#024746; color:#fff; font-size:14px; }

/* -------------------------------------------------
   RESPONSIVO
-------------------------------------------------- */
@media (max-width:768px) {
	.hero h1       { font-size:1.3rem; }
	.section-title { font-size:1.3rem; }
}

@media (max-width:480px) {
	/* Botão pleno em 100% para telas muito pequenas */
	.btn { width:100%; }
}