/**
 * Base compartilhada pelos DOIS sites.
 *
 * FONTE DA VERDADE: shared/css/base.css — as copias nos temas sao geradas
 * por `npm run sync` e sobrescritas a cada execucao.
 *
 * Depende de tokens.css (gerado). Sem framework: o theme.json ja resolve cor,
 * tipografia e espacamento dos blocos do core. Aqui fica o que o theme.json
 * nao alcanca — e o que da personalidade.
 */

/* --------------------------------------------------------------- *
 * Reset pontual
 * --------------------------------------------------------------- */

*,
*::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;
	}
}

body {
	/* Conteudo largo rola dentro do proprio container (.al-scroll-x),
	   nunca fazendo a pagina inteira rolar de lado. */
	overflow-x: clip;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	background: var( --al-fundo );
	color: var( --al-texto );
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------- *
 * Acessibilidade
 * --------------------------------------------------------------- */

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 3px solid var( --al-teal-500 );
	outline-offset: 3px;
	border-radius: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	position: fixed;
	left: 1rem;
	top: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var( --al-deep-900 );
	color: var( --al-white );
	border-radius: var( --al-radius-sm );
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* --------------------------------------------------------------- *
 * Tipografia
 * --------------------------------------------------------------- */

h1, h2, h3,
.wp-block-heading {
	font-family: var( --al-font-display );
	font-weight: var( --al-display-peso );
	line-height: var( --al-display-lh );
	letter-spacing: var( --al-display-ls );
	text-transform: var( --al-display-transform );
	text-wrap: balance;
	/* A Anton tem altura-x enorme e vem com folga sobrando em cima e
	   embaixo. Sem isso, titulo grande fica boiando no meio do espaco. */
	margin-block: 0;
}

h4, h5, h6 {
	font-family: var( --al-font-corpo );
	font-weight: 700;
	letter-spacing: 0.01em;
}

/*
 * Titulo no meio de texto corrido precisa de respiro em cima.
 *
 * 🔴 O `margin-block: 0` acima vale para titulo que abre uma secao desenhada, em
 * que o espaco vem do padding do grupo. Em texto corrido ele nao vale, e o
 * resultado nao e "titulo apertado": e SOBREPOSICAO. Com `line-height: 0.95` e
 * caixa alta acentuada, os glifos da Anton transbordam a caixa de linha para
 * cima — o Ç de "ATUAÇÃO", o Ê de "INFLUÊNCIA" — e pintam por cima do paragrafo
 * anterior. A pagina /andrea/ tinha tres colisoes dessas.
 *
 * Como o `blockGap` do theme.json e nulo, nao existe espacamento automatico
 * entre blocos irmaos: os paragrafos so se separam pela margem padrao do
 * navegador em `p`, que o titulo com margem zero nao tem.
 *
 * O intervalo e maior acima do que abaixo de proposito: o titulo pertence ao
 * texto que vem DEPOIS dele, nao ao que vem antes.
 */
/*
 * `.al-prosa` entra nesta lista junto com os contêineres de conteúdo.
 *
 * Estas regras (e a medida de leitura mais abaixo) valem para FILHO DIRETO. Ao
 * agrupar seções da pagina em faixas de fundo, os paragrafos e listas deixam de
 * ser filhos diretos do post-content e perderiam tanto a medida quanto o
 * espacamento de titulo — texto de 1240px de largura e titulo colado de novo.
 * `.al-prosa` e a classe que marca "aqui dentro e coluna de leitura".
 */
:is( .entry-content, .wp-block-post-content, .al-prosa ) > :is( h2, h3, h4 ):not( :first-child ) {
	margin-top: var( --al-space-80 );
}

/* Subtitulo dentro de uma secao: intervalo menor, para agrupar com o h2 acima. */
:is( .entry-content, .wp-block-post-content, .al-prosa ) > :is( h3, h4 ):not( :first-child ) {
	margin-top: var( --al-space-60 );
}

/* O h3 nao tem o filete do `.al-titulo-secao` criando o intervalo de baixo. */
:is( .entry-content, .wp-block-post-content, .al-prosa ) > :is( h3, h4 ) {
	margin-bottom: var( --al-space-30 );
}

p {
	text-wrap: pretty;
}

/*
 * Medida de leitura do texto corrido.
 *
 * Inclui `ul`/`ol`: desde que o post-content passou a ser `layout: default`
 * (para o texto nascer no mesmo eixo esquerdo da foto e do titulo, em vez de
 * numa coluna centrada), quem limita a largura da linha e esta regra — e nao
 * mais a largura da coluna. Sem as listas aqui, os itens de lista da pagina
 * /andrea/ esticavam para os 1240px enquanto os paragrafos ao lado paravam em
 * 64ch, e o bloco de texto ficava com duas larguras.
 */
:is( .wp-block-post-content, .entry-content, .al-prosa ) > :is( p, ul, ol ) {
	max-width: var( --al-medida );
	/*
	 * Alinha o texto no eixo de 1240px — o mesmo das faixas de secao.
	 *
	 * Duas coisas empurram este texto para fora do eixo, e a margem resolve as
	 * duas:
	 *
	 * 1. O layout `constrained` do core centraliza cada filho com
	 *    `margin-left: auto; margin-right: auto !important`. Como a medida de
	 *    leitura (64ch) e menor que a caixa, o efeito e centralizar o texto: os
	 *    paragrafos da /andrea/ nasciam 250px a direita das faixas da propria
	 *    pagina. O `!important` aqui nao e preguica — o seletor do core tem
	 *    especificidade quase zero (usa `:where()`) mas marca as margens como
	 *    `!important`, e essa e a unica forma de vence-las.
	 *
	 * 2. Zerar a margem esquerda encosta o texto na borda da CAIXA do container.
	 *    Num `post-content` com `align: full`, essa borda e o padding global da
	 *    raiz (56px), nao o eixo de 1240px (100px numa tela de 1440) — e o texto
	 *    ficava 44px a esquerda das faixas, desalinhado ao contrario.
	 *
	 * Daí a margem calculada: metade da folga entre a caixa e a medida larga. Em
	 * container que ja tem 1240px ou menos (uma faixa, ou o tema da escola em
	 * 720px), o `max()` devolve zero e o texto encosta na borda, que e o certo.
	 */
	margin-inline: max( 0px, calc( ( 100% - var( --al-wide ) ) / 2 ) ) auto !important;
}

/*
 * 🔴 Nem o cabecalho, nem o <main>, nem o rodape tem vao entre si.
 *
 * O mesmo `block-gap` de 1.5rem que separa blocos irmaos vale no nivel de
 * `.wp-site-blocks`, cujos filhos sao header, main e footer. Entre o fim do
 * <main> e o rodape petroleo, esses 24px viravam uma tira BRANCA — em TODAS as
 * paginas dos dois sites. Foi o vao que sobrou depois de zerar o das secoes:
 * este mora um nivel acima e a regra de secao nao o alcanca.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/*
 * 🔴 Faixas de secao nao podem ter vao entre elas.
 *
 * O layout do WordPress aplica `margin-block-start: var(--wp--style--block-gap)`
 * entre filhos irmaos — 1.5rem aqui. Entre dois paragrafos isso e o que se quer;
 * entre duas FAIXAS de fundo colorido, esses 24px mostram o fundo da pagina e
 * viram uma tira BRANCA entre as secoes. Aparecia em toda troca de secao da home
 * (hero -> numeros, areia -> petroleo, petroleo -> rodape) e parecia erro de
 * montagem, porque e exatamente o que e.
 *
 * Cada faixa ja traz o proprio padding vertical, entao o vao nao acrescenta
 * nada: as secoes tem que se encostar.
 *
 * Sem `!important`: o seletor do core usa `:where()` e tem especificidade menor
 * que esta regra. So o centramento horizontal do core e `!important` (ver a
 * medida de leitura, mais acima).
 */
:is( .wp-block-post-content, .entry-content ) > :is( .alignfull, .alignwide ) {
	margin-block: 0;
}

/*
 * 🔴 Mas conteudo NORMAL seguido de faixa sangrada precisa de respiro.
 *
 * A regra acima zera o vao de todo `.alignfull`, e esta certa entre duas faixas
 * de fundo colorido. Entre um bloco de texto sem fundo e uma foto sangrada ela
 * produz o oposto do que se quer: o ultimo paragrafo encosta na borda de cima da
 * foto, com ZERO pixel de folga. Medido em /andrea/: o `al-artigo` terminava em
 * 1357 e a faixa comecava em 1357.
 *
 * Aparecia so ao rolar, porque no topo da pagina a foto ainda esta fora da tela
 * — foi assim que o cliente viu antes de mim.
 *
 * O `:has()` pergunta exatamente o que importa: "sou conteudo comum e tenho uma
 * faixa sangrada como proximo irmao?". Nao precisa de classe por pagina nem de
 * espacador no markup, que nao sabe o que vem depois dele.
 */
:is( .wp-block-post-content, .entry-content )
	> :not( .alignfull, .alignwide ):has( + :is( .alignfull, .alignwide ) ) {
	margin-bottom: var( --al-space-90 );
}

/*
 * Respiro antes do rodape, so quando a pagina NAO termina em faixa full-bleed.
 *
 * Quando termina (a /andrea/ fecha em petroleo), qualquer espaco aqui vira uma
 * tira branca entre duas areas escuras e le como erro de montagem; sem espaco, a
 * faixa se funde no rodape, que e o mesmo efeito da home. Quando a pagina termina
 * em texto, o espaco e necessario para o texto nao encostar no rodape.
 *
 * O `:has()` resolve isso sem precisar de uma classe por pagina — e sem um
 * espacador fixo no template, que nao sabe como o conteudo termina.
 */
.wp-block-post-content:not( :has( > :last-child.alignfull ) ) {
	padding-bottom: var( --al-space-90 );
}

/*
 * O espelho da regra de cima: pagina que ABRE em faixa sangrada nao leva o
 * respiro que o template pede.
 *
 * O `page.html` dos dois sites da `margin-top: |90` ao `post-content`, e isso
 * esta certo para quem abre em texto. Quando o primeiro bloco e uma faixa de
 * fundo — a /carreira/ abre na faixa petroleo dos quatro numeros —, aqueles
 * 104px viram uma tira BRANCA entre a capa escura e a faixa escura, que e
 * exatamente o defeito que a regra do vao entre faixas existe para evitar.
 *
 * `!important` porque a margem vem de atributo `style` inline do bloco, e
 * seletor nenhum ganha de estilo inline sem ele.
 */
.wp-block-post-content:has( > :first-child.alignfull ) {
	margin-top: 0 !important;
}

/* Rotulo de secao: o texto pequeno em caixa alta acima do titulo. */
.al-rotulo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var( --al-space-30 );
	font-family: var( --al-font-corpo );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var( --al-ls-caixa-alta );
	text-transform: uppercase;
	color: var( --al-teal-700 );
}

