/*
Theme Name: Telma Gonçalves
Theme URI: https://telmagoncalves.pt
Author: Jorge Serras, Carina Fitas
Description: Block theme for the Telma Gonçalves personal brand. Editorial, minimal, pt-PT. Forked from Twenty Twenty-Five 1.5 and stripped to a locked design system with protected patterns.
Requires at least: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: telma
Tags: one-column, block-patterns, full-site-editing, editor-style, accessibility-ready, translation-ready
*/

/*
 * ponytail: theme.json carries the design system. This file holds only what it cannot express.
 * No build step, no Sass, no minification — see docs/code-practices.md.
 */

/* Click-to-load placeholder for consent-gated third-party embeds (RGPD, §2.6).
   See docs/code-practices.md#third-party-embeds */
.telma-embed {
	display: grid;
	place-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: 18rem;
	padding: var(--wp--preset--spacing--50);
	text-align: center;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}

/* Um passo abaixo de `small` (0.875rem), que é o menor tamanho do sistema.
   ponytail: valor fixo em vez de um passo `x-small` no theme.json — um passo novo passaria a
   ser oferecido à cliente no editor em todo o site, o que é mudar o sistema de tipos para
   afinar duas linhas de letra pequena num cartão. */
.telma-embed__note {
	max-width: 32ch;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

/* Título do episódio: o marcador lê-se como conteúdo, não como aviso legal */
.telma-embed__title {
	max-width: 32ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
}

/* Com capa, o marcador é um cartão de leitor e não um aviso: capa, título, botão.
   flex-wrap em vez de media query — a coluna de texto passa para baixo da capa sozinha. */
.telma-embed--cover {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: 0;
	text-align: left;
}

.telma-embed--cover > img,
.telma-embed--cover > figure {
	flex: 0 0 auto;
	width: 8rem;
	max-width: 100%;
	height: auto;
	margin: 0;
}

.telma-embed__body {
	display: grid;
	flex: 1 1 16rem;
	gap: var(--wp--preset--spacing--20);
	justify-items: start;
}

.telma-embed__play {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.telma-embed__icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Cartão do Spotify: fundo, verde e símbolo são a marca deles.
   ponytail: hex fixo de propósito. #1ED760 e #121212 são cor de marca de um terceiro (fonte:
   as guidelines do próprio Spotify), não fazem parte do sistema de cores dela — logo não
   entram no theme.json, que é o que a mantém intacta. Este cartão é a única exceção do site. */
.telma-embed--spotify {
	color: #fff;
	background-color: #121212;
	border-color: #121212;
	border-radius: 12px;
}

.telma-embed__logo {
	width: 1.5rem;
	height: 1.5rem;
	fill: #1ed760;
}

.telma-embed--spotify .telma-embed__note {
	color: #b3b3b3;
}

.telma-embed--spotify .telma-embed__note a {
	color: #fff;
}

.telma-embed--spotify .telma-embed__play {
	padding: 0.7em 1.4em;
	font-weight: 600;
	color: #000;
	background-color: #1ed760;
	border: 0;
	border-radius: 999px;
}

.telma-embed--spotify .telma-embed__play:hover,
.telma-embed--spotify .telma-embed__play:focus {
	background-color: #1fdf64;
}

.telma-embed--cover > img {
	border-radius: 8px;
}

/* The iframe, once the visitor has accepted it */
.telma-embed__frame iframe {
	width: 100%;
	border: 0;
}

/* Numbered steps (Compreender → Organizar → Decidir → Evoluir) */
.telma-step__number {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent);
}

/* Biblioteca: core/categories only knows how to render a <ul>, and a stacked list of
   categories above the archive reads as a sidebar that lost its column. This turns it into a
   row of filters. theme.json cannot express it — there is no list-layout setting. */
.telma-filtros a {
	text-decoration: none;
}

.telma-filtros a:hover,
.telma-filtros a:focus-visible {
	text-decoration: underline;
}

.telma-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	padding-left: 0;
	list-style: none;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* core/details: the native accordion used for every FAQ */
.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--40);
}

.wp-block-details summary {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: baseline;
	justify-content: space-between;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	list-style: none;
}

/* O triângulo por omissão do <details> é o único sítio do site que parece de outro desenho.
   Um + que passa a − diz o mesmo com um traço fino. ::-webkit-details-marker para o Safari. */
.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	flex: none;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--accent);
}

