/*
Theme Name: DanLink Theme
Theme URI: https://danlink.com
Author: Dan Solano
Author URI: https://dansolano.com
Description: Tema custom para DanLink — plataforma de blog y reseñas de videojuegos con sistema de calificación propio.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: danlink
*/

/* ==========================================================================
   Variables de marca (ver manual de marca para la referencia completa)
   ========================================================================== */
:root {
    --rojo: #FE1737;
    --rojo-oscuro: #C10E28;
    --rojo-claro: #FF5470;

    --tinta: #12121A;
    --gris-900: #1A1A22;
    --gris-700: #45454F;
    --gris-400: #8A8A96;
    --gris-200: #E4E4E9;
    --gris-100: #F4F4F7;
    --blanco: #FFFFFF;

    --fuente-titulos: 'Space Grotesk', -apple-system, sans-serif;
    --fuente-texto: 'Inter', -apple-system, sans-serif;
}

/* ==========================================================================
   Reset básico
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--fuente-texto);
    line-height: 1.6;
    color: var(--tinta);
    background: var(--blanco);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.5em;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

/* ==========================================================================
   Layout general
   ========================================================================== */
.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-header {
    padding: 20px 0;
    border-bottom: 1px solid var(--gris-200);
}

/* Logo: por defecto WordPress no limita el tamaño del custom-logo, así que lo acotamos aquí */
.site-branding .custom-logo-link img,
.site-branding img,
.custom-logo {
    max-height: 44px !important;
    width: auto !important;
    height: auto;
}

.site-branding__texto {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 1.4rem;
    text-decoration: none;
    color: var(--tinta);
}

.site-nav .menu {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--gris-700);
    transition: color 0.15s ease;
}

.site-nav a:hover {
    color: var(--rojo);
}

.site-footer {
    padding: 40px 0;
    margin-top: 60px;
    border-top: 1px solid var(--gris-200);
    font-size: 0.9rem;
    color: var(--gris-400);
}

/* ==========================================================================
   Sistema de estrellas (reseñas)
   ========================================================================== */
.danlink-estrellas {
    display: inline-flex;
    gap: 2px;
    font-size: 1.4rem;
    line-height: 1;
}

.estrella-slot {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
}

.estrella-base {
    color: var(--gris-200);
}

.estrella-relleno {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--rojo-claro);
}

/* ==========================================================================
   Tarjeta de reseña (grid)
   ========================================================================== */
.danlink-grid-resenas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.card-resena {
    border: 1px solid var(--gris-200);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    background: var(--blanco);
}

.card-resena:hover {
    box-shadow: 0 8px 24px rgba(18, 18, 26, 0.08);
    transform: translateY(-2px);
}

.card-resena__imagen {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gris-100);
}

.card-resena__contenido {
    padding: 18px;
}

.card-resena__titulo {
    margin: 0 0 10px;
    font-size: 1.1rem;
}

.card-resena__nota {
    font-weight: bold;
    font-size: 1.2rem;
}

/* ==========================================================================
   Badges (tipo + tags) dentro de la tarjeta de puntuación
   ========================================================================== */
.badge-tipo {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--rojo);
    color: var(--blanco);
    font-family: var(--fuente-titulos);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.card-resena__tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge-tag {
    font-size: 0.78rem;
    color: var(--gris-700);
    background: var(--gris-100);
    border-radius: 999px;
    padding: 2px 10px;
}

/* ==========================================================================
   Filtro de la página de puntuaciones
   ========================================================================== */
.filtro-tipos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 24px 0 8px;
}

