/*
Theme Name: Sapo ECO
Theme URI: https://eco.sapo.pt
Description: Block (FSE) theme scaffold for the Sapo ECO newspaper. The design
  system lives in theme.json (palette, typography, spacing) and is derived from
  the project Figma. Components — cards, labels, buttons, section titles,
  thumbnails — live in assets/css/components.css, which is also loaded in the
  editor; this style.css carries only the site chrome (SAPO bar, masthead,
  footer). The same theme.json is portable to a GeneratePress child theme if
  the project adopts GenerateBlocks (see README).
Author: Dengun
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.1.0
Text Domain: eco
*/

/* ──────────────────────────────────────────────────────────────────────────
   Cor de destaque
   ──────────────────────────────────────────────────────────────────────────

   Um só botão para o verde do tema. Tudo o que no layout é "a cor da marca"
   — títulos de secção do rodapé, filetes, estados de hover — sai daqui, e
   não de hexadecimais espalhados pelos templates.

   Por omissão é o preset `primary` do theme.json, por isso mexer na cor em
   Aparência › Editor › Estilos › Cores muda o site inteiro sem tocar em
   código.

   Para trocar só num sítio, redefine-se a variável no contentor:

       .eco-footer { --eco-accent: var(--wp--preset--color--live); }

   Os dois derivados acompanham sozinhos: `-line` é o filete (a cor a 50%
   sobre o fundo escuro) e `-wash` é o fundo ténue dos hovers.

   Há dois verdes e só dois, os mesmos do Figma:

     --eco-accent       `color/accent/brand` (#00C353) — fundos, filetes e
                        texto sobre escuro (títulos do rodapé).
     --eco-accent-text  `color/text/green`   (#00672C) — texto verde sobre
                        fundo claro: antetítulos de categoria, cabeçalho da
                        coluna ÚLTIMAS, links do corpo.

   A divisão é de legibilidade, não de gosto: o verde da marca sobre branco
   fica em 1,9:1 de contraste e é ilegível a 14px. Antes disto andavam quatro
   verdes pela folha (#00C353, #00A848, #00A747 e o do Figma), que era o que
   fazia os títulos verdes da página não baterem certo uns com os outros.

   Fica de fora o verde do sapo do SAPO (#46B649 no cabeçalho): é a marca do
   SAPO, não a do ECO, e não deve seguir a cor do tema.

   A mesma arrumação vale para o escuro, que também andava a fazer dois
   trabalhos com um preset só:

     ink      `color/text/primary`       (#000000) — texto e títulos.
     inverse  `color/background/inverse` (#002410) — fundos escuros: rodapé,
              fita de cotações, véu das capas, hover dos botões.

   Eram ambos #002410, por isso os títulos saíam num verde-escuro em vez do
   preto do desenho. Ao separar, cada um passa a ter o valor do Figma.
   ────────────────────────────────────────────────────────────────────────── */

:root {
	--eco-accent: var(--wp--preset--color--primary);
	--eco-accent-text: var(--wp--preset--color--primary-dark);
	--eco-accent-line: color-mix(in srgb, var(--eco-accent) 50%, var(--wp--preset--color--inverse));
	/* O mesmo gesto do `--eco-accent-line` mas para o lado claro: metade do
	   verde com branco, que dá o #80E1A9 medido nos filetes do artigo
	   (partilha e ECO FAST em pages-desktop/ECO artigo.png). O filete escuro
	   serve os rótulos sobre fundo branco do rodapé; este serve os que estão
	   dentro da peça, onde uma linha escura pesava mais do que o texto que
	   está a sublinhar. */
	--eco-accent-line-suave: color-mix(in srgb, var(--eco-accent) 50%, var(--wp--preset--color--base));
	--eco-accent-wash: color-mix(in srgb, var(--eco-accent) 12%, transparent);
}

/* ── E outra vez, dentro da marca ─────────────────────────────────────────
   Isto não é repetição por descuido — é o que faz o tema de canal funcionar.

   Uma propriedade personalizada resolve os `var()` que tem dentro NO ELEMENTO
   onde é declarada, e o que herda para baixo já é o valor calculado. Estas
   cinco estão declaradas no `:root`, onde `--wp--preset--color--primary` é o
   verde do ECO; a partir daí `--eco-accent` é o verde do ECO e mais nada.

   O `eco_brand_css()` (inc/brands.php) escreve
   `.eco-brand--<marca> { --wp--preset--color--primary: … }`, e essa classe
   está no `<body>` — um nível ABAIXO do `:root`. Chega tarde: o
   `--eco-accent` já tinha sido calculado. Medido no artigo do ECOseguros:
   `--wp--preset--color--primary` no body é #317169, e `--eco-accent` continua
   #00C353.

   Era isto que fazia com que, dentro de um canal, o cabeçalho e o rodapé
   mudassem de cor (usam as classes de preset do core, que são reavaliadas) e
   os títulos de secção, os rótulos do rodapé, os antetítulos dos cartões, as
   pastilhas de categoria e os botões ficassem verdes. Não eram vinte defeitos
   — era um, visto de vinte sítios.

   Redeclarar dentro do `.eco-brand` obriga o cálculo a repetir-se no `<body>`,
   já com a cor da marca. Fora de um canal a regra não existe e manda a de
   cima, tal e qual como antes. */
.eco-brand {
	--eco-accent: var(--wp--preset--color--primary);
	--eco-accent-text: var(--wp--preset--color--primary-dark);
	--eco-accent-line: color-mix(in srgb, var(--eco-accent) 50%, var(--wp--preset--color--inverse));
	--eco-accent-line-suave: color-mix(in srgb, var(--eco-accent) 50%, var(--wp--preset--color--base));
	--eco-accent-wash: color-mix(in srgb, var(--eco-accent) 12%, transparent);
}

