/*
Theme Name:   IPI Theme
Theme URI:    https://institutopernambucanodeinfectologia.com.br
Author:       Instituto Pernambucano de Infectologia
Author URI:   https://institutopernambucanodeinfectologia.com.br
Description:  Tema WordPress institucional, moderno e acessível, desenvolvido para o Instituto Pernambucano de Infectologia (IPI). Construído com HTML5 semântico, CSS moderno (custom properties, Grid e Flexbox) e JavaScript vanilla, com foco em desempenho, SEO e acessibilidade (WCAG 2.1 AA).
Version:      1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.2
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ipi-theme
Tags:         blog, one-column, two-columns, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready, block-styles, wide-blocks

IPI Theme is distributed under the terms of the GNU GPL v2 or later.
*/

/* =============================================================
   ÍNDICE
   1. Reset & Base
   2. Custom Properties (Design Tokens)
   3. Tipografia
   4. Acessibilidade
   5. Layout & Containers
   6. Header & Navegação
   7. Componentes (botões, cards, badges)
   8. Front page (hero, seções institucionais)
   9. Conteúdo (posts, páginas, arquivos)
   10. Comentários
   11. Sidebar & Widgets
   12. Footer
   13. Formulários
   14. Utilitários
   15. Responsividade
   ============================================================= */

/* -------------------------------------------------------------
   0. Fontes da marca — General Sans, auto-hospedada em WOFF2 (menor que
   o .otf original do kit de identidade), zero requisição externa. Só
   existem dois pesos estáticos (Bold e Light) mais suas itálicas; em vez
   de deixar o navegador "sintetizar" negrito a partir do Light (borrado),
   a fonte Bold cobre toda a faixa 600–800 e a Light cobre 300–500 — o CSS
   do tema só usa font-weight 400/600/700, então cada peso sempre resolve
   para um arquivo real.
   ------------------------------------------------------------- */
@font-face {
	font-family: "General Sans";
	src: url("assets/fonts/GeneralSans-Light.woff2") format("woff2");
	font-weight: 300 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "General Sans";
	src: url("assets/fonts/GeneralSans-LightItalic.woff2") format("woff2");
	font-weight: 300 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "General Sans";
	src: url("assets/fonts/GeneralSans-Bold.woff2") format("woff2");
	font-weight: 600 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "General Sans";
	src: url("assets/fonts/GeneralSans-BoldItalic.woff2") format("woff2");
	font-weight: 600 800;
	font-style: italic;
	font-display: swap;
}

/* -------------------------------------------------------------
   1. Reset & Base
   ------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Fundo da página inteira: UM sistema de gradiente só, no body — não um
   gradiente próprio no hero mais um fundo separado no resto da página.
   A faixa do topo (1º layer, 900px, "top") é o mesmo wash verde-sálvia
   que dava identidade ao hero; as manchas radiais (layers 2-5) seguem
   por baixo dela até o fim do documento. Como é tudo a mesma imagem de
   fundo, .hero e .specialty-hero não têm mais "background" próprio —
   ficam transparentes e deixam este gradiente único aparecer por trás,
   sem costura entre seção e página. Opacidades baixas de propósito: é
   textura ambiente, não pode competir com o conteúdo nem reduzir
   contraste de texto.

   Layers 6-7: o ícone da marca espalhado pelo fundo — só duas vezes, em
   posições/tamanhos diferentes (não é padrão repetido tipo papel de
   parede), pra dar identidade sem virar elemento decorativo repetitivo.
   Usa ipi-icone-fundo.svg (mesmo ícone, com a opacidade já baixa
   embutida no arquivo — não dá pra controlar opacidade por camada de
   background-image via CSS puro). */
body {
	margin: 0;
	background-color: var(--color-canvas);
	background-repeat: no-repeat;
	background-position: top center, 0 0, 0 0, 0 0, 0 0, 88% 34%, 6% 74%;
	background-size: 100% 900px, auto, auto, auto, auto, 320px, 240px;
	background-image:
		linear-gradient(160deg, var(--color-primary-light) 0%, transparent 100%),
		radial-gradient(circle at 8% -6%, rgba(102, 112, 88, 0.08) 0%, transparent 42%),
		radial-gradient(circle at 100% 18%, rgba(229, 220, 204, 0.55) 0%, transparent 46%),
		radial-gradient(circle at 10% 55%, rgba(229, 220, 204, 0.35) 0%, transparent 40%),
		radial-gradient(circle at 96% 96%, rgba(102, 112, 88, 0.06) 0%, transparent 40%),
		url("images/ipi-icone-fundo.svg"),
		url("images/ipi-icone-fundo.svg");
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: var(--font-size-base);
	line-height: 1.6;
	text-rendering: optimizeSpeed;
}

img,
svg,
video,
canvas {
	max-width: 100%;
	height: auto;
	display: block;
}

img {
	font-style: italic; /* mostra o alt caso a imagem não carregue */
}

figure {
	margin: 0;
}

ul,
ol {
	padding-left: 1.25em;
}

a {
	color: var(--color-primary);
	text-decoration-thickness: max(1px, 0.06em);
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--color-primary-dark);
}

/* -------------------------------------------------------------
   2. Custom Properties (Design Tokens)

   ATENÇÃO: esta paleta é duplicada manualmente em theme.json (bloco
   settings.color.palette), pois o editor de blocos não lê custom
   properties do style.css. Ao mudar uma cor aqui, replique em
   theme.json — não existe build automatizado sincronizando os dois.
   ------------------------------------------------------------- */
