/* ==========================================================================
   MUNDO NEGRO — Cabeçalho
   Arquivo único responsivo. Breakpoint em 1024px:
     > 1024px  logo centralizado + barra de categorias em duas fileiras
     ≤ 1024px  hambúrguer | logo | busca, com painel deslizante
   ========================================================================== */

.mn-header {
	--mn-white:      #FFFFFF;
	--mn-off:        #F7F6F4;
	--mn-line:       #E4E1DC;
	--mn-black:      #0D0D0D;
	--mn-black-dim:  #5B5650;
	--mn-red:        #C81E3C;
	--mn-gray:       #B1B0AE;

	--mn-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--mn-font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Base + blindagem contra o CSS do Newspaper
   -------------------------------------------------------------------------- */
.mn-header,
.mn-header *,
.mn-header *::before,
.mn-header *::after { box-sizing: border-box; }

.mn-header {
	width: 100%;
	background: var(--mn-white);
	color: var(--mn-black);
	font-family: var(--mn-font-body);
	box-shadow: 0 8px 24px -12px rgba(13, 13, 13, .18);
	position: relative;
	z-index: 5;
}

.mn-header ul { list-style: none; margin: 0; padding: 0; display: flex; }
.mn-header li { margin: 0; padding: 0; }
.mn-header a  { color: inherit; text-decoration: none; }

.mn-header a:focus-visible,
.mn-header summary:focus-visible,
.mn-header button:focus-visible {
	outline: 2px solid var(--mn-red);
	outline-offset: 2px;
}

.mn-header__sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Barra utilitária
   -------------------------------------------------------------------------- */
.mn-header__utility {
	background: var(--mn-off);
	border-bottom: 1px solid var(--mn-line);
}
.mn-header__utility-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 9px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	color: var(--mn-black-dim);
}
.mn-header__utility-left ul { gap: 20px; flex-wrap: wrap; }
.mn-header__utility-inner a { transition: color .2s ease; }
.mn-header__utility-inner a:hover { color: var(--mn-black); }

.mn-header__utility-right { display: flex; align-items: center; gap: 20px; }
.mn-header__social-mini { display: flex; gap: 12px; }
.mn-header__social-mini a { display: flex; color: var(--mn-black-dim); }
.mn-header__social-mini a:hover { color: var(--mn-red); }
.mn-header__social-mini svg { width: 14px; height: 14px; fill: currentColor; display: block; }

/* --------------------------------------------------------------------------
   Barra da marca — hambúrguer | logo | busca
   -------------------------------------------------------------------------- */
.mn-header__bar {
	max-width: 1280px;
	margin: 0 auto;
	padding: 26px 24px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
}

.mn-header__brand { flex: 1; text-align: center; min-width: 0; }
.mn-header__logo { display: inline-block; }
.mn-header__logo img { height: 64px; width: auto; display: block; margin: 0 auto; }

.mn-header__kicker {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--mn-black-dim);
}

/* Botões redondos (hambúrguer e lupa) */
.mn-header__icon-btn {
	width: 38px; height: 38px;
	border: 1px solid var(--mn-line);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--mn-black);
	background: transparent;
	flex-shrink: 0;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mn-header__icon-btn svg {
	width: 16px; height: 16px;
	fill: none; stroke: currentColor; stroke-width: 2;
	stroke-linecap: round;
	display: block;
}
.mn-header summary:hover .mn-header__icon-btn,
.mn-header details[open] .mn-header__icon-btn {
	background: var(--mn-red);
	border-color: var(--mn-red);
	color: var(--mn-white);
}

/* <details> sem o triângulo padrão */
.mn-header summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
}
.mn-header summary::-webkit-details-marker { display: none; }
.mn-header summary::marker { content: ''; }

/* Painéis (menu mobile e busca) — ancorados na barra */
.mn-header__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	background: var(--mn-white);
	border-top: 1px solid var(--mn-line);
	box-shadow: 0 14px 28px -18px rgba(13, 13, 13, .35);
}

/* --------------------------------------------------------------------------
   Painel de menu — usado pelo hambúrguer do mobile E pelo da barra
   flutuante do desktop. Por isso fica fora de qualquer media query.
   -------------------------------------------------------------------------- */
.mn-header__panel--menu {
	padding: 8px 16px 20px;
	max-height: 72vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.mn-header__panel--menu ul { flex-direction: column; }
.mn-header__panel--menu a {
	display: block;
	padding: 12px 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mn-black-dim);
	border-bottom: 1px solid var(--mn-line);
	transition: color .2s ease;
}
.mn-header__panel--menu a:hover { color: var(--mn-black); border-color: var(--mn-red); }
.mn-header__panel--menu .current-menu-item > a { color: var(--mn-black); }
.mn-header__panel--menu .highlight > a { color: var(--mn-red); }

