/*
 * Header — Figma node 284:3 "Header / Global" (desktop, 1920 canvas).
 * Cores validadas por pixel-sampling no screenshot do node (2026-08-09):
 *   Band1 Utility bg = #f4f7f9 (--color-background-subtle)
 *   Band2 Logo bg    = #ffffff (--color-surface-primary)
 *   Botão Associado  = #10283d (--color-brand-primary)
 *
 * Fidelidade responsiva completa (breakpoints tablet/mobile próprios, menu
 * mobile em acordeão) é escopo do Sprint 7 — aqui o header colapsa de forma
 * funcional abaixo do desktop, mas sem replicar pixel a pixel os frames
 * "Responsivo & Handoff" (node 159:2) ainda.
 */

.ibdmar-header {
	/* Header "congelado" (pedido do Ranyer, 2026-08-27, inspirado no padrão
	   do wwf.org.br): sticky em vez de fixed — continua ocupando seu espaço
	   normal no fluxo do documento até o scroll passar por ele, então não
	   precisa de nenhum padding-top compensatório espalhado pelos templates
	   (a altura do header varia por breakpoint: banda utilitária some no
	   mobile, logo muda de 130px/90px/44px). z-index abaixo do banner de
	   cookies (900, fixo na base) e acima de qualquer conteúdo de página
	   (nada mais no tema usa z-index de página nesse nível). */
	position: sticky;
	top: 0;
	z-index: 50;
}

.ibdmar-header__utility {
	background: var(--color-background-subtle);
	border-bottom: 1px solid var(--color-border-subtle);
}

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

.ibdmar-header__tag {
	margin: 0;
	font: var(--text-caption);
	color: var(--color-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ibdmar-header__utility-right {
	display: flex;
	align-items: center;
	gap: 20px; /* medido no Figma node 284:3 */
	flex-shrink: 0;
}

.ibdmar-lang-switcher {
	display: flex;
	align-items: center;
	gap: 14px; /* medido no Figma node 284:3 */
}

.ibdmar-lang-switcher__link {
	font: var(--text-caption);
	color: var(--color-text-tertiary);
	text-decoration: none;
}

.ibdmar-lang-switcher__link:hover {
	color: var(--color-text-heading);
}

.ibdmar-lang-switcher__link.is-active {
	color: var(--color-text-heading);
	font-weight: 700;
}

.ibdmar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-8) var(--sp-16);
	border-radius: 6px;
	border: none;
	font: var(--text-body-emphasis);
	text-decoration: none;
	cursor: pointer;
}

