/*
Theme Name:   Sendero de Nox Child
Theme URI:    https://senderodenox.com.mx
Description:  Child theme para Sendero de Nox sobre GeneratePress. Diseño oscuro-cinematográfico para investigación paranormal.
Author:       Sendero de Nox
Template:     generatepress
Version:      1.0.0
Text Domain:  senderodenox-child
*/

/* =====================================================================
   SENDERO DE NOX — CHILD THEME CSS
   Basado en: GeneratePress 3.6.1
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   1. VARIABLES GLOBALES
   ───────────────────────────────────────────────────────────────────── */

:root {
    /* Paleta principal */
    --sdn-void:    #060404;
    --sdn-deep:    #0D0908;
    --sdn-faint:   #1C1610;
    --sdn-bone:    #C9B898;
    --sdn-dim:     #6B5E48;
    --sdn-whisper: #3A3020;

    /* Acentos */
    --sdn-crimson:  #8C1414;
    --sdn-crimson2: #A52020;
    --sdn-gold:     #9E7222;
    --sdn-gold-dim: #6B4E18;

    /* Bordes */
    --sdn-border:  rgba(175, 138, 65, 0.14);
    --sdn-border2: rgba(175, 138, 65, 0.30);

    /* Tipografías */
    --sdn-font-display: 'Cinzel Decorative', 'Georgia', serif;
    --sdn-font-body:    'Crimson Text', 'Georgia', serif;
    --sdn-font-italic:  'IM Fell English', 'Georgia', serif;

    /* Ancho máximo de contenido */
    --sdn-max-width: 1100px;

    /* Override de variables nativas de GeneratePress */
    --contrast:   #C9B898;
    --contrast-2: #6B5E48;
    --contrast-3: #3A3020;
    --accent:     #8C1414;
    --base:       #060404;
    --base-2:     #0D0908;
    --base-3:     #1C1610;
}


/* ─────────────────────────────────────────────────────────────────────
   2. RESET Y BASE GLOBAL
   ───────────────────────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--sdn-void);
    color: var(--sdn-bone);
    font-family: var(--sdn-font-body);
    font-size: 19px;
    line-height: 1.75;
}

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--sdn-void); }
::-webkit-scrollbar-thumb { background: var(--sdn-crimson); }
::-webkit-scrollbar-thumb:hover { background: var(--sdn-crimson2); }

/* Selección de texto */
::selection {
    background: var(--sdn-crimson);
    color: var(--sdn-bone);
}

/* Grano cinematográfico sobre todo el sitio */
.site-content::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='250' height='250' filter='url(%23n)' opacity='0.5'/></svg>");
    background-repeat: repeat;
    background-size: 250px 250px;
    opacity: 0.032;
    pointer-events: none;
    z-index: 9998;
}


/* ─────────────────────────────────────────────────────────────────────
   3. TIPOGRAFÍA
   ───────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
    font-family: var(--sdn-font-display) !important;
    color: var(--sdn-bone) !important;
    letter-spacing: 0.05em;
    line-height: 1.18;
    font-weight: 700;
}

h1 { font-size: clamp(30px, 5vw, 60px); }
h2 { font-size: clamp(22px, 3.5vw, 40px); }
h3 { font-size: clamp(17px, 2.5vw, 26px); }
h4 { font-size: 18px; }
h5, h6 { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; }

p { margin-bottom: 1.3em; }

a {
    color: var(--sdn-gold);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--sdn-bone); }

strong { color: var(--sdn-bone); font-weight: 600; }

em, i {
    font-family: var(--sdn-font-italic);
    color: var(--sdn-dim);
}

blockquote {
    border-left: 2px solid var(--sdn-crimson) !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 4px 24px !important;
    margin: 28px 0 !important;
    color: var(--sdn-dim);
    font-family: var(--sdn-font-italic);
    font-style: italic;
    font-size: 1.1em;
    background: transparent;
}

blockquote p { margin-bottom: 0; }

code, pre {
    font-family: 'Courier New', monospace;
    background: var(--sdn-faint) !important;
    border: 1px solid var(--sdn-border) !important;
    color: var(--sdn-bone) !important;
    font-size: 14px;
}

pre { padding: 20px; overflow-x: auto; }
code { padding: 2px 8px; }

hr {
    border: none;
    border-top: 1px solid var(--sdn-border);
    margin: 36px 0;
}


/* ─────────────────────────────────────────────────────────────────────
   4. ENCABEZADO Y NAVEGACIÓN
   ───────────────────────────────────────────────────────────────────── */

