/*
Theme Name: Autopub Child
Theme URI: https://meuouteiro.com
Description: Tema fillo de GeneratePress para Meu Outeiro. Engade o bloque de metadatos dos artigos de Autopub e melloras de accesibilidade.
Author: Meu Outeiro
Author URI: https://meuouteiro.com
Template: generatepress
Version: 1.0.0
Text Domain: autopub-child
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   Bloque de metadatos dos artigos (cabeceira · nº · data orixinal)
   ========================================================================== */

.autopub-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
	margin: 0 0 1.5em;
	padding: 0.6em 0;
	border-bottom: 1px solid currentColor;
	font-size: 0.95em;
	line-height: 1.4;
	opacity: 0.85;
}

.autopub-meta__cabeceira {
	font-weight: 600;
}

.autopub-meta__separador {
	opacity: 0.5;
}

.autopub-meta__numero,
.autopub-meta__data {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Imaxes inline creadas por Autopub
   ========================================================================== */

.autopub-img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.5em auto;
}

/* ==========================================================================
   Accesibilidade — skip link e foco visible
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 999999;
}

.skip-link:focus {
	position: fixed;
	left: 1em;
	top: 1em;
	width: auto;
	height: auto;
	padding: 0.75em 1.25em;
	background: #000;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Foco visible en todos os elementos interactivos. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* ==========================================================================
   Prefers-reduced-motion — respecta as preferencias do usuario
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
/* ==========================================================================
   Ajustes de deseño do tema fillo
   ========================================================================== */

/* Featured image no single: oculta (a portada configurarase aparte). */
.single-post .inside-article > .featured-image,
.single-post .inside-article > .page-header-image {
	display: none;
}

/* Data e autor no header do artigo: ocultos. */
.single-post .entry-header .entry-meta {
	display: none;
}

/* Categorías e etiquetas ao pé do artigo: ocultas.
   Empréganse só para clasificación interna.
   O footer de GeneratePress ten clase `entry-meta` (non `entry-footer`),
   pero o header tamén a ten. Por iso usamos `footer.entry-meta`. */
.single-post footer.entry-meta,
.single-post .cat-links,
.single-post .tags-links {
	display: none !important;
}
/* ==========================================================================
   Imaxe destacada propia, inserida no corpo do artigo
   ========================================================================== */

.autopub-featured-figure {
	margin: 0 0 1.5em;
	padding: 0;
	display: block;
}

.autopub-featured-image {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
/* ==========================================================================
   FASE 7.5 — Parte 1: Fontes self-hosted + variables
   ========================================================================== */

/* ----- Playfair Display (titulares) ----- */

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/playfair-display-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/playfair-display-700.woff2') format('woff2');
}

/* ----- Inter (corpo) ----- */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/inter-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/inter-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/inter-600.woff2') format('woff2');
}

/* ----- Variables de deseño ----- */

:root {
	/* Paleta Atlántico */
	--autopub-cor-principal: #1a4d6d;
	--autopub-cor-principal-escuro: #123548;
	--autopub-cor-acento: #c8553d;
	--autopub-cor-texto: #1a1a1a;
	--autopub-cor-texto-suave: #555555;
	--autopub-cor-fondo: #fafaf7;
	--autopub-cor-fondo-alt: #f2efe9;
	--autopub-cor-borde: #e5e2dc;

	/* Tipografía */
	--autopub-fonte-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--autopub-fonte-corpo: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Espazados */
	--autopub-espazo-xs: 0.5rem;
	--autopub-espazo-s: 1rem;
	--autopub-espazo-m: 2rem;
	--autopub-espazo-l: 3rem;
	--autopub-espazo-xl: 4rem;

	/* Anchos */
	--autopub-ancho-contenedor: 1200px;
	--autopub-ancho-contenido: 720px;
}
/* ==========================================================================
   FASE 7.5 — Parte 2: Aplicación de tipografía, cores e espazados
   ========================================================================== */

/* ----- Corpo ----- */

body,
button,
input,
select,
textarea {
	font-family: var(--autopub-fonte-corpo);
	font-weight: 400;
	color: var(--autopub-cor-texto);
	background-color: var(--autopub-cor-fondo);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-size: 17px;
	line-height: 1.7;
}

/* ----- Titulares ----- */

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.site-title {
	font-family: var(--autopub-fonte-titulo);
	font-weight: 700;
	line-height: 1.25;
	color: var(--autopub-cor-texto);
	margin-top: 0;
}

h1,
.entry-title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	margin-bottom: var(--autopub-espazo-m);
}

h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-top: var(--autopub-espazo-l);
	margin-bottom: var(--autopub-espazo-s);
}

h3 {
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	margin-top: var(--autopub-espazo-m);
	margin-bottom: var(--autopub-espazo-s);
}

h4 {
	font-family: var(--autopub-fonte-corpo);
	font-weight: 600;
	font-size: 1.1rem;
	margin-top: var(--autopub-espazo-m);
	margin-bottom: var(--autopub-espazo-xs);
}

