/**
 * Base visual global do Blog Infojobs.
 *
 * Mantém somente tokens, reset complementar e utilitários estruturais usados
 * por mais de um template. Componentes específicos permanecem em seus arquivos.
 */

:root {
	--color-primary: #0d3878;
	--color-primary-dark: #082a5b;
	--color-link: #026bd4;
	--color-text: #404040;
	--color-text-strong: #344054;
	--color-dark: #282d33;
	--color-black: #14171a;
	--color-text-muted: #667085;
	--color-background: #f7f9fa;
	--color-surface: #fff;
	--color-surface-muted: #f4f7fb;
	--color-border: #d7dce0;
	--color-border-light: #e4e8ec;
	--color-border-strong: #aeb8c5;
	--color-candidates: #ff6600;
	--color-media: #7955d8;
	--color-danger: #c62828;
	--color-highlight: #deefff;
	--color-on-primary-muted: rgba(255, 255, 255, 0.88);
	--color-on-primary-soft: rgba(255, 255, 255, 0.65);
	--color-on-primary-faint: rgba(255, 255, 255, 0.45);
	--color-primary-overlay: rgba(13, 56, 120, 0.74);
	--color-primary-tint: rgba(13, 56, 120, 0.08);
	--color-link-tint: rgba(2, 107, 212, 0.14);

	--content-width: 1170px;
	--page-padding: 20px;

	--radius-sm: 8px;
	--radius-md: 20px;
	--radius-pill: 999px;

	--space-xs: 5px;
	--space-sm: 10px;
	--space-md: 20px;
	--space-lg: 40px;
	--space-xl: 60px;

	--shadow-sm: 0 2px 8px rgba(13, 56, 120, 0.12);
	--shadow-md: 0 6px 18px rgba(13, 56, 120, 0.16);
	--shadow-neutral-sm: 0 3px 6px rgba(0, 0, 0, 0.14);
	--shadow-neutral-md: 0 8px 24px rgba(0, 0, 0, 0.16);
	--shadow-neutral-lg: 0 12px 28px rgba(0, 0, 0, 0.2);
}

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: var(--color-background);
	color: var(--color-text);
	/*font-family: "Source Sans Pro", "Trebuchet MS", Helvetica, Arial, sans-serif;*/
	font-family: "Breve Sans Text", "Trebuchet MS", Helvetica, Arial, sans-serif;
	text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
	font: inherit;
}

img,
picture,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

/* Estruturas compartilhadas entre Home, landing pages e archives. */
.site-section {
	width: 100%;
	margin: 0 auto var(--space-xl);
	padding-inline: var(--page-padding);
}

.site-section-flush {
	margin-bottom: 0;
}

.section-inner {
	width: min(100%, var(--content-width));
	margin-inline: auto;
}

.section-inner-spaced {
	margin-bottom: var(--space-lg);
}

.section-title {
	width: 100%;
	margin: 0 0 var(--space-md);
	color: var(--color-primary);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
}

.section-title-center {
	text-align: center;
}

.section-title-small {
	font-size: 26px;
}

.section-subtitle {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 1.4;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	top: 5px;
	left: 5px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 16px;
	margin: 0;
	clip: auto;
	background: var(--color-surface);
	color: var(--color-primary);
	font-weight: 600;
	white-space: normal;
}

@media (max-width: 520px) {
	:root {
		--page-padding: 14px;
	}

	.site-section {
		margin-bottom: var(--space-lg);
	}

	.section-title {
		font-size: 26px;
	}
}