:root {
	/* Cores institucionais — extraídas do kit de identidade visual completo
	   do IPI (pasta "IPI • IDV": logo em SVG/PNG, PDF de proposta). É um
	   sistema de três tons, não "primária + destaque colorido": verde-sálvia
	   (tinta principal), creme (neutro claro/aplicação sobre fundo escuro) e
	   marrom escuro (tinta escura/fundo "assinatura", como visto nas peças
	   aplicadas — cartão de visita, adesivo de porta etc.). Nada de cor
	   quente saturada tipo terracota: não existe no kit aprovado. */
	--color-primary: #667058;        /* verde-sálvia — tinta principal da marca */
	--color-primary-dark: #49513d;
	--color-primary-light: #eef2e9;
	--color-cream: #e5dccc;          /* creme da marca — painéis/destaques decorativos, não usar como texto sobre branco */
	--color-ink: #473f30;            /* marrom escuro da marca — fundo de seções "assinatura" (rodapé, faixas de destaque) */
	--color-ink-hover: #5b513e;
	--color-accent: #f5a623;         /* âmbar semântico: aviso/foco de teclado — não é cor de marca */
	--color-text: #242720;
	--color-text-muted: #606657;
	--color-bg: #ffffff;
	--color-bg-alt: #f6f3ef;
	/* Base do "canvas" da página (body) — ver seção 1. Separado de
	   --color-bg (branco puro, usado nas superfícies: cards, header,
	   botões) de propósito, senão card e página ficam achatados, sem
	   contraste entre si. O hero termina nesta mesma cor (ver .hero
	   e .specialty-hero) pra não criar um corte visível entre o fim
	   do hero e o início do canvas normal da página. */
	--color-canvas: #fbfaf6;
	--color-border: #e7e2da;
	--color-danger: #b3261e;
	--color-focus: #f5a623;

	/* Tipografia — General Sans auto-hospedada (@font-face acima), com pilha de sistema como fallback enquanto carrega/se falhar */
	--font-body: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--font-heading: var(--font-body);

	/* Escala tipográfica fluida (clamp: mínimo, ideal com vw, máximo) */
	--font-size-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--font-size-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.9375rem);
	--font-size-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
	--font-size-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
	--font-size-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
	--font-size-3xl: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem);

	/* Espaçamento */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;

	/* Layout */
	--container-max: 1200px;
	--container-narrow: 780px;
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--shadow-sm: 0 1px 3px rgba(36, 39, 32, 0.08);
	--shadow-md: 0 8px 24px rgba(36, 39, 32, 0.12);
	--header-height: 84px;
}

/* -------------------------------------------------------------
   3. Tipografia
   ------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	/* --color-ink (marrom escuro da marca), não --color-text (neutro de UI
	   genérico) — títulos usam o mesmo tom escuro do rodapé/CTA, pra ficar
	   mais quente/coerente com a marca do que um preto qualquer. */
	color: var(--color-ink);
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 var(--space-sm);
	text-wrap: balance;
}

h1 {
	font-size: var(--font-size-3xl);
	line-height: 1.08;
}

h2 {
	font-size: var(--font-size-2xl);
}

h3 {
	font-size: var(--font-size-xl);
}

h4 {
	font-size: var(--font-size-lg);
}

p {
	margin: 0 0 var(--space-sm);
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	max-width: 70ch;
}

small {
	font-size: var(--font-size-sm);
}

/* -------------------------------------------------------------
   4. Acessibilidade
   ------------------------------------------------------------- */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 100000;
	padding: 0.75em 1.25em;
	background: var(--color-primary);
	color: #fff;
	border-radius: 0 0 var(--radius-sm) 0;
	transition: top 0.2s ease-in-out;
}

.skip-link:focus {
	top: 0;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* -------------------------------------------------------------
   5. Layout & Containers
   ------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-md);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1 0 auto;
}

/* --space-xl (não --space-2xl): 6rem de padding em cima E embaixo de
   cada seção somava 12rem (192px) de vão vazio entre duas seções
   seguidas — grande demais. 4rem por seção (8rem/128px combinado)
   continua um respiro generoso, sem o vazio exagerado. */
.section {
	padding-block: var(--space-xl);
}

.section--alt {
	background-color: var(--color-bg-alt);
}

.section-header {
	max-width: var(--container-narrow);
	margin-bottom: var(--space-lg);
}

.section-header .eyebrow {
	display: inline-block;
	color: var(--color-primary);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-2xs);
}

/* -------------------------------------------------------------
   6. Header & Navegação
   ------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	padding: var(--space-sm) var(--space-sm) 0;
	background: transparent;
	transition: padding 0.25s ease;
}

/* .header-inner acumula .container (max-width + padding-inline) e vira,
   além disso, o "cartão" visível do header: fundo, cantos arredondados e
   sombra sutil — o header flutua com uma pequena margem em vez de ocupar
   a largura inteira como um bloco rígido. */
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: var(--header-height);
	/* .container trava em 1200px (--container-max) — largo o bastante pro
	   conteúdo do site, mas apertado para logo + selo + 6 itens de menu +
	   botão na mesma linha. O header, especificamente, pode ser mais largo
	   sem afetar a largura do conteúdo do resto do site. */
	max-width: 1400px;
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.site-header.is-scrolled .header-inner {
	box-shadow: var(--shadow-md);
}

.submenu-toggle {
	display: none;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	min-width: 0;
}

.site-branding img {
	max-height: 64px;
	width: auto;
}

/* Reset de heading: na home, o wrapper do logo é um <h1> por SEO/
   acessibilidade, mas não deve herdar o tamanho de fonte de título. */
.site-logo-heading {
	margin: 0;
	line-height: 0;
}

.site-title {
	font-size: var(--font-size-lg);
	margin: 0;
	line-height: 1.1;
}

