/**
 * _variables.css — Tokens do Design System FBB.
 *
 * Valores extraídos e confirmados em DESIGN.md (JSON REST API do Figma +
 * paleta oficial fechada pelo cliente). Nenhum valor aqui é estimado.
 */

:root {
	/* ---------------------------------------------------------------------
	 * Cores de marca (paleta oficial FBB, confirmada pelo cliente)
	 * ------------------------------------------------------------------ */
	--fbb-color-navy: #002378;
	--fbb-color-red: #C1121F;
	--fbb-color-yellow: #FFDA00;
	--fbb-color-green: #2A8836;
	--fbb-color-offwhite: #F2F2F2;
	--fbb-color-text: #6E6E6E;
	--fbb-color-white: #FFFFFF;
	--fbb-color-black: #000000;

	/* Nota de uso pontual (não é token de marca) — ver DESIGN.md Seção 1. */
	--fbb-color-petroleo: #004A61;

	/* ---------------------------------------------------------------------
	 * Cores de sistema (NÃO são cores de marca — uso exclusivo documentado)
	 * ------------------------------------------------------------------ */
	--fbb-color-whatsapp: #25D366;
	--fbb-color-uk-red: #C8102E;
	--fbb-color-uk-blue: #012169;
	--fbb-color-card-border: #D2C6C6;
	--fbb-color-gray-page-bg: #F5F5F5;

	/* ---------------------------------------------------------------------
	 * Tipografia
	 * ------------------------------------------------------------------ */
	--fbb-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	--fbb-font-weight-regular: 400;
	--fbb-font-weight-medium: 500;
	--fbb-font-weight-bold: 700;
	--fbb-font-weight-extrabold: 800;

	/* ---------------------------------------------------------------------
	 * Espaçamento e grid
	 * ------------------------------------------------------------------ */
	/* Grid canônico: 1440px úteis + 60px de gutter em cada lado. */
	--fbb-content-max-width: 1440px;
	--fbb-container-max-width: 1560px;
	--fbb-content-narrow-width: 1200px;
	--fbb-container-padding-inline: 60px;
	--fbb-container-padding-tablet: 40px;
	--fbb-container-padding-mobile: 22px;

	/* ---------------------------------------------------------------------
	 * Escala responsiva compartilhada por todas as páginas
	 * ------------------------------------------------------------------ */
	--fbb-page-gutter: 60px;
	--fbb-section-min-height: 100svh;
	--fbb-section-space-block: clamp( 82px, 9svh, 132px );
	--fbb-section-space-large: clamp( 72px, 8vw, 96px );
	--fbb-section-space-medium: clamp( 56px, 6vw, 72px );
	--fbb-section-space-small: clamp( 44px, 5vw, 56px );
	--fbb-section-title-size: 48px;
	--fbb-section-title-small-size: 40px;
	--fbb-body-size: 16px;
	--fbb-grid-gap: 24px;
	--fbb-content-gap: clamp( 32px, 5vw, 72px );
	--fbb-button-padding-y: 18px;
	--fbb-button-padding-x: 30px;

	/* ---------------------------------------------------------------------
	 * Corner radius
	 * ------------------------------------------------------------------ */
	--fbb-radius-pill: 200px;
	--fbb-radius-input-pill: 40px;
	--fbb-radius-input-form: 8px;
	--fbb-radius-card: 8px;

	/* Bordas e elevação compartilhadas. */
	--fbb-border-subtle: #E4E7EC;
	--fbb-shadow-card: 0 10px 24px rgba( 0, 35, 120, .08 );
	--fbb-shadow-card-strong: 0 16px 38px rgba( 0, 35, 120, .12 );

	/* ---------------------------------------------------------------------
	 * Breakpoints (uso em JS/media queries via valor cru — CSS não lê
	 * var() dentro de @media, então estes ficam também documentados aqui
	 * como referência e usados literalmente nos arquivos de componente)
	 * ------------------------------------------------------------------ */
	--fbb-bp-mobile: 375px;
	--fbb-bp-mobile-lg: 767px;
	--fbb-bp-tablet: 1023px;
	--fbb-bp-desktop: 1439px;
	--fbb-bp-desktop-lg: 1920px;

	/* ---------------------------------------------------------------------
	 * Z-index (escala centralizada para evitar "guerra de z-index")
	 * ------------------------------------------------------------------ */
	--fbb-z-header: 1000;
	--fbb-z-mobile-nav: 999;
	--fbb-z-modal: 2000;
}

