/*
Theme Name: Diretório Industrial
Theme URI: https://blogprog.com.br
Author: Diretório Industrial
Description: Diretório B2B de fornecedores e serviços industriais no Brasil, com camada editorial de notícias/análises do setor.
Version: 0.1.0
Text Domain: diretorioindustrial
*/

@import url('assets/fonts/fonts.css');

:root {
	--di-bg: #EEF0EF;
	--di-surface: #FFFFFF;
	--di-surface-2: #E2E6E5;
	--di-ink: #1B2226;
	--di-muted: #5C6870;
	--di-border: #D3D8D7;
	--di-primary: #1F2A33;
	--di-primary-2: #2B3A47;
	--di-accent: #E05A00;
	--di-accent-ink: #FFFFFF;
	--di-teal: #235E66;
	--di-ok-bg: #E3F1E1;
	--di-ok-text: #2A5C2A;
	--di-erro-bg: #FBE7E7;
	--di-erro-text: #7A1F1F;
	--di-max-width: 1160px;
	--di-radius: 3px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--di-bg: #14191C;
		--di-surface: #1B2226;
		--di-surface-2: #212A2F;
		--di-ink: #E7EBEA;
		--di-muted: #93A0A5;
		--di-border: #303B40;
		--di-primary: #0E1417;
		--di-primary-2: #182126;
		--di-accent: #FF7A2E;
		--di-teal: #5FB3BC;
		--di-ok-bg: #163420;
		--di-ok-text: #8FD79A;
		--di-erro-bg: #3A1414;
		--di-erro-text: #F0A3A3;
	}
}
:root[data-theme="dark"] {
	--di-bg: #14191C;
	--di-surface: #1B2226;
	--di-surface-2: #212A2F;
	--di-ink: #E7EBEA;
	--di-muted: #93A0A5;
	--di-border: #303B40;
	--di-primary: #0E1417;
	--di-primary-2: #182126;
	--di-accent: #FF7A2E;
	--di-teal: #5FB3BC;
	--di-ok-bg: #163420;
	--di-ok-text: #8FD79A;
	--di-erro-bg: #3A1414;
	--di-erro-text: #F0A3A3;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--di-bg);
	color: var(--di-ink);
	font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.55;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--di-teal); text-decoration: none; }
a:hover { color: var(--di-accent); }
h1, h2, h3, h4 {
	font-family: 'Archivo', 'Work Sans', sans-serif;
	font-weight: 900;
	text-transform: none;
	line-height: 1.15;
	text-wrap: balance;
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: clamp(20px, 2.6vw, 26px); }
h3 { font-size: 17px; }
p { margin: 0 0 14px; }
.di-wrap {
	max-width: var(--di-max-width);
	margin: 0 auto;
	padding-inline: 20px;
}
.di-mono { font-family: 'Roboto Mono', monospace; font-variant-numeric: tabular-nums; }

