/* CITP — Consórcio Intermunicipal Tietê-Paraná
   Retema do template BizLand (BootstrapMade) com a identidade institucional
   do Consórcio. Carregado depois de bizland.css — sobrescreve apenas o necessário. */

:root {
	--default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--heading-font: "Montserrat", sans-serif;
	--nav-font: "Open Sans", sans-serif;

	/* Paleta derivada do azul do logo (#01AEF2, matiz ~197°).
	   O tom vivo entra em ícones/destaques; botões, links e fundos escuros
	   usam versões mais escuras do MESMO matiz para manter contraste AA. */
	--citp-azul-vivo: #01AEF2;
	--citp-azul: #0077B3;
	--citp-azul-escuro: #04435F;

	--background-color: #ffffff;
	--default-color: #333333;
	--heading-color: var(--citp-azul-escuro);
	--accent-color: var(--citp-azul);
	--surface-color: #ffffff;
	--contrast-color: #ffffff;

	--nav-color: #04435F;
	--nav-hover-color: #0077B3;
	--nav-mobile-background-color: #ffffff;
	--nav-dropdown-background-color: #ffffff;
	--nav-dropdown-color: #04435F;
	--nav-dropdown-hover-color: #0077B3;

	--citp-verde: #1E7A4C;
}

.light-background {
	--background-color: #F2FAFE;
	--surface-color: #ffffff;
}

.dark-background {
	--background-color: #04435F;
	--default-color: #ffffff;
	--heading-color: #ffffff;
	--surface-color: #0077B3;
	--contrast-color: #ffffff;
}

/* Ícones e detalhes ganham o azul vivo do logo */
.featured-services .service-item .icon i,
.stats i,
.info-item i {
	color: var(--citp-azul-vivo) !important;
}

/* ---------- Pular para o conteúdo ---------- */
.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: #fff;
	color: var(--accent-color);
	padding: 0.75rem 1.25rem;
	z-index: 99999;
	font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Barra de acessibilidade (reaproveita .topbar do BizLand) ---------- */
.barra-acessibilidade.topbar { height: auto; padding: 0.35rem 0; font-size: 0.85rem; }
.barra-acessibilidade .btn-outline-light { --bs-btn-padding-y: 0.1rem; --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.8rem; }
.barra-acessibilidade i a { color: var(--contrast-color); padding-left: 0; text-decoration: none; }
.barra-acessibilidade i a:hover { text-decoration: underline; }

.btn-primary {
	--bs-btn-bg: var(--accent-color);
	--bs-btn-border-color: var(--accent-color);
	--bs-btn-hover-bg: var(--citp-azul-escuro);
	--bs-btn-hover-border-color: var(--citp-azul-escuro);
	--bs-btn-active-bg: var(--citp-azul-escuro);
}