.filtro-btn {
    font-family: var(--fuente-texto);
    border: 1px solid var(--gris-200);
    background: var(--blanco);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filtro-btn:hover {
    border-color: var(--rojo);
    color: var(--rojo);
}

.filtro-btn.is-active {
    background: var(--rojo);
    border-color: var(--rojo);
    color: var(--blanco);
}

/* ==========================================================================
   Hero de portada — con acento low-poly de fondo
   ========================================================================== */
.hero-portada {
    position: relative;
    padding: 100px 0 80px;
    text-align: center;
    overflow: hidden;
    background: var(--tinta);
    color: var(--blanco);
}

.hero-portada::before,
.hero-portada::after {
    content: "";
    position: absolute;
    z-index: 0;
    opacity: 0.5;
}

/* Facetas low-poly decorativas, esquinas del hero */
.hero-portada::before {
    top: -60px;
    left: -60px;
    width: 260px;
    height: 260px;
    background:
        linear-gradient(135deg, var(--rojo) 0%, transparent 55%),
        linear-gradient(45deg, var(--rojo-oscuro) 0%, transparent 60%);
    clip-path: polygon(0 0, 100% 0, 60% 60%, 0 100%);
}

.hero-portada::after {
    bottom: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    background:
        linear-gradient(315deg, var(--rojo) 0%, transparent 50%),
        linear-gradient(225deg, var(--rojo-oscuro) 0%, transparent 55%);
    clip-path: polygon(100% 100%, 0 100%, 40% 40%, 100% 0);
}

.hero-portada .contenedor {
    position: relative;
    z-index: 1;
}

.hero-kicker {
    display: block;
    font-family: var(--fuente-titulos);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--rojo-claro);
    font-weight: 600;
    margin-bottom: 16px;
}

.hero-titulo {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    margin: 0 0 16px;
    color: var(--blanco);
}

.hero-subtitulo {
    font-size: 1.1rem;
    color: var(--gris-400);
    max-width: 480px;
    margin: 0 auto;
}

/* ==========================================================================
   Secciones de la portada (puntuaciones destacadas / blog)
   ========================================================================== */
.seccion-home {
    padding: 60px 20px;
}

.seccion-home__encabezado {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.seccion-home__encabezado h2 {
    margin: 0;
    font-size: 1.8rem;
}

.ver-todas {
    font-family: var(--fuente-titulos);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rojo);
    text-decoration: none;
    white-space: nowrap;
}

.ver-todas:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Grid y tarjetas del blog (distinto a las de reseña: sí llevan link + fecha)
   ========================================================================== */
.grid-blog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.card-blog {
    border: 1px solid var(--gris-200);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-blog:hover {
    box-shadow: 0 8px 24px rgba(18, 18, 26, 0.08);
    transform: translateY(-2px);
}

.card-blog__imagen {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gris-100);
}

.card-blog__contenido {
    padding: 18px;
}

.card-blog__fecha {
    font-family: var(--fuente-titulos);
    font-size: 0.75rem;
    color: var(--rojo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.card-blog__titulo {
    margin: 8px 0;
    font-size: 1.15rem;
}

.card-blog__titulo a {
    text-decoration: none;
    color: inherit;
}

.card-blog__titulo a:hover {
    color: var(--rojo);
}

.card-blog__excerpt {
    font-size: 0.92rem;
    color: var(--gris-700);
    margin: 0;
}

/* ==========================================================================
   Contenido de un post individual (single.php) / página estática (page.php)
   ========================================================================== */
.entrada {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 20px 80px;
}

.entrada__meta {
    font-family: var(--fuente-titulos);
    font-size: 0.8rem;
    color: var(--rojo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 12px;
}

.entrada__titulo {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    margin-bottom: 24px;
}

.entrada__imagen-destacada {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 32px;
    aspect-ratio: 16 / 9;
}

.entrada__contenido {
    font-size: 1.08rem;
    color: var(--gris-900);
}

.entrada__contenido p {
    margin: 0 0 1.4em;
}

.entrada__contenido h2 {
    font-size: 1.6rem;
    margin-top: 1.6em;
}

.entrada__contenido h3 {
    font-size: 1.3rem;
    margin-top: 1.4em;
}

.entrada__contenido a {
    color: var(--rojo);
    text-decoration: underline;
    text-decoration-color: var(--rojo-claro);
}

.entrada__contenido blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--rojo);
    color: var(--gris-700);
    font-style: italic;
}

.entrada__contenido img {
    border-radius: 10px;
    margin: 1.6em 0;
}

.entrada__contenido ul,
.entrada__contenido ol {
    padding-left: 1.4em;
}

.entrada__navegacion {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--gris-200);
    font-size: 0.9rem;
}

.entrada__navegacion a {
    text-decoration: none;
    color: var(--gris-700);
    font-weight: 500;
}

.entrada__navegacion a:hover {
    color: var(--rojo);
}

/* Página estática simple (page.php): sin meta ni navegación de post */
.pagina__titulo {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    margin-bottom: 32px;
}