h5,
h6 {
	font-family: var(--autopub-fonte-corpo);
	font-weight: 600;
	font-size: 1rem;
	margin-top: var(--autopub-espazo-s);
	margin-bottom: var(--autopub-espazo-xs);
}

/* ----- Ligazóns ----- */

a {
	color: var(--autopub-cor-principal);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--autopub-cor-acento);
}

/* ----- Parágrafos ----- */

p {
	margin-bottom: var(--autopub-espazo-s);
}

/* ----- Citas ----- */

blockquote {
	border-left: 3px solid var(--autopub-cor-acento);
	margin: var(--autopub-espazo-m) 0;
	padding: var(--autopub-espazo-s) var(--autopub-espazo-m);
	font-family: var(--autopub-fonte-titulo);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--autopub-cor-texto-suave);
	background-color: var(--autopub-cor-fondo-alt);
}

/* ----- Listas ----- */

ul,
ol {
	margin-bottom: var(--autopub-espazo-s);
	padding-left: var(--autopub-espazo-m);
}

li {
	margin-bottom: var(--autopub-espazo-xs);
}

/* ----- Separadores ----- */

hr {
	border: 0;
	border-top: 1px solid var(--autopub-cor-borde);
	margin: var(--autopub-espazo-l) 0;
}

/* ----- Formularios ----- */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select {
	font-family: var(--autopub-fonte-corpo);
	font-size: 1rem;
	padding: 0.6em 0.9em;
	border: 1px solid var(--autopub-cor-borde);
	border-radius: 4px;
	background-color: #fff;
	color: var(--autopub-cor-texto);
	transition: border-color 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	border-color: var(--autopub-cor-principal);
	outline: 3px solid rgba(26, 77, 109, 0.2);
	outline-offset: 0;
}

/* ----- Botóns ----- */

button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	font-family: var(--autopub-fonte-corpo);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.7em 1.4em;
	background-color: var(--autopub-cor-principal);
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
	background-color: var(--autopub-cor-principal-escuro);
	color: #fff;
}

/* ----- Selección de texto ----- */

::selection {
	background-color: var(--autopub-cor-acento);
	color: #fff;
}
/* ==========================================================================
   FASE 7.5 — Parte 3: Cabeceira e menú de navegación
   ========================================================================== */

/* ----- Barra de navegación (header do sitio) ----- */

.site-header {
	background-color: var(--autopub-cor-fondo);
	border-bottom: 1px solid var(--autopub-cor-borde);
	position: relative;
	z-index: 100;
}

.site-header .inside-header {
	padding-top: var(--autopub-espazo-s);
	padding-bottom: var(--autopub-espazo-s);
}

/* ----- Título do sitio (estilo eldiario.es) ----- */

.site-header .site-branding,
.site-header .site-logo {
	flex-shrink: 0;
}

.site-header .main-title,
.site-header .site-title {
	font-family: var(--autopub-fonte-titulo);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: -0.01em;
	margin: 0;
}

.site-header .main-title a,
.site-header .site-title a {
	color: var(--autopub-cor-principal);
	text-decoration: none;
}

.site-header .main-title a:hover,
.site-header .main-title a:focus,
.site-header .site-title a:hover,
.site-header .site-title a:focus {
	color: var(--autopub-cor-acento);
}

.site-header .site-description {
	font-family: var(--autopub-fonte-corpo);
	font-size: 0.85rem;
	color: var(--autopub-cor-texto-suave);
	margin: 0.2em 0 0;
}

/* ----- Menú de navegación principal ----- */

.main-navigation {
	flex-shrink: 0;
}

.main-navigation ul.main-menu,
.main-navigation ul.menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--autopub-espazo-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation ul.main-menu li,
.main-navigation ul.menu li {
	margin: 0;
}

.main-navigation ul.main-menu li a,
.main-navigation ul.menu li a {
	display: inline-block;
	font-family: var(--autopub-fonte-corpo);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--autopub-cor-texto);
	text-decoration: none;
	padding: 0.4em 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.main-navigation ul.main-menu li a:hover,
.main-navigation ul.main-menu li a:focus,
.main-navigation ul.main-menu li.current-menu-item > a,
.main-navigation ul.menu li a:hover,
.main-navigation ul.menu li a:focus,
.main-navigation ul.menu li.current-menu-item > a {
	color: var(--autopub-cor-principal);
	border-bottom-color: var(--autopub-cor-acento);
}

/* ----- Responsive: móbil e tablet ----- */

@media (max-width: 768px) {
	.site-header .main-title,
	.site-header .site-title {
		font-size: 1.35rem;
	}

	.main-navigation ul.main-menu,
	.main-navigation ul.menu {
		gap: var(--autopub-espazo-s);
		flex-wrap: wrap;
	}

	.main-navigation ul.main-menu li a,
	.main-navigation ul.menu li a {
		font-size: 0.9rem;
	}
}