.site-title a {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.site-description {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.menu-toggle {
	display: none;
	align-items: center;
	gap: var(--space-2xs);
	background: transparent;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.5em 0.9em;
	font: inherit;
	color: var(--color-primary-dark);
	cursor: pointer;
}

.menu-toggle .icon-bars {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.menu-toggle .icon-bars::before,
.menu-toggle .icon-bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.menu-toggle .icon-bars::before {
	top: -6px;
}

.menu-toggle .icon-bars::after {
	top: 6px;
}

.primary-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

/* Item de menu: sem sublinhado permanente por estar selecionado/atual —
   só um traço fino que desliza da esquerda pra direita no hover/foco,
   via ::after com scaleX (não desloca layout, não usa border). */
.primary-navigation a {
	position: relative;
	display: inline-block;
	padding: 0.5em 0;
	color: var(--color-primary-dark);
	text-decoration: none;
	font-weight: 600;
	/* Meio-termo entre --font-size-sm (ficou pequeno demais) e o
	   --font-size-base padrão (era o tamanho "problema", grande demais
	   pro respiro que a logo/botão precisavam). */
	font-size: 1rem;
	white-space: nowrap;
}

.primary-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

/* Um único indicador de hover — só a linha animada, sem também trocar a
   cor do texto (os dois juntos ficariam exagerados para o tom do site). */
.primary-navigation a:hover::after,
.primary-navigation a:focus-visible::after {
	transform: scaleX(1);
}

.primary-navigation .sub-menu {
	display: none;
	position: absolute;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	padding: var(--space-2xs);
	min-width: 220px;
	flex-direction: column;
	gap: 0;
	z-index: 50;
}

.primary-navigation li {
	position: relative;
}

.primary-navigation li:hover > .sub-menu,
.primary-navigation li:focus-within > .sub-menu {
	display: flex;
}

.primary-navigation .sub-menu a {
	padding: 0.6em 0.8em;
	width: 100%;
}

.header-cta {
	display: none;
}

/* Home: o header flutua transparente sobre o gradiente do hero até o
   usuário rolar — sem cartão branco pesado cobrindo a primeira dobra.
   Reaproveita a mesma classe "is-scrolled" que já existe (alternada pelo
   scroll listener único de assets/js/main.js) só que aqui também troca
   o fundo, não só a sombra. */
body.header-overlay-hero .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

body.header-overlay-hero .header-inner {
	background: transparent;
	box-shadow: none;
}

body.header-overlay-hero .site-header.is-scrolled .header-inner {
	background: var(--color-bg);
	box-shadow: var(--shadow-sm);
}

/* Menu mobile aberto: fundo sólido mesmo sem scroll, senão os itens do
   menu flutuam ilegíveis por cima do conteúdo da página atrás deles. */
body.header-overlay-hero .site-header.is-menu-open .header-inner {
	background: var(--color-bg);
	box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.header-inner,
	.primary-navigation a::after {
		transition: none;
	}
}

/* -------------------------------------------------------------
   7. Componentes
   ------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.5em;
	border-radius: var(--radius-sm);
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	font-size: var(--font-size-base);
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn:hover,
.btn:focus {
	transform: translateY(-1px);
}

.btn-primary {
	background: var(--color-primary);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
	background: var(--color-primary-dark);
	color: #fff;
}

/* CTA de agendamento (header + hero) — pílula com seta que desliza no
   hover. Modificador aplicado sobre .btn.btn-primary, não substitui o
   botão padrão usado no resto do site (cards, banner de CTA etc.). */
.btn-cta {
	border-radius: 999px;
}

.btn-cta-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.btn-cta:hover .btn-cta-arrow,
.btn-cta:focus-visible .btn-cta-arrow {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.btn-cta-arrow {
		transition: none;
	}
}

.btn-secondary {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	height: 100%;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* Variante clicável do card: quando a especialidade já tem uma Página
   própria no wp-admin, o card inteiro vira link — ver front-page.php. */
.card--link {
	display: block;
	color: inherit;
	text-decoration: none;
	border-color: transparent;
}

.card--link:hover,
.card--link:focus {
	border-color: var(--color-primary);
	color: inherit;
}

.card-link-affordance {
	display: inline-block;
	margin-top: var(--space-sm);
	color: var(--color-primary);
	font-weight: 600;
	font-size: var(--font-size-sm);
	transition: transform 0.15s ease;
}

.card--link:hover .card-link-affordance,
.card--link:focus .card-link-affordance {
	transform: translateX(4px);
}

.card-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-light);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-sm);
	font-size: 1.5rem;
}

/* Trava de segurança pro título do card: o número de colunas de .grid
   muda com a largura da tela (auto-fit), então a largura do card não é
   fixa — em algumas larguras uma palavra sozinha e comprida (ex.:
   "Acompanhamento") pode não caber na linha. overflow-wrap:break-word só
   entra em ação nesse caso extremo (a palavra sozinha não cabe nem numa
   linha própria) — troca vazar pra fora do card por quebrar dentro da
   palavra. Sem hyphens:auto: esse quebrava palavras que já cabiam bem
   quebrando entre palavras (ex.: "Infecciosas"), só por preferência
   estética de ajuste de linha — não era o problema que se queria evitar. */
.card h3 {
	overflow-wrap: break-word;
}

/* Diagnósticos específicos dentro do próprio card de especialidade — os
   termos que o paciente de fato busca (ex.: "infectologista sífilis
   Recife"), como chips discretos logo abaixo do texto do card. Só existe
   nos cards com a chave 'conditions' (ver front-page.php) — cada doença
   aparece em um único card, nunca repetida em outro lugar da seção.
   Contorno, não preenchido (como .badge): são vários itens por card;
   preenchido pesaria demais visualmente nessa quantidade. */
.card-conditions {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: var(--space-sm) 0 0;
	padding: var(--space-sm) 0 0;
	border-top: 1px solid var(--color-border);
}

.card-conditions li {
	padding: 0.3em 0.75em;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

/* Stretch (padrão do grid): cards de uma mesma linha ficam com a mesma
   altura, igualando ao mais alto. Só vale entre quem cai na mesma linha
   — com o container no tamanho padrão (1200px) e cards de 300px, "O que
   tratamos" forma 3+1 em telas de laptop/desktop (o 4º sozinho numa
   linha à parte, com altura própria); decisão consciente de manter a
   largura do container como estava, em vez de alargar só essa seção. */
.grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Grid só da equipe médica — cards bem maiores que o padrão genérico
   (.grid, usado em especialidades/posts), porque a foto do médico precisa
   ter presença. minmax mais largo = menos colunas por linha em telas
   médias, de propósito. */
.team-grid {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.75em;
	border-radius: 999px;
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	font-size: var(--font-size-sm);
	font-weight: 700;
}

/* Card de equipe médica (Corpo Clínico) — foto sangrada no topo, corpo com padding. */
/* Cards com altura igual na mesma linha (stretch, padrão do grid) e
   conteúdo interno em coluna flex — é isso que permite o botão "Agendar
   consulta" ficar sempre na mesma posição (rodapé do card) mesmo quando
   um médico tem nome maior, mais especialidades ou mais dropdowns que
   outro. Ver .team-body/.team-cta abaixo. */
.team-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	height: 100%;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.team-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.team-photo {
	display: block;
	flex-shrink: 0;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--color-primary-light);
}

.team-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-lg) var(--space-md) var(--space-md);
}