/*
 * O filete do rotulo e uma ONDA, nao um traco reto.
 *
 * Pedido do cliente: a linha reta de 2px virar o desenho de uma onda. O rotulo
 * aparece em toda secao dos dois sites, entao a marca se repete pela pagina
 * inteira e vira assinatura.
 *
 * O desenho e o SVG que o cliente enviou — crista com a lingua virando por
 * cima, mais a linha de espuma embaixo. O `viewBox` foi APERTADO no bounding box
 * real do traco (4.8 31.7 150.4 96.6, medido) em vez dos 160x160 do arquivo
 * original: aquele vinha com folga em volta, e num elemento de 19px de altura a
 * folga come metade do desenho.
 *
 * 🔴 Feito com `mask` e nao com `background-image`, de proposito. O rotulo muda
 * de cor conforme o fundo da faixa (turquesa escuro no claro, turquesa claro no
 * petroleo, branco no rodape), e SVG em `background-image` nao herda
 * `currentColor` — a cor ficaria congelada no valor escrito no data-URI e
 * quebraria em metade das secoes. Com `mask`, quem pinta e o
 * `background-color: currentColor`, que herda normalmente. Os `path` do data-URI
 * nem declaram cor: a mask usa o canal alfa, so importa onde ha tinta.
 *
 * Nao confundir com o divisor de onda de secao, que a cliente reprovou em 05/08
 * (ver 14-status.md). Aquele era uma faixa entre secoes; este e o filete do
 * rotulo, elemento diferente e em outra escala.
 */
