/*
Theme Name:   Legumina
Theme URI:    https://legumina.org
Description:  Child theme de Twenty Twenty-Five para o Congresso LEGUMINA (ProVeg Portugal). Design de página única com histórico de edições.
Author:       ProVeg Portugal
Author URI:   https://proveg.org/pt/
Template:     twentytwentyfive
Version:      1.3.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  legumina
Tags:         one-column, block-patterns, full-site-editing, translation-ready
*/

/* ==========================================================================
   Tokens locais (complementam theme.json)
   ========================================================================== */
:root {
	--lg-border: 3px;
	--lg-radius: 0;
}

/* ==========================================================================
   Cabeçalho / navegação
   Links em caixa com contorno branco, como no design.
   ========================================================================== */
.lg-header {
	position: relative;
	z-index: 10;
}

/* A abóbora do desenho está cortada pelo topo da página, e o hero começa
   abaixo da navegação — por isso ela é injetada no cabeçalho e desce por cima
   do hero. O `z-index: 10` acima faz o cabeçalho inteiro pintar acima do
   `<main>`; esta regra garante que a navegação fica acima da abóbora. */
.lg-header > :not( .lg-decor ) {
	position: relative;
	z-index: 2;
}

/* Logótipo do cabeçalho (inserido no Editor do Site).
   O bloco de imagem escreve a largura como `style` inline, e essa largura é a
   mesma em todos os ecrãs — no telemóvel fica minúscula. Aqui fica a
   salvaguarda; a regra que a corrige no telemóvel está no bloco responsivo. */
.lg-header .wp-block-image {
	margin-block-end: 0;
}

.lg-header .wp-block-image img {
	display: block;
	margin-inline: auto;
	max-width: 100%;
	height: auto;
}

.lg-nav .wp-block-navigation__container {
	gap: 0.5rem;
}