.team-name {
	margin: 0 0 var(--space-3xs);
	font-size: var(--font-size-xl);
}

.team-crm {
	margin: var(--space-2xs) 0 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

/* Instagram pessoal de cada médico — ícone + @handle, discreto (não é um
   botão de ação como "Agendar consulta", é só uma referência). */
.team-instagram {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	margin-top: var(--space-2xs);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	text-decoration: none;
}

.team-instagram svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.team-instagram:hover,
.team-instagram:focus {
	color: var(--color-primary);
}

.team-roles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs);
}

/* order:10 + margin-top:auto empurra o botão pro rodapé do card (dentro
   da coluna flex de .team-body), não importa quanto texto/quantos
   dropdowns vierem antes — é isso que alinha o botão na mesma altura em
   todos os cards da mesma linha, mesmo com nomes/CRMs de tamanhos
   diferentes. */
.team-cta {
	order: 10;
	display: inline-flex;
	align-self: flex-start;
	margin-top: auto;
	padding: 0.6em 1.1em;
	font-size: var(--font-size-sm);
}

/* Dropdown de formação acadêmica/especializações — mesmo padrão nativo
   <details>/<summary> do FAQ (seção 8), sem JS. Fica recolhido por
   padrão pra não pesar o card; só aparece quando o médico tem pelo menos
   um item cadastrado no array 'education' (ver front-page.php/page-
   corpo-clinico.php) — nada de mostrar um dropdown vazio. */
.team-education {
	margin-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-sm);
}

/* Garante um respiro mínimo acima do botão mesmo no card mais alto da
   linha (onde margin-top:auto do .team-cta não sobra espaço nenhum pra
   empurrar) — sem isso, só esse card específico ficava com o botão
   colado no último dropdown. */
.team-education:last-of-type {
	margin-bottom: var(--space-md);
}

.team-education-summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs);
	font-weight: 700;
	font-size: var(--font-size-sm);
	color: var(--color-primary-dark);
}

.team-education-summary::-webkit-details-marker {
	display: none;
}

.team-education-summary::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.2em;
	color: var(--color-primary);
	transition: transform 0.15s ease;
}

.team-education[open] .team-education-summary::after {
	transform: rotate(45deg);
}

.team-education-list {
	list-style: none;
	margin: var(--space-2xs) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.team-education-list li {
	padding-left: var(--space-sm);
	position: relative;
}

.team-education-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: var(--color-primary);
}

/* Texto padrão do dropdown "Planos de saúde aceitos" enquanto a lista de
   convênios de cada médico não é cadastrada (ver 'health_plans' no
   array da equipe) — convênios ficam fora do site por ora, a pedido do
   cliente, então isso substitui a lista por um convite direto ao
   WhatsApp em vez de inventar nomes de plano. */