/* Notebook, incluindo 1366×768. */
@media ( max-width: 1439px ) {
	:root {
		--fbb-page-gutter: 40px;
		--fbb-section-space-block: clamp( 58px, 7svh, 82px );
		--fbb-section-title-size: 40px;
		--fbb-section-title-small-size: 34px;
		--fbb-body-size: 15px;
		--fbb-grid-gap: 18px;
		--fbb-button-padding-y: 15px;
		--fbb-button-padding-x: 24px;
	}
}

/* Notebook com pouca altura — caso clássico 1366×768. */
@media ( min-width: 1024px ) and ( max-height: 800px ) {
	:root {
		--fbb-section-space-block: clamp( 46px, 6svh, 64px );
		--fbb-section-title-size: 38px;
		--fbb-section-title-small-size: 32px;
		--fbb-body-size: 14px;
		--fbb-grid-gap: 16px;
	}
}

/* Tablet. */
@media ( max-width: 1023px ) {
	:root {
		--fbb-page-gutter: 40px;
		--fbb-section-space-block: 72px;
		--fbb-section-title-size: 36px;
		--fbb-section-title-small-size: 32px;
		--fbb-body-size: 15px;
		--fbb-grid-gap: 18px;
	}
}

/* Mobile. */
@media ( max-width: 767px ) {
	:root {
		--fbb-page-gutter: 22px;
		--fbb-section-space-block: 64px;
		--fbb-section-title-size: clamp( 28px, 8vw, 34px );
		--fbb-section-title-small-size: clamp( 26px, 7vw, 30px );
		--fbb-body-size: 15px;
		--fbb-grid-gap: 14px;
		--fbb-button-padding-y: 14px;
		--fbb-button-padding-x: 20px;
	}
}

/* Mobile compacto. */
@media ( max-width: 479px ) {
	:root {
		--fbb-page-gutter: 18px;
		--fbb-section-space-block: 52px;
		--fbb-body-size: 14px;
	}
}

/**
 * _reset.css — Reset mínimo, moderno (não um reset agressivo estilo
 * Eric Meyer). Objetivo: eliminar inconsistências entre navegadores sem
 * remover semântica útil.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	margin: 0;
	overflow-x: hidden;
	font-family: var( --fbb-font-family );
	font-weight: var( --fbb-font-weight-regular );
	color: var( --fbb-color-navy );
	background-color: var( --fbb-color-white );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure {
	margin: 0;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

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

button {
	background: none;
	border: none;
}

a {
	color: inherit;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Respeita a preferência de usuários que reduzem movimento (acessibilidade). */
@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Classe utilitária nativa do WordPress (usada em labels de formulário
 * acessíveis, ex. .screen-reader-text no formulário de newsletter). */
.screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.fbb-container {
	width: 100%;
	max-width: var( --fbb-container-max-width );
	margin-inline: auto;
	padding-inline: var( --fbb-page-gutter );
}

/**
 * Layout global FBB.
 *
 * Contrato para páginas novas:
 * - .fbb-section__container: eixo horizontal canônico de 1440px úteis.
 * - .fbb-section--editorial: seção de conteúdo com no mínimo 100svh.
 * - .fbb-section--compact: faixa funcional sem altura mínima editorial.
 */

.fbb-section__container,
.fbb-layout-container {
	width: 100%;
	max-width: var( --fbb-container-max-width );
	margin-inline: auto;
	padding-inline: var( --fbb-page-gutter );
	box-sizing: border-box;
}

.fbb-section--editorial {
	min-height: var( --fbb-section-min-height );
	padding-block: var( --fbb-section-space-block );
}

.fbb-section--compact {
	min-height: 0;
}

.fbb-section__body,
.fbb-body-copy {
	font-size: var( --fbb-body-size );
	line-height: 1.7;
}

.fbb-responsive-grid {
	display: grid;
	gap: var( --fbb-grid-gap );
}