.lg-nav .wp-block-navigation-item__content {
	border: 2px solid rgba(255, 255, 255, 0.9);
	padding: 0.4em 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.lg-nav .wp-block-navigation-item__content:hover,
.lg-nav .wp-block-navigation-item__content:focus-visible {
	background-color: #fff;
	color: var(--wp--preset--color--laranja);
}

/* ==========================================================================
   Secções
   ========================================================================== */
/* IMPORTANTE: sem `overflow` e sem `z-index` aqui.
   As ilustrações decorativas atravessam as fronteiras entre secções (é assim
   no design), o que exige que a secção não corte nem crie contexto de
   empilhamento. O scroll horizontal é travado em `.wp-site-blocks` mais
   abaixo. Ver assets/css/decor.css para a explicação completa da camada. */
.lg-section {
	position: relative;
}

/* Conteúdo acima da camada de decoração (`.lg-decor` está em z-index: 1). */
.lg-section > :not( .lg-decor ) {
	position: relative;
	z-index: 2;
}

/* Os legumes das margens saem para fora da janela (no design há geometria em
   x negativo). `clip` corta na horizontal sem criar contentor de scroll e sem
   afetar o eixo vertical — ao contrário de `hidden`. */
.wp-site-blocks {
	overflow-x: clip;
}

/* ==========================================================================
   Faixas de cor encostadas umas às outras

   O `blockGap` do theme.json (1.25rem) é o que dá respiro entre parágrafos e
   caixas — não se toca. Mas o WordPress também o aplica como
   `margin-block-start` entre os blocos de topo, e entre faixas de cor
   full-bleed isso abre uma goteira branca de 20px: entre o cabeçalho e o hero,
   entre secções, e antes do rodapé.

   Zerado só onde as faixas se encostam. O espaço interior de cada secção vem
   do seu próprio padding, não desta margem.
   ========================================================================== */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks .lg-section,
.wp-site-blocks .lg-header,
.wp-site-blocks .lg-footer {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ==========================================================================
   Altura das faixas

   No desenho cada faixa de cor tem 720px numa página de 1440 de largura — ou
   seja, meio ecrã. Deixadas à altura do conteúdo, as três primeiras ficam
   muito mais baixas do que isso e a decoração amontoa-se: os legumes que no
   desenho estão a centenas de píxeis de distância acabam encostados.

   Cada faixa passa a ocupar a janela, com um teto para não ficar absurda em
   monitores muito altos. O conteúdo fica centrado na vertical.
   `svh` em vez de `vh`: no telemóvel evita o salto quando a barra do browser
   aparece e desaparece.
   ========================================================================== */
:root {
	--lg-band: min(100svh, 900px);
}

.lg-hero,
.lg-stats,
.lg-sobre {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--lg-band);
}

/* Numa coluna flex, as margens `auto` que o WordPress põe nos filhos para os
   centrar anulam o `stretch` — cada caixa passa a ter a largura do seu próprio
   conteúdo, e as duas caixas das estatísticas ficavam com larguras diferentes.
   O `width: 100%` devolve-lhes a largura da coluna (o `max-width: 975px` do
   core continua a limitar, e as margens `auto` continuam a centrar). */
.lg-hero > :not( .lg-decor ),
.lg-stats > :not( .lg-decor ),
.lg-sobre > :not( .lg-decor ) {
	width: 100%;
}

.lg-hero .lg-hero__title {
	text-transform: uppercase;
	line-height: 1.15;
	max-width: 22ch;
}

/* Caixas de estatísticas (contorno verde escuro) */
.lg-stat {
	border: var(--lg-border) solid var(--wp--preset--color--verde-escuro);
	text-align: center;
}

.lg-stat strong {
	display: block;
	color: var(--wp--preset--color--verde-escuro);
	font-weight: 700;
}

/* Cartões / caixas amarelas das edições */
.lg-panel {
	background-color: var(--wp--preset--color--amarelo);
}

.lg-panel__head {
	background-color: #ffc027;
	color: #fff;
	font-weight: 700;
	text-align: center;
	padding: 0.75rem 1rem;
}

.lg-panel ul {
	margin: 0;
	padding-left: 1.25rem;
}

.lg-panel li + li {
	margin-top: 0.35rem;
}

/* Tabelas dentro das edições
   Amarelo corrido, sem linha de cabeçalho mais escura, e as separações na cor
   da secção — foi a versão que ficou melhor sobre o laranja. */
.lg-table table {
	border-collapse: collapse;
	width: 100%;
	background-color: var(--wp--preset--color--amarelo);
}

.lg-table th {
	text-align: center;
	font-weight: 700;
}

.lg-table th,
.lg-table td {
	border: 2px solid var(--wp--preset--color--laranja);
	padding: 0.75rem 1rem;
	color: #fff;
	vertical-align: top;
}

/* Sem larguras fixas: com `table-layout: auto` o browser reparte as colunas
   pelo conteúdo. Na 3.ª edição a primeira coluna são rótulos curtos e fica
   estreita sozinha; na 2.ª as duas colunas têm texto e ficam equilibradas. */

/* Meta-dados das edições (Data / Local / Participantes) */
.lg-meta {
	line-height: 1.5;
}

/* ==========================================================================
   Links âncora (menu → #edicao-2024 e afins)

   Sem isto o navegador encosta o título da edição ao topo exacto da janela e
   o texto fica colado à borda. `scroll-margin-block-start` reserva folga —
   e é a forma correcta: não mexe no layout, só no ponto onde o scroll para.
   ========================================================================== */
:where( #edicoes, [id^="edicao-"] ) {
	scroll-margin-block-start: clamp(1.5rem, 5vw, 4.5rem);
}

/* Deslizar em vez de saltar, mas só para quem não pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Rodapé */
.lg-footer a {
	color: #fff;
}

/* Logótipos do rodapé.
   O bloco de imagem do core não escreve `width`/`height` no `<img>` para
   ficheiros que não estão na biblioteca de media — e acrescentá-los à mão
   invalida o bloco no editor. A proporção fica aqui, para reservar o espaço
   e evitar o salto de layout ao carregar. */
.lg-logo--proveg img {
	aspect-ratio: 1175 / 299;
}

.lg-logo--legumina img {
	aspect-ratio: 272 / 87;
}

.lg-footer .lg-footer__legal {
	font-size: 0.8125rem;
	text-align: center;
	opacity: 0.85;
}

/* ==========================================================================
   PÁGINA DE CONTACTO — faixa rosa única

   O pedido: a página toda da mesma cor do menu, com legumes a compor com a
   abóbora que já vem do cabeçalho. Como o cabeçalho também é rosa, a página
   lê-se como uma só faixa contínua desde o topo.

   Sobre o contraste: o corpo de texto e as etiquetas ficam em `escuro`
   (#333333) sobre o rosa — 7:1, folgadamente acima do 4,5:1 da WCAG AA. Só o
   título grande fica branco, para manter a voz do resto do site; é a mesma
   escolha já registada para o hero. Num formulário a legibilidade tem
   consequência funcional, por isso os campos mantêm-se escuros sobre branco.
   ========================================================================== */
.lg-contacto {
	color: var( --wp--preset--color--escuro );

	/* O espaçamento vertical vem daqui e não do bloco: assim escala com a
	   largura da janela. Estava em 6rem fixos e no telemóvel a página parecia
	   demorar a começar — havia quase dois terços de ecrã em rosa antes do
	   título. */
	padding-block-start: clamp( 1.75rem, 4vw, 4rem );
	/* O fundo mantém-se generoso: é onde assenta o tomate, e ele precisa de
	   faixa livre para não subir para cima da nota do RGPD. */
	padding-block-end: clamp( 6rem, 7vw, 7rem );
}

/* O título encosta ao topo da faixa; a folga é a do padding acima. */
.lg-contacto .wp-block-post-title {
	margin-block-start: 0;
}

/* Título da página em branco, como os títulos das faixas da home. */
.lg-contacto .wp-block-post-title {
	color: #fff;
}

/* Ligações: sublinhadas e escuras, para se distinguirem do texto sem depender
   só da cor. */
.lg-contacto a:where( :not( .wp-element-button ) ) {
	color: var( --wp--preset--color--escuro );
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.lg-contacto a:where( :not( .wp-element-button ) ):hover {
	text-decoration-thickness: 2px;
}

/* O verde-escuro dos subtítulos não tem contraste suficiente sobre o rosa
   (2,5:1). Passa a escuro. */
.lg-contacto h2,
.lg-contacto h3 {
	color: var( --wp--preset--color--escuro );
}

/* O cartão do formulário destaca-se do rosa por ser branco. Dentro dele volta
   tudo ao normal: texto escuro sobre branco. */
.lg-contacto .lg-form {
	box-shadow: 0 2px 0 0 rgba( 51, 51, 51, 0.08 );
}

.lg-contacto .lg-form,
.lg-contacto .lg-form h2,
.lg-contacto .lg-form h3,
.lg-contacto .lg-form label,
.lg-contacto .lg-form p {
	color: var( --wp--preset--color--escuro );
}

.lg-contacto .lg-form a:where( :not( .wp-element-button ) ) {
	color: var( --wp--preset--color--verde-escuro );
}

/* A nota do RGPD é secundária, mas não a ponto de perder contraste. */
.lg-contacto .has-small-font-size {
	color: #4a4a4a;
}

/* ==========================================================================
   Acessibilidade
   ========================================================================== */
:where(a:focus-visible),
:where(button:focus-visible) {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.lg-skip-link:focus {
	background: #fff;
	color: #333;
	padding: 0.75rem 1rem;
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 999;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 781px) {
	/* No telemóvel a página já é longa e a decoração está encostada às bordas:
	   faixas de ecrã inteiro só acrescentariam scroll. O hero mantém presença. */
	:root {
		--lg-band: auto;
	}

	.lg-hero {
		min-height: 70svh;
	}

	/* No telemóvel a frase do hero ocupa sete ou oito linhas e chega ao fundo da
	   secção — que é justamente onde o milho e os brócolos estão ancorados. Esta
	   margem abre a faixa livre em baixo para eles.
	   É `margin` e não `padding` de propósito: o padding da secção vem no
	   `style` inline do bloco e só se venceria com `!important`. */
	.lg-hero .lg-hero__title {
		margin-block-end: 13rem;
	}

	/* O logótipo do cabeçalho tem a largura fixada no `style` inline do bloco,
	   igual para todos os ecrãs. `!important` é o único caminho para a corrigir
	   no telemóvel sem mexer no bloco guardado na base de dados. */
	.lg-header .wp-block-image img {
		width: min(230px, 62vw) !important;
	}

	/* O último parágrafo das edições ("Para mais informações…") fica em cima do
	   tomate e do pimento, que estão ancorados ao fundo da secção. Esta margem
	   abre a faixa livre em baixo. */
	.lg-edicoes > p:last-of-type {
		margin-block-end: 11rem;
	}

	/* TABELAS NO TELEMÓVEL
	   Havia aqui um `display: block` em table/thead/tbody/tr/th/td. Desmontava
	   a tabela e causava três defeitos de uma só vez:
	     1. sem tabela não há `border-collapse`, e o fundo do <table> deixa de
	        ficar coberto pelas células — era daí que vinham as linhas brancas
	        que não aparecem no computador;
	     2. `width: 100%` numa célula com padding e borda empurrava o texto para
	        fora da caixa, e a última palavra de cada linha ficava cortada;
	     3. as células empilhadas perdem a ligação à coluna, portanto deixava de
	        se saber a que cabeçalho pertencia cada bloco de texto.
	   A tabela mantém-se tabela e desliza na horizontal, que preserva os
	   cabeçalhos e não deixa nada branco à vista. */
	.lg-table {
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	/* Só as tabelas de duas colunas precisam de largura mínima. A da 1.ª edição
	   tem uma coluna só e cabe no ecrã — sem o `:has()` ficava a deslizar e a
	   cortar texto sem motivo. */
	.lg-table table:has( tr > *:nth-child( 2 ) ) {
		min-width: 28rem;
	}
}

/* ==========================================================================
   Formulário de contacto
   Estilos agnósticos do plugin: cobrem Fluent Forms, Contact Form 7 e o
   bloco de formulário do core, para o visual não depender do plugin escolhido.
   ========================================================================== */
.lg-form {
	border: var(--lg-border) solid var(--wp--preset--color--verde-escuro);
	background-color: #fff;
}

.lg-form label,
.lg-form .ff-el-input--label label,
.lg-form .wpcf7-form-control-wrap + label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--escuro);
}

.lg-form input[type="text"],
.lg-form input[type="email"],
.lg-form input[type="tel"],
.lg-form input[type="url"],
.lg-form select,
.lg-form textarea {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--escuro);
	background-color: #fff;
	border: 2px solid #b9c4bd;
	border-radius: 0;
	padding: 0.6rem 0.75rem;
	box-shadow: none;
	transition: border-color 0.18s ease;
}

.lg-form input:focus,
.lg-form select:focus,
.lg-form textarea:focus {
	border-color: var(--wp--preset--color--verde-escuro);
	outline: 2px solid var(--wp--preset--color--verde-escuro);
	outline-offset: 1px;
}

.lg-form textarea {
	min-height: 9rem;
	resize: vertical;
}

/* Campo obrigatório: asterisco visível, não só cor */
.lg-form .ff-el-is-required.asterisk-right label::after,
.lg-form .required::after {
	content: " *";
	color: #b3261e;
}

/* Botão de envio — verde escuro garante contraste suficiente com o branco */
.lg-form button[type="submit"],
.lg-form input[type="submit"],
.lg-form .ff-btn-submit,
.lg-form .wpcf7-submit {
	background-color: var(--wp--preset--color--verde-escuro);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.9375rem;
	padding: 0.8rem 1.75rem;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.lg-form button[type="submit"]:hover,
.lg-form input[type="submit"]:hover,
.lg-form .ff-btn-submit:hover,
.lg-form .wpcf7-submit:hover {
	background-color: #256641;
}

/* Mensagens de erro e sucesso */
.lg-form .ff-el-form-check-label,
.lg-form .error,
.lg-form .wpcf7-not-valid-tip {
	color: #b3261e;
	font-size: 0.875rem;
}

.lg-form .ff-message-success,
.lg-form .wpcf7-mail-sent-ok {
	border: 2px solid var(--wp--preset--color--verde-escuro);
	background-color: #eef7f1;
	color: var(--wp--preset--color--escuro);
	padding: 0.9rem 1rem;
}

/* Honeypot escondido sem o retirar da árvore de acessibilidade dos leitores */
.lg-form .ff-hidden,
.lg-form .wpcf7-honeypot-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}