.ibdmar-btn--primary {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

.ibdmar-btn--primary:hover {
	background: var(--color-brand-primary-hover);
	color: var(--color-text-inverse);
}

/* Variante "Outline" do Design System (Figma IDM-24) — usada primeiro no
   botão secundário "YouTube" do Podcast (2026-08-22). */
.ibdmar-btn--outline {
	background: transparent;
	color: var(--color-brand-primary);
	border: 1.5px solid var(--color-brand-primary);
}

.ibdmar-btn--outline:hover {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

/* O "Associado" da barra utilitária é bem mais compacto no Figma (~95×29px,
   node 0:17) do que os outros botões do site (~44-46px de altura, ex.
   Assinar/Inscreva-se/Ver todas) — não é o mesmo componente, então tem seu
   próprio tamanho em vez de reusar o padding do .ibdmar-btn genérico. */
.ibdmar-header__associado {
	padding: 6px var(--sp-16);
	font: var(--text-caption);
	font-weight: 700;
}

/* Dropdown do botão Associado (só quando logado) — 2026-09-05, pedido do
   Ranyer pra mostrar "mais informações" sem sair da página. Visual
   reaproveitado 1:1 do submenu do nav (.ibdmar-nav__submenu, mesma sombra/
   borda/raio/transição) só que ancorado à direita, já que o botão fica na
   ponta direita da barra utilitária. Só existe em desktop — abaixo de
   1280px o botão inteiro some (ver @media mais abaixo), então não precisa
   de JS de toggle por toque, :hover/:focus-within bastam. */
.ibdmar-header__associado-wrap {
	position: relative;
}

.ibdmar-header__associado-menu {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 220px;
	margin-top: var(--sp-8);
	padding: var(--sp-16);
	background: var(--color-surface-primary);
	border: 1px solid var(--color-border-default);
	border-radius: 8px;
	box-shadow: 0 12px 24px rgba(16, 40, 61, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 20;
}

.ibdmar-header__associado-wrap:hover .ibdmar-header__associado-menu,
.ibdmar-header__associado-wrap:focus-within .ibdmar-header__associado-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ibdmar-header__associado-menu-nome {
	margin: 0 0 var(--sp-8);
	font: var(--text-body-emphasis);
	color: var(--color-text-heading);
}

.ibdmar-header__associado-menu-tag {
	display: inline-block;
	margin-bottom: var(--sp-8);
	padding: 2px var(--sp-8);
	border-radius: 999px;
	background: var(--color-background-subtle);
	font: var(--text-caption);
	color: var(--color-text-tertiary);
}

.ibdmar-header__associado-menu .ibdmar-status-badge {
	display: inline-flex;
	margin-bottom: var(--sp-8);
}

.ibdmar-header__associado-menu-link {
	display: block;
	padding: var(--sp-8) 0;
	font: var(--text-body-default);
	color: var(--color-text-heading);
	text-decoration: none;
	border-top: 1px solid var(--color-border-default);
}

.ibdmar-header__associado-menu-link:hover {
	color: var(--color-secondary);
}

.ibdmar-header__associado-menu-link--logout {
	color: var(--color-text-tertiary);
}

.ibdmar-header__logo-band {
	background: var(--color-surface-primary);
}

.ibdmar-header__logo-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-24);
	/* 2026-09-05 (pedido do Ranyer): a logo em si está no tamanho certo
	   (100px, ver .ibdmar-header__logo img) — o pedido aqui foi só mais
	   espaço em branco ao redor dela (a faixa que também tem o nav
	   Instituto/Notícias/Publicações), sem aumentar a imagem de novo.
	   padding-block dobrado de 16px pra 32px.
	   2026-09-06: Ranyer pediu mais espaço ainda + nav maior junto (ver
	   análise — logo de 100px ao lado de nav em escala de corpo/16px ficava
	   desequilibrado). Subiu pra 40px (sem token exato na escala --sp-*,
	   por isso calc(32+8) em vez de inventar um --sp-40 sozinho). Nav
	   escalada em paralelo logo abaixo (@media min-width:1280px) pra não
	   só alargar o vazio ao redor de um texto pequeno.
	   2026-09-06, mesmo dia: Ranyer pediu mais um passo ("pode aumentar
	   mais?"). Subiu pra 48px — cai certinho em --sp-48, sem precisar de
	   calc(). Nav subiu junto na mesma proporção, ver @media abaixo. */
	padding-block: var(--sp-48);
}

.ibdmar-header__logo {
	display: block;
	flex-shrink: 0;
}

/* 2026-09-29: a logo passou a ser um <picture> (versão WebP + PNG de
   reserva, ver header.php). <picture> é inline por padrão, e um elemento
   inline reserva espaço para o "rabo" das letras mesmo sem texto dentro —
   sobrariam ~4px de folga embaixo da logo. display:block tira isso. */
.ibdmar-header__logo picture {
	display: block;
}

.ibdmar-header__logo img {
	/* 2026-09-05: arquivo novo (ver header.php) tem aspecto bem mais largo
	   (5,73:1 vs 2,70:1 do anterior). Primeira tentativa manteve a mesma
	   LARGURA de antes (383px), o que por causa do aspecto mais achatado
	   deu uma altura pequena (67px) — Ranyer reportou que ficou "muito
	   pequeno". Aumentada pra 100px (~573px de largura) pra recuperar
	   presença visual; o container tem 1488px e o nav ~615px, sobra espaço
	   de sobra antes de disputar com o menu. Ainda com boa margem pra
	   Retina 3x (100px×3 = 300px, abaixo dos 458px disponíveis). */
	height: 100px;
	width: auto;
}

/* Toggle mobile (hambúrguer) */
.ibdmar-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: var(--sp-8);
	color: var(--color-brand-primary);
	cursor: pointer;
}

.ibdmar-header__toggle-icon-close {
	display: none;
}

.ibdmar-header__toggle[aria-expanded="true"] .ibdmar-header__toggle-icon-open {
	display: none;
}

.ibdmar-header__toggle[aria-expanded="true"] .ibdmar-header__toggle-icon-close {
	display: block;
}

/* Nav — mobile-first: painel recolhido, expande abaixo do logo-band.
   Corrigido 2026-08-09: "width: 100%" incondicional fazia o <nav> ocupar a
   faixa inteira mesmo no desktop, e como a lista não é centralizada dentro
   dele, os itens ficavam colados perto da logo em vez de na borda direita do
   container (o space-between só empurra o <nav> como um todo, não o
   conteúdo dele). Agora só força 100% abaixo do desktop, onde o <nav> quebra
   linha para virar o painel do menu mobile. */