.site-header {
    background-color: var(--sdn-void) !important;
    border-bottom: 1px solid var(--sdn-border);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(4px);
}

/* Logo / Título del sitio */
.site-title {
    font-size: 14px !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase;
}

.site-title a {
    color: var(--sdn-bone) !important;
    text-decoration: none;
}
.site-title a:hover { color: var(--sdn-crimson) !important; }

.site-description {
    font-family: var(--sdn-font-italic) !important;
    font-style: italic;
    font-size: 12px !important;
    color: var(--sdn-dim) !important;
    letter-spacing: 0.08em;
}

/* Menú principal */
.nav-primary,
.main-navigation {
    background: transparent !important;
}

.main-navigation .menu > li > a {
    font-family: var(--sdn-font-display) !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--sdn-dim) !important;
    padding: 8px 18px !important;
    transition: color 0.2s !important;
    border-bottom: none !important;
}

.main-navigation .menu > li > a:hover,
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current-menu-ancestor > a {
    color: var(--sdn-bone) !important;
    background: transparent !important;
}

/* Separador activo */
.main-navigation .menu > li.current-menu-item > a {
    border-bottom: 1px solid var(--sdn-crimson) !important;
}

/* Submenús (dropdown) */
.main-navigation .sub-menu {
    background-color: var(--sdn-deep) !important;
    border: 1px solid var(--sdn-border) !important;
    border-top: 2px solid var(--sdn-crimson) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.main-navigation .sub-menu a {
    font-family: var(--sdn-font-display) !important;
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    color: var(--sdn-dim) !important;
    padding: 10px 20px !important;
    border-bottom: 1px solid var(--sdn-border) !important;
}

.main-navigation .sub-menu a:hover {
    color: var(--sdn-bone) !important;
    background: var(--sdn-faint) !important;
}

/* Botón CTA en el nav (asigna clase .sdn-nav-cta al ítem de menú en WP) */
.main-navigation .menu > li.sdn-nav-cta > a {
    background: var(--sdn-crimson) !important;
    color: #D4C0A0 !important;
    padding: 8px 20px !important;
    margin-left: 8px;
    transition: background 0.2s !important;
}
.main-navigation .menu > li.sdn-nav-cta > a:hover {
    background: var(--sdn-crimson2) !important;
    color: #D4C0A0 !important;
}

/* Toggle menú móvil */
.menu-toggle,
.menu-toggle:hover {
    color: var(--sdn-bone) !important;
    background: transparent !important;
    border: 1px solid var(--sdn-border2) !important;
}
.menu-toggle .menu-toggle-bars .menu-toggle-bar {
    background: var(--sdn-bone) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   5. ÁREA DE CONTENIDO PRINCIPAL
   ───────────────────────────────────────────────────────────────────── */

.site-main,
.site-content,
.content-area {
    background-color: var(--sdn-void);
}

.grid-container {
    max-width: var(--sdn-max-width) !important;
}

/* Entrada individual */
.entry-header {
    border-bottom: 1px solid var(--sdn-border);
    padding-bottom: 28px;
    margin-bottom: 36px;
}

.entry-title a {
    color: var(--sdn-bone) !important;
    transition: color 0.2s;
}
.entry-title a:hover { color: var(--sdn-crimson) !important; }

.entry-meta,
.entry-meta a,
.post-meta-icon {
    font-family: var(--sdn-font-display) !important;
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--sdn-gold) !important;
}
.entry-meta a:hover { color: var(--sdn-bone) !important; }

.entry-footer {
    border-top: 1px solid var(--sdn-border);
    padding-top: 20px;
    margin-top: 40px;
    font-size: 12px;
    color: var(--sdn-dim);
}
.entry-footer a { color: var(--sdn-dim); }
.entry-footer a:hover { color: var(--sdn-bone); }

/* Imágenes destacadas */
.post-image,
.featured-image,
.wp-post-image {
    border: 1px solid var(--sdn-border);
    filter: grayscale(15%) contrast(1.05);
}

/* Tarjetas de archivo (listado de posts) */
article.type-post,
article.type-page {
    border: 1px solid var(--sdn-border);
    background: var(--sdn-faint);
    padding: 28px;
    margin-bottom: 2px;
    transition: border-color 0.25s, background 0.25s;
}
article.type-post:hover {
    border-color: var(--sdn-border2);
    background: #171410;
}


/* ─────────────────────────────────────────────────────────────────────
   6. BOTONES
   ───────────────────────────────────────────────────────────────────── */

.wp-block-button__link,
button:not(.menu-toggle):not(.search-submit),
input[type="submit"],
.button,
.gen-button,
.sdn-btn-primary {
    font-family: var(--sdn-font-display) !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    background-color: var(--sdn-crimson) !important;
    color: #D4C0A0 !important;
    border: none !important;
    padding: 14px 30px !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background-color 0.2s !important;
    text-decoration: none;
    display: inline-block;
}

.wp-block-button__link:hover,
button:not(.menu-toggle):not(.search-submit):hover,
input[type="submit"]:hover,
.button:hover,
.sdn-btn-primary:hover {
    background-color: var(--sdn-crimson2) !important;
    color: #D4C0A0 !important;
}

/* Variante outline */
.wp-block-button.is-style-outline .wp-block-button__link,
.sdn-btn-outline {
    background: transparent !important;
    border: 1px solid var(--sdn-border2) !important;
    color: var(--sdn-dim) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.sdn-btn-outline:hover {
    border-color: var(--sdn-bone) !important;
    color: var(--sdn-bone) !important;
    background: transparent !important;
}

/* Alineación de botones */
.wp-block-buttons {
    gap: 14px !important;
}


/* ─────────────────────────────────────────────────────────────────────
   7. FORMULARIOS E INPUTS
   ───────────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
    background-color: var(--sdn-faint) !important;
    border: 1px solid var(--sdn-border) !important;
    color: var(--sdn-bone) !important;
    font-family: var(--sdn-font-body) !important;
    font-size: 17px !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    transition: border-color 0.2s !important;
    width: 100%;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--sdn-gold) !important;
    outline: none !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--sdn-whisper) !important;
}

label {
    font-family: var(--sdn-font-display);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sdn-dim);
    display: block;
    margin-bottom: 6px;
}


/* ─────────────────────────────────────────────────────────────────────
   8. SIDEBAR Y WIDGETS
   ───────────────────────────────────────────────────────────────────── */

.widget {
    border: 1px solid var(--sdn-border);
    background: var(--sdn-faint);
    padding: 24px !important;
    margin-bottom: 2px !important;
    border-radius: 0 !important;
}

.widget-title,
.widgettitle {
    font-family: var(--sdn-font-display) !important;
    font-size: 10px !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: var(--sdn-gold) !important;
    border-bottom: 1px solid var(--sdn-border) !important;
    padding-bottom: 12px !important;
    margin-bottom: 18px !important;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    border-bottom: 1px solid var(--sdn-border);
    padding: 9px 0;
    font-size: 16px;
    color: var(--sdn-dim);
}
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--sdn-dim); }
.widget ul li a:hover { color: var(--sdn-bone); }