/* ── O escuro do rodapé, por marca ────────────────────────────────────────
   O rodapé pinta-se com as classes de preset do núcleo, e duas delas não
   acompanhavam a vertical: `inverse` (a laje escura do corpo) e `surface`
   (a faixa legal). Resultado: o ECO Avenida e o +M fechavam a página com o
   verde-escuro do ECO, e a única faixa que mudava de canal para canal era a
   de cima. Foi isto o "o rodapé não está a aplicar os temas".

   Não se resolve no markup: `has-inverse-background-color` sai do núcleo com
   `!important`. Resolve-se como já se resolve o botão "Assinatura Premium"
   do cabeçalho — a regra do núcleo pinta com `var(--wp--preset--color--
   inverse)`, por isso basta redefinir esse token DENTRO do rodapé e a regra
   passa a pintar com a nossa cor. Nenhuma classe muda de sítio, e nada do
   que um desenhador produz deixa de sair (que é o que faz órfão o CSS de
   outra sessão).

   Falta a cor, e as duas contas óbvias não servem:

   - **misturar a marca com o `inverse`** arrasta tudo para verde. O #002410
     tem 36 de verde; o roxo do ECO Avenida a 18% dá #0D2219, que continua a
     ser verde-escuro;
   - **escurecer a marca por uma percentagem fixa** parte-se na outra ponta.
     Os `primary` das dez marcas vão de um azul-pálido (Trabalho, #CCE8F6) a
     um quase-preto (Local Online, #1D1D1B) — a mesma conta deixa umas
     acinzentadas e outras a arder.

   O que serve é normalizar a claridade. Medido em OKLCH, o `inverse` do ECO
   é L=0.229 C=0.057 H=155: é o verde do ECO posto numa claridade fixa. A
   mesma receita aplica-se ao `primary` de cada marca — mesma claridade,
   mesmo tecto de saturação, o tom é que é dela. Sai #2A122B no ECO Avenida,
   #002521 no +M, #1D1D1B no Local Online: todos tão escuros quanto o verde
   de sempre, e cada um da sua cor. Aplicada ao próprio verde do ECO a receita
   devolve #05240C, a um grau do #002410 — a prova de que a conta é a do
   desenho e não uma invenção nossa.

   Quatro tokens:

     --eco-footer-fundo   a laje escura do corpo.
     --eco-footer-realce  o que se lê por cima dela: rótulos de coluna,
                          filetes, hover das ligações e dos discos sociais.
     --eco-footer-legal   a faixa legal, o mesmo gesto do lado claro.
     --eco-footer-pilula  o extremo oposto à tinta do cabeçalho; serve o
                          rótulo da pastilha (ver a secção do rodapé).

   Contrastes medidos NO BROWSER e não na folha — Chromium e WebKit devolvem
   o mesmo ao byte —, pior caso das dez marcas: texto do rodapé sobre a laje
   14,11; rótulos e ligações em hover 9,06; rótulo da pastilha 6,61; letra
   pequena da faixa legal 6,06 (era 6,12 sobre o cinzento fixo).

   O `@supports` não é decoração. `oklch(from …)` é sintaxe de cor relativa,
   e onde ela não existir as variáveis ficam com o valor do `:root`, que é o
   rodapé de hoje tal e qual. Degrada para "não veste a marca", nunca para
   "não se lê" — e mesmo aí fica melhor do que estava, porque o realce passa
   a ser o verde do ECO (7,09) em vez do `primary` da marca (1,01 no Local
   Online).
   ────────────────────────────────────────────────────────────────────────── */
:root {
	--eco-footer-fundo: var(--wp--preset--color--inverse);
	--eco-footer-realce: var(--wp--preset--color--primary);
	--eco-footer-legal: var(--wp--preset--color--surface);
}