.al-rotulo::before {
	content: "";
	/* 1.2rem x 1.87rem mantem a proporcao medida do traco (1.557). */
	width: 1.87rem;
	height: 1.2rem;
	flex: none;
	background-color: currentColor;
	-webkit-mask-image: var( --al-onda-mask );
	mask-image: var( --al-onda-mask );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.has-text-align-center .al-rotulo,
.al-rotulo.has-text-align-center {
	justify-content: center;
}

/* Titulo de secao com filete. */
.al-titulo-secao {
	position: relative;
	margin-bottom: var( --al-space-50 );
}

/*
 * 🔴 Nas internas o titulo de secao e MENOR que o titulo da capa.
 *
 * Os dois nasciam em 68px — exatamente o mesmo corpo. Hierarquia zero: a capa e
 * a secao disputavam o primeiro nivel, e a secao ainda levava a disputa por
 * estar em fundo branco com filete laranja, contra um titulo sobre foto com veu.
 * O cliente descreveu o efeito com precisao: "a fonte do titulo OK, porem a
 * fonte de baixo MUITO GRANDE".
 *
 * A escala das internas passa a ser 68 -> 44 -> 20px (capa, secao, subtitulo).
 *
 * 🔴 `body:not( .home )` e obrigatorio. A home usa o MESMO `al-titulo-secao`, e
 * la o titulo de secao e o primeiro nivel da pagina — nao existe titulo de capa
 * competindo, porque o hero tem tipografia propria. O cliente aprovou a home
 * como esta ("a home, por mim, esta ok"), entao ela nao entra nesta regra.
 */
body:not( .home ) .al-titulo-secao {
	font-size: clamp( 1.875rem, 1.35rem + 1.75vw, 2.75rem );
}

.al-titulo-secao::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 5px;
	margin-top: var( --al-space-30 );
	border-radius: 3px;
	background: var( --al-orange-500 );
}

.al-titulo-secao.has-text-align-center::after {
	margin-inline: auto;
}

/* Numero grande (faixa de conquistas). */
.al-numero {
	font-family: var( --al-font-display );
	font-size: clamp( 3rem, 6vw, 5rem );
	line-height: 0.9;
	color: var( --al-yellow-500 );
	margin: 0 0 var( --al-space-30 );
}

/* --------------------------------------------------------------- *
 * Cabecalho
 * --------------------------------------------------------------- */