.ibdmar-nav {
	flex: 0 1 auto;
}

/* Escondido por padrão (desktop) — só aparece dentro do painel mobile
   aberto, ver @media (max-width: 1279px) abaixo. Sem isso o <div> usa o
   display:block padrão do navegador e vaza pro layout do desktop. */
.ibdmar-nav__mobile-extra {
	display: none;
}

@media (max-width: 1279px) {
	.ibdmar-nav {
		flex-basis: 100%;
	}

	/* Sem isso o <nav> fechado (altura zero, mas numa linha própria do flex)
	   ainda somava 24px de row-gap vazio embaixo da logo. */
	.ibdmar-header__logo-inner {
		row-gap: 0;
	}

	/* Hambúrguer (mobile e tablet): área de toque de 44×44px (mínimo
	   recomendado pela WCAG 2.5.5) e encostado na margem direita, alinhado
	   com o conteúdo abaixo. */
	.ibdmar-header__toggle {
		min-width: 44px;
		min-height: 44px;
		margin-right: calc(-1 * var(--sp-8));
	}
}

.ibdmar-nav__list {
	display: none;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: var(--sp-8) 0 var(--sp-16);
}

.ibdmar-nav.is-open .ibdmar-nav__list {
	display: flex;
}

.ibdmar-nav__item {
	position: relative;
}

.ibdmar-nav__link,
.ibdmar-nav__sublink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
	color: var(--color-text-heading);
	text-decoration: none;
	font: var(--text-body-emphasis);
	padding: var(--sp-8) 0;
}

.ibdmar-nav__subitem .ibdmar-nav__sublink {
	padding-left: var(--sp-16);
	font: var(--text-body-default);
	color: var(--color-text-secondary);
}

.ibdmar-nav__link:hover,
.ibdmar-nav__sublink:hover {
	color: var(--color-brand-primary-hover);
}

