/*
 * Header e footer — geometria copiada do site original (HubSpot Elevate),
 * medida ao vivo com getComputedStyle/getBoundingClientRect em
 * https://canalsantosanjos.ipco.org.br/ a 1440px de viewport (2026-08-21).
 *
 * O original usa o grid manual `row-fluid`/`spanN` da HubSpot: colunas em
 * porcentagem com calha (gutter) de 2.127%. As porcentagens abaixo são
 * exatamente as do grid original — é o que faz o menu quebrar na mesma
 * palavra e os botões caírem na mesma posição.
 *
 *   span1 =  6.382%   span2 = 14.893%   span4 = 31.914%
 *   span5 = 40.425%   span6 = 48.936%   span8 = 65.957%   gutter = 2.127%
 */

/* ------------------------------------------------------------------ header */

/* Medido no original: header 168px de altura, fundo #A5C4C1 em toda a
   largura, sem padding próprio (o padding vive no bloco da esquerda). */
.csa-header {
	width: 100%;
	padding: 0;
	gap: 0;
	align-items: stretch;
}

/* span8 do original: logo + menu, com padding 24px 48px. */
.csa-header__brand {
	flex: 0 0 65.957%;
	max-width: 65.957%;
	box-sizing: border-box;
	padding: 24px 48px;
	gap: 24px; /* distância medida entre o logo e o início do menu */
	align-items: center;
}

.csa-header__brand .wp-block-site-logo {
	flex: 0 0 auto;
}

.csa-header__brand .wp-block-site-logo img {
	width: 75px;
	height: 75px;
	border-radius: 9999px;
}

/* O menu ocupa o resto do span8 e alinha os itens à direita; quando não
   cabem todos numa linha ele quebra — é assim no original (a 1440px o item
   "Contato" cai sozinho para a segunda linha, à direita). */
.csa-header__nav {
	flex: 1 1 auto;
	min-width: 0;
	/* O core dá position:relative ao próprio <nav> (âncora de submenus, que não
	   usamos aqui). Sem isso o painel mobile abre relativo ao <nav> -- que é só
	   a largura do hambúrguer -- em vez de relativo a .csa-header__brand. */
	position: static !important;
}

.csa-header__nav .wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: flex-end;
	width: 100%;
}

.csa-header .csa-header__nav .wp-block-navigation-item__content,
.csa-header .csa-header__nav a.wp-block-navigation-item__content:not(.wp-element-button) {
	display: block;
	padding: 8px 24px 8px 12px;
	font-size: 18px;
	line-height: 27.9px;
	color: #fff;
	text-decoration: none;
}

.csa-header .csa-header__nav .wp-block-navigation-item__content:hover,
.csa-header .csa-header__nav .wp-block-navigation-item__content:focus {
	color: #fff;
	text-decoration: underline;
}

/* Menu mobile (hambúrguer): no original NÃO é um overlay de tela cheia -- é um
   painel deslizante de ~50% da largura, que abre logo abaixo da linha
   logo/hambúrguer (sem cobrir o header) e deixa o resto da página (herói,
   botão de doação) visível à direita. Medido ao vivo em
   https://canalsantosanjos.ipco.org.br/ a 390px de viewport (2026-08-21):
   painel 193px de 390 (~50%), ul com padding 10px 32px, itens com padding
   8px uniforme, peso 600, sem gap entre eles (a "distância" visual vem só do
   padding interno de cada link). `.csa-header__brand` vira o ponto de
   referência de posicionamento (position:relative) para o painel abrir
   exatamente sob o logo/hambúrguer, não sob o header inteiro. */
.csa-header__brand {
	position: relative;
}

.csa-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	width: 50%;
	max-width: 320px;
	height: 100vh;
	border-radius: 0;
	box-shadow: none;
	/* zera o padding em clamp() que o core aplica ao container (baseado em
	   --wp--style--root--padding-*) -- sem isso ele soma com o padding que já
	   colocamos abaixo em .responsive-container-content e sobra só ~70px de
	   largura útil para o texto em vez de ~130px. */
	padding: 0 !important;
}