/* ===== Header ===== */
.site-header {
	background: var(--di-primary);
	color: #FFFFFF;
	margin-inline: -20px;
	padding-inline: 20px;
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 3px solid var(--di-accent);
}
.site-header-inner {
	max-width: var(--di-max-width);
	margin: 0 auto;
	padding-inline: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 66px;
}
.site-logo {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 20px;
	color: #FFFFFF;
	letter-spacing: -0.01em;
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.site-logo .di-logo-tag {
	background: var(--di-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: var(--di-radius);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.main-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.main-nav li { position: relative; }
.main-nav a {
	color: #D8DEE0;
	font-weight: 600;
	font-size: 14.5px;
	padding: 10px 12px;
	display: block;
	border-radius: var(--di-radius);
}
.main-nav a:hover { color: #fff; background: var(--di-primary-2); }
.main-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	gap: 0;
	min-width: 380px;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--di-primary);
	border: 1px solid var(--di-primary-2);
	border-radius: 0 0 var(--di-radius) var(--di-radius);
	box-shadow: 0 16px 32px rgba(0,0,0,0.35);
	z-index: 60;
	padding: 6px;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
	display: flex;
}
.main-nav .sub-menu a {
	font-size: 13.5px;
	font-weight: 500;
	padding: 9px 12px;
	white-space: normal;
	line-height: 1.35;
}
@media (max-width: 860px) {
	.main-nav .sub-menu {
		display: flex; /* no mobile o menu inteiro já fica atrás do hambúrguer, mostra sempre aberto (sem JS de toggle por item) */
		position: static;
		min-width: 0;
		max-height: none;
		box-shadow: none;
		border: none;
		background: var(--di-primary-2);
		margin: 4px 0 4px 14px;
	}
}
.nav-toggle, .search-toggle {
	display: none;
	background: none;
	border: 1px solid #3A4750;
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: var(--di-radius);
	font-size: 18px;
	cursor: pointer;
}
@media (max-width: 860px) {
	.main-nav { display: none; }
	.main-nav.is-open {
		display: block;
		position: absolute;
		left: 0; right: 0; top: 66px;
		background: var(--di-primary);
		border-top: 1px solid var(--di-primary-2);
	}
	.main-nav.is-open ul { flex-direction: column; padding: 8px; gap: 6px; }
	.main-nav.is-open a { padding: 12px 14px; }
	.nav-toggle { display: block; }
}

/* ===== Hero de busca do diretório (função principal: geração de lead) ===== */
.di-busca-hero {
	background: var(--di-primary);
	background-image: linear-gradient(135deg, var(--di-primary) 0%, var(--di-primary-2) 100%);
	/* quebra pra largura total da viewport mesmo estando dentro do
	   <main class="di-wrap"> (que tem seu próprio max-width+padding) —
	   um margin-inline negativo simples só cancelaria o padding local,
	   não alcança a borda real da tela nesse nível de aninhamento. */
	width: 100vw;
	margin-inline: calc(-50vw + 50%);
	padding-inline: 20px;
	color: #fff;
	padding-block: 40px 46px;
}
.di-busca-hero-inner { max-width: var(--di-max-width); margin: 0 auto; padding-inline: 20px; }
.di-busca-eyebrow {
	color: var(--di-accent);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}
.di-busca-hero h1 { color: #fff; max-width: 640px; }
.di-busca-hero p.di-busca-sub { color: #C3CBCE; max-width: 560px; font-size: 16px; }
.di-busca-form {
	margin-top: 22px;
	max-width: 760px;
	background: var(--di-surface);
	border-radius: var(--di-radius);
	padding: 14px;
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 10px;
	box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.di-busca-form label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--di-muted);
	margin-bottom: 4px;
}
.di-busca-form select, .di-busca-form input[type="text"] {
	width: 100%;
	height: 44px;
	border: 1px solid var(--di-border);
	border-radius: var(--di-radius);
	padding: 0 12px;
	font-family: inherit;
	font-size: 15px;
	color: var(--di-ink);
	background: #fff;
}
.di-busca-form button {
	height: 44px;
	align-self: end;
	background: var(--di-accent);
	color: #fff;
	border: none;
	border-radius: var(--di-radius);
	font-weight: 700;
	font-size: 15px;
	padding: 0 22px;
	cursor: pointer;
	white-space: nowrap;
}
.di-busca-form button:hover { background: #C24C00; }
@media (max-width: 700px) {
	.di-busca-form { grid-template-columns: 1fr; }
}
.di-busca-categorias-rapidas {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.di-busca-categorias-rapidas a {
	color: #E4E8E9;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.16);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 500;
}
.di-busca-categorias-rapidas a:hover { background: var(--di-accent); border-color: var(--di-accent); color: #fff; }

/* ===== Trust strip ===== */
.di-trust-strip {
	background: var(--di-surface-2);
	margin-inline: -20px;
	padding-inline: 20px;
	border-bottom: 1px solid var(--di-border);
}
.di-trust-strip-inner {
	max-width: var(--di-max-width);
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	font-size: 13.5px;
	color: var(--di-muted);
	font-weight: 600;
}
.di-trust-strip-inner span { display: flex; align-items: center; gap: 6px; }
.di-trust-strip-inner strong { color: var(--di-ink); font-family: 'Roboto Mono', monospace; }

/* ===== Destaque de notícias (padrão G1 adaptado) ===== */
.di-destaque {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 28px;
	padding-block: 32px;
	border-bottom: 1px solid var(--di-border);
}
.di-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--di-teal);
	margin-bottom: 6px;
}
.di-destaque-principal img { border-radius: var(--di-radius); aspect-ratio: 16/9; object-fit: cover; }
.di-destaque-principal h2 { font-size: clamp(24px, 3.2vw, 32px); margin-top: 10px; }
.di-destaque-principal h2 a { color: var(--di-ink); }
.di-destaque-principal p { color: var(--di-muted); }
.di-timestamp { font-size: 13px; color: var(--di-muted); font-family: 'Roboto Mono', monospace; }
.di-destaque-secundaria { display: flex; flex-direction: column; gap: 16px; }
.di-destaque-secundaria-item { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.di-destaque-secundaria-item img { border-radius: var(--di-radius); aspect-ratio: 1; object-fit: cover; }
.di-destaque-secundaria-item h3 { font-size: 15.5px; margin: 4px 0 4px; }
.di-destaque-secundaria-item h3 a { color: var(--di-ink); }
@media (max-width: 780px) {
	.di-destaque { grid-template-columns: 1fr; }
}

/* ===== Grades de cards ===== */
.di-secao { padding-block: 34px; }
.di-secao-titulo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 3px solid var(--di-ink);
	padding-bottom: 8px;
	margin-bottom: 20px;
}
.di-secao-titulo h2 { margin: 0; }
.di-secao-titulo a { font-size: 14px; font-weight: 700; color: var(--di-teal); }
.di-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.di-card {
	background: var(--di-surface);
	border: 1px solid var(--di-border);
	border-radius: var(--di-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.di-card img { aspect-ratio: 16/10; object-fit: cover; }
.di-card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.di-card-body h3 a { color: var(--di-ink); }
.di-card-body p { color: var(--di-muted); font-size: 14px; margin: 0; }

/* ===== Cards de fornecedor (diretório) ===== */
.di-fornecedor-card {
	background: var(--di-surface);
	border: 1px solid var(--di-border);
	border-top: 3px solid var(--di-teal);
	border-radius: var(--di-radius);
	padding: 16px;
}
.di-fornecedor-card h3 { font-size: 16px; margin-bottom: 4px; }
.di-fornecedor-card h3 a { color: var(--di-ink); }
.di-badge-verificado {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--di-ok-bg);
	color: var(--di-ok-text);
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	margin-bottom: 8px;
}
.di-fornecedor-meta {
	list-style: none;
	margin: 10px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--di-border);
	font-size: 13.5px;
	color: var(--di-muted);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.di-fornecedor-meta .di-mono { color: var(--di-ink); }

/* ===== Categorias (tags) ===== */
.di-tag {
	display: inline-block;
	background: var(--di-surface-2);
	color: var(--di-teal);
	font-size: 12.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

/* ===== Rodapé ===== */
.site-footer {
	background: var(--di-primary);
	color: #C3CBCE;
	margin-inline: -20px;
	padding-inline: 20px;
	margin-top: 40px;
}
.site-footer-inner {
	max-width: var(--di-max-width);
	margin: 0 auto;
	padding: 40px 20px 24px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 28px;
}
.site-footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer a { color: #B7C0C3; font-size: 14px; }
.site-footer a:hover { color: var(--di-accent); }
.site-footer-bottom {
	max-width: var(--di-max-width);
	margin: 0 auto;
	padding: 16px 20px;
	border-top: 1px solid var(--di-primary-2);
	font-size: 12.5px;
	color: #8B979B;
}

/* ===== Responsividade geral ===== */
body { padding-inline: 20px; }
@media (max-width: 480px) {
	.di-card-grid { grid-template-columns: 1fr 1fr; }
	.di-destaque-secundaria-item { grid-template-columns: 72px 1fr; }
}