:root {
	/* Medida por JS assim que a fonte carrega; este e so o valor inicial. */
	--al-header-h: 4.75rem;

	/*
	 * Mascara da onda, usada pelo filete do rotulo e pelo kicker do hero.
	 * Fica em token para o data-URI existir uma vez so: eram duas copias de
	 * 2 KB em arquivos diferentes, e alterar o desenho pedia lembrar das duas.
	 */
	--al-onda-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.8 31.7 150.4 96.6'%3E%3Cpath d='m146.177 115.356c-2.684-2.764-6.284-4.286-10.137-4.286s-7.453 1.522-10.137 4.286l-3.653 3.762c-1.354 1.396-3.171 2.163-5.114 2.163-1.944 0-3.761-.768-5.115-2.163l-3.653-3.762c-2.684-2.764-6.284-4.286-10.137-4.286s-7.453 1.522-10.137 4.286l-3.653 3.762c-1.354 1.396-3.171 2.163-5.114 2.163-1.944 0-3.761-.768-5.115-2.163l-3.653-3.762c-2.684-2.764-6.284-4.286-10.137-4.286s-7.453 1.522-10.137 4.286l-3.654 3.763c-1.354 1.395-3.169 2.162-5.113 2.162s-3.761-.768-5.115-2.163l-3.653-3.762c-2.684-2.764-6.284-4.286-10.137-4.286s-7.453 1.522-10.162 4.312l-6.581 6.916c-1.333 1.4-1.277 3.616.123 4.948 1.4 1.335 3.615 1.278 4.948-.122l6.556-6.891c1.354-1.396 3.17-2.163 5.115-2.163 1.944 0 3.76.768 5.115 2.163l3.653 3.762c2.684 2.764 6.284 4.286 10.137 4.286s7.452-1.522 10.136-4.286l3.653-3.762c1.354-1.396 3.171-2.163 5.115-2.163s3.761.768 5.115 2.163l3.653 3.762c2.684 2.764 6.283 4.286 10.137 4.286 3.853 0 7.452-1.522 10.136-4.286l3.653-3.762c1.354-1.396 3.171-2.163 5.115-2.163s3.761.768 5.115 2.163l3.653 3.762c2.684 2.764 6.283 4.286 10.137 4.286 3.853 0 7.452-1.522 10.136-4.286l3.653-3.762c1.354-1.396 3.171-2.163 5.115-2.163s3.761.768 5.115 2.163l6.716 6.916c1.348 1.387 3.561 1.417 4.949.072 1.387-1.347 1.419-3.563.072-4.949z'/%3E%3Cpath d='m154.442 87.338c-1.123-1.575-3.312-1.938-4.882-.813-6.164 4.403-13.448 6.454-22.925 6.454-24.103 0-30.533-15.364-30.533-24.443 0-7.648 4.952-12.979 9.396-12.979 3.835 0 7.019 1.309 9.731 4 1.904 1.89 4.772 2.151 6.978.638 2.217-1.522 3.008-4.311 1.922-6.781-3.561-8.103-13.089-21.694-36.901-21.694-18.306 0-34.891 10.921-43.247 28.432-9.934 19.667-21.121 29.814-36.273 32.897-1.895.386-3.117 2.233-2.732 4.128.337 1.658 1.796 2.803 3.426 2.803.231 0 .466-.023.702-.071 17.214-3.503 30.282-15.133 41.16-36.672 7.219-15.123 21.383-24.518 36.965-24.518 14.642 0 22.715 5.977 27.096 11.736-2.687-1.263-5.637-1.898-8.825-1.898-9.041 0-16.396 8.962-16.396 19.979 0 15.145 11.745 31.443 37.533 31.443 11.007 0 19.585-2.466 26.993-7.759 1.572-1.123 1.936-3.31.812-4.882z'/%3E%3C/svg%3E" );
}

.al-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

/*
 * Paginas que abrem com imagem sangrando de borda a borda: o cabecalho flutua
 * por cima dela e o <main> sobe exatamente a altura dele. Sem isso o cabecalho
 * fica numa faixa branca acima da foto — e como o texto dele e branco quando
 * esta sobre a foto, o menu some.
 *
 * 🔴 QUEM DECIDE isto e' o PHP, nao o CSS.
 *
 * A classe `al-capa-flutuante` vem do al-core (inc/body-class.php), que sabe qual
 * template esta sendo renderizado. Ate 22/08/2026 estas quatro regras — mais a do
 * logo, no CSS de cada tema — repetiam a mao a lista `body:is( .home, .page,
 * .single )`: seis copias da mesma condicao em tres arquivos, com dois
 * comentarios avisando que mexer em uma sem mexer nas outras quebra de um jeito
 * que so aparece olhando o pixel.
 *
 * E quebrou: o arquivo de experiencias da escola nao e' `.page` nem `.single`,
 * recebeu a capa escura e NAO recebeu o cabecalho flutuante — titulo 76px mais
 * baixo que o das outras internas, com uma faixa branca de menu em cima.
 *
 * Agora a condicao esta num lugar so, e o tema acrescenta os casos dele pelo
 * filtro `al_core_capa_flutuante`.
 */
