/*
	Consulta.css
	- Estilos para página de consulta de denúncias
	- Mobile-first
	- Paleta e padrões visuais alinhados ao comunicacao.php
*/

/* Design Tokens */
:root {
	/* Cores Dongwon */
	--dongwon-blue-primary: #1e40af;
	--dongwon-blue-dark: #1b2e73;
	--dongwon-blue-light: #e6eeff;
	--dongwon-cyan: #22d3ee;
	--color-white: #ffffff;
	--color-black: #0b1220;
	--color-gray-900: #0f172a;
	--color-gray-800: #1f2937;
	--color-gray-700: #374151;
	--color-gray-600: #4b5563;
	--color-gray-500: #6b7280;
	--color-gray-400: #9ca3af;
	--color-gray-300: #d1d5db;
	--color-gray-200: #e5e7eb;
	--color-gray-100: #f3f4f6;
	--color-gray-50:  #f8fafc;

	/* Tipografia e dimensões */
	--font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	--font-size-xs: .75rem;
	--font-size-sm: .875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;

	/* Espaçamentos */
	--spacing-1: .25rem;
	--spacing-2: .5rem;
	--spacing-3: .75rem;
	--spacing-4: 1rem;
	--spacing-5: 1.25rem;
	--spacing-6: 1.5rem;
	--spacing-8: 2rem;
	--spacing-10: 2.5rem;
	--spacing-12: 3rem;

	/* Raio e sombra */
	--radius: .5rem;
	--radius-lg: .75rem;
	--radius-xl: 1rem;
	--shadow-sm: 0 1px 2px rgba(0,0,0,.06);
	--shadow-md: 0 4px 12px rgba(0,0,0,.10);
	--shadow-lg: 0 10px 25px rgba(0,0,0,.15);
}

/* Reset essencial */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: var(--font-family);
	color: var(--color-gray-800);
	background: var(--color-gray-50);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Main ocupa espaço disponível */
main.container {
	flex: 1;
}

/* Header moderno (idêntico ao comunicacao.css) */
.modern-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--color-gray-200);
	width: 100%;
	align-self: stretch;
}
.modern-header.scrolled { box-shadow: var(--shadow-md); }

.header-container {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--spacing-4);
	padding: var(--spacing-3) var(--spacing-4);
	max-width: 1200px;
	margin: 0 auto;
}
.logo-section { display: flex; align-items: center; gap: var(--spacing-3); }
.logo-link { display: inline-flex; width: 44px; height: 44px; }
.logo-default, .logo-hover, .logo-scrolled { width: 44px; height: 44px; display: block; }
.logo-hover, .logo-scrolled { display: none; }
.company-name { font-weight: 700; letter-spacing: .04em; color: var(--dongwon-blue-primary); }

.desktop-nav { display: none; }
.nav-list { list-style: none; display: flex; gap: var(--spacing-2); padding: 0; margin: 0; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; padding: .5rem .75rem; border-radius: .375rem; text-decoration: none; }
.nav-text { color: var(--color-gray-700); transition: color .2s ease; font-weight: 500; }
.nav-link:hover .nav-text, .nav-item.active .nav-text { color: var(--dongwon-blue-primary); }
.nav-underline { position: absolute; left: .75rem; right: .75rem; bottom: .35rem; height: 2px; background: var(--dongwon-blue-primary); opacity: 0; transform: scaleX(.5); transition: .2s ease; }
.nav-link:hover + .nav-underline, .nav-item.active .nav-underline { opacity: 1; transform: scaleX(1); }

.mobile-menu { display: flex; justify-content: flex-end; }
.mobile-toggle { background: transparent; border: 0; padding: .5rem; display: grid; gap: .25rem; }
.hamburger-line { width: 22px; height: 2px; background: var(--color-gray-700); border-radius: 2px; }
.mobile-nav { display: none; }
.mobile-nav.active { display: block; }
.mobile-nav .mobile-nav-content { display: grid; gap: .25rem; padding: var(--spacing-3) var(--spacing-4); background: var(--color-white); border-top: 1px solid var(--color-gray-200); }
.mobile-nav-link { color: var(--color-gray-700); text-decoration: none; padding: .5rem; border-radius: .375rem; }
.mobile-nav-link.active, .mobile-nav-link:hover { background: var(--dongwon-blue-light); color: var(--dongwon-blue-primary); }