/* Rótulo de seção: item de menu com a classe CSS "mn-section-title" */
.mn-header__panel--menu .mn-section-title > a {
	padding: 16px 4px 4px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--mn-black);
	border-bottom: none;
	pointer-events: none;
	cursor: default;
}

/* Busca */
.mn-header__panel--search { padding: 18px 24px; }
.mn-header__search-form {
	--mn-field-h: 46px;
	max-width: 620px;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--mn-line);
	border-radius: 2px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.mn-header__search-form:focus-within {
	border-color: var(--mn-black);
	box-shadow: 0 0 0 3px rgba(200, 30, 60, .14);
}
.mn-header__search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	height: var(--mn-field-h);
	line-height: var(--mn-field-h);
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mn-black);
	font-family: var(--mn-font-body);
	font-size: 14px;
	-webkit-appearance: none;
	appearance: none;
}
.mn-header__search-form input[type="search"]:focus,
.mn-header__search-form input[type="search"]:focus-visible {
	outline: 0; border: 0; box-shadow: none;
}
.mn-header__search-form input::placeholder {
	color: var(--mn-gray);
	opacity: 1;
	line-height: normal;
	font-weight: 300;
	font-size: 12px;
}
.mn-header__search-form button {
	height: var(--mn-field-h);
	flex-shrink: 0;
	margin: 0; padding: 0 20px;
	border: 0; border-radius: 0;
	background: var(--mn-black);
	color: var(--mn-white);
	font-family: var(--mn-font-body);
	font-size: 11.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 1px;
	cursor: pointer;
	transition: background .2s ease;
}
.mn-header__search-form button:hover { background: var(--mn-red); }

/* --------------------------------------------------------------------------
   Barra de categorias (desktop)
   -------------------------------------------------------------------------- */
.mn-header__nav { border-top: 1px solid var(--mn-line); }

.mn-header__nav-row + .mn-header__nav-row {
	max-width: 1280px;
	margin: 0 auto;
	border-top: 1px solid var(--mn-line);
}

.mn-header__nav ul {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-wrap: wrap;      /* rede de segurança: em telas estreitas a fileira
                           quebra em vez de estourar a largura */
	justify-content: center;
	align-items: center;
	gap: 0 2px;
}
.mn-header__nav a {
	display: inline-block;
	padding: 12px 16px;
	color: var(--mn-black-dim);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .8px;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.mn-header__nav a:hover,
.mn-header__nav .current-menu-item > a,
.mn-header__nav .current-menu-ancestor > a {
	color: var(--mn-black);
	border-color: var(--mn-red);
}
.mn-header__nav .highlight > a { color: var(--mn-red); }
.mn-header__nav .highlight > a:hover { color: var(--mn-black); }

/* --------------------------------------------------------------------------
   Desktop: o hambúrguer não existe; a lupa fica encostada à direita e sai
   do fluxo para não desalinhar o logo central.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.mn-header__menu { display: none; }

	.mn-header__search { position: static; }
	.mn-header__search > summary {
		position: absolute;
		right: 24px;
		top: 50%;
		transform: translateY(-50%);
	}
}

/* ==========================================================================
   MOBILE / TABLET — hambúrguer | logo | busca
   ========================================================================== */
@media (max-width: 1024px) {
	.mn-header__nav { display: none; }
	.mn-header__panel--menu li:last-child a { border-bottom: none; }
	.mn-header__utility-inner { padding: 9px 16px; font-size: 11px; }
	.mn-header__utility-left { display: none; }
	.mn-header__utility-right { width: 100%; justify-content: space-between; }
	.mn-header__social-mini { gap: 10px; }
	.mn-header__social-mini svg { width: 13px; height: 13px; }

	.mn-header__bar {
		padding: 14px 16px;
		justify-content: space-between;
		gap: 10px;
	}
	.mn-header__logo img { height: 34px; }
	.mn-header__kicker { display: none; }
	.mn-header__icon-btn { width: 36px; height: 36px; }

	.mn-header__panel--search { padding: 14px 16px; }
	.mn-header__search-form { --mn-field-h: 48px; }
	.mn-header__search-form input[type="search"] { font-size: 16px; } /* evita zoom no iOS */
}

@media (max-width: 320px) {
	.mn-header__newsletter-link { display: none; }
	.mn-header__utility-right { justify-content: flex-end; }
}

/* ==========================================================================
   ROLAGEM

   A classe .mn-is-scrolled é colocada no <body> pelo mn-header.js quando
   a sentinela cruza o topo da tela.

   Mobile  → o cabeçalho inteiro gruda no topo (CSS puro, não depende do JS)
   Desktop → o cabeçalho sobe junto com a página e uma barra compacta desce
   ========================================================================== */

/* A sentinela não ocupa espaço; serve só de marcador para o observer. */
.mn-header__sentinel {
	height: 1px;
	margin-top: -1px;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Barra flutuante (desktop)
   -------------------------------------------------------------------------- */
.mn-header__float {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 60;
	display: none;
	background: var(--mn-off);
	border-bottom: 1px solid var(--mn-line);
	box-shadow: 0 6px 20px -14px rgba(13, 13, 13, .5);

	/* Escondida: fora da vista E fora da ordem de tabulação/leitor de tela.
	   O atraso na visibility deixa a animação de saída terminar antes de
	   o elemento sumir de fato. */
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform .28s ease, visibility 0s linear .28s;
}

body.mn-is-scrolled .mn-header__float {
	transform: translateY(0);
	visibility: visible;
	transition: transform .28s ease, visibility 0s;
}

.mn-header__float-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	min-height: 52px;
	/* 1fr auto 1fr centraliza o logo na tela independentemente da
	   largura do que houver dos dois lados. */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}

.mn-header__float-left {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}
.mn-header__float-links ul { gap: 18px; flex-wrap: wrap; }
.mn-header__float-links a {
	font-size: 12px;
	color: var(--mn-black-dim);
	white-space: nowrap;
	transition: color .2s ease;
}
.mn-header__float-links a:hover { color: var(--mn-black); }

/* Hambúrguer da barra fixa: traço simples, sem o círculo do cabeçalho. */
.mn-header__burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	color: var(--mn-black);
	transition: color .2s ease;
}
.mn-header__burger svg {
	width: 19px; height: 19px;
	fill: none; stroke: currentColor; stroke-width: 2;
	stroke-linecap: round;
	display: block;
}
.mn-header__float-menu summary:hover .mn-header__burger,
.mn-header__float-menu[open] .mn-header__burger { color: var(--mn-red); }