body.al-capa-flutuante .wp-site-blocks > main {
	margin-top: calc( var( --al-header-h ) * -1 );
}

/*
 * O hero e centralizado na vertical, e a conta de centro tem que descontar
 * duas faixas ocupadas:
 *
 *   - em cima, a altura do cabecalho, que flutua por cima da foto;
 *   - embaixo, a fileira de pontos do slider e a seta de rolagem, que sao
 *     posicionadas em absoluto e por isso nao entram no fluxo.
 *
 * Sem esses dois paddings o texto centraliza em relacao a tela inteira e
 * encosta no menu — parece centralizado no inspetor e torto na tela.
 */
body.home .al-hero {
	padding-top: var( --al-header-h );
	padding-bottom: var( --al-space-70 );
}

/*
 * A regra e escrita no sentido certo: SOLIDO e o padrao, transparente e a
 * excecao.
 *
 * Antes era o contrario — `transparent` valia para todo cabecalho e uma regra
 * `body:not(.home)` devolvia o fundo branco. Funcionava por especificidade, o
 * que e frageis demais para um detalhe que, quando erra, deixa o menu branco
 * sobre fundo branco. Agora o transparente exige a classe de corpo certa.
 */
.al-header {
	background: color-mix( in srgb, var( --al-white ) 92%, transparent );
	backdrop-filter: blur( 14px );
	border-bottom: 1px solid color-mix( in srgb, var( --al-ink-300 ) 55%, transparent );
}

.al-header :is(
	.wp-block-site-title a,
	.wp-block-navigation a,
	.wp-block-navigation__responsive-container-open,
	.al-header__marca
) {
	color: var( --al-deep-900 );
}

/* Sobre a foto, transparente e branco. Ao rolar, `.is-fixo` devolve o solido. */
body.al-capa-flutuante .al-header:not( .is-fixo ) {
	background: transparent;
	backdrop-filter: none;
	border-bottom-color: rgba( 255, 255, 255, 0.14 );
}

/*
 * Veu proprio do cabecalho flutuante.
 *
 * O logo e o menu sao brancos enquanto flutuam sobre a foto, e a parte de cima
 * de uma foto pode ser qualquer coisa — ceu claro, espuma, uma parede branca. Na
 * /palestra-mar/ o logo caia sobre a camisa branca dela e praticamente
 * desaparecia.
 *
 * Resolver isso reforcando o veu de CADA capa escurece a foto inteira para
 * proteger uma faixa de 60px. Este gradiente vive no cabecalho: cobre a altura
 * dele mais um pouco, decai a zero, e protege o menu em qualquer pagina e sobre
 * qualquer foto — inclusive as que entrarem depois.
 *
 * `z-index: -1` fica contido no contexto de empilhamento que o proprio
 * cabecalho cria (sticky + z-index 100), entao o veu pinta acima da capa e
 * abaixo do logo e dos links.
 */
body.al-capa-flutuante .al-header:not( .is-fixo )::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: calc( 100% + 3rem );
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba( 6, 42, 46, 0.72 ) 0%,
		rgba( 6, 42, 46, 0.42 ) 45%,
		rgba( 6, 42, 46, 0 ) 100%
	);
}

/*
 * O botao de abrir o menu entra nesta lista junto com os links.
 *
 * Ele e um <button> cujo SVG pinta com `currentColor`, entao ficava de fora de
 * uma regra que so alcancava `a` — e no celular, onde ele e o unico controle de
 * navegacao visivel, saia em cor de texto escura sobre a foto escura do hero.
 * Praticamente invisivel exatamente na primeira dobra.
 */
body.al-capa-flutuante .al-header:not( .is-fixo ) :is(
	.wp-block-site-title a,
	.wp-block-navigation a,
	.wp-block-navigation__responsive-container-open,
	.al-header__marca
) {
	color: var( --al-white );
}

/* Rolou: sombra em vez da linha, para o cabecalho descolar do conteudo. */
.al-header.is-fixo {
	border-bottom-color: transparent;
	box-shadow: 0 1px 0 rgba( 6, 42, 46, 0.1 ), 0 8px 30px rgba( 6, 42, 46, 0.06 );
}

.al-header__interno {
	gap: var( --al-space-50 );
}

/*
 * Logo do cabecalho.
 *
 * A altura vem do CSS de cada tema (o lockup de cada marca tem proporcao
 * diferente); aqui fica so o que vale para os dois. `width: auto` com a altura
 * definida deixa o navegador calcular a largura pelos atributos width/height
 * que o bloco site-logo imprime no <img> — a caixa ja esta reservada antes de a
 * imagem chegar, entao o menu ao lado nao pula quando ela carrega.
 */
.al-header .wp-block-site-logo {
	display: flex;
	align-items: center;
	margin: 0;
	line-height: 0;
}

.al-header .wp-block-site-logo a {
	display: block;
}

.al-header .wp-block-site-logo img {
	display: block;
	width: auto;
	max-width: none;
}

.al-header .wp-block-site-title {
	margin: 0;
}