/* Main Content */
main.container {
	max-width: 1200px;
	flex: 1;
	padding: var(--spacing-4);
}

/* Cards de formulário e resultado */
.card {
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
}

.card-body {
	padding: var(--spacing-5);
}

.card h1.h4 {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--dongwon-blue-primary);
	margin-bottom: var(--spacing-4);
}

.card h2.h5 {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--dongwon-blue-primary);
	margin-bottom: var(--spacing-4);
}

/* Formulário */
.form-label {
	font-weight: 600;
	color: var(--color-gray-700);
	margin-bottom: var(--spacing-2);
}

.form-control {
	padding: var(--spacing-3);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-gray-300);
	font-size: var(--font-size-base);
}

.form-control:focus {
	border-color: var(--dongwon-blue-primary);
	box-shadow: 0 0 0 0.2rem rgba(30, 64, 175, 0.25);
}

.form-text {
	color: var(--color-gray-600);
	font-size: var(--font-size-sm);
}

/* Alerts responsivos */
.alert {
	padding: var(--spacing-3);
	border-radius: var(--radius-lg);
	margin-bottom: var(--spacing-4);
	font-size: var(--font-size-sm);
}

/* Definition list responsiva */
.card dl.row {
	margin-bottom: 0;
}

.card dl.row dt,
.card dl.row dd {
	padding: var(--spacing-2) 0;
	border-bottom: 1px solid var(--color-gray-100);
}

.card dl.row dt {
	font-weight: 600;
	color: var(--color-gray-700);
	font-size: var(--font-size-sm);
}

.card dl.row dd {
	color: var(--color-gray-800);
	font-size: var(--font-size-sm);
	margin-bottom: 0;
}

/* Mobile-first: stacked em mobile */
.card dl.row dt.col-sm-4,
.card dl.row dd.col-sm-8 {
	width: 100%;
}

.card dl.row dt.col-sm-4 {
	padding-bottom: var(--spacing-1);
}

/* Botões */
.btn-primary {
	background: var(--dongwon-blue-primary);
	border-color: var(--dongwon-blue-primary);
	font-weight: 600;
	padding: var(--spacing-3) var(--spacing-6);
	border-radius: var(--radius-lg);
	width: 100%;
	font-size: var(--font-size-base);
}
.btn-primary:hover {
	background: #2343b0;
	border-color: #2343b0;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(30, 64, 175, .25);
}

/* Turnstile centralizado em mobile */
.cf-turnstile {
	margin: 0 auto;
}

/* Footer full-width */
.site-footer {
	width: 100%;
	background: var(--dongwon-blue-dark);
	color: var(--color-white);
	margin-top: var(--spacing-8);
	padding: var(--spacing-4) var(--spacing-4);
}
.site-footer > div { max-width: 1200px; margin: 0 auto; text-align: center; font-size: var(--font-size-sm); }

/* Utilidades */
.text-nowrap { white-space: nowrap; }

/* Responsividade */
@media (min-width: 640px) {
	.header-container { grid-template-columns: auto 1fr auto; }
	
	/* Cards com mais padding */
	.card-body {
		padding: var(--spacing-6);
	}
	
	/* Definition list em 2 colunas */
	.card dl.row dt.col-sm-4 {
		width: 33.333333%;
		padding-bottom: var(--spacing-2);
	}
	
	.card dl.row dd.col-sm-8 {
		width: 66.666667%;
	}
	
	/* Botão com largura automática */
	.btn-primary {
		width: auto;
		min-width: 180px;
	}
}

/* Exibir navegação desktop somente a partir de 982px */
@media (min-width: 982px) {
	.desktop-nav { display: block; }
	.mobile-menu, .mobile-nav { display: none; }
}

@media (min-width: 768px) {
	main.container { 
		padding-top: var(--spacing-10); 
		padding-bottom: var(--spacing-10); 
	}
	
	.card h1.h4 {
		font-size: var(--font-size-2xl);
	}
	
	.card-body {
		padding: var(--spacing-8);
	}
}

@media (min-width: 1024px) {
	.header-container { padding: var(--spacing-4) var(--spacing-8); }
	.logo-link, .logo-default, .logo-hover, .logo-scrolled { width: 56px; height: 56px; }
}