/* ============================================
   THEME-WIDE.CSS
   Reglas globales para que el header y footer
   cyberpunk funcionen en TODAS las páginas
   (no sólo en la landing).
   ============================================ */

/* === Wrapper de contenido entre header y footer === */
.site-content-wrap {
    position: relative;
    padding-top: 64px;       /* compensa el header fijo */
    min-height: 50vh;
    background: var(--color-bg);
}

/* En la landing el hero ya gestiona el offset, no apilamos padding */
.spotia-landing-body .site-content-wrap {
    padding-top: 0;
}

/* === Barra de admin de WordPress: empuja el header sticky === */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .site-header { top: 46px; }
}

/* === Defensivo: ocultar header/footer nativos de Divi
   por si algún template los reinyecta === */
#main-header,
#top-header,
#main-footer,
#et-secondary-nav,
#et-top-navigation,
.et-l--header,
.et-l--footer { display: none !important; }

/* === Fondo oscuro garantizado en todo el sitio === */
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
}

/* === Contenedores estándar de WordPress / WooCommerce === */
.woocommerce,
.woocommerce-page main,
.woocommerce-page .entry-content,
.woocommerce-page .et_pb_section,
.page main,
.single-post main {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    background: transparent !important;
}

/* === Títulos genéricos === */
.entry-title,
h1.page-title,
.woocommerce-products-header__title,
.woocommerce-MyAccount-content h1,
.woocommerce-MyAccount-content h2 {
    font-family: var(--font-base);
    font-weight: var(--fw-black);
    font-size: 2rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
    margin: 0 0 1.5rem;
    padding: 1rem 0;
    line-height: 1.15;
}
@media (min-width: 768px) {
    .entry-title,
    h1.page-title { font-size: 2.5rem; }
}

/* === Texto base === */
.site-content-wrap p,
.site-content-wrap li,
.site-content-wrap td,
.site-content-wrap th {
    color: var(--color-text);
    line-height: 1.6;
}

/* === Links globales (excepciones para botones/logos del header/footer) === */
.site-content-wrap a:not(.btn-primary):not(.btn-secondary):not(.nav-cta):not(.social-icon):not(.logo):not(.ssv-cta-btn):not(.button) {
    color: var(--color-accent);
    transition: opacity 0.3s;
}
.site-content-wrap a:not(.btn-primary):not(.btn-secondary):not(.nav-cta):not(.social-icon):not(.logo):not(.ssv-cta-btn):not(.button):hover {
    opacity: 0.8;
}

/* === Selección de texto === */
::selection { background: var(--color-accent); color: #000; }

/* === Asegura que el menú móvil no se solape con el contenido tras el header === */
.nav.open + .site-content-wrap,
.nav.open ~ * { /* nada – mantenemos el comportamiento del CSS de style.css */ }