/*
 * Wordmark em texto no cabecalho — hoje so a escola usa, porque o logo dela
 * ainda nao chegou; no site da Andrea o `site-title` saiu do cabecalho.
 *
 * 🔴 O corpo e FLUIDO, nao fixo em 1.375rem. Em 1.375rem com `nowrap`,
 * "ANDREA LOPES SURF SCHOOL" mede 282px e nao encolhe — e a 320px sobram cerca
 * de 236px depois do padding lateral e do botao do menu. O cabecalho estourava
 * 34px e o site inteiro ganhava rolagem horizontal de 320 a 353px de largura.
 *
 * Passava despercebido porque o screenshot.mjs testa 390px, onde cabe raspando.
 * Foi a auditoria em faixa de larguras que expos (auditar-responsivo.mjs).
 *
 * 5.6vw resolve o vao: da ~18px em 320 e chega no teto de 22px a partir de
 * 393px, que e onde ha espaco de sobra.
 */
.al-header .wp-block-site-title a {
	font-family: var( --al-font-display );
	font-size: clamp( 1.05rem, 5.6vw, 1.375rem );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --al-deep-900 );
	white-space: nowrap;
}

/*
 * Rede de seguranca abaixo de 22em: solta o `nowrap`.
 *
 * O corpo fluido resolve o nome atual, mas nome de marca muda — e `nowrap` com
 * corpo no piso volta a estourar em silencio. Quebrar "ANDREA LOPES / SURF
 * SCHOOL" em duas linhas num celular estreito e feio; rolagem horizontal no site
 * todo e pior.
 */
@media ( max-width: 22em ) {
	.al-header .wp-block-site-title a {
		white-space: normal;
	}
}

/* Item de flex com texto longo nao encolhe sem isto. */
.al-header .wp-block-site-title {
	min-width: 0;
}

.al-header .wp-block-navigation a {
	position: relative;
	text-decoration: none;
	color: var( --al-deep-900 );
	padding-block: 0.35rem;
}

/* Sublinhado que cresce a partir da esquerda. */
.al-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.22s ease;
}

.al-header .wp-block-navigation a:hover::after,
.al-header .wp-block-navigation .current-menu-item > a::after {
	transform: scaleX( 1 );
}

/*
 * Link para o site irmao: pilula em contorno, cor de acao e seta de saida.
 * Marcado por classe no menu (al-nav__irmao), nunca por casamento de URL.
 *
 * O contorno entrou a pedido do cliente: em texto laranja simples, no meio de
 * cinco itens de menu, o link para a outra marca lia como mais um item da
 * navegacao. Pilula o separa dos irmaos sem precisar aumentar corpo nem peso.
 *
 * Usa o mesmo idioma do botao `is-style-outline` do resto do site — contorno em
 * `currentColor` que no hover inverte para fundo cheio.
 */