.team-education-fallback {
	margin: var(--space-2xs) 0 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

/* Parágrafos do dropdown "Experiência profissional" — texto corrido
   (relato de atuação), não itens curtos de credencial como .team-
   education-list; por isso vira <p>, não <li> com marcador. */
.team-education-paragraph {
	margin: var(--space-2xs) 0 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	line-height: 1.6;
}

.team-education-paragraph + .team-education-paragraph {
	margin-top: var(--space-sm);
}

/* -------------------------------------------------------------
   8. Front page — seções institucionais
   ------------------------------------------------------------- */
/* A seção em si não tem padding-block: a altura do hero passa a ser
   ditada só pela coluna de texto (.hero-content, com seu próprio padding
   interno) — a foto acompanha essa altura via align-items:stretch no
   .hero-inner, "grudada" do topo ao fim da seção sem margem nenhuma
   (nem a que o header flutuante exigiria — isso vira padding-top só do
   texto, não da seção toda). É o que deixa a foto "até lá em cima". */
.hero {
	position: relative;
	/* Sem background próprio: o wash verde do topo já vem do gradiente
	   único definido no body (ver seção 1) — o hero fica transparente e
	   deixa ele aparecer por trás, sem duplicar o efeito nem criar uma
	   segunda "costura" de cor pra manter sincronizada com a de baixo. */
	/* .hero-inner não tem mais .container — a foto "vaza" até a borda
	   direita da viewport de propósito (ver .hero-media-wrap). overflow
	   aqui é só uma trava de segurança contra scroll horizontal, caso
	   algum arredondamento de sub-pixel empurre 1px além de 100vw. */
	overflow-x: clip;
}

/* Compensa o header fixo/flutuante da home (ver seção 6): texto E foto
   começam logo abaixo do header, não por baixo dele — o padding é da
   seção inteira, não só do texto, senão a foto ficaria "vazando" por
   trás do header. Um respiro extra (--space-sm) além da altura do
   header, pra foto não ficar colada nele. */
body.header-overlay-hero .hero {
	padding-top: calc(var(--header-height) + var(--space-sm));
}

/* Mini-hero das páginas internas (ex.: uma especialidade) — mesma família
   visual do hero da home, só que compacto, para dar identidade própria a
   cada página sem repetir o hero grande da home. Sem background próprio
   pelo mesmo motivo do .hero: é a primeira seção da página, então o wash
   do topo do body (ver seção 1) já aparece atrás dela. */
.specialty-hero {
	padding-block: var(--space-xl);
	margin-bottom: var(--space-lg);
}

.specialty-hero h1 {
	margin-bottom: var(--space-2xs);
}

.specialty-hero .lede {
	font-size: var(--font-size-lg);
	color: var(--color-text-muted);
	margin-bottom: 0;
}

/* Página "Contato": não repete o banner escuro de CTA da home (é o mesmo
   bloco, ficaria redundante numa página que já é inteira sobre contato) —
   em vez disso, pega emprestado só a estética dele (painel marrom-oliva
   escuro + halo do ícone) pro cabeçalho da página. .page-template-page-
   contato-php é a classe que o próprio WordPress adiciona ao <body>
   quando esta página usa este template — não precisa de PHP extra. */
.page-contato .specialty-hero {
	position: relative;
	overflow: hidden;
	background: var(--color-ink);
	color: var(--color-cream);
}

.page-contato .specialty-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("images/ipi-icone-creme.svg");
	background-repeat: no-repeat;
	background-position: right -100px top -80px;
	background-size: 460px;
	opacity: 0.14;
	pointer-events: none;
}

.page-contato .specialty-hero .eyebrow {
	color: var(--color-primary-light);
}

.page-contato .specialty-hero h1 {
	color: var(--color-cream);
}

.page-contato .specialty-hero .lede {
	color: var(--color-cream);
	opacity: 0.85;
}

/* Bloco de contato/mapa logo abaixo do cabeçalho escuro — padding-top bem
   mais enxuto que o .section padrão (não precisa do respiro de 6rem que
   uma seção no meio da página pede; aqui é a primeira coisa depois do
   cabeçalho). */
.contato-content {
	padding-block: var(--space-lg) var(--space-2xl);
}

/* Mesmo motivo do .contato-content acima: o .specialty-hero já soma seu
   próprio margin-bottom (--space-lg) antes desta seção começar — usar o
   padding-top cheio do .section (--space-2xl) por cima disso somava os
   dois respiros e criava um vão enorme entre o texto do cabeçalho e o
   conteúdo da página. */
.sobre-content {
	padding-block: var(--space-2xs) var(--space-2xl);
}

/* Página "Sobre o IPI": texto ao lado de uma foto real da equipe, com o
   mesmo halo orgânico desfocado já usado no hero da home (ver
   .hero-media-wrap) — só que contido, não em full bleed, porque aqui é
   uma foto dentro do conteúdo, não a peça central da página. */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.about-media-wrap {
	position: relative;
	max-width: 460px;
	margin-inline: auto;
	/* Sobe a foto pra ela "arrancar" mais perto do cabeçalho em vez de
	   começar alinhada com o corpo do texto — dá mais presença visual
	   sem depender só do tamanho. */
	margin-top: calc(var(--space-xl) * -1);
}

.about-media-wrap::before {
	content: "";
	position: absolute;
	inset: -10% -12%;
	background:
		radial-gradient(circle at 25% 20%, var(--color-primary-light) 0%, transparent 55%),
		radial-gradient(circle at 78% 82%, var(--color-cream) 0%, transparent 50%);
	filter: blur(30px);
	z-index: 0;
}

/* Sem isso, a foto (retrato, bem mais alta que larga) esticava a coluna
   inteira a uma altura desproporcional — e como o grid centralizava
   verticalmente (align-items), o texto curto ao lado sobrava "flutuando"
   no meio de um vão enorme. Com aspect-ratio fixo + object-fit:cover, a
   foto fica num tamanho previsível, do mesmo jeito que toda outra foto
   do site (team-photo, hero-media). */
.about-media {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.about-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

@media (max-width: 880px) {
	.about-grid {
		grid-template-columns: 1fr;
	}

	.about-media-wrap {
		order: -1;
	}
}

.cta-banner--inline {
	margin-block: var(--space-lg);
}

/* Hero em "full bleed": a coluna de texto respeita a mesma margem
   esquerda do resto do site (replicando o inset do .container via
   calc(), já que esta div não usa mais a classe .container), mas a
   coluna da foto não tem limite à direita — estica até a borda da
   viewport. align-items:stretch (não center): a coluna da foto some
   qualquer altura própria (sem aspect-ratio) e copia a altura da coluna
   de texto — ver .hero-media abaixo. */
.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
	gap: var(--space-xl);
	align-items: stretch;
}

.hero-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: max(var(--space-md), calc((100vw - var(--container-max)) / 2 + var(--space-md)));
	padding-block: var(--space-2xl);
}