.ibdmar-nav__chevron {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.ibdmar-nav__item--has-children.is-open > .ibdmar-nav__link .ibdmar-nav__chevron {
	transform: rotate(180deg);
}

/* Bug real encontrado 2026-08-12 (Sprint 7): sem um "display:none" padrão
   aqui, TODO submenu ficava sempre visível abaixo do desktop — o acordeão só
   girava a seta (nav.js liga/desliga a classe .is-open certinho), mas nada
   escondia visualmente os subitens de quem não estava aberto. No desktop o
   próprio bloco @media (min-width:1280px) below reabre com display:block
   (a opacidade/visibility dele cuidam da transição hover, não o display). */
.ibdmar-nav__submenu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ibdmar-nav__item--has-children.is-open > .ibdmar-nav__submenu {
	display: block;
}

/* Desktop (>= breakpoint desktop do grid Figma) */
@media (min-width: 1280px) {
	.ibdmar-header__toggle {
		display: none;
	}

	.ibdmar-nav__list {
		display: flex;
		flex-direction: row;
		align-items: center;
		/* 2026-09-06: gap medido no Figma (node 284:3) era 24px, mas com a
		   faixa da logo mais alta (ver .ibdmar-header__logo-inner) e a logo
		   de 100px ao lado, 24px + fonte de corpo (16px) ficava fraco demais
		   perto da marca — Ranyer pediu que a nav também crescesse junto.
		   Subiu pra 32px, fora do valor exato do Figma por decisão de
		   design pós-entrega, não por engano de medição.
		   Mesmo dia, passo seguinte ("pode aumentar mais?"): 32px→40px, na
		   mesma proporção do padding-block da faixa (32→48). Sem token
		   exato, calc(32+8) como já feito no padding-block da faixa. */
		gap: calc(var(--sp-32) + var(--sp-8));
		padding: 0;
	}

	.ibdmar-nav__link {
		/* 2026-09-06: fonte subida de 16px (herdada de --text-body-emphasis)
		   pra 18px e padding-block de 8px pra 12px — mesma razão do gap
		   acima (equilíbrio com a logo de 100px) e de quebra ganha alvo de
		   toque mais confortável (~42px de altura clicável, perto do
		   mínimo de 44px recomendado pela WCAG 2.5.5). Só o font-size é
		   sobrescrito aqui; peso 600 e família continuam vindo do shorthand
		   --text-body-emphasis logo acima na cascata (.ibdmar-nav__link,
		   .ibdmar-nav__sublink).
		   Mesmo dia, passo seguinte: 18px→20px e padding-block 12px→16px
		   (--sp-16, token exato) — alvo de clique já passa dos 44px da
		   WCAG 2.5.5 com folga. */
		font-size: 20px;
		padding-block: var(--sp-16);
	}

	.ibdmar-nav__item--has-children:hover .ibdmar-nav__chevron,
	.ibdmar-nav__item--has-children.is-open .ibdmar-nav__chevron {
		transform: rotate(180deg);
	}

	.ibdmar-nav__submenu {
		display: block; /* sobrescreve o display:none padrão — no desktop abre
		                    via :hover (sem precisar da classe .is-open), então
		                    a visibilidade real é controlada por opacity/visibility
		                    logo abaixo, não pelo display. */
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 240px;
		margin: 0;
		padding: var(--sp-8) 0;
		background: var(--color-surface-primary);
		border: 1px solid var(--color-border-default);
		border-radius: 8px;
		box-shadow: 0 12px 24px rgba(16, 40, 61, 0.12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
		z-index: 20;
	}

	/* 2026-09-24: o submenu do último item (Associados) abria alinhado pela
	   esquerda e, com 240px de largura mínima, passava da borda direita da
	   tela entre ~1290px e ~1490px de largura. Mesmo escondido (opacity/
	   visibility), ele continua ocupando espaço no layout, então criava uma
	   barra de rolagem horizontal na página inteira. Ancorado pela direita,
	   ele cresce pra dentro da tela. */
	.ibdmar-nav__list > .ibdmar-nav__item:last-child > .ibdmar-nav__submenu {
		left: auto;
		right: 0;
	}

	.ibdmar-nav__item--has-children:hover > .ibdmar-nav__submenu,
	.ibdmar-nav__item--has-children.is-open > .ibdmar-nav__submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.ibdmar-nav__subitem .ibdmar-nav__sublink {
		padding: var(--sp-8) var(--sp-16);
	}

	.ibdmar-nav__subitem .ibdmar-nav__sublink:hover {
		background: var(--color-background-subtle);
	}
}

/* Abaixo do desktop: aproxima o tablet do Figma escondendo o botão Associado
   da barra utilitária (no node 160:x ele só existe como "Associe-se" na nav). */
@media (max-width: 1279px) {
	.ibdmar-header__associado {
		display: none;
	}

	/* Painel mobile — fiel ao node 282:2 "Mobile · Menu Aberto": fundo azul-
	   marinho cheio, item por linha com divisor, submenu recolhido em
	   acordeão (já funcional via nav.js), CTA real + idiomas no rodapé do
	   painel. (O posicionamento do painel aberto mudou em 2026-09-23 — ver
	   .ibdmar-nav.is-open logo abaixo.)
	   Bug real encontrado 2026-08-27 (auditoria de responsividade): o fundo
	   azul estava só na <ul> (.ibdmar-nav__list), não no <nav> pai. O CTA
	   "Associe-se" e o seletor de idiomas ficam FORA da <ul> (são irmãos dela
	   dentro do <nav>, ver .ibdmar-nav__mobile-extra), então herdavam o fundo
	   branco do body — o CTA destoava visualmente e os links de idioma
	   (texto branco, pensado pro fundo escuro) ficavam brancos sobre branco,
	   invisíveis e inacessíveis. Movendo fundo+altura pro <nav> pai (que
	   envolve <ul> + .mobile-extra) cobre o painel inteiro de uma vez. */
	/* 2026-09-23 (melhoria mobile): o painel ficava dentro do header sticky
	   com min-height:100vh — header ficava mais alto que a tela, grudado no
	   topo, e os itens de baixo (Associados, Associe-se, idiomas) nunca
	   apareciam, por mais que se rolasse a página. Agora o painel aberto é
	   fixo logo abaixo da faixa da logo (--ibdmar-nav-top, calculado pelo
	   nav.js ao abrir), ocupa a largura inteira da tela e rola por dentro. */
	.ibdmar-nav.is-open {
		position: fixed;
		top: var(--ibdmar-nav-top, 0px);
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--color-brand-primary);
	}

	.ibdmar-nav__chevron {
		width: 18px;
		height: 18px;
	}

	.ibdmar-nav.is-open .ibdmar-nav__list {
		padding: 0 0 var(--sp-32);
	}

	.ibdmar-nav.is-open .ibdmar-nav__mobile-extra {
		display: flex;
	}

	.ibdmar-nav__item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.ibdmar-nav__link,
	.ibdmar-nav__sublink {
		padding: var(--sp-16) var(--sp-24);
		color: var(--color-text-inverse);
	}

	.ibdmar-nav__subitem .ibdmar-nav__sublink {
		padding-left: calc(var(--sp-24) + var(--sp-16));
		color: rgba(255, 255, 255, 0.75);
	}

	.ibdmar-nav__link:hover,
	.ibdmar-nav__sublink:hover {
		color: var(--color-accent-teal);
	}

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

	.ibdmar-nav__submenu {
		background: rgba(0, 0, 0, 0.12);
	}

	.ibdmar-nav__mobile-extra {
		flex-direction: column;
		gap: var(--sp-16);
		padding: var(--sp-24);
	}

	.ibdmar-nav__mobile-cta {
		display: block;
		text-align: center;
		padding: var(--sp-16);
		border-radius: 8px;
		background: var(--color-secondary);
		color: var(--color-text-inverse);
		text-decoration: none;
		font: var(--text-body-emphasis);
	}

	/* Link secundário abaixo do CTA ("Sair", quando logado) e
	   saudação do usuário logado — ver header.php. Link com 44px de altura
	   mínima pra ser fácil de tocar. */
	.ibdmar-nav__mobile-secondary {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin-top: calc(-1 * var(--sp-8));
		color: rgba(255, 255, 255, 0.85);
		font: var(--text-body-default);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.ibdmar-nav__mobile-secondary:hover {
		color: var(--color-accent-teal);
	}

	.ibdmar-nav__mobile-greeting {
		margin: 0;
		text-align: center;
		color: rgba(255, 255, 255, 0.75);
		font: var(--text-body-default);
	}

	.ibdmar-nav__mobile-langs.ibdmar-lang-switcher {
		justify-content: center;
		padding-top: var(--sp-16);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.ibdmar-nav__mobile-langs .ibdmar-lang-switcher__link {
		color: rgba(255, 255, 255, 0.6);
	}

	.ibdmar-nav__mobile-langs .ibdmar-lang-switcher__link:hover {
		color: var(--color-text-inverse);
	}

	.ibdmar-nav__mobile-langs .ibdmar-lang-switcher__link.is-active {
		color: var(--color-text-inverse);
	}
}

/* Tablet (768–1279px): mesmo header branco do desktop (decisão 2026-08-12 —
   não construir uma 3ª variante escura só pra essa faixa), com a logo um
   pouco menor pra não ficar apertada antes do nav virar hambúrguer. */
@media (min-width: 768px) and (max-width: 1279px) {
	/* 2026-09-24 (melhoria tablet): com o padding-block de 48px herdado do
	   desktop (pensado pra equilibrar a logo de 100px ao lado do nav
	   horizontal), a faixa da logo ficava com 165px e o header sticky
	   inteiro com 200px — até 26% da tela de um iPad deitado, o tempo todo.
	   Aqui não há nav horizontal pra equilibrar (só o hambúrguer), então a
	   faixa fica compacta: logo de 56px (~320px de largura, ainda legível;
	   antes 69px, escalada em 2026-09-05 na mesma proporção do desktop) e
	   16px de respiro, header total de ~123px. */
	.ibdmar-header__logo-inner {
		padding-block: var(--sp-16);
	}

	.ibdmar-header__logo img {
		height: 56px;
	}
}

/* Abaixo do tablet: a barra utilitária inteira não existe no Mobile Home
   (159:4) — mas o seletor de idioma continua acessível dentro do painel do
   menu mobile (.ibdmar-nav__mobile-langs, ver acima), então nada se perde. */
@media (max-width: 767px) {
	.ibdmar-header__utility {
		display: none;
	}

	/* 2026-09-23 (melhoria mobile): a logo de 47px de altura (~270px de
	   largura) + o botão hambúrguer não cabiam lado a lado em telas de
	   ~375px, então o hambúrguer caía sozinho numa 2ª linha e o header
	   sticky ocupava ~160px da tela o tempo todo. Agora a logo encolhe junto
	   com a tela (largura fluida, altura automática) e o hambúrguer fica na
	   mesma linha — header com ~70px. */
	.ibdmar-header__logo {
		flex: 0 1 auto;
		min-width: 0;
	}

	.ibdmar-header__logo img {
		width: 100%;
		max-width: 240px;
		height: auto;
	}

	.ibdmar-header__logo-inner {
		gap: 0 var(--sp-16);
		padding-block: 12px;
	}
}

/* Pulo pra âncora (#secao) desconta a altura do header sticky, senão o
   título da seção fica escondido atrás dele. --ibdmar-header-h é medido
   pelo nav.js; sem JS, cai pra 0 (comportamento antigo). */
html {
	scroll-padding-top: calc(var(--ibdmar-header-h, 0px) + var(--sp-16));
}

/* Trava a rolagem da página por trás enquanto o menu mobile está aberto
   (classe ligada/desligada pelo nav.js). */
html.ibdmar-menu-open {
	overflow: hidden;
}