.csa-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 10px 32px;
	/* O bloco tem justifyContent:"right" (para o menu horizontal do desktop);
	   herdado sem querer pelo estado vertical mobile, isso centraliza a <ul>
	   dentro do conteúdo em vez de ocupar a largura toda -- daí a quebra de
	   linha errática. Força esticar, igual ao original (itens flush à
	   esquerda, largura cheia). */
	align-items: stretch !important;
}

.csa-header .csa-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.csa-header .csa-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	gap: 0;
	justify-content: flex-start;
	align-items: stretch !important;
}

.csa-header .csa-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	box-sizing: border-box;
	padding: 8px;
	font-weight: 600;
}

/* O botão de abrir (☰) fica em cima do header o tempo todo no core -- no
   original ele vira × no lugar, sem duplicar ícone. Como o × real do core
   mora dentro do próprio painel (aceitável -- é um padrão comum de gaveta),
   só escondemos o ☰ enquanto o painel está aberto. */
.csa-header__nav .wp-block-navigation__responsive-container-open:has(~ .wp-block-navigation__responsive-container.is-menu-open) {
	display: none;
}

/* span4 do original: os dois botões, cada um centralizado na sua meia-coluna
   (span6 dentro do span4), verticalmente centrados na altura do header. */
.csa-header__actions {
	flex: 0 0 31.914%;
	max-width: 31.914%;
	box-sizing: border-box;
	align-items: center;
}

.csa-header__actions .csa-header__buttons {
	display: flex;
	width: 100%;
	gap: 2.127%;
	margin: 0;
}

.csa-header__actions .wp-block-button {
	flex: 1 1 0;
	display: flex;
	justify-content: center;
}