.mn-header__float-brand { justify-self: center; }
.mn-header__float-brand img {
	height: 26px;
	width: auto;
	display: block;
}

.mn-header__float-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	font-size: 12px;
	color: var(--mn-black-dim);
	min-width: 0;
}
.mn-header__float-right .mn-header__newsletter-link {
	white-space: nowrap;
	transition: color .2s ease;
}
.mn-header__float-right .mn-header__newsletter-link:hover { color: var(--mn-black); }

/* Painel do menu dentro da barra fixa: largura total, itens em colunas.
   Uma coluna só com 18 itens ficaria alta demais no desktop. */
.mn-header__panel--float {
	top: 100%;
	max-height: 70vh;
	padding: 0;
}
.mn-header__panel--float nav {
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 24px 22px;
}
.mn-header__panel--float ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 32px;
}
/* Rótulos de seção atravessam a grade inteira. */
.mn-header__panel--float .mn-section-title { grid-column: 1 / -1; }
.mn-header__panel--float .mn-section-title > a { padding: 18px 0 6px; }
.mn-header__panel--float a { padding: 11px 0; }

@media (min-width: 1025px) {
	.mn-header__float { display: block; }

	/* Espaço para a barra fixa não cobrir o alvo de links âncora
	   (o índice da Política de Privacidade, por exemplo). */
	html { scroll-padding-top: 68px; }
}

@media (max-width: 1200px) {
	/* Em telas menores os links institucionais saem antes de espremer o logo. */
	.mn-header__float-links { display: none; }
}

/* ==========================================================================
   MOBILE / TABLET — cabeçalho fixo no topo

   position:sticky é CSS puro: funciona mesmo se o JavaScript falhar.
   ========================================================================== */
@media (max-width: 1024px) {
	.mn-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	/* O cabeçalho fixo cobriria o alvo dos links âncora. */
	html { scroll-padding-top: 104px; }

	/* O painel do menu desconta a altura do cabeçalho para nunca
	   passar do fim da tela. */
	.mn-header__panel--menu { max-height: calc(100vh - 150px); }
}

/* --------------------------------------------------------------------------
   Acessibilidade
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mn-header *,
	.mn-header__float { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Newspaper aplica overflow:hidden no #td-outer-wrap. Isso transforma o
   wrapper num contêiner de rolagem, e position:sticky só funciona dentro
   do contêiner de rolagem mais próximo — ou seja, o cabeçalho grudaria no
   topo do wrapper (que já saiu da tela), não no topo da janela.

   A troca por overflow-x:clip corta o transbordo horizontal do mesmo jeito,
   mas NÃO cria contêiner de rolagem. É a diferença entre os dois valores.
   -------------------------------------------------------------------------- */
#td-outer-wrap.td-theme-wrap {
	overflow: visible;   /* reserva para navegadores sem suporte a clip */
	overflow-x: clip;
}