.wp-block-details[open] summary::after {
	content: "−";
}

.wp-block-details[open] summary {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Skip link target + visible focus everywhere (accessibility baseline) */
:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Marca — o monograma
   Um ficheiro SVG (assets/monograma.svg), usado três vezes: assinatura no
   cabeçalho, marca discreta antes do convite ao contacto, e marca de água no
   hero. Entra como background-image e não como <img>: assim não há markup para
   a cliente apagar sem querer, e a opacidade faz o tom sem precisar de uma
   segunda cor no theme.json.
   ponytail: mask-image seria mais correto (a cor vinha do token em vez de vir
             gravada no SVG), mas o mask com SVG externo não é fiável em todos
             os motores. background-image + opacity chega e não falha.
   --------------------------------------------------------------------------- */

/* Assinatura: monograma + nome. O monograma é um ::before do próprio bloco do
   título do site, para não haver um bloco de HTML no cabeçalho que a cliente
   possa apagar sem perceber o que era. */
.telma-wordmark {
	display: flex;
	gap: 0.7em;
	align-items: center;
	line-height: 1;
}

.telma-wordmark::before {
	content: "";
	flex: none;
	width: 2.1em;
	aspect-ratio: 1;
	background: url("assets/monograma.svg") no-repeat center / contain;
}

/* Marca de água do hero. Só a partir de ecrãs largos: em coluna estreita
   passaria por baixo do texto, e o detalhe discreto tornava-se ruído. */
.telma-hero {
	position: relative;
	isolation: isolate;
}

@media (min-width: 64rem) {
	.telma-hero {
		overflow: hidden;
	}

	.telma-hero::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 50%;
		/* Começa onde acaba a coluna de leitura de 42rem, e sangra pela direita. */
		left: calc(50% + 22rem);
		width: 22rem;
		aspect-ratio: 1;
		background: url("assets/monograma.svg") no-repeat center / contain;
		opacity: 0.1;
		translate: 0 -50%;
	}
}

/* A marca sozinha, acima de um título — a aplicação "símbolo separado do nome"
   das referências de branding. */
.telma-mark::before {
	content: "";
	display: block;
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	height: 2.75rem;
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--40);
	background: url("assets/monograma.svg") no-repeat left center / contain;
	opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   Linhas finas e detalhe
   --------------------------------------------------------------------------- */

/* Fio curto de abertura, alinhado com o início da coluna de leitura.
   core/separator só sabe fazer 100px centrado ou 100% da largura, e o layout "constrained"
   do WordPress escreve `margin-left:auto !important` em todos os filhos não alinhados — ou
   seja, mexer nas margens obrigava a um !important e, num grupo alignfull, encostava o fio à
   margem do ecrã em vez da margem do texto.
   Solução sem !important: o bloco ocupa a coluna toda (fica centrado como o resto do
   conteúdo) e o gradiente pinta apenas os primeiros 3.5rem. Os :not() estão lá só para
   igualar a especificidade da regra do core que fixa a largura em 100px. */
.wp-block-separator.telma-rule:not(.is-style-wide):not(.is-style-dots) {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	height: 1px;
	background: linear-gradient(to right, var(--wp--preset--color--accent) 0 3.5rem, transparent 3.5rem);
	border: 0;
	opacity: 1;
}

/* Cartão de percurso (Famílias / Pequenos Negócios): a moldura reage ao rato
   inteira, e não só a ligação lá dentro. Uma transição, nada mais. */
.telma-card {
	transition: border-color 0.25s ease;
}

.telma-card:hover,
.telma-card:focus-within {
	border-color: var(--wp--preset--color--accent);
}

/* Sublinhados: o valor por omissão do travessão colado à letra é o que faz um
   texto parecer não desenhado. theme.json não tem estas duas propriedades. */
a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Campo de pesquisa na mesma linguagem de fio de 1px do resto do site.
   core/search não expõe borda nem padding do input ao theme.json. */
.wp-block-search__input {
	padding: 0.8rem 1rem;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--accent);
}

/* Lista de áreas de intervenção: fios em vez de marcas de lista. core/list só sabe fazer
   bullets ou números, e sete bullets a 1.5rem lêem-se como um índice, não como um conjunto
   de instrumentos. Sem plugin e sem bloco novo — a cliente continua a acrescentar linhas. */
.telma-lista {
	padding-left: 0;
	list-style: none;
}

.telma-lista > li {
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

.telma-lista > li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}