@supports (color: oklch(from red l c h)) {
	.eco-brand {
		--eco-footer-fundo: oklch(from var(--eco-accent) 0.229 min(c, 0.057) h);
		--eco-footer-realce: oklch(from var(--eco-accent) 0.82 min(c, 0.14) h);
		--eco-footer-legal: oklch(from var(--eco-accent) 0.95 min(c, 0.016) h);
		--eco-footer-pilula: oklch(from var(--eco-on-primary, #002410) calc(1.03 - l) 0 0);
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   Barra SAPO, hamburger e pesquisa (conforme _docs/reference-snapshots).
   O desenho tem três faixas empilhadas — SAPO (preta), ECO (verde) e a
   navegação (cinza) — e o logo ECO ao centro, ladeado pelo hamburger à
   esquerda e pelos botões + pesquisa à direita.
   ────────────────────────────────────────────────────────────────────────── */

/* O fundo é a variável `color/SAPO/dark` do Figma (#222222) — um cinzento
   escuro, não o quase-preto que aqui estava. */
.eco-sapobar {
	background: #222;
	color: #fff;
	font-size: 12px;
	letter-spacing: .03em;
}

.eco-sapobar__inner {
	position: relative;
	max-width: 1360px;
	margin: 0 auto;
	min-height: 60px;
	display: flex;
	align-items: center;
	padding: 0 clamp(16px, 3vw, 40px);
}

.eco-sapobar__links {
	display: flex;
	align-items: center;
	gap: 14px;
}

.eco-sapobar__links a {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	opacity: .82;
}

.eco-sapobar__links a:hover { opacity: 1; }
.eco-sapobar__menu { font-weight: 700 !important; opacity: 1 !important; }

.eco-sapobar__sep {
	width: 1px;
	height: 12px;
	background: rgba(255, 255, 255, .35);
}

/* Centrado no eixo da página, não no espaço que sobra — assim não salta
   quando os links da esquerda mudam de comprimento. */
/* O logo é o SVG oficial do SAPO. O lettering herda a cor da barra por
   `currentColor`, para ficar branco aqui e continuar a funcionar se algum dia
   a barra passar a clara; o sapo e as pupilas mantêm as cores da marca. */
.eco-sapobar__brand {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	color: #fff;
	text-decoration: none;
}

/* 32px de altura no desenho (frame `logo-sapo`, 151×32). A largura sai do
   `viewBox`, por isso o logótipo nunca deforma se a altura mudar. */
.eco-sapobar__brand svg {
	display: block;
	width: auto;
	height: 34px;
}

/* O logo ECO fica ao centro; o hamburger e o bloco da direita ocupam a
   mesma largura para o centro ser óptico e não aproximado. */
/* O fundo verde sangra de lado a lado, mas o conteúdo alinha com o poço de
   1360px como tudo o resto da página: a 1440 o hamburger arrancava aos 32px e
   a lupa acabava aos 1408, oito pixels fora da coluna onde vive o menu de
   secções e o corpo do site. O `max()` mantém os 32px de folga própria
   enquanto a janela é mais estreita do que o poço, e passa a acompanhá-lo
   quando há margem a dividir. */
.eco-masthead {
	position: sticky;
	top: 0;
	z-index: 20;
	padding-inline: max(var(--wp--preset--spacing--60), calc((100% - 1360px) / 2));
}

/* ── A faixa verde acompanha o scroll ─────────────────────────────────────
   É o que a produção faz: assim que a barra do SAPO sai do ecrã, a faixa
   verde cola-se ao topo e as duas filas de navegação recolhem — fica só a
   barra colorida (hamburger, logótipo, lupa, "Entrar" e a assinatura) a
   seguir a página. Medido em eco.sapo.pt a 1440px: `body.with-header-fixed`
   entra aos 60px de scroll, o `.site-header__container` passa a
   `position:fixed` com 72px de altura e os dois menus vão a `max-height:0`.

   Aqui não é preciso JavaScript nenhum. O `position: sticky` prende-se à
   caixa do elemento pai, e o pai é o `<header class="wp-block-template-part">`
   com que o WordPress embrulha o `parts/header.html` — mede a altura do
   cabeçalho e mais nada, por isso a faixa descolava outra vez 200px abaixo.
   O `display: contents` apaga essa caixa (não o elemento, nem os selectores
   que lhe apontam) e a faixa passa a ser filha, para efeitos de layout, do
   `.wp-site-blocks`, que mede a página inteira. A barra do SAPO e as duas
   filas de navegação ficam no fluxo normal e saem do ecrã, como lá.

   O `z-index` deixa de ser dispensável a partir do momento em que o
   cabeçalho passa por cima do corpo da página. Fica em 20: acima de tudo o
   que é conteúdo e abaixo dos 60 do painel da conta, que vive lá dentro e
   tem de continuar a abrir por cima da própria faixa. */
.wp-site-blocks > header.wp-block-template-part {
	display: contents;
}

/* Com sessão iniciada o topo do ecrã já está ocupado pela barra do
   WordPress, que é fixa. A variável é do core (32px no desktop, 46px abaixo
   dos 782px); o valor de reserva cobre o caso de ela não existir. */
.admin-bar .eco-masthead {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.eco-masthead .wp-block-site-logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.eco-masthead__end {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

/* A secção em que se está leva filete verde por baixo, no menu de secções.
   Medido em docs/reference-snapshots/pages-desktop/ECO ultimas.png: 2px de
   #00C353 (o verde da marca, não o verde-texto) por baixo de "Últimas", com
   ~10px entre a base do texto e o filete.

   O filete é desenhado num `::after` fora do fluxo, e não com padding e
   borda: assim não conta para a altura do item. Com padding, o item da secção
   aberta media 32px contra os 22px dos vizinhos e era ele a mandar na altura
   da barra inteira — a linha de menu crescia dez pixels só por se estar numa
   secção, e os outros itens ficavam a flutuar.

   Quem põe a classe é inc/nav-current.php — o core não marca estes itens
   porque são links escritos à mão e não itens de página ou de termo. */
.wp-block-navigation-item__content.eco-nav-atual {
	position: relative;
}

.wp-block-navigation-item__content.eco-nav-atual::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	height: 2px;
	background: var(--wp--preset--color--primary);
}

/* Nada no cabeçalho é preto puro: o desenho não tem um único pixel #000000
   entre os y=60 e y=140 — o hamburger, o contorno do "Entrar" e a lupa são
   todos #002410 (preset `inverse`), que sobre o verde da marca lê como um
   tom mais leve do que o preto que aqui estava. */
.eco-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* 40×28 no desenho (três traços de 4px com 7px de intervalo). */
.eco-burger span {
	display: block;
	height: 4px;
	width: 40px;
	border-radius: 2px;
	background: var(--wp--preset--color--inverse);
}

/* A lupa tem 28px de mancha no desenho e 19px no que estava — o SVG passa de
   24 para 36px, que é o que devolve os 28px visíveis dentro do viewBox.

   É uma ligação e não um botão desde 20/08/2026, e a diferença não é de
   semântica: era um `<button type="button">` sem uma linha de JavaScript em
   lado nenhum do tema. Clicava-se e não acontecia nada — a página de pesquisa
   existia (`templates/search.html`, com o campo, o período, a ordenação e a
   lista de resultados) e não havia forma de lá chegar a partir do site.

   Aponta para `/?s=`, que o WordPress trata como pesquisa vazia: abre a página
   de resultados com o campo pronto a escrever, que é o que o desenho mostra
   (pages-desktop/ECO resultado pesquisa.png). Sendo destino e não ação,
   funciona sem script, abre em separador novo com o meio-clique e o teclado
   percorre-a como percorre qualquer ligação. */
.eco-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--inverse);
	text-decoration: none;
	cursor: pointer;
}

/* Um hamburger de cada vez. São dois elementos e não um com o `href`
   trocado por JavaScript: sem script o `:target` só sabe abrir o que o
   endereço diz, e o endereço é o que está escrito no `href`. Dois links, cada
   um com o seu, e o CSS mostra o que serve àquela largura — que é, à letra, o
   que a produção faz com o `secondary-menu-trigger` e o `mobile-menu-trigger`.
   O patamar é o dela: 1000px. */
.eco-burger--menu {
	display: none;
}

@media (max-width: 999px) {
	.eco-burger--mais {
		display: none;
	}

	.eco-burger--menu {
		display: inline-flex;
	}
}

.eco-burger:focus-visible,
.eco-search-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--inverse);
	outline-offset: 2px;
}

/* Em ecrãs estreitos o logo ao centro colidiria com os botões: volta ao
   fluxo normal e os itens redistribuem-se.
   
   O selector dos botões leva `.is-layout-flex` porque a regra do core que os
   põe em flex (`.wp-block-buttons.is-layout-flex`) pesa duas classes e ganhava
   a este `display:none` de uma só — os botões continuavam no cabeçalho a 390px
   e, num flex de 390px sem espaço, quem encolhia era o logótipo: ficava a
   medir 31×14 em vez dos 104×30 do desenho. A marca era a coisa mais pequena
   do cabeçalho. */
@media (max-width: 860px) {
	.eco-masthead .wp-block-site-logo {
		position: static;
		transform: none;
	}
	.eco-sapobar__brand { position: static; transform: none; margin-left: auto; }
	.eco-masthead .eco-masthead-cta.is-layout-flex { display: none; }
}

/* O logótipo não encolhe. Uma imagem dentro de um flex row deixa-se comprimir
   abaixo da sua largura declarada, e é o que acontecia sempre que o cabeçalho
   ficava sem espaço. */
.eco-masthead .wp-block-site-logo,
.eco-masthead .custom-logo {
	flex: none;
}

/* ── Contraste do chrome nas verticais ────────────────────────────────────
   O cabeçalho base assume verde claro por baixo e tinta escura por cima
   (hamburger, lupa e "Entrar" em `inverse`/`base`, logótipo #002410). As
   verticais pintam o mesmo cabeçalho com cores que vão do azul-pálido do
   Trabalho ao quase-preto do Local Online, e a tinta fixa deixava de se ler
   — o "Entrar" branco media 1,28:1 sobre o Trabalho.

   Quem decide a tinta é o `eco_brand_css()` (inc/brands.php): calcula
   `--eco-on-primary`/`--eco-on-secondary` — branco ou #002410, o que
   contrastar mais — e `--eco-logo-filter` para o logótipo, que é um SVG de
   uma cor só. Estas regras apenas consomem as variáveis; todas caem no
   comportamento de hoje quando a variável não existe, por isso fora de uma
   vertical não mudam um pixel.

   O caso do botão "Assinatura Premium" é o truque menos óbvio: as classes
   de preset do core (`has-inverse-background-color`) trazem `!important`,
   por isso não se combate a propriedade — redefine-se o token `inverse` só
   dentro do botão, e a regra do core passa a pintar com a nossa cor. */

.eco-brand .eco-burger span {
	background: var(--eco-on-primary, var(--wp--preset--color--inverse));
}

.eco-brand .eco-search-btn {
	color: var(--eco-on-primary, var(--wp--preset--color--inverse));
}

.eco-brand .eco-burger:focus-visible,
.eco-brand .eco-search-btn:focus-visible {
	outline-color: var(--eco-on-primary, var(--wp--preset--color--inverse));
}

.eco-brand .eco-masthead .custom-logo {
	filter: var(--eco-logo-filter, none);
}

/* Os logótipos dos canais vêm da produção com proporções muito diferentes
   (o do Fundos Europeus mede 2304×292, o do ECO 104×48). O bloco site-logo
   fixa a largura, o que faria cada um sair de um tamanho diferente; aqui
   manda a altura do cabeçalho e a largura acompanha. O limite de largura
   protege dos muito compridos. */
.eco-brand .eco-masthead .custom-logo {
	width: auto;
	height: 48px;
	max-width: 240px;
	object-fit: contain;
}

/* ECO Avenida à parte, e por causa da proporção. O logótipo desta marca é
   quase quadrado ao pé dos outros (2,2:1 contra os 8:1 do Fundos Europeus), e
   à altura comum de 48px saía com 106px de largura — metade do Advocatus, que
   com a mesma altura bate no limite dos 240. Lado a lado, a marca lia-se mais
   pequena do que as vizinhas sem que nada no desenho o pedisse.

   Sobe para 64, o que lhe dá ~141px de largura — na mesma ordem das outras.
   Pedido do utilizador a 27/08/2026. */
.eco-brand--eco-avenida .eco-masthead .custom-logo {
	height: 64px;
}

/* ── O logótipo do canal tinha de caber ───────────────────────────────────
   A regra de cima dá a largura à IMAGEM e deixa o invólucro do bloco
   `site-logo` com a largura que ficou configurada (150px). São dois valores
   diferentes para a mesma coisa, e a imagem passava a medir os 240px do
   limite dentro de um invólucro de 150 — 90px a mais, por fora da própria
   caixa.

   No desktop não se via, porque sobra espaço à direita. A 375px via-se: no
   Advocatus a imagem ia de x=80 a x=320 e o `eco-masthead__end` — "Entrar" e
   a lupa — começa em x=238. O logótipo passava por cima dos controlos, e a
   página levava 11px de barra horizontal. Igual no Capital Verde e no Local
   Online, os outros dois com logótipo de 150.

   Duas linhas, uma para cada metade do problema: o invólucro passa a medir o
   que a imagem mede, para o flex do cabeçalho contar com a largura real; e
   num telefone o limite desce para os 104px do próprio logótipo do ECO, que
   é a largura que o cabeçalho foi desenhado para levar. O `flex: none` do
   logótipo fica como está — não encolher é decisão tomada e continua certa.
   O que estava errado era o cabeçalho não saber a largura verdadeira. */
.eco-brand .eco-masthead .wp-block-site-logo {
	width: auto;
}

@media (max-width: 600px) {
	.eco-brand .eco-masthead .custom-logo {
		max-width: 104px;
	}

	/* A subida do ECO Avenida é só no desktop. Abaixo dos 600 a largura está
	   travada nos 104, e manter os 64 de altura dava-lhe uma caixa de 104x64
	   para um logótipo de 2,2:1 — o `object-fit: contain` não o deforma, mas
	   deixava-o a nadar em 17px de vazio em cima e em baixo. */
	.eco-brand--eco-avenida .eco-masthead .custom-logo {
		height: 48px;
	}
}

.eco-brand .eco-conta-entrar__botao {
	border-color: var(--eco-on-primary, var(--wp--preset--color--base));
	color: var(--eco-on-primary, var(--wp--preset--color--base));
}

.eco-brand .eco-masthead-cta .wp-block-button__link {
	--wp--preset--color--inverse: var(--eco-on-primary, #002410);
}

/* Botões por omissão (theme.json: fundo primary, texto ink): dentro de uma
   vertical o fundo acompanha a marca, por isso o texto acompanha a tinta. O
   hover troca para a cor secundária com a tinta dela. Um botão com cores
   explícitas no editor não é apanhado — os presets do core levam !important
   e ganham a estas duas regras, de propósito. */
.eco-brand .wp-element-button {
	color: var(--eco-on-primary, var(--wp--preset--color--ink));
}

.eco-brand .wp-element-button:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--eco-on-secondary, var(--wp--preset--color--primary));
}

