/*
Theme Name: Rádio Tugalândia
Theme URI: https://app.mrportuguese.com
Author: mrPortuguese
Description: Tema da plataforma de aprendizagem Rádio Tugalândia (Português Europeu, A1–A2). Funciona em conjunto com o plugin «Tugalândia Episódios».
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tugalandia
*/

/* ==========================================================================
   FONTES (alojadas no próprio tema, licença SIL Open Font)
   ========================================================================== */
@font-face {
	font-family: "Manrope";
	src: url("assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   CORES, LETRAS E MEDIDAS — para mudar o aspeto, altere só este bloco
   ========================================================================== */
:root {
	--fundo: #fafaf8;
	--tinta: #151918;
	--suave: #5b625f;
	--linha: #e2e5e0;
	--menta: #7fcdbe;
	--menta-forte: #3d7d6e;
	--menta-clara: #eef3f0;
	--sombra-escura: #353f3a;
	--raio: 10px;
	--largura: 1180px;
	--letra: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
	margin: 0;
	background: var(--fundo);
	color: var(--tinta);
	font: 400 1.0625rem/1.65 var(--letra);
	-webkit-font-smoothing: antialiased;
}
img, svg, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--menta-forte); outline-offset: 3px; }
.escuro :focus-visible, .rodape :focus-visible { outline-color: var(--menta); }

.cx { width: min(100% - 3rem, var(--largura)); margin-inline: auto; }
.cx--estreito { --largura: 880px; }
.icone { flex: none; vertical-align: -0.2em; }
.mono, .etiqueta { font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--tinta); color: #fff; padding: .7rem 1rem; z-index: 99; }
.saltar:focus { left: 0; }
.saltar-texto, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   ETIQUETAS E BOTÕES
   ========================================================================== */
.etiqueta { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--tinta); }
.etiqueta--suave { color: var(--suave); }
.etiqueta--ponto::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--menta); }
.etiqueta--caixa { border: 1px solid var(--linha); border-radius: 6px; padding: .3rem .6rem; background: #fff; }

.botao {
	display: inline-flex; align-items: center; gap: .7rem;
	background: var(--menta); color: var(--tinta);
	padding: 1.05rem 1.7rem; border-radius: 6px;
	font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; text-decoration: none;
}
.botao:hover { background: #6cc2b1; }
.botao--pequeno { padding: .6rem 1rem; font-size: .95rem; }
.botao-texto { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; text-decoration: none; }
.botao-texto:hover, .ligacao:hover { text-decoration: underline; text-underline-offset: 4px; }
.ligacao { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; }

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */
.cab { border-bottom: 1px solid var(--linha); position: relative; z-index: 5; background: var(--fundo); }
.cab__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.4rem; }
.logo { display: inline-flex; align-items: center; gap: .65rem; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.05em; text-decoration: none; line-height: 1; }
.logo__ponto { color: var(--menta-forte); }
.logo--imagem img { display: block; max-height: 56px; width: auto; }
.cab__nav { display: flex; align-items: center; flex: 1; justify-content: space-between; gap: 2rem; }
.nav { display: flex; gap: 2.4rem; list-style: none; margin: 0 auto; padding: 0; }
.nav a { display: inline-block; padding-block: .35rem; font-weight: 600; font-size: 1.05rem; text-decoration: none; border-bottom: 3px solid transparent; }
.nav a:hover { border-bottom-color: var(--linha); }
.nav a[aria-current="page"], .nav .current-menu-item > a { border-bottom-color: var(--menta); }
.cab__nivel { border: 1px solid var(--linha); background: #fff; padding: .95rem 1.4rem; border-radius: 4px; white-space: nowrap; }
.cab__botao { display: none; background: none; border: 1px solid var(--linha); border-radius: 6px; width: 2.8rem; height: 2.8rem; cursor: pointer; position: relative; }
.cab__barras, .cab__barras::before, .cab__barras::after { content: ""; position: absolute; left: .8rem; right: .8rem; height: 2px; background: var(--tinta); }
.cab__barras { top: 50%; }
.cab__barras::before { left: 0; right: 0; top: -6px; }
.cab__barras::after { left: 0; right: 0; top: 6px; }

@media (max-width: 920px) {
	.cab__botao { display: block; }
	.cab__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--fundo); border-bottom: 1px solid var(--linha); flex-direction: column; align-items: flex-start; padding: 1.2rem 1.5rem 1.6rem; }
	.cab--aberto .cab__nav { display: flex; }
	.nav { flex-direction: column; gap: .6rem; margin: 0; }
}