@media ( max-width: 1023px ) {
	.fbb-responsive-grid--collapse-tablet {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 767px ) {
	.fbb-responsive-grid--collapse-mobile {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.fbb-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* =============================================
   VLibras Widget — Ajustes de posicionamento
   Ref: https://vlibras.gov.br/doc/widget
   ============================================= */

body div[vw].enabled {
	/* Sobrescreve a camada máxima aplicada pelo CSS remoto do VLibras. */
	z-index: calc( var( --fbb-z-header ) + 10 ) !important;
}

[vw] .vw-access-button {
	/* Acima dos elementos fixos do tema e abaixo de modais/overlays. */
	z-index: calc( var( --fbb-z-header ) + 10 );
}

/* Evita que o widget quebre o layout em mobile. */
@media ( max-width: 768px ) {
	[vw] .vw-access-button {
		bottom: 70px;
	}
}

/**
 * _typography.css — Fontes self-hosted (Montserrat) + estilos de texto
 * reutilizáveis confirmados no DESIGN.md (JSON REST API do Figma).
 *
 * DECISÃO DE ARQUITETURA (PRD.md/DESIGN.md): Montserrat self-hosted,
 * SEM Google Fonts CDN — arquivos woff2 em assets/fonts/montserrat/.
 * font-display: swap em todos os pesos, preload do peso Bold (crítico
 * para o hero) feito via wp_enqueue_style + link rel=preload, ver
 * inc/enqueue.php.
 */

@font-face {
	font-family: 'Montserrat';
	src: url( '../../fonts/montserrat/montserrat-variable.woff2' ) format( 'woff2' );
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

/* =============================================================
 * Eyebrow — label pequeno com letter-spacing, confirmado no DESIGN.md
 * (18px Medium 500, letterSpacing 2.16px). Reutilizado em todas as
 * páginas ("Últimas notícias", "QUEM SOMOS", "COMO ATUAMOS", etc.).
 * ============================================================= */
.fbb-eyebrow {
	display: block;
	font-family: var( --fbb-font-family );
	font-weight: var( --fbb-font-weight-medium );
	font-size: 18px;
	letter-spacing: 2.16px;
	line-height: 1.22;
	color: var( --fbb-color-navy );
	margin: 0 0 12px;
}

.fbb-eyebrow--red {
	color: var( --fbb-color-red );
}

.fbb-eyebrow--sm {
	font-size: 13px;
	letter-spacing: 1.5px;
}

.fbb-eyebrow--light {
	color: var( --fbb-color-white );
}

.fbb-eyebrow--yellow {
	color: var( --fbb-color-yellow );
}

/* Primitivas editoriais compartilhadas pelas páginas institucionais. */
.fbb-page-eyebrow {
	margin: 0 0 12px;
	color: var( --fbb-color-red );
	font-size: 12px;
	font-weight: var( --fbb-font-weight-extrabold );
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.fbb-page-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-bottom: 24px;
	color: #8A8A8A;
	font-size: 12px;
	line-height: 1.5;
}

.fbb-page-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.fbb-page-breadcrumb a:hover,
.fbb-page-breadcrumb a:focus-visible {
	color: var( --fbb-color-navy );
	text-decoration: underline;
}

/* =============================================================
 * Heading de seção — 48px Bold, confirmado no DESIGN.md.
 * ============================================================= */
.fbb-section__title {
	font-family: var( --fbb-font-family );
	font-weight: var( --fbb-font-weight-bold );
	font-size: var( --fbb-section-title-size, 48px );
	line-height: 1.208; /* 58px sobre 48px. */
	color: var( --fbb-color-navy );
	margin: 0;
}

.fbb-section__header {
	text-align: center;
	margin-bottom: 56px;
}

.fbb-section__header--left {
	text-align: left;
	max-width: 720px;
}

.fbb-section__header--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	text-align: left;
	max-width: none;
}

.fbb-section__title--40 {
	font-size: var( --fbb-section-title-small-size, 40px );
}

.fbb-section__title--36 {
	font-size: 36px;
}

@media ( max-width: 767px ) {
	.fbb-section__title,
	.fbb-section__title--40,
	.fbb-section__title--36 {
		font-size: var( --fbb-section-title-size, 28px );
	}

	.fbb-section__header--split {
		flex-direction: column;
		align-items: flex-start;
	}
}