/* Tamanho próprio pro H1 do hero — um pouco mais contido que o --font-
   size-3xl padrão (usado em H1 de página interna) e com letter-spacing
   negativo: mais precisão/"tecnológico", menos blocão de texto. */
.hero-content h1 {
	font-size: clamp(2rem, 1.55rem + 2.1vw, 3.25rem);
	letter-spacing: -0.02em;
	margin-bottom: var(--space-sm);
}

/* Título como frase única, com contraste de peso/cor dentro dela — não
   duas frases cortadas em blocos: "Diagnóstico preciso," cheio e escuro
   carrega o rigor técnico, "cuidado humanizado." em Light e verde da
   marca carrega o lado humano. Inline mesmo (sem display:block): o
   navegador quebra a linha onde couber, como uma frase normal. */
.hero-title-accent {
	color: var(--color-primary);
	font-weight: 300;
}

.hero-content .lede {
	font-size: var(--font-size-lg);
	color: var(--color-text-muted);
	max-width: 60ch;
	margin-bottom: var(--space-md);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.hero-media-wrap {
	position: relative;
}

.hero-media {
	position: relative;
	z-index: 1;
	/* Sem aspect-ratio: a altura vem 100% do stretch do grid (acompanha
	   .hero-content — ver .hero-inner). Só os cantos da esquerda
	   arredondados — em cima, embaixo e à direita a foto encosta nas
	   bordas da seção/viewport (bleed); um canto ali ficaria "flutuando"
	   cortado. */
	width: 100%;
	height: 100%;
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg, var(--shadow-md));
	background: var(--color-primary-light);
}

.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	justify-content: space-between;
	align-items: center;
	padding-block: var(--space-md);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-weight: 600;
}

/* Painel "assinatura" em marrom escuro + creme — mesma dupla de cor do
   rodapé e das peças aplicadas da marca (cartão de visita, adesivo de
   porta), reservada para o momento de maior intenção de conversão da
   página. O verde já aparece em botões/links o tempo todo; aqui a
   variação de tom cria uma pausa visual antes do rodapé. */
.cta-banner {
	position: relative;
	background: var(--color-ink);
	color: var(--color-cream);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
}

.cta-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("images/ipi-icone-creme.svg");
	background-repeat: no-repeat;
	background-position: right -60px bottom -60px;
	background-size: 320px;
	opacity: 0.5;
	pointer-events: none;
}

.cta-banner > * {
	position: relative;
}

.cta-banner h2,
.cta-banner p {
	color: var(--color-cream);
	margin-bottom: 0;
}

.cta-banner .btn-secondary {
	background: var(--color-cream);
	color: var(--color-ink);
	border-color: var(--color-cream);
}

.cta-banner .btn-secondary:hover {
	background: #fff;
}

/* Mapa incorporado — Google Maps sem chave de API, via URL de busca. */
.map-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.map-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Layout de "Contato e Localização": mapa estica pra acompanhar a altura
   do bloco de texto ao lado, em vez de ficar com altura fixa própria. */
.map-section-grid {
	display: grid;
	/* Mapa mais largo que o bloco de contato (invertido do que era: mapa
	   maior, contato menor) — só a largura muda; a altura do mapa
	   continua vindo do stretch do grid (acompanha a coluna de contato,
	   não cresce sozinha pra baixo). */
	grid-template-columns: 0.7fr 1.3fr;
	gap: var(--space-xl);
	align-items: stretch;
}

.map-embed--compact {
	aspect-ratio: auto;
	max-width: none;
	height: 100%;
	min-height: 320px;
}