/* ==========================================================================
   PÁGINA INICIAL — TOPO
   ========================================================================== */
.heroi { text-align: center; padding: 5.5rem 0 4rem; }
.heroi .etiqueta { justify-content: center; }
.heroi__titulo { font-size: clamp(2.9rem, 9vw, 6.6rem); letter-spacing: -0.06em; line-height: .98; margin: 1.6rem 0 1.8rem; }
.sublinhado { position: relative; display: inline-block; }
.sublinhado::after { content: ""; position: absolute; left: 0; right: .13em; bottom: -.07em; height: .09em; background: var(--menta); border-radius: 99px; transform: rotate(-.5deg); }
.heroi__texto { font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--suave); letter-spacing: -0.03em; line-height: 1.5; margin-bottom: 2.2rem; }
.heroi__botoes { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: center; justify-content: center; margin-bottom: 4.5rem; }

.moldura { margin: 0; border: 1px solid var(--linha); border-radius: 14px; background: #fff; overflow: hidden; text-align: left; box-shadow: 0 12px 0 -6px #eceee9; }
.moldura__barra { display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.6rem; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.moldura__barra span { display: inline-flex; align-items: center; gap: .5rem; }
.moldura__imagem { position: relative; background: #e9ebe7; }
.moldura__imagem img { display: block; width: 100%; aspect-ratio: 2.1 / 1; object-fit: cover; object-position: center 70%; }
.moldura__legenda { position: absolute; right: 1.6rem; bottom: 1.6rem; display: inline-flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--tinta); box-shadow: 4px 4px 0 var(--tinta); padding: .65rem 1.1rem; font-weight: 600; font-size: .95rem; letter-spacing: -0.02em; }
.ponto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--menta); }

/* ==========================================================================
   SECÇÕES
   ========================================================================== */
.sec { padding: 6rem 0; }
.sec--curta { padding-top: 1rem; }
.sec__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.sec__cab .etiqueta { margin-bottom: 1.1rem; }
.sec__titulo { font-size: clamp(2.2rem, 5.5vw, 3.9rem); letter-spacing: -0.055em; }
.sec__nota { color: var(--suave); margin: 0; text-align: right; }
.sec__intro { color: var(--suave); max-width: 60ch; margin: -1.2rem 0 2.2rem; }

.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; }
.passo { border-top: 1px solid var(--linha); padding-top: 2rem; }
.passo__topo { display: flex; justify-content: space-between; align-items: flex-start; color: var(--menta-forte); margin-bottom: 2.2rem; }
.passo__topo .mono { color: var(--suave); }
.passo h3 { font-size: 1.7rem; margin-bottom: .7rem; }
.passo p { color: var(--suave); max-width: 32ch; margin: 0; }

