/*
 * Footer — Figma node 288:717 "Footer/Global" (desktop, 1920 canvas).
 * Cores pixel-sampled em 2026-08-09:
 *   fundo                = #10283d (--color-surface-inverse)
 *   "à Proa" (destaque)  = #3ab2b2 (novo --color-accent-teal, ver tokens.css)
 *   botão Assinar        = #145e6e (--color-secondary, mesmo tom do link de e-mail)
 *   placeholder do input = #7d8699 no Figma — era match exato com
 *                          --color-text-tertiary, mas o token passou a #687185
 *                          em 2026-09-28 por contraste (ver tokens.css)
 *   borda do input       = #d9dee5 (--color-border-default) — match exato
 *   linha divisória       = #c3c9ce — sem token equivalente, ~75% branco sobre o fundo
 * Texto secundário sobre o fundo escuro (descrição, endereço, copyright, links
 * LGPD) não tem token dedicado no Design System; o sampling mostrou blends de
 * anti-aliasing consistentes com branco em opacidade reduzida, então uso
 * rgba(255,255,255,.72) em vez de inventar um hex novo.
 */

.ibdmar-footer {
	background: var(--color-surface-inverse);
	--ibdmar-footer-divider: #c3c9ce;
	--ibdmar-footer-muted: rgba(255, 255, 255, 0.72);
}

.ibdmar-footer__main-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-48);
	padding-block: var(--sp-48);
	border-bottom: 1px solid var(--ibdmar-footer-divider);
}

.ibdmar-footer__muted {
	color: var(--ibdmar-footer-muted);
	margin: 0;
}

/* Newsletter */

.ibdmar-footer__newsletter {
	flex: 1 1 360px;
	max-width: 420px;
}

.ibdmar-footer__newsletter-heading {
	display: flex;
	align-items: center;
	gap: var(--sp-16);
	margin-bottom: var(--sp-24);
}

.ibdmar-footer__newsletter-icon {
	width: 40px;
	height: auto;
	flex-shrink: 0;
}

.ibdmar-footer__newsletter-title {
	margin: 0;
	font: var(--text-h5);
	color: var(--color-text-inverse);
}

.ibdmar-footer__accent {
	color: var(--color-accent-teal);
}

.ibdmar-footer__form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
}

.ibdmar-footer__field label {
	display: block;
	margin-bottom: var(--sp-8);
	font: var(--text-body-emphasis);
	color: var(--color-text-inverse);
}

.ibdmar-footer__field input {
	width: 100%;
	padding: var(--sp-16);
	border-radius: 6px;
	border: 1px solid var(--color-border-default);
	background: var(--color-surface-primary);
	color: var(--color-text-primary);
	font: var(--text-body-default);
}

.ibdmar-footer__field input::placeholder {
	color: var(--color-text-tertiary);
}

.ibdmar-footer__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-8);
	font: var(--text-caption);
	color: var(--ibdmar-footer-muted);
}

/* 2026-09-24 (áreas de toque): checkbox de 13×13px -> 20×20px, e a linha
   do <label> (que também marca a caixa) com ~42px de altura tocável sem
   mudar o espaçamento do formulário (padding + margem negativa). */
.ibdmar-footer__consent {
	padding-block: 12px;
	margin-block: -12px;
	cursor: pointer;
}

.ibdmar-footer__consent input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-secondary);
	cursor: pointer;
}

.ibdmar-btn--secondary {
	background: var(--color-secondary);
	color: var(--color-text-inverse);
	align-self: flex-start;
}

.ibdmar-btn--secondary:hover {
	background: var(--color-secondary-hover);
}

.ibdmar-footer__form-message {
	margin: 0;
	font: var(--text-caption);
	min-height: 1.2em;
}

.ibdmar-footer__form-message.is-success {
	color: var(--color-accent-teal);
}

.ibdmar-footer__form-message.is-error {
	/* --color-feedback-error (#b3261e) do Design System é escuro demais pra
	   legibilidade sobre o fundo azul-marinho do rodapé — clareado mantendo
	   o mesmo matiz, já que o Figma nunca desenhou um estado de erro sobre
	   fundo escuro pra amostrar. */
	color: #e2857a;
}

/* Marca */

.ibdmar-footer__brand {
	flex: 1 1 280px;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
}

.ibdmar-footer__brand-lockup {
	display: flex;
	align-items: center;
	gap: var(--sp-16);
}

.ibdmar-footer__brand-lockup img {
	border-radius: 50%;
}

.ibdmar-footer__brand-name {
	margin: 0;
	font: var(--text-h5);
	color: var(--color-text-inverse);
}

.ibdmar-social {
	display: flex;
	align-items: center;
	gap: var(--sp-16);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ibdmar-social__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--ibdmar-footer-divider);
	color: var(--color-text-inverse);
}

/* 2026-09-24 (áreas de toque): o círculo continua com 40px, mas a área que
   responde ao toque vai a 44×44px (mínimo WCAG 2.5.5) com uma camada
   invisível 2px maior em volta. Aumentar o círculo em si não cabia: 5 ícones
   de 44px + espaços passariam da largura de um celular de 320px. */
.ibdmar-social__link::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
}

.ibdmar-social__link:hover {
	background: var(--color-brand-primary-hover);
	color: var(--color-text-inverse);
	border-color: var(--color-accent-teal);
}

.ibdmar-footer__contact-line {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-8);
	margin: 0;
	color: var(--ibdmar-footer-muted);
}

.ibdmar-footer__contact-line svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-accent-teal);
}

/* 2026-09-23: o e-mail usava --color-secondary (#145e6e), que sobre o fundo
   azul-marinho do rodapé dá contraste de ~2:1 — praticamente invisível no
   celular, principalmente sob luz do sol. Trocado pelo teal claro (mesmo
   tom dos ícones ao lado, contraste ~6:1, passa no WCAG AA). */
.ibdmar-footer__contact-line a {
	color: var(--color-accent-teal);
	text-decoration: none;
}

.ibdmar-footer__contact-line a:hover {
	color: var(--color-text-inverse);
}

/* Mapa no fundo azul-marinho do rodapé — variação escura do componente
   .ibdmar-mapa (base.css, inc/endereco.php). */
.ibdmar-mapa--escuro {
	border-color: var(--ibdmar-footer-divider);
	background: rgba(255, 255, 255, 0.05);
}

.ibdmar-mapa--escuro .ibdmar-mapa__btn {
	color: var(--color-text-inverse);
}

.ibdmar-mapa--escuro .ibdmar-mapa__btn:hover,
.ibdmar-mapa--escuro .ibdmar-mapa__btn:focus-visible {
	background: rgba(255, 255, 255, 0.08);
}

.ibdmar-mapa--escuro .ibdmar-mapa__btn svg {
	color: var(--color-accent-teal);
}

.ibdmar-mapa--escuro .ibdmar-mapa__note {
	color: var(--ibdmar-footer-muted);
}

/* Barra inferior */

.ibdmar-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-16);
	padding-block: var(--sp-16);
}

.ibdmar-footer__copy {
	margin: 0;
	font: var(--text-caption);
	color: var(--ibdmar-footer-muted);
}

.ibdmar-footer__lgpd {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-24);
}

.ibdmar-footer__lgpd a {
	font: var(--text-caption);
	color: var(--ibdmar-footer-muted);
	text-decoration: none;
	/* Área de toque: ~42px de altura sem mudar o layout (ver
	   .ibdmar-breadcrumb a em subpage.css). */
	padding-block: 12px;
	margin-block: -12px;
}

.ibdmar-footer__lgpd a:hover {
	color: var(--color-text-inverse);
}