/* Widget de búsqueda */
.widget_search .search-field {
    background: var(--sdn-faint) !important;
    border-color: var(--sdn-border) !important;
    color: var(--sdn-bone) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   9. PIE DE PÁGINA
   ───────────────────────────────────────────────────────────────────── */

.site-footer {
    background-color: var(--sdn-void) !important;
    border-top: 1px solid var(--sdn-border);
    color: var(--sdn-dim) !important;
    padding: 32px 0 !important;
    font-size: 13px;
}

.site-footer a {
    color: var(--sdn-dim) !important;
    font-family: var(--sdn-font-display);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.site-footer a:hover { color: var(--sdn-bone) !important; }

.footer-bar {
    background: var(--sdn-void) !important;
    border-top: none;
    padding: 20px 0 !important;
    color: var(--sdn-dim) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   10. BLOQUES DE GUTENBERG
   ───────────────────────────────────────────────────────────────────── */

/* Separador */
.wp-block-separator {
    border-color: var(--sdn-border) !important;
    opacity: 1 !important;
}

/* Cita destacada */
.wp-block-pullquote {
    border-top: 2px solid var(--sdn-crimson) !important;
    border-bottom: 2px solid var(--sdn-crimson) !important;
    padding: 28px !important;
    color: var(--sdn-dim);
    font-family: var(--sdn-font-italic);
    font-style: italic;
    text-align: left !important;
}
.wp-block-pullquote cite {
    font-family: var(--sdn-font-display);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sdn-gold);
    font-style: normal;
}

/* Tabla */
.wp-block-table {
    overflow-x: auto;
}
.wp-block-table td,
.wp-block-table th {
    border-color: var(--sdn-border) !important;
    color: var(--sdn-bone);
    padding: 12px 16px !important;
}
.wp-block-table thead {
    background: var(--sdn-faint);
}
.wp-block-table thead td,
.wp-block-table thead th {
    font-family: var(--sdn-font-display);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sdn-gold) !important;
}

/* Imagen */
.wp-block-image img {
    border: 1px solid var(--sdn-border);
}
.wp-block-image figcaption {
    font-family: var(--sdn-font-italic);
    font-style: italic;
    font-size: 13px;
    color: var(--sdn-dim);
    text-align: center;
    margin-top: 8px;
}

/* Galería */
.wp-block-gallery figure.wp-block-image {
    border: 1px solid var(--sdn-border);
}

/* Portada (Cover block) */
.wp-block-cover {
    border: 1px solid var(--sdn-border);
}

/* Código */
.wp-block-code,
.wp-block-preformatted {
    background: var(--sdn-faint) !important;
    border: 1px solid var(--sdn-border) !important;
    color: var(--sdn-bone) !important;
    border-radius: 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   11. PAGINACIÓN
   ───────────────────────────────────────────────────────────────────── */

.page-numbers,
.pagination .page-numbers {
    font-family: var(--sdn-font-display) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    color: var(--sdn-dim) !important;
    border: 1px solid var(--sdn-border) !important;
    padding: 9px 16px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    background: transparent !important;
}

.page-numbers:hover,
.page-numbers.current,
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--sdn-crimson) !important;
    border-color: var(--sdn-crimson) !important;
    color: #D4C0A0 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   12. COMENTARIOS
   ───────────────────────────────────────────────────────────────────── */

.comments-area {
    border-top: 1px solid var(--sdn-border);
    padding-top: 44px;
    margin-top: 44px;
}

.comments-title {
    font-family: var(--sdn-font-display) !important;
    font-size: 14px !important;
    letter-spacing: 0.2em !important;
    color: var(--sdn-gold) !important;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment-list .comment {
    border-bottom: 1px solid var(--sdn-border);
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.comment-author .fn {
    font-family: var(--sdn-font-display);
    font-size: 13px;
    color: var(--sdn-bone);
    font-style: normal;
}
.comment-author a { color: var(--sdn-bone) !important; }

.comment-metadata,
.comment-metadata a {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--sdn-dim) !important;
}

.comment-content p { color: var(--sdn-bone); }

#respond h3 {
    font-family: var(--sdn-font-display) !important;
    font-size: 14px !important;
    color: var(--sdn-bone) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   13. CLASES PERSONALIZADAS SDN
       (Úsalas desde el editor de bloques en "Clases CSS adicionales")
   ───────────────────────────────────────────────────────────────────── */

/* Línea decorativa de sección */
.sdn-overline {
    font-family: var(--sdn-font-display);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--sdn-gold);
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.sdn-overline::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--sdn-gold);
    flex-shrink: 0;
}