/* Faixas pintadas com a cor principal (faixa verde, painéis de canal, a
   faixa de título dos arquivos): o texto lá dentro está escrito ora com o
   preset `base` (branco), ora com `ink` (preto — é o caso do título de
   categoria no archive.html). Sobre o roxo do ECO Avenida o preto media
   1,9:1. Os dois tokens são redefinidos para a tinta da marca dentro do
   escopo da faixa — nas marcas escuras a tinta é branca, nas claras é o
   #002410, e fora de uma vertical nada muda. */
.eco-brand .has-primary-background-color {
	--wp--preset--color--base: var(--eco-on-primary, #FFFFFF);
	--wp--preset--color--ink: var(--eco-on-primary, #000000);
}

/* ── Cabeçalho em ecrãs estreitos ─────────────────────────────────────────
   O desenho de telemóvel (pages-mobile/ECO homepage mobile.png) tem duas
   barras e mais nada: a do SAPO e a verde com hamburger, logótipo e lupa. As
   duas filas de navegação que se seguem no desktop não existem lá — e não
   existem porque não cabem: as onze secções davam duas linhas e os cinco
   tópicos outras duas, 167px de cabeçalho antes de se chegar à primeira
   notícia.

   A fila das secções sai porque é a mesma lista que o hamburger já abre —
   estava a ocupar 72px para mostrar um segundo botão de menu, sem rótulo, ao
   lado do primeiro. Os tópicos ficam, mas numa fila só que se arrasta com o
   dedo: são links que o menu não tem, e apagá-los era tirar acesso a eles.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 781px) {
	.eco-nav-secoes {
		display: none;
	}

	/* Fila única, arrastável, a sangrar para as duas margens — é como o desenho
	   trata tudo o que não cabe na largura do ecrã (a fita de cotações e o leque
	   das newsletters saem os dois pela direita). */
	.eco-nav-topicos .wp-block-navigation__container {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		padding-inline: var(--wp--preset--spacing--40);
		margin-inline: calc(var(--wp--preset--spacing--40) * -1);
	}

	.eco-nav-topicos .wp-block-navigation__container::-webkit-scrollbar {
		display: none;
	}

	.eco-nav-topicos .wp-block-navigation-item {
		flex: none;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   Rodapé
   ────────────────────────────────────────────────────────────────────────── */

/* O rodapé é o único bloco de topo que ficava colado ao que vem antes: o
   `blockGap` da raiz dá-lhe 16px, e o painel das newsletters acabava quase
   encostado à faixa verde com que o rodapé abre. O desenho deixa ali o mesmo
   respiro que separa as outras secções — 64px (ECO categoria.png: o painel
   acaba em y=3659 e o rodapé abre em y=3723).

   Vale em todas as páginas, que é onde o problema estava. */
.wp-site-blocks > footer {
	margin-top: 4rem;
}

/* ── O rodapé dentro de uma vertical ──────────────────────────────────────
   Três escopos, e em nenhum se mexe no markup: redefine-se o token que a
   classe de preset do núcleo já consome (ver "O escuro do rodapé, por marca",
   lá em cima, onde estão a receita e os contrastes medidos). */

.eco-brand .eco-footer__body {
	--wp--preset--color--inverse: var(--eco-footer-fundo);
	--wp--preset--color--primary: var(--eco-footer-realce);
	/* O `--eco-accent` já foi calculado no <body> com o `primary` da marca, e
	   redefinir o preset aqui NÃO o refaz — é a mesma armadilha explicada na
	   secção da cor de destaque. Por isso os três derivados voltam a
	   declarar-se, agora sobre o realce. Sem esta metade, o fundo mudava de
	   cor e os rótulos das colunas ficavam com o `primary` da marca por cima
	   da laje: 1,01 no Local Online, 1,23 no ECO Avenida, 1,49 no +M — a
	   mesma família de defeito da chamada Premium, e invisível a quem só
	   olhasse para o fundo. */
	--eco-accent: var(--eco-footer-realce);
	--eco-accent-line: color-mix(in srgb, var(--eco-footer-realce) 50%, var(--eco-footer-fundo));
	--eco-accent-wash: color-mix(in srgb, var(--eco-footer-realce) 12%, transparent);
}

.eco-brand .eco-footer__legal {
	--wp--preset--color--surface: var(--eco-footer-legal);
}

/* A pastilha "Ver todas as newsletters" é escura sobre a faixa da marca, e
   ficava escura sobre marcas que JÁ são escuras: no Local Online o #002410
   media 1,00 contra o #1D1D1B da faixa — desaparecia o botão inteiro, não só
   o rótulo. O fundo passa a ser o `--eco-on-primary`, que é exactamente a
   tinta de maior contraste com a faixa (branco ou #002410, calculado em
   inc/brands.php): a pastilha inverte-se sozinha — escura nas marcas claras,
   clara nas escuras, ≥4,39 de contraste com a faixa em todas. */
.eco-brand .eco-footer__cta .wp-block-button__link {
	--wp--preset--color--inverse: var(--eco-on-primary, #002410);
}

/* E o rótulo acompanha. O `primary` cru sobre essa pastilha dá 4,39 no pior
   caso (Capital Verde) e esse é o TECTO, não um descuido: o branco/#002410 da
   pastilha já é, por construção, a tinta que mais contrasta com a marca. Puxa-
   se a marca 40% para o extremo oposto ao da pastilha e o pior caso sobe a
   6,61 sem deixar de ser a cor do canal. Fora do `@supports` o rótulo fica no
   `primary` da marca, que é o tecto de 4,39 — pior do que isto, não fica. */
@supports (color: oklch(from red l c h)) {
	.eco-brand .eco-footer__cta .wp-block-button__link {
		--wp--preset--color--primary: color-mix(in oklab, var(--eco-accent) 60%, var(--eco-footer-pilula));
	}
}

/* As ligações do rodapé não vão sublinhadas — no desenho são listas de
   navegação, não texto corrido. O sublinhado volta no hover para não deixar
   o alvo sem sinal nenhum. */
.eco-footer__body a,
.eco-footer__legal a {
	text-decoration: none;
}

.eco-footer__body a:hover,
.eco-footer__legal a:hover {
	text-decoration: underline;
}

/* Os títulos de secção do rodapé levam um filete por cima a toda a largura da
   coluna. Cor e filete saem da variável de destaque, não do markup, para o
   rodapé acompanhar a cor do tema. */
/* O tipo de letra é o mesmo dos títulos de secção da página — sans, e não o
   Barlow que os títulos herdam por serem `<h3>`. Confirmado no rodapé do
   desenho: "Siga-nos", "Disponível em", "SOBRE" e "Explorar" partilham as
   formas das ligações por baixo, que são sans. É o mesmo gesto do resto do
   site: rótulo pequeno em verde com filete por cima. */
.eco-footer__title {
	display: block;
	width: 100%;
	color: var(--eco-accent);
	border-top: 1px solid var(--eco-accent-line);
	font-family: var(--wp--preset--font-family--sans);
}

/* Os ícones sociais são círculos de contorno de 48px, e não os quadrados
   preenchidos que o core dá por omissão. */
.eco-footer__social .wp-block-social-link {
	/* Sem `border-box` o contorno somava-se aos 48px e os quatro círculos
	   deixavam de caber nos 240px da coluna — o Facebook caía para baixo. */
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 0;
	/* 2px, o mesmo dos discos de partilha do artigo: a 1px o círculo
	   desaparecia contra o verde escuro do rodapé e ficava só o glifo. */
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--surface) 45%, transparent);
	border-radius: 50%;
	background: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.eco-footer__social .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}

.eco-footer__social .wp-block-social-link-anchor svg {
	width: 18px;
	height: 18px;
}

.eco-footer__social .wp-block-social-link:hover,
.eco-footer__social .wp-block-social-link:focus-within {
	border-color: var(--eco-accent);
	background-color: var(--eco-accent-wash);
}

/* Os distintivos das lojas são arte oficial da Apple e da Google e não podem
   ser deformados. Fixa-se a altura nos 40px do desenho e a largura segue a
   proporção nativa de cada um — ver patterns/footer-apps.php. */
.eco-footer__badge,
.eco-footer__badge img {
	display: block;
	margin: 0;
}

.eco-footer__badge img {
	width: auto;
	height: 40px;
	/* O `max-width:100%` do core apertava o distintivo do Google aos 120px da
	   coluna e, com a altura fixa, deformava-o. */
	max-width: none;
}

/* A coluna "Disponível em" tem 120px no desenho; o distintivo do Google é
   mais largo do que isso, por isso deixa-se transbordar para a goteira em
   vez de o espremer. */
.eco-footer__cols > .wp-block-column:nth-child(2) {
	overflow: visible;
}

/* A barra legal tem 44px no desenho: 16px de espaço, 12px de texto, 16px de
   espaço. Sem cortar a entrelinha o texto trazia mais 5px consigo. */
.eco-footer__legal p {
	line-height: 1;
	margin: 0;
}

/* Abaixo dos 1024px as quatro colunas não cabem lado a lado: passam a duas,
   e no telemóvel a uma só. As sub-colunas de "Explorar" acompanham. */
@media (max-width: 1024px) {
	.eco-footer__cols {
		gap: 48px;
	}
	.eco-footer__cols > .wp-block-column {
		flex-basis: calc(50% - 24px) !important;
	}
}

@media (max-width: 600px) {
	/* Com 40px de cada lado os dois botões da faixa verde já não cabiam lado
	   a lado e caíam um por linha, esticando a faixa. */
	.eco-footer__bar,
	.eco-footer__body,
	.eco-footer__legal {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.eco-footer__bar > .wp-block-group,
	.eco-footer__legal > .wp-block-group {
		justify-content: center;
		text-align: center;
	}
	.eco-footer__cta {
		justify-content: center;
	}
	.eco-footer__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
	/* `is-not-stacked-on-mobile` traz um `flex-wrap:nowrap!important` do core:
	   sem o desfazer as três sub-colunas ficavam espremidas a 91px e as
	   palavras partiam-se ao meio. */
	.wp-block-columns.eco-footer__subcols.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
		gap: 24px;
	}
	.eco-footer__subcols > .wp-block-column {
		flex-basis: calc(50% - 12px) !important;
	}
	/* No desenho os ícones sociais ocupam a largura toda do ecrã e os dois
	   distintivos das lojas ficam lado a lado. */
	.eco-footer__social {
		justify-content: space-between;
	}
	.eco-footer__badges {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
	}
	.eco-footer__legal-links {
		justify-content: center;
	}
}

/* ── Gavetas do cabeçalho ─────────────────────────────────────────────────
   São duas, como em produção, e entram por lados diferentes porque lá entram:

   - "Mais" (`#eco-mais`) é a do desktop, o `off-canvas--left` que o hamburger
     de ≥1000px abre. Leva os atalhos (ECO News, Loja), as secções do jornal e
     os formatos — Opinião, Entrevistas, Reportagens, Especiais.
   - "Menu" (`#eco-menu`) é a de telemóvel, o `off-canvas--right` do
     `mobile-menu-trigger`. Leva os atalhos, Mercados desdobrado, as marcas, a
     conta e a assinatura. Abaixo dos 781px a fila de secções está escondida e
     esta gaveta é o único caminho para elas.

   A arrumação é a da produção — os mesmos grupos, pela mesma ordem. O aspecto
   é o do desenho novo: painel claro em vez da caixa escura do site antigo,
   faixa verde no topo com o título em Barlow, rótulos de grupo em verde sobre
   um filete (o mesmo tratamento dos títulos do rodapé), secções em Barlow a
   700 e o "Assinatura Premium" na pastilha verde. O escurecido por trás é o
   da produção, `#000a00` a 50%.

   Não há desenho para o estado aberto: o Figma tem o ícone do hamburger e
   mais nada. Isto é a linguagem do próprio tema aplicada à arrumação de lá.

   Abre sem JavaScript. Cada hamburger é uma ligação para o `#` da sua gaveta
   e é o `:target` que a abre; o fundo e o "×" são ligações para `#`, que
   limpam o alvo e a fecham. O `assets/js/menu.js` acrescenta o foco preso, o
   Escape, o corpo travado e o URL sem `#` pendurado — nada disto depende dele.
   ───────────────────────────────────────────────────────────────────────── */

.eco-drawer {
	/* Os mesmos três décimos da produção (`.off-canvas { transition: all .3s
	   ease }`), num sítio só: o painel, o escurecido e o atraso da
	   `visibility` têm de andar todos ao mesmo compasso, senão a caixa
	   desaparece antes de o painel acabar de sair. */
	--eco-drawer-tempo: .3s;

	position: fixed;
	inset: 0;
	z-index: 90;
	visibility: hidden;
	padding: 0;

	/* O atraso é a diferença entre fechar e desaparecer.

	   A `visibility` não se interpola — muda de um lado para o outro de uma
	   vez —, por isso, sem atraso, no instante em que a classe sai a caixa
	   inteira some e leva com ela o painel a meio de sair e o escurecido a
	   meio de esbater. Era isso que fazia a gaveta abrir com jeito e fechar
	   com um estalo.

	   Adiada pela mesma duração da animação, a caixa fica visível o tempo
	   exacto que o painel demora a sair de vista e só depois desaparece — que
	   é a razão de ela existir, tirar do caminho do rato e do teclado o que já
	   não se vê. A abrir o atraso é zero: aí quer-se tudo imediato. */
	transition: visibility 0s linear var(--eco-drawer-tempo);
}

/* Aberta por `:target` (sem script) ou pela classe (com script). As duas
   escritas na mesma regra de propósito: o dia em que uma delas deixar de
   existir, a gaveta continua a abrir pela outra. */
.eco-drawer:target,
.eco-drawer.is-aberta {
	visibility: visible;
	transition-delay: 0s;
}

/* ── Com script, nada fica por desenhar ───────────────────────────────────
   `visibility: hidden` não pinta o painel, e um painel que nunca foi pintado
   não tem estado anterior de onde partir: há motores que, ao ver a classe
   entrar, saltam directamente para o fim e a gaveta aparece feita, sem deslizar. Sem
   cabeça a transição corria; num browser a sério, não.

   Com o `menu.js` a correr, a gaveta fica sempre desenhada — fora do ecrã,
   sem receber cliques — e é o `inert` (posto pelo script) que a tira do
   caminho do teclado e da árvore de acessibilidade. Assim há sempre de onde
   partir e a animação corre em todo o lado.

   Sem script esta regra não existe e manda a `visibility` acima, que é o
   comportamento seguro para quem não tem `inert` a proteger o tabulador. */
.eco-js .eco-drawer {
	visibility: visible;
	pointer-events: none;
	transition: none;
}

.eco-js .eco-drawer.is-aberta {
	pointer-events: auto;
}

/* O escurecido por trás. É uma ligação e não um `<div>` com `onclick`: fechar
   ao clicar fora tem de funcionar sem script, e uma ligação é a única coisa
   que o faz. Fica fora da ordem de tabulação porque o "×" já é o alvo de
   teclado para a mesma acção. */
.eco-drawer__fundo {
	position: absolute;
	inset: 0;
	display: block;
	/* A cor e a opacidade da produção: `#000a00` a 50%, um preto com uma
	   ponta de verde, que sobre o verde da marca não lê como cinzento. */
	background: #000a00;
	opacity: 0;
	transition: opacity var(--eco-drawer-tempo) ease;
}

.eco-drawer:target .eco-drawer__fundo,
.eco-drawer.is-aberta .eco-drawer__fundo {
	opacity: .5;
}

.eco-drawer__painel {
	position: absolute;
	inset-block: 0;
	display: flex;
	flex-direction: column;
	width: min(400px, 90vw);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	/* `translate3d` e não `translateX`: é o que a produção usa, e é o que põe
	   o painel na sua própria camada em vez de o mandar repintar a cada
	   fotograma por cima da página toda. */
	transition: transform var(--eco-drawer-tempo) ease;
}

/* De que lado entra cada uma. Cada hamburger abre a sua e só um está no ecrã
   de cada vez — o mesmo ícone, trocado no patamar dos 1000px, tal como em
   produção. */
.eco-drawer--esquerda .eco-drawer__painel {
	left: 0;
	transform: translate3d(-100%, 0, 0);
	box-shadow: 6px 0 24px rgba(0, 0, 0, .18);
}

.eco-drawer--direita .eco-drawer__painel {
	right: 0;
	transform: translate3d(100%, 0, 0);
	box-shadow: -6px 0 24px rgba(0, 0, 0, .18);
}

.eco-drawer:target .eco-drawer__painel,
.eco-drawer.is-aberta .eco-drawer__painel {
	transform: translate3d(0, 0, 0);
}

/* Quem pediu para não haver animação não leva animação — a gaveta aparece e
   desaparece. O estado final é o mesmo, o percurso é que não existe.

   O tempo passa a zero em vez de se desligarem as transições uma a uma: assim
   o atraso da `visibility` acompanha, senão a gaveta fechava à vista e só
   saía do caminho três décimos depois. */
@media (prefers-reduced-motion: reduce) {
	.eco-drawer {
		--eco-drawer-tempo: 0s;
	}
}

/* ── A faixa do topo ──────────────────────────────────────────────────────
   O verde da marca, com o título em Barlow e o "×" do outro lado. É o que
   amarra a gaveta ao resto do desenho: a mesma faixa que abre a página das
   newsletters, a mesma que corre por trás do logótipo no cabeçalho. O site
   antigo tinha aqui uma barra escura com o título em corpo pequeno. */
.eco-drawer__topo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--inverse);
}