.al-header .wp-block-navigation .al-nav__irmao a,
.al-header .wp-block-navigation a.al-nav__irmao {
	padding: 0.55em 1em;
	border: 1px solid currentColor;
	border-radius: var( --al-radius-pill );
	color: var( --al-orange-500 ) !important;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.al-header .wp-block-navigation .al-nav__irmao a:hover,
.al-header .wp-block-navigation a.al-nav__irmao:hover {
	background: var( --al-orange-500 );
	color: var( --al-white ) !important;
}

/*
 * O sublinhado que desliza vale para item de navegacao, nao para botao: dentro
 * da pilula ele aparecia como um risco solto rente a borda de baixo.
 */
.al-header .wp-block-navigation .al-nav__irmao a::after,
.al-header .wp-block-navigation a.al-nav__irmao::after {
	display: none;
}

.al-header .wp-block-navigation .al-nav__irmao a::before,
.al-header .wp-block-navigation a.al-nav__irmao::before {
	content: "↗";
	margin-right: 0.35em;
	font-size: 0.85em;
}

/*
 * No menu mobile aberto o contorno sai. La os itens estao em 1.75rem, um por
 * linha, e a pilula em volta de um deles viraria um bloco desproporcional — o
 * problema que o contorno resolve (o link se perder entre irmaos numa linha
 * horizontal) nao existe numa lista vertical.
 */
.wp-block-navigation__responsive-container.is-menu-open .al-nav__irmao a,
.wp-block-navigation__responsive-container.is-menu-open a.al-nav__irmao {
	padding: 0;
	border: 0;
	background: none;
}

/* Menu mobile aberto: fundo escuro. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var( --al-deep-900 ) !important;
	color: var( --al-white ) !important;
	padding: var( --al-space-70 ) var( --al-pad-x );
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: var( --al-white ) !important;
	font-family: var( --al-font-display );
	font-size: 1.75rem;
	letter-spacing: 0.04em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1rem;
}

/* --------------------------------------------------------------- *
 * Botoes
 * --------------------------------------------------------------- */

/* A display e condensada demais para rotulo de botao: em caixa alta e com
   letter-spacing, "CONHEÇA MINHA HISTÓRIA" vira um bloco ilegivel. Botao usa
   a familia de corpo. */
.wp-block-button__link,
.al-lead .al-btn {
	font-family: var( --al-font-corpo ) !important;
	font-weight: 700 !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.08em !important;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 3.25rem;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.wp-block-button__link:hover {
	box-shadow: 0 10px 28px rgba( 231, 120, 23, 0.28 );
}

@media ( prefers-reduced-motion: no-preference ) {
	.wp-block-button__link:hover {
		transform: translateY( -2px );
	}
}

/* Contorno: sobre fundo escuro fica branco; sobre claro, petroleo. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: var( --al-deep-900 );
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var( --al-deep-900 );
	color: var( --al-white );
	box-shadow: none;
}

.has-deep-900-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var( --al-white );
}

.has-deep-900-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var( --al-white );
	color: var( --al-deep-900 );
}

/* --------------------------------------------------------------- *
 * Rodape
 * --------------------------------------------------------------- */

.al-footer a {
	color: var( --al-white );
	text-decoration: none;
	transition: color 0.15s ease;
}

.al-footer a:hover {
	color: var( --al-teal-300 );
}

.al-footer .wp-block-site-title a {
	font-family: var( --al-font-display );
	font-size: 1.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.al-footer__rotulo {
	font-family: var( --al-font-corpo ) !important;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: var( --al-space-40 ) !important;
}

/*
 * Assinatura e redes da coluna da marca.
 *
 * O logo do rodape e um bloco de imagem, que nao carrega margem propria; sem
 * estes espacos a assinatura encostava nele e as redes na assinatura.
 */
.al-footer__assinatura {
	max-width: 34ch;
	margin-bottom: var( --al-space-50 );
	opacity: 0.85;
}

/* Menu do rodape: o mesmo do cabecalho, em coluna. */
.al-footer__nav .wp-block-navigation__container {
	gap: 0.625rem;
}

.al-footer__nav .wp-block-navigation-item__content {
	opacity: 0.85;
}

.al-footer__nav .wp-block-navigation-item__content:hover {
	opacity: 1;
}

/*
 * O link para o site irmao herda o laranja do cabecalho por causa da classe
 * `al-nav__irmao` no item do menu. No rodape, entre links brancos discretos, ele
 * gritava; aqui volta para a cor dos vizinhos.
 */
.al-footer__nav .al-nav__irmao a,
.al-footer__nav a.al-nav__irmao {
	color: var( --al-white ) !important;
}

/*
 * O separador do core nasce curto e centralizado. Num rodape de 1200px isso lia
 * como um tracinho solto no meio do nada, e nao como o fecho do rodape.
 *
 * 🔴 O seletor precisa das TRES classes. O core usa
 * `.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { max-width: 100px }`
 * — tres classes de especificidade. Uma regra so com `.al-footer__linha` perde e
 * o filete continua com 100px, sem nada no console indicando por que.
 */
.al-footer .al-footer__linha.wp-block-separator {
	width: 100%;
	max-width: none;
	margin-block: var( --al-space-70 ) var( --al-space-50 );
	opacity: 0.28;
}

.al-footer__copy {
	opacity: 0.6;
	margin-bottom: 0;
}

.al-footer .wp-block-navigation {
	gap: 0.6rem !important;
}

/* --------------------------------------------------------------- *
 * Utilitarios
 * --------------------------------------------------------------- */

.al-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Faixa que sangra ate as bordas mesmo dentro de um container. */
.al-sangra {
	width: 100vw;
	margin-inline: calc( 50% - 50vw );
}

/* Entrada suave das secoes ao rolar. Sutil de proposito: se voce
   percebe a animacao, ela esta forte demais. */
:root.js .al-revela {
	opacity: 0;
	transform: translateY( 26px );
	transition: opacity 0.7s cubic-bezier( 0.16, 1, 0.3, 1 ), transform 0.7s cubic-bezier( 0.16, 1, 0.3, 1 );
}

:root.js .al-revela.is-visivel {
	opacity: 1;
	transform: none;
}

/* Sem `.js` no <html>, nada disso vale e o conteudo aparece normalmente.
   Esconder por CSS o que so o JS revela e a receita classica de site em
   branco quando um script falha. */
@media ( prefers-reduced-motion: reduce ) {
	:root.js .al-revela {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.al-aviso {
	padding: 1rem 1.25rem;
	border-left: 4px solid var( --al-orange-500 );
	background: var( --al-orange-100 );
	border-radius: var( --al-radius-sm );
}

/* --------------------------------------------------------------- *
 * Cards de post
 * --------------------------------------------------------------- */

.al-cards .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.al-cards .wp-block-post-featured-image img {
	transition: transform 0.5s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.al-cards .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var( --al-radius-md );
}

.al-cards .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale( 1.05 );
}

.al-cards .wp-block-post-title {
	font-size: 1.25rem;
}

.al-cards .wp-block-post-title a {
	text-decoration: none;
	color: var( --al-ink-900 );
}

.al-cards .wp-block-post-title a:hover {
	color: var( --al-teal-700 );
}

/* --------------------------------------------------------------- *
 * Capa de pagina interna
 *
 * Mesma linguagem da primeira dobra da home — foto sangrando, veu escuro,
 * titulo em corpo de display ancorado embaixo — mas mais baixa: a home e a
 * entrada e fica com a tela inteira; a interna anuncia e entrega o conteudo.
 * --------------------------------------------------------------- */

.wp-block-cover.al-capa-pagina {
	min-height: min( 62svh, 38rem );
	/* Titulo centralizado na vertical; o horizontal vem do text-align abaixo. */
	align-items: center;
	/*
	 * Fundo para a pagina SEM imagem destacada. Fica abaixo da imagem quando ela
	 * existe (a img do bloco de capa vem depois na ordem de pintura), entao serve
	 * so de rede: `pagina-exemplo` e `politica-de-privacidade` nunca terao foto e
	 * viram uma faixa petroleo de titulo em vez de um retangulo vazio.
	 */
	background-color: var( --al-deep-900 );
	/*
	 * O cabecalho flutua por cima da capa, entao o padding de cima desconta a
	 * altura dele — senao a conta de centro considera uma faixa que esta ocupada
	 * e o titulo sobe para tras do menu.
	 */
	padding-block: calc( var( --al-header-h ) + var( --al-space-60 ) ) var( --al-space-60 );
	text-align: center;
}

/*
 * Centralizacao horizontal.
 *
 * O grupo interno e `alignwide` (1240px) e o titulo tem `max-width` proprio;
 * `margin-inline: auto` centra a caixa do titulo dentro dele, e o `text-align`
 * herdado da capa centra as linhas dentro da caixa. Sem a margem, um titulo
 * curto ficava com o texto centralizado mas a caixa encostada na esquerda — o
 * que da o mesmo resultado visual so por coincidencia, quando o titulo ocupa a
 * largura toda.
 */
.al-capa-pagina .wp-block-group {
	text-align: center;
}

/*
 * Veu da capa: base e vinheta lateral, sem veu de topo.
 *
 * O topo e cuidado pelo gradiente do proprio cabecalho, mais acima neste
 * arquivo. Aqui a vertical serve so a base, onde o titulo senta, e a vinheta da
 * esquerda reforca o contraste na coluna do titulo sem apagar a metade direita
 * da foto — que e onde, nas quatro capas atuais, esta o assunto.
 */
.wp-block-cover.al-capa-pagina .wp-block-cover__background {
	background:
		linear-gradient(
			0deg,
			rgba( 6, 42, 46, 0.95 ) 0%,
			rgba( 6, 42, 46, 0.62 ) 26%,
			rgba( 6, 42, 46, 0.22 ) 58%,
			rgba( 6, 42, 46, 0.1 ) 100%
		),
		linear-gradient(
			90deg,
			rgba( 6, 42, 46, 0.45 ) 0%,
			rgba( 6, 42, 46, 0.12 ) 45%,
			rgba( 6, 42, 46, 0 ) 70%
		) !important;
	opacity: 1 !important;
}

/*
 * O rotulo dentro da capa precisa ser centralizado no EIXO DO FLEX.
 *
 * `.al-rotulo` e' `display: flex` (o filete de onda e' um irmao do texto), e
 * `text-align: center` nao move item de flex. Sem esta linha o rotulo ficava
 * encostado na borda esquerda embaixo de um titulo centralizado — foi o que o
 * cliente apontou na capa do arquivo de experiencias em 22/08.
 */
.al-capa-pagina .al-rotulo {
	justify-content: center;
}

/*
 * `wp-block-heading` junto do `post-title`: a capa do ARQUIVO de experiencias
 * usa `wp:heading` (arquivo nao tem titulo de post), e por isso nao herdava nem
 * o teto de corpo nem a medida das outras capas. Em `titulo-1` (5,5rem) contra os
 * `titulo-2` (4,25rem) das paginas, "NOSSAS EXPERIENCIAS" saia 30% maior que
 * qualquer outro titulo interno do site.
 */
.al-capa-pagina :is( .wp-block-post-title, .wp-block-heading ) {
	margin: 0;
	/*
	 * `titulo-2` (teto de 4.25rem), e nao `titulo-1` (5.5rem).
	 *
	 * Titulo de pagina interna nao disputa com o da home: a home e a entrada e
	 * leva a escala de display. A 5.5rem, "SURF COACH: EXPERIENCIA VIP" ocupava
	 * quase a largura toda da capa e lia como grito.
	 */
	font-size: var( --al-fs-titulo-2 );
	/* 0.94 e o piso seguro para caixa alta acentuada na Anton — ver o comentario
	   do titulo do hero em componentes.css. */
	line-height: 0.94;
	color: var( --al-white );
	max-width: 24ch;
	margin-inline: auto;
}

/* Categoria e data do post, na capa. */
.al-capa-pagina__rotulo {
	margin-bottom: var( --al-space-30 );
}

.al-capa-pagina__rotulo a {
	text-decoration: none;
}

.al-capa-pagina__data {
	color: rgba( 255, 255, 255, 0.75 );
}