/* Contenedor oscuro */
.sdn-bg-deep {
    background-color: var(--sdn-deep) !important;
    border-top: 1px solid var(--sdn-border);
    border-bottom: 1px solid var(--sdn-border);
}

/* Borde con acento crimson */
.sdn-border-crimson {
    border-left: 2px solid var(--sdn-crimson);
    padding-left: 20px;
}

/* Tipografía de caso/archivo */
.sdn-case-label {
    font-family: var(--sdn-font-display);
    font-size: 10px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--sdn-gold);
    display: flex;
    align-items: center;
    gap: 16px;
}
.sdn-case-label::before {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: var(--sdn-gold);
}

/* Separador decorativo */
.sdn-divider {
    width: 40px;
    height: 1px;
    background: var(--sdn-crimson);
    margin: 28px 0;
}

/* Tarjeta de contenido */
.sdn-card {
    background: var(--sdn-faint);
    border: 1px solid var(--sdn-border);
    padding: 28px;
    transition: border-color 0.25s, background 0.25s;
}
.sdn-card:hover {
    border-color: var(--sdn-border2);
    background: #171410;
}

/* Texto en itálica editorial */
.sdn-italic {
    font-family: var(--sdn-font-italic) !important;
    font-style: italic;
    color: var(--sdn-dim);
    font-size: 1.1em;
}