.eco-drawer__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1;
}

.eco-drawer__fechar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: calc(var(--wp--preset--spacing--30) * -1);
	color: inherit;
	text-decoration: none;
}

.eco-drawer__fechar:focus-visible,
.eco-drawer__nav a:focus-visible,
.eco-drawer__social a:focus-visible {
	outline: 2px solid var(--eco-accent-text);
	outline-offset: 3px;
}

/* O corpo rola; a faixa do topo não. Numa gaveta com dezasseis destinos e um
   telemóvel de 640px de altura, ter o título a subir com a lista significa
   perder o "×" de vista à terceira secção. */
.eco-drawer__corpo {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

/* ── Os rótulos de grupo ──────────────────────────────────────────────────
   O mesmo tratamento dos títulos do rodapé — verde, Manrope pequeno, sobre um
   filete —, que é como o desenho novo separa blocos de ligações. É ele que
   dá à gaveta a arrumação da produção sem trazer o aspecto dela: lá os grupos
   distinguem-se por espaço e por tamanho de letra, aqui por uma etiqueta com
   nome. */
.eco-drawer__rotulo {
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--eco-accent-line, var(--wp--preset--color--border));
	color: var(--eco-accent-text);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: .02em;
}

/* ── As listas ────────────────────────────────────────────────────────────
   A navegação é um `core/navigation`, e não uma lista escrita à mão, por uma
   razão que não é de arrumação: o filtro do `inc/brands.php` troca o menu de
   qualquer bloco que traga `eco-nav-canal` pelo menu do canal em vigor. É por
   isso que só o grupo das marcas, na gaveta de telemóvel, tem essa classe —
   dentro do ECOseguros é ele que passa a mostrar as secções do ECOseguros. Os
   atalhos e os formatos são do jornal e ficam como estão. */