.csa-header__actions .wp-block-button__link {
	flex: 0 0 auto;
	width: auto;
	/* min-width medido no original: o botão "Doação" é bem mais largo que o
	   texto, e "Doação Mensal" chega a 154px só por causa do texto. */
	min-width: 150px;
	box-sizing: border-box;
	padding: 12px 20px;
	font-size: 18px;
	font-weight: 500;
	line-height: 27.9px;
	border: 1px solid var(--wp--preset--color--accent-dark, #B45F06);
	border-radius: 8px;
	white-space: nowrap;
	text-align: center;
}

@media (max-width: 1024px) {
	.csa-header {
		flex-wrap: wrap;
	}

	.csa-header__brand,
	.csa-header__actions {
		flex-basis: 100%;
		max-width: 100%;
	}

	.csa-header__actions {
		padding: 0 48px 24px;
	}
}

@media (max-width: 600px) {
	.csa-header__brand {
		padding: 16px 20px;
	}

	.csa-header__actions {
		padding: 0 20px 16px;
	}

	.csa-header__actions .csa-header__buttons {
		flex-wrap: wrap;
		gap: 12px;
	}
}

/* ------------------------------------------------------------------ footer */

/* Medido no original: fundo #E3EDEC, padding 35px 32px 0, quatro colunas
   (logo / textos / espaçador / social+legal) alinhadas verticalmente ao
   centro; altura total 518px a 1440px de viewport. */
/* padding lateral 64px: com ele as quatro colunas caem exatamente nas mesmas
   coordenadas do original (logo em x=65, textos em x=285, social em x=947 a
   1440px de viewport). */
.csa-footer {
	padding: 35px 64px 0;
}

.csa-footer__row {
	gap: 2.127%;
	align-items: center;
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.csa-footer__col {
	box-sizing: border-box;
}

.csa-footer__col--logo {
	flex: 0 0 14.893%;
	max-width: 14.893%;
	text-align: center;
}

.csa-footer__col--about {
	flex: 0 0 40.425%;
	max-width: 40.425%;
}

.csa-footer__col--spacer {
	flex: 0 0 6.382%;
	max-width: 6.382%;
}

.csa-footer__col--social {
	flex: 0 0 31.914%;
	max-width: 31.914%;
}

.csa-footer__logo {
	margin: 0 auto;
}

.csa-footer__logo img {
	width: 150px;
	height: 150px;
}

/* Ritmo vertical do original: todo parágrafo/módulo tem 32px de respiro
   abaixo, texto 18px / line-height 27.9px. */
.csa-footer p,
.csa-footer .wp-block-buttons,
.csa-footer .wp-block-social-links,
.csa-footer figure {
	margin: 0 0 32px;
	font-size: 18px;
	line-height: 27.9px;
}

.csa-footer__title {
	font-weight: 400;
}

.csa-footer__mail a {
	color: var(--wp--preset--color--base-3, #09152B);
	text-decoration: underline;
}

.csa-footer__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 150px;
	box-sizing: border-box;
	padding: 12px 20px;
	font-size: 18px;
	font-weight: 500;
	line-height: 27.9px;
	border: 1px solid var(--wp--preset--color--accent-dark, #B45F06);
	border-radius: 8px;
}

/* Ícone do YouTube à direita do rótulo, como no botão original. */
.csa-btn-youtube .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 24px;
	height: 21px;
	background-color: currentColor;
	-webkit-mask: var(--csa-youtube-icon) no-repeat center / contain;
	mask: var(--csa-youtube-icon) no-repeat center / contain;
}

.csa-footer {
	--csa-youtube-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597C14.933 166.95 14.933 256 14.933 256s0 89.05 11.412 131.917c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.781 0 213.371-12.262c23.497-6.321 42.003-24.171 48.284-47.821C561.067 345.05 561.067 256 561.067 256s0-89.05-11.412-131.917zM232.145 337.591V174.409l142.739 81.591-142.739 81.591z'/%3E%3C/svg%3E");
}

/* Ícones sociais: 54x54, cantos 16px, laranja com ícone branco (medido). */
.csa-footer__social {
	display: flex;
	gap: 24px;
}

.csa-footer__social .wp-block-social-link {
	margin: 0;
	padding: 0;
	border-radius: 16px;
	width: 54px;
	height: 54px;
}

.csa-footer__social .wp-block-social-link-anchor {
	width: 54px;
	height: 54px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.csa-footer__social .wp-block-social-link-anchor svg {
	width: 26px;
	height: 26px;
}

/* Respiros medidos no original entre o bloco social, o banner do WhatsApp e
   o bloco "Legal". */
.csa-footer .csa-footer__cta {
	margin-bottom: 24px;
}

.csa-footer .csa-footer__whatsapp {
	margin: 11px 0 39px;
}

.csa-footer__whatsapp img {
	width: 202px;
	height: auto;
}

.csa-footer__legal {
	margin-bottom: 0;
}

.csa-footer__legal a {
	color: #000;
	text-decoration: none;
}

.csa-footer__legal a:hover {
	text-decoration: underline;
}

/* No original a coluna de textos é a mais alta e define a altura da linha:
   depois do copyright ainda vêm o respiro padrão de 32px e um módulo
   espaçador vazio de 50px. É isso que dá ao rodapé os 518px medidos. */
.csa-footer__copyright {
	margin-bottom: 32px;
}

.csa-footer__col--about::after {
	content: "";
	display: block;
	height: 82px;
}

/* As colunas do logo e do social são mais baixas que a de textos e ficam
   centradas verticalmente em relação a ela. No original elas têm módulos
   espaçadores vazios que empurram esse centro para cima -- reproduzidos aqui
   para o logo e os ícones caírem na mesma altura do original. */
.csa-footer__col--logo::after {
	content: "";
	display: block;
	height: 94px;
}

.csa-footer__col--social::after {
	content: "";
	display: block;
	height: 33px;
}

@media (max-width: 1024px) {
	.csa-footer__row {
		flex-wrap: wrap;
		gap: 32px;
	}

	.csa-footer__col--logo,
	.csa-footer__col--about,
	.csa-footer__col--social {
		flex-basis: 100%;
		max-width: 100%;
	}

	.csa-footer__col--spacer {
		display: none;
	}
}