@media (max-width: 880px) {
	.map-section-grid {
		grid-template-columns: 1fr;
	}

	.map-embed--compact {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}
/* Bloco "Contato e Localização" — lista de canais com ícone. Mais
   compacto (padding/gap reduzidos) pra caber bem na coluna mais estreita
   agora que o mapa ao lado ficou maior — ver .map-section-grid. */
.contact-info {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.contact-info-item {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
}

.contact-info-item:not(:last-child) {
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.contact-info-icon {
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-info-icon svg {
	width: 20px;
	height: 20px;
}

.contact-info-item h3 {
	font-size: var(--font-size-base);
	margin: 0 0 var(--space-3xs);
}

.contact-info-item p {
	margin: 0;
	color: var(--color-text-muted);
}

.contact-info-item a {
	color: var(--color-text);
	text-decoration: none;
}

.contact-info-item a:hover,
.contact-info-item a:focus {
	color: var(--color-primary);
	text-decoration: underline;
}

.contact-info-note {
	font-size: var(--font-size-sm);
	font-style: italic;
}

/* FAQ — accordion nativo via <details>/<summary>, sem dependência de JS. */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	/* Mesma largura de leitura do .section-header acima (sem herdar isso
	   do container pai, que fica largo/consistente com as outras seções
	   da página — só o conteúdo de texto que se estreita). */
	max-width: var(--container-narrow);
}

.faq-item {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
}

.faq-item[open] {
	box-shadow: var(--shadow-sm);
}

.faq-question {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question::after {
	content: '+';
	flex-shrink: 0;
	font-size: 1.25em;
	color: var(--color-primary);
	transition: transform 0.15s ease;
}

.faq-item[open] .faq-question::after {
	transform: rotate(45deg);
}

.faq-answer {
	margin: var(--space-xs) 0 0;
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------
   9. Conteúdo — posts, páginas, arquivos
   ------------------------------------------------------------- */
.entry-header {
	margin-bottom: var(--space-md);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-2xs);
}

.entry-meta a {
	color: inherit;
}

.post-thumbnail {
	margin-bottom: var(--space-md);
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* Selo de formato do post (vídeo/galeria/imagem) sobre a miniatura do card. */
.card-media {
	position: relative;
}

.card-media .post-thumbnail {
	margin-bottom: 0;
}

.post-format-badge {
	position: absolute;
	top: var(--space-2xs);
	left: var(--space-2xs);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.3em 0.75em;
	border-radius: 999px;
	background: rgba(36, 39, 32, 0.72);
	color: #fff;
	font-size: var(--font-size-sm);
	font-weight: 700;
	backdrop-filter: blur(2px);
}

/* Em single, o selo fica acima do título, sem posicionamento absoluto. */
.entry-header .post-format-badge {
	position: static;
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	margin-bottom: var(--space-sm);
}

.entry-footer {
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	align-items: center;
}

.cat-links a,
.tags-links a {
	display: inline-block;
	padding: 0.25em 0.75em;
	margin-right: var(--space-3xs);
	border-radius: 999px;
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	text-decoration: none;
	font-weight: 600;
}

.cat-links a:hover,
.tags-links a:hover {
	background: var(--color-primary);
	color: #fff;
}

.posts-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pagination {
	display: flex;
	gap: var(--space-2xs);
	flex-wrap: wrap;
	margin-top: var(--space-lg);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	height: 2.5em;
	padding: 0 0.5em;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	text-decoration: none;
	color: var(--color-text);
}

.pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.post-navigation a {
	text-decoration: none;
	font-weight: 600;
}

.alignwide {
	width: 100%;
}

.alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* -------------------------------------------------------------
   10. Comentários
   ------------------------------------------------------------- */
.comments-area {
	margin-top: var(--space-xl);
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	padding-left: var(--space-md);
}

.comment-body {
	padding: var(--space-md) 0;
	border-bottom: 1px solid var(--color-border);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-weight: 700;
}

.comment-author img {
	border-radius: 50%;
}

.comment-metadata {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.comment-reply-link {
	font-size: var(--font-size-sm);
}

/* -------------------------------------------------------------
   11. Sidebar & Widgets
   ------------------------------------------------------------- */
.content-area-with-sidebar {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.widget {
	margin-bottom: var(--space-lg);
}

.widget-title {
	font-size: var(--font-size-lg);
	margin-bottom: var(--space-sm);
}

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget li {
	padding-block: 0.4em;
	border-bottom: 1px solid var(--color-border);
}

/* -------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------- */
.site-footer {
	/* Painel "assinatura" em marrom escuro + texto creme — a mesma dupla
	   usada nas peças aplicadas da marca (cartão de visita, adesivo de
	   porta), não um tom qualquer escurecido do verde. Sem margin-top: a
	   última seção da página já termina com o próprio padding-bottom
	   (.section, --space-2xl) — somar mais aqui duplicava o respiro e
	   deixava o vão antes do rodapé exagerado. */
	background: var(--color-ink);
	color: var(--color-cream);
}

/* Logo em cima, frase de apoio embaixo — não lado a lado. A logo já é um
   lockup de 3 linhas ("Instituto / Pernambucano / de Infectologia");
   colar mais uma frase do lado, na mesma altura, ficava sem hierarquia
   clara (os dois competindo pela mesma "linha" visual). Empilhado lê
   como bloco de marca → frase de apoio, ordem natural de leitura. */
/* Bloco de marca centralizado (logo + frase). Mantém respiro generoso
   acima da logo (não gruda no topo do painel escuro) — a redução de
   altura do rodapé como um todo vem de outros ajustes (sem a linha de
   redes sociais, sem o margin-top duplicado antes do rodapé, padding
   inferior mais enxuto), não de apertar a logo contra a borda. */
/* Ícone + frase lado a lado, alinhados à esquerda — não mais um bloco
   centralizado de logo grande em cima da frase. Padding bem mais enxuto:
   o rodapé estava alto demais pro pouco conteúdo que carrega. */
.footer-about {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding-block: var(--space-md);
}

.footer-about-logo {
	flex: none;
	width: 32px;
	height: 32px;
	/* Versão creme do ícone (sem o lockup por extenso) — já pronta pro
	   fundo escuro do rodapé, sem precisar de filtro CSS pra inverter. */
	opacity: 0.92;
}

.footer-about-text {
	margin: 0;
	/* Sem max-width em "ch": com esse texto curto, um limite de 46
	   caracteres cortava a frase no meio ("...diagnóstico ao /
	   acompanhamento."). Só quebra linha se o espaço realmente não
	   couber (ver flex-wrap em .footer-about). */
	color: var(--color-cream);
	opacity: 0.85;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-lg);
	padding-block: var(--space-2xl);
}

.site-footer .widget-title {
	color: #fff;
}

.site-footer a {
	color: var(--color-cream);
}

.site-footer a:hover,
.site-footer a:focus {
	color: #fff;
}

/* Grid de 3 colunas em vez de flex: o copyright fica no centro de
   verdade (relativo à linha inteira, não só ao espaço que sobra), e as
   redes sociais continuam grudadas no canto direito, na mesma linha —
   sem o Instagram "sobrando" sozinho numa segunda linha. A coluna da
   esquerda fica vazia quando não há menu do rodapé configurado, só pra
   equilibrar a coluna 3 e manter o copyright centralizado de verdade. */
/* Sem redes sociais aqui (removidas — repetiam o link já existente na
   seção "Contato e Localização"), então virou um bloco simples e
   centralizado: copyright e, se existir, o menu do rodapé. */
.footer-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	/* Era 0.12, depois 0.08 — branco fraco sobre o marrom-oliva do rodapé
	   lia como uma linha esverdeada; ainda mais discreta agora. */
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding-block: var(--space-md);
	font-size: var(--font-size-sm);
	text-align: center;
}

.footer-copyright {
	margin: 0;
}

.footer-bottom-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
}

.emergency-strip {
	background: var(--color-danger);
	color: #fff;
	text-align: center;
	font-weight: 700;
	padding: 0.6em 1em;
	font-size: var(--font-size-sm);
}

.emergency-strip a {
	color: #fff;
	text-decoration: underline;
}

/* -------------------------------------------------------------
   13. Formulários
   ------------------------------------------------------------- */
input,
textarea,
select,
button {
	font-family: inherit;
	font-size: var(--font-size-base);
}

.search-form,
.comment-form p {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

label {
	font-weight: 600;
	display: block;
	margin-bottom: 0.3em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea {
	width: 100%;
	padding: 0.75em 1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-primary);
}

/* -------------------------------------------------------------
   14. Utilitários
   ------------------------------------------------------------- */
.text-center {
	text-align: center;
}

.text-justify {
	text-align: justify;
	/* Justificar sem hifenização automática deixa espaçamento irregular
	   entre palavras em linhas com poucas palavras — hyphens ajuda o
	   navegador a quebrar palavras longas e distribuir melhor. */
	hyphens: auto;
}

/*
 * Esconder-visualmente-mas-manter-acessível já é coberto por
 * .screen-reader-text (seção 4, Acessibilidade) — usada em todo o tema.
 * Não duplicar essa técnica aqui como um segundo utilitário.
 */

/* Botões flutuantes: WhatsApp sempre visível, "voltar ao topo" só some/
   aparece via JS (assets/js/main.js) conforme o scroll. Ambos com alvo de
   toque ≥ 44px e cantos totalmente arredondados (radius-full). */
.whatsapp-fab,
.back-to-top {
	position: fixed;
	right: var(--space-md);
	z-index: 50;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	box-shadow: var(--shadow-md);
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.whatsapp-fab {
	bottom: var(--space-md);
	/* Verde-escuro oficial do WhatsApp (não o verde claro de ação) — o
	   ícone branco em cima do verde claro (#25D366) não teria contraste
	   suficiente (isso passava despercebido com o emoji antigo, que tem
	   cor própria e ignora esta propriedade). #075E54 dá ~7.7:1 de
	   contraste com branco, folgado acima do mínimo AA (4.5:1). */
	background: #075e54;
	color: #fff;
	text-decoration: none;
}

.whatsapp-fab svg {
	width: 28px;
	height: 28px;
}

.back-to-top {
	bottom: calc(var(--space-md) + 68px);
	background: var(--color-bg);
	color: var(--color-primary);
	border: 1px solid var(--color-border);
}

.back-to-top[hidden] {
	display: none;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus,
.back-to-top:hover,
.back-to-top:focus {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg, var(--shadow-md));
}

@media (prefers-reduced-motion: reduce) {
	.whatsapp-fab:hover,
	.back-to-top:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------
   15. Responsividade
   ------------------------------------------------------------- */
@media (max-width: 782px) {
	.menu-toggle {
		display: inline-flex;
	}

	/* Logo menor no mobile: em telas estreitas, logo (64px de altura,
	   ~240px de largura) + botão "Menu" não cabem lado a lado na mesma
	   linha — com .header-inner com flex-wrap (ver abaixo), o botão
	   "Menu" quebrava pra debaixo da logo em vez de ficar ao lado. */
	.site-branding img {
		max-height: 40px;
	}

	/* Espaço menor entre logo e botão "Menu" nessa primeira linha do
	   header — o --space-md (24px) padrão do .header-inner sobrava pouco
	   nas telas mais estreitas dessa faixa. */
	.header-inner {
		gap: var(--space-xs);
	}

	.primary-navigation {
		display: none;
		width: 100%;
		order: 3;
	}

	.primary-navigation.is-open {
		display: block;
	}

	.header-inner {
		flex-wrap: wrap;
	}

	.primary-navigation ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding-block: var(--space-sm);
	}

	.primary-navigation .sub-menu {
		display: none;
		position: static;
		box-shadow: none;
		border: none;
		padding-left: var(--space-sm);
	}

	.primary-navigation li.is-submenu-open > .sub-menu {
		display: flex;
	}

	.menu-item-has-children {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2em;
		height: 2em;
		margin-left: auto;
		background: transparent;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		cursor: pointer;
		color: var(--color-primary-dark);
	}

	.submenu-toggle::before {
		content: "+";
		font-size: 1.1em;
		line-height: 1;
	}

	.is-submenu-open > .submenu-toggle::before {
		content: "−";
	}

	.hero-inner {
		grid-template-columns: 1fr;
		/* Abaixo de 782px o hero vira 1 coluna só — o "bleed"/stretch da
		   foto até a borda e a altura de 100% só fazem sentido no layout
		   de 2 colunas. Aqui a seção volta a se comportar como um
		   .container normal, com a foto no tamanho dela mesma. */
		padding-inline: var(--space-md);
	}

	.hero-content {
		padding-left: 0;
		padding-block: var(--space-lg);
	}

	.hero-media-wrap {
		order: -1;
	}

	.hero-media {
		height: auto;
		aspect-ratio: 6 / 5;
		border-radius: var(--radius-lg);
	}

	.content-area-with-sidebar {
		grid-template-columns: 1fr;
	}
}

/* Celulares bem estreitos (ex.: iPhone SE, 320px): mesmo com a logo já
   reduzida acima (40px), logo + botão "Menu" ainda não cabem lado a lado
   nessa largura — reduz mais um pouco só nessa faixa. */
@media (max-width: 359px) {
	.site-branding img {
		max-height: 30px;
	}
}

@media (min-width: 783px) {
	.header-cta {
		display: inline-flex;
	}
}