.eco-drawer__nav a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.eco-drawer__nav a:hover {
	color: var(--eco-accent-text);
}

.eco-drawer__nav .wp-block-navigation-item__content {
	padding-block: 7px;
}

/* ── Uma armadilha do bloco de navegação ──────────────────────────────────
   A classe que se dá ao bloco não fica só no `<nav>`: o núcleo copia-a
   também para o `<ul>` de dentro e para cada `<li>`. Uma regra escrita para
   "o bloco" aplica-se por isso três vezes — o que num tamanho de letra não se
   vê, mas numa borda desenha duas linhas paralelas, e num `font-size` deixa o
   `has-large-font-size` do `<li>` a ganhar ao que se pôs no `<nav>`.

   Daí o `:not(.wp-block-navigation__container)` na borda e os itens nomeados
   um a um na tipografia. Foi assim que o "Mercados" apareceu com duas guias
   verdes e os atalhos com o corpo das secções. */

/* Os atalhos para fora do jornal (ECO News, Loja) não são secções: vão em
   corpo pequeno, para não competirem com a lista que interessa. */
.eco-drawer__nav--atalhos,
.eco-drawer__nav--atalhos .wp-block-navigation-item,
.eco-drawer__nav--atalhos a {
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 600 !important;
}

/* Mercados desdobrado, como no menu de telemóvel da produção: os seis
   destinos do bloco de cotações à vista, sem um nível para abrir. Ficam um
   passo abaixo em tamanho e com uma guia à esquerda, que é o que diz que
   pertencem ao rótulo de cima sem precisar de uma seta. */
