/*
Theme Name: Toga Digital
Theme URI: https://toga.digital
Template: generatepress
Author: Diogo Leão
Description: Child theme do GeneratePress para o Toga Digital, blog de marketing jurídico. Templates standalone, sem depender do header/footer do tema pai.
Version: 1.0.0
Text Domain: toga-digital
*/

/* =========================================================
   FONTES
   Space Grotesk: títulos e wordmark
   Inter: corpo de texto e UI
   IBM Plex Mono: metadados, timestamps, labels de categoria
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* =========================================================
   TOKENS DE MARCA
   Paleta única, usada em todos os templates (home, single, arquivo).
   Fundo geral é --papel (#FAFAF7), nunca branco puro, pra que os
   blocos brancos (--branco-bloco) se destaquem visualmente.
   ========================================================= */
:root{
	--tinta:#14161C;
	--papel:#FAFAF7;
	--papel-2:#F1F0EA;
	--branco-bloco:#FFFFFF;
	--sinal:#4B4FE0;
	--sinal-tint:#EEEEFC;
	--toga:#616B7C;
	--toga-2:#9AA2AF;
	--selo:#1F7A5C;
	--selo-tint:#E7F3EE;
	--aviso:#B23A2E;
	--aviso-tint:#FBECEA;
	--linha: rgba(97,107,124,0.16);

	--font-display:'Space Grotesk', 'Arial Narrow', Arial, sans-serif;
	--font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
}

/* =========================================================
   RESET BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	*{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
	margin: 0;
	font-family: var(--font-body);
	background: var(--papel);
	color: var(--tinta);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; }

::selection{ background: var(--sinal); color: #fff; }
:focus-visible{ outline: 2px solid var(--sinal); outline-offset: 3px; }

h1, h2, h3, h4, h5, h6{
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
}

p{ margin: 0 0 1em; }

/* =========================================================
   UTILITÁRIOS
   ========================================================= */
.wrap{
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.mono{ font-family: var(--font-mono); }

.eyebrow{
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
}

.sr-only{
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================
   COMPONENTES COMPARTILHADOS
   Usados em mais de um template (home, single, arquivo de categoria)
   ========================================================= */

/* Botão primário */
.btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--sinal);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .9rem;
	padding: 11px 20px;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	white-space: nowrap;
}
.btn:hover{ opacity: .92; }

/* Chip de categoria */
.chip{
	display: inline-flex;
	align-items: center;
	background: var(--sinal);
	color: #fff;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 100px;
	font-weight: 600;
}

/* Card branco, base pra qualquer bloco de conteúdo sobre o fundo --papel */
.card{
	background: var(--branco-bloco);
	border: 1px solid var(--linha);
	border-radius: var(--radius-md);
}

/* Callouts de contexto jurídico: "atenção OAB" (aviso) e "permitido" (selo) */
.callout{
	border-left: 3px solid var(--aviso);
	background: var(--aviso-tint);
	padding: 16px 18px;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	margin: 26px 0;
}
.callout .eyebrow{ color: var(--aviso); margin-bottom: 6px; display: block; }
.callout p{ margin: 0; font-size: .95rem; color: #3a2320; }

.callout.ok{ border-left-color: var(--selo); background: var(--selo-tint); }
.callout.ok .eyebrow{ color: var(--selo); }
.callout.ok p{ color: #123c2c; }

/* Espaço de anúncio, usado na home e no single */
.adslot{
	border: 1.5px dashed var(--toga-2);
	border-radius: var(--radius-md);
	padding: 22px;
	text-align: center;
	color: var(--toga-2);
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 34px 0;
	background: var(--papel-2);
}

/* Avatar circular (autor) */
.avatar{
	border-radius: 50%;
	background: var(--tinta);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	flex-shrink: 0;
	overflow: hidden;
}
.avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cabeçalho do site, compartilhado entre todos os templates standalone */
header.site{
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--linha);
}
.site-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 24px;
	max-width: 1180px;
	margin: 0 auto;
}
.logo img{ height: 34px; width: auto; display: block; }

nav.cats{
	display: flex;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}
nav.cats::-webkit-scrollbar{ display: none; }
nav.cats a{
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--toga);
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	transition: .15s;
}
nav.cats a:hover, nav.cats a.active{ background: var(--sinal-tint); color: var(--sinal); }

.icon-btn{
	width: 36px; height: 36px;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	color: var(--toga);
	background: var(--papel-2);
	flex-shrink: 0;
}

/* Rodapé, compartilhado entre todos os templates standalone */
footer.site{
	background: var(--tinta);
	color: var(--toga-2);
	margin-top: 20px;
}
.footer-inner{
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding: 44px 24px 26px;
	max-width: 1180px;
	margin: 0 auto;
}
.foot-word{ font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: #fff; }
.foot-word .dot{ color: var(--sinal); }
footer.site h5{
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 12px;
}
footer.site ul{ display: flex; flex-direction: column; gap: 9px; font-size: .84rem; }
footer.site ul a:hover{ color: #fff; }
.footer-bottom{
	border-top: 1px solid rgba(255,255,255,.08);
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	font-size: .78rem;
	flex-wrap: wrap;
	gap: 10px;
}

@media (max-width: 900px){
	nav.cats{ display: none; }
	.footer-inner{ grid-template-columns: 1fr; gap: 24px; }
}