/* ---------- Pesquisa no cabeçalho (todas as páginas) ---------- */
.busca-header {
	margin-left: 1.25rem;
	width: 210px;
	flex-shrink: 0;
}
.busca-header-mobile {
	background: var(--citp-azul-escuro);
}
.alto-contraste .busca-header-mobile { background: #000 !important; border-top: 2px solid #FFF200; }

/* ---------- Acesso rápido (featured-services) ----------
   O .service-item do BizLand não define width, e a coluna d-flex deixa cada
   box com a largura do próprio texto. Padroniza: largura total da coluna,
   ícone e título centralizados, todos os boxes do mesmo tamanho. */
.featured-services .service-item {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 15px;
}
.featured-services .service-item h4 {
	margin-bottom: 0;
	font-size: 17px;
}

/* ---------- Seções institucionais ---------- */
.mw-content { max-width: 860px; }

/* Imagens de conteúdo vindas do CMS/WordPress (com width/height fixos no HTML)
   recebem o mesmo comportamento do .img-fluid do Bootstrap.
   As capas dos cards (.noticia-card__capa) ficam de fora: usam altura fixa + object-fit. */
.main section img:not(.noticia-card__capa),
.main article img {
	max-width: 100%;
	height: auto;
}

.numeros-hidrovia .numero-card {
	background: var(--surface-color);
	border-left: 4px solid var(--citp-verde);
	padding: 1.25rem;
	height: 100%;
	border-radius: 4px;
}

.radar-transparencia { background: #F5F7FA; border: 1px solid #E3E8EF; border-radius: 8px; }

/* ---------- Cards de notícia com capa ---------- */
.noticia-card { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
/* Capa exibida sempre quadrada (1:1) — é só uma prévia; o object-fit: cover
   preenche o quadrado cortando o excesso, sem distorcer a imagem.
   height com !important para vencer o height:auto do .img-fluid do Bootstrap */
.service-item .noticia-card__capa,
img.noticia-card__capa {
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	margin-bottom: 1rem;
}
.noticia-card h3 { padding: 0 1.5rem; }
.noticia-card h3:last-child { padding-bottom: 1.25rem; }
.noticia-card time { padding: 0 1.5rem 1.25rem; display: block; margin-top: auto; }
.noticia-card:not(:has(.noticia-card__capa)) h3 { padding-top: 1.5rem; }

/* Em telas menores, os cards de notícia rolam na horizontal (carrossel por
   arraste com scroll-snap) em vez de empilhar um embaixo do outro */
@media (max-width: 991.98px) {
	.noticias-scroll {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.75rem;
		scrollbar-width: thin;
	}
	.noticias-scroll > [class*="col-"] {
		flex: 0 0 80%;
		max-width: 80%;
		scroll-snap-align: start;
	}
}
@media (max-width: 575.98px) {
	.noticias-scroll > [class*="col-"] {
		flex: 0 0 85%;
		max-width: 85%;
	}
}

/* Capa de destaque na página da notícia: largura fluida, altura limitada */
.noticia-capa-destaque {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
}

/* ---------- Hero (vídeo ou carrossel dentro da seção .hero do BizLand) ----------
   O .hero do BizLand é display:flex com min-height:75vh e background de imagem
   própria — isso colapsa nossos blocos (filhos sem width em flex + conteúdo
   absoluto = largura 0). Neutraliza o comportamento do template aqui. */
.hero.section {
	padding: 0;
	display: block;
	min-height: 0;
	background: none;
}
.hero.section::before { display: none; }

.hero-video,
.hero-carrossel {
	width: 100%;
}

.hero-video {
	position: relative;
	height: min(65vh, 520px);
	overflow: hidden;
}
.hero-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4,67,95,0.35) 0%, rgba(4,67,95,0.75) 100%);
}
.hero-video__conteudo {
	position: absolute;
	z-index: 2;
	left: 6%;
	right: 6%;
	bottom: 3rem;
	color: #fff;
}
.hero-video__conteudo h1 {
	color: #fff;
	font-size: 2.1rem;
	font-family: var(--heading-font);
	text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
/* color explícito — o .hero p do BizLand pinta parágrafos num cinza translúcido */
.hero-video__conteudo p {
	color: #fff;
	font-size: 1.35rem;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
	margin: 0;
}

.hero-titulo-linha {
	color: #fff;
	font-size: 2rem;
	letter-spacing: 1px;
}

/* Texto com efeito de onda (replicado do site antigo — clip-path animado
   sobre uma segunda camada do mesmo texto, simulando a água nas letras) */
.hero-onda {
	position: relative;
	display: inline-block;
	margin: 0;
	font-family: var(--heading-font);
	font-weight: 800;
	font-size: 4.4rem;
	letter-spacing: 4px;
	line-height: 1.1;
	color: rgba(255, 255, 255, 0.4);
	text-shadow: none;
}
.hero-onda .hero-onda__agua {
	position: absolute;
	inset: 0;
	color: #fff;
	animation: citp-onda 4s ease-in-out infinite;
}
@keyframes citp-onda {
	0%, 100% {
		clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 69%, 100% 52%, 100% 100%, 0% 100%);
	}
	50% {
		clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero-onda .hero-onda__agua { animation: none; clip-path: none; }
}
@media (max-width: 768px) {
	.hero-onda { font-size: 2.7rem; letter-spacing: 2px; }
	.hero-titulo-linha { font-size: 1.35rem; }
	.hero-video__conteudo p { font-size: 1.1rem; }
}
.alto-contraste .hero-onda { color: #FFF200 !important; }
.alto-contraste .hero-onda .hero-onda__agua { animation: none; clip-path: none; color: #FFF200 !important; }
.hero-video__toggle {
	position: absolute;
	z-index: 3;
	right: 1rem;
	bottom: 1rem;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	border: 2px solid #fff;
	background: rgba(4,67,95,0.6);
	color: #fff;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-video__toggle:hover, .hero-video__toggle:focus { background: rgba(4,67,95,0.9); }
.alto-contraste .hero-video::after { background: rgba(0,0,0,0.8); }
.hero-carrossel .carousel-item {
	height: min(65vh, 520px);
	background-size: cover;
	background-position: center;
}
.hero-carrossel .carousel-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4,67,95,0.35) 0%, rgba(4,67,95,0.8) 100%);
}
.hero-carrossel .carousel-caption { z-index: 2; bottom: 3rem; text-align: left; left: 6%; right: 6%; }
.hero-carrossel .carousel-caption h1 { font-size: 2.1rem; font-family: var(--heading-font); text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.hero-carrossel .carousel-caption p { font-size: 1.15rem; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* ---------- Alto contraste ---------- */
.alto-contraste, .alto-contraste body { background: #000 !important; color: #FFF200 !important; }
.alto-contraste .header,
.alto-contraste .branding,
.alto-contraste .topbar,
.alto-contraste .footer,
.alto-contraste .service-item,
.alto-contraste .about-content,
.alto-contraste .numero-card,
.alto-contraste .radar-transparencia,
.alto-contraste .page-title,
.alto-contraste section {
	background: #000 !important;
	color: #FFF200 !important;
	border-color: #FFF200 !important;
}
.alto-contraste a,
.alto-contraste .navmenu a,
.alto-contraste .footer a {
	color: #FFF200 !important;
	text-decoration: underline !important;
}
.alto-contraste .btn-get-started,
.alto-contraste .btn-primary {
	background: #FFF200 !important;
	color: #000 !important;
	border: 2px solid #FFF200 !important;
}
.alto-contraste img { filter: grayscale(100%) contrast(1.2); }
.alto-contraste .hero-carrossel .carousel-item::after { background: rgba(0,0,0,0.8); }

/* ---------- Tamanho de fonte ---------- */
html[data-fonte="grande"] { font-size: 112.5%; }
html[data-fonte="maior"] { font-size: 125%; }