.eco-drawer__nav--sub:not(.wp-block-navigation__container) {
	padding-left: var(--wp--preset--spacing--40);
	border-left: 2px solid var(--eco-accent-line, var(--wp--preset--color--border));
}

.eco-drawer__nav--sub,
.eco-drawer__nav--sub .wp-block-navigation-item,
.eco-drawer__nav--sub a {
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 500 !important;
}

/* Submenus abertos, sem seta e sem clique: numa gaveta vertical há altura de
   sobra, e um segundo nível escondido atrás de um toque é um nível que
   ninguém encontra. */
.eco-drawer__nav .wp-block-navigation-submenu__toggle {
	display: none;
}

.eco-drawer__nav .wp-block-navigation__submenu-container {
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: auto;
	min-width: 0;
	padding-left: var(--wp--preset--spacing--40);
	border: 0;
	background: transparent;
	font-weight: 400;
}

/* A conta e a assinatura ficam depois das listas: são acções, e o resto são
   destinos. */
.eco-drawer .eco-conta-menu,
.eco-drawer .eco-conta-entrar__botao,
.eco-drawer__cta {
	margin-top: var(--wp--preset--spacing--50);
}

.eco-drawer .eco-conta-entrar__botao {
	display: inline-flex;
	border-color: var(--wp--preset--color--inverse);
	color: var(--wp--preset--color--inverse);
}

.eco-drawer__social.wp-block-social-links {
	margin: 0;
}

/* Com a gaveta aberta o corpo não se desloca por trás dela. Sem script isto
   não acontece (não há como reagir ao `:target` no `<html>`), e é uma das
   coisas que o `menu.js` acrescenta. */
.eco-scroll-travado {
	overflow: hidden;
}