/* Secção escura do podcast */
.escuro { background: var(--tinta); color: #f1f4f0; padding: 7rem 0; }
.escuro__grelha { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5.5rem; align-items: center; }
.escuro__texto .etiqueta { color: var(--menta); margin-bottom: 1.3rem; }
.escuro__texto .sec__titulo { margin-bottom: 1.6rem; }
.escuro__texto p { color: #c9d0cb; }
.escuro__texto .botao { margin-top: .6rem; }
.escuro__nota { font-size: .9rem; color: #9aa39e !important; margin-top: 1rem; }

.cartaz {
	background: var(--menta); color: var(--tinta); border-radius: 14px; aspect-ratio: 1.45 / 1; padding: 2rem;
	transform: rotate(-2deg); box-shadow: 14px 12px 0 var(--sombra-escura);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
}
.cartaz__nome { display: inline-flex; align-items: center; gap: .9rem; font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.05em; line-height: .95; text-transform: uppercase; }
.cartaz__ondas { display: flex; align-items: center; gap: .9rem; height: 7rem; }
.cartaz__ondas i { display: block; width: .45rem; border-radius: 99px; background: var(--tinta); }
.cartaz__ondas i:nth-child(1) { height: 28%; }
.cartaz__ondas i:nth-child(2) { height: 70%; }
.cartaz__ondas i:nth-child(3) { height: 100%; }
.cartaz__ondas i:nth-child(4) { height: 42%; }
.cartaz__ondas i:nth-child(5) { height: 85%; }
.cartaz__ondas i:nth-child(6) { height: 30%; }
.cartaz__lema { font-size: .68rem; text-align: center; }

.antevisao { margin-top: 4.5rem; padding-top: 2.5rem; border-top: 1px solid #2c3531; max-width: 720px; }
.antevisao .etiqueta { color: var(--menta); margin-bottom: 1.1rem; }

/* ==========================================================================
   CARTÕES DE EPISÓDIOS
   ========================================================================== */
.grelha { display: grid; gap: 1.25rem; }
.grelha--4 { grid-template-columns: repeat(4, 1fr); }
.grelha--3 { grid-template-columns: repeat(3, 1fr); }

.cartao { display: flex; flex-direction: column; gap: .55rem; padding: 1.5rem; min-height: 230px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; text-decoration: none; color: inherit; }
a.cartao:hover { border-color: var(--tinta); }
.cartao__capa { display: block; margin: -1.5rem -1.5rem .6rem; }
.cartao__capa img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raio) var(--raio) 0 0; }
.cartao__topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; padding-bottom: 1rem; }
.cartao__num { font: 600 1.3rem/1 var(--mono); }
.cartao__titulo { font-size: 1.55rem; letter-spacing: -0.045em; }
.cartao__texto { color: var(--suave); font-size: .98rem; line-height: 1.5; }
.cartao__rodape { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; }
.cartao__abrir { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .95rem; }
.cartao--ep { background: var(--menta); border-color: var(--menta); }
.cartao--ep .etiqueta--caixa { background: rgba(255, 255, 255, .55); border-color: transparent; }
.cartao--ep .etiqueta--suave { color: #1f3b34; }
.cartao--breve { background: transparent; border-style: dashed; color: var(--suave); }
.cartao--breve .cartao__titulo { font-size: 1.3rem; }

.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 3rem; }
.page-numbers { border: 1px solid var(--linha); background: #fff; border-radius: 6px; padding: .5rem .9rem; text-decoration: none; font-weight: 600; }
.page-numbers.current { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* ==========================================================================
   CABEÇALHO DE PÁGINAS INTERNAS
   ========================================================================== */
.pagina-cab { padding: 4.5rem 0 3rem; }
.pagina-cab--simples { padding-top: 3.5rem; }
.pagina-cab .etiqueta { margin-bottom: 1.2rem; }
.pagina-cab__titulo { font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -0.06em; }
.pagina-cab__texto { color: var(--suave); font-size: 1.2rem; max-width: 52ch; margin: 1.2rem 0 0; }

/* ==========================================================================
   PÁGINA DE UM EPISÓDIO
   ========================================================================== */
.episodio { padding-bottom: 6rem; }
.voltar { padding-top: 2rem; margin: 0; }
.voltar a { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; text-decoration: none; }
.voltar a:hover { text-decoration: underline; text-underline-offset: 4px; }
.episodio__cab { padding: 3.5rem 0 1rem; }
.episodio__titulo { font-size: clamp(2.8rem, 8vw, 5.2rem); letter-spacing: -0.065em; margin: 1.2rem 0 1.3rem; }
.episodio__resumo { color: var(--suave); font-size: 1.25rem; letter-spacing: -0.02em; max-width: 56ch; }
.episodio__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.6rem 0 0; }
.episodio__capa { margin: 2rem 0 0; }
.episodio__capa img { display: block; width: 100%; border-radius: 14px; }

.bloco { border: 1px solid var(--linha); border-radius: 14px; padding: 2.2rem; margin-top: 1.75rem; }
.bloco--suave { background: var(--menta-clara); border-color: transparent; }
.bloco--reservado { background: #fff; }
.bloco__titulo { display: flex; align-items: center; gap: .9rem; font-size: clamp(1.6rem, 4vw, 2.1rem); letter-spacing: -0.05em; margin: 0 0 1rem; }
.bloco__subtitulo { font-size: 1.3rem; margin-bottom: .8rem; }
.bloco__texto { color: var(--suave); margin-bottom: 1.2rem; }
.lista-objetivos { margin: 0; padding-left: 1.2rem; }
.lista-objetivos li { margin-bottom: .3rem; }
.lista-objetivos li::marker { color: var(--menta-forte); }
.vazio { background: var(--menta-clara); border-radius: var(--raio); padding: 3rem 1.5rem; text-align: center; color: var(--suave); }
.vazio h2, .vazio h3 { font-size: 1.25rem; color: var(--tinta); margin-bottom: .4rem; }
.vazio p { margin: 0; }
.h5p-caixa + .h5p-caixa { margin-top: 1.5rem; }
.h5p-caixa iframe { width: 100%; }
.tug-spotify { display: block; }

.recolher summary { list-style: none; cursor: pointer; margin: 0; }
.recolher summary::-webkit-details-marker { display: none; }
.recolher summary::after { content: "Mostrar"; margin-left: auto; font: 500 .72rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--linha); border-radius: 6px; padding: .5rem .7rem; }
.recolher[open] summary::after { content: "Esconder"; }
.recolher .prosa { margin-top: 1.5rem; }

.vocab { display: grid; grid-template-columns: max-content 1fr; gap: .7rem 2rem; margin: 0; }
.vocab dt { font-weight: 800; letter-spacing: -0.02em; }
.vocab dd { margin: 0; color: var(--suave); }

.vizinhos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 3rem; }
.vizinhos__ligacao { display: flex; flex-direction: column; gap: .4rem; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.3rem 1.5rem; text-decoration: none; background: #fff; }
.vizinhos__ligacao:hover { border-color: var(--tinta); }
.vizinhos__ligacao strong { font-size: 1.3rem; letter-spacing: -0.04em; }
.vizinhos__ligacao--dir { text-align: right; align-items: flex-end; }

/* ==========================================================================
   TEXTO CORRIDO (páginas normais e transcrição)
   ========================================================================== */
.pagina { padding-bottom: 6rem; }
.prosa { max-width: 70ch; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2, .prosa h3 { margin-top: 1.8em; }
.prosa h2 { font-size: 2rem; }
.prosa h3 { font-size: 1.4rem; }
.prosa a { text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--menta-forte); }
.prosa img { border-radius: var(--raio); }
.prosa blockquote { margin-inline: 0; padding-left: 1.2rem; border-left: 4px solid var(--menta); color: var(--suave); }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.wp-caption-text, figcaption { font-size: .9rem; color: var(--suave); }
.item-lista { border-top: 1px solid var(--linha); padding-block: 1.5rem; }
.item-lista h2 { font-size: 1.6rem; }
.item-lista a { text-decoration: none; }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape { background: var(--tinta); color: #f1f4f0; padding: 5rem 0 2rem; }
.rodape__grelha { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; align-items: start; }
.logo--claro { color: #fff; }
.logo--claro .logo__ponto { color: var(--menta); }
.rodape__frase { color: #aeb6b1; margin: 1.2rem 0 0; }
.rodape__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.rodape__menu a { text-decoration: none; font-weight: 600; }
.rodape__menu a:hover { color: var(--menta); }
.rodape__lema { font-weight: 800; font-size: 1.7rem; letter-spacing: -0.05em; line-height: 1.1; text-transform: uppercase; margin: 0; text-align: right; }
.rodape__fim { margin-top: 4rem; padding-top: 1.6rem; border-top: 1px solid #2c3531; color: #8f9893; font-size: .9rem; }
.rodape__fim p { margin: 0; }

/* ==========================================================================
   TELEMÓVEL E TABLET
   ========================================================================== */
@media (max-width: 1000px) {
	.grelha--4, .grelha--3 { grid-template-columns: repeat(2, 1fr); }
	.escuro__grelha { grid-template-columns: 1fr; gap: 4rem; }
	.cartaz { max-width: 520px; }
}
@media (max-width: 780px) {
	.passos { grid-template-columns: 1fr; gap: 2.5rem; }
	.rodape__grelha { grid-template-columns: 1fr; }
	.rodape__lema { text-align: left; }
	.sec { padding: 4rem 0; }
	.heroi { padding-top: 3.5rem; }
	.sec__nota { text-align: left; }
	.moldura__imagem img { aspect-ratio: 4 / 3; }
	.moldura__legenda { position: static; margin: 0; box-shadow: none; border-width: 1px 0 0; width: 100%; }
}
@media (max-width: 600px) {
	.cx { width: min(100% - 2rem, var(--largura)); }
	.grelha--4, .grelha--3 { grid-template-columns: 1fr; }
	.bloco { padding: 1.4rem; }
	.vizinhos { grid-template-columns: 1fr; }
	.vizinhos__ligacao--dir { text-align: left; align-items: flex-start; }
	.vocab { grid-template-columns: 1fr; gap: .2rem; }
	.vocab dd { margin-bottom: .8rem; }
	.cab__nivel { display: none; }
}