/* Grid social */
.sdn-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2px;
    margin-top: 28px;
}

/* Pill de plataforma */
.sdn-plat-pill {
    display: inline-block;
    border: 1px solid var(--sdn-border2);
    padding: 8px 20px;
    font-family: var(--sdn-font-display);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sdn-dim);
    text-decoration: none;
    transition: all 0.2s;
    margin: 4px;
}
.sdn-plat-pill:hover {
    border-color: var(--sdn-crimson);
    color: var(--sdn-bone);
}

/* Hero section completa */
.sdn-hero {
    min-height: 88vh;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0 0;
    position: relative;
    overflow: hidden;
    background-color: var(--sdn-void) !important;
}
.sdn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(140,20,20,0.07) 0%, transparent 70%);
    pointer-events: none;
}
.sdn-hero h1 {
    font-size: clamp(52px, 10vw, 110px) !important;
    line-height: 0.9 !important;
    letter-spacing: 0.05em !important;
}

/* Barra de estadísticas del hero */
.sdn-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--sdn-border);
    margin-top: 60px;
}
.sdn-stat {
    padding: 20px 28px;
    border-right: 1px solid var(--sdn-border);
}
.sdn-stat:last-child { border-right: none; }
.sdn-stat-num {
    font-family: var(--sdn-font-display);
    font-size: 28px;
    color: var(--sdn-bone);
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}
.sdn-stat-lbl {
    font-family: var(--sdn-font-display);
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sdn-dim);
}


/* ─────────────────────────────────────────────────────────────────────
   14. RESPONSIVE — MÓVIL
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    h1 { font-size: 36px !important; }
    h2 { font-size: 26px !important; }
    h3 { font-size: 20px !important; }

    body { font-size: 17px; }

    .sdn-hero h1 { font-size: 44px !important; }

    .sdn-stats-bar {
        grid-template-columns: 1fr 1fr;
    }
    .sdn-stat {
        border-right: none;
        border-bottom: 1px solid var(--sdn-border);
    }
    .sdn-stat:last-child { border-bottom: none; }

    /* Nav móvil */
    .main-navigation .menu > li > a {
        padding: 12px 20px !important;
        border-bottom: 1px solid var(--sdn-border) !important;
    }
    .main-navigation .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (max-width: 480px) {
    .sdn-hero { min-height: 70vh; }
    .sdn-hero h1 { font-size: 34px !important; line-height: 1 !important; }

    .sdn-stats-bar { grid-template-columns: 1fr 1fr; }
    .sdn-social-grid { grid-template-columns: 1fr; }
}