/*
Theme Name:   ConsultorSEO
Theme URI:    https://consultorseo.es
Description:  Child theme de Astra para ConsultorSEO
Author:       Fabio Gomez
Author URI:   https://consultorseo.es
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  consultorseo
*/

/* ============================================
   ConsultorSEO — Design System
   ============================================ */

/* ── Links ─────────────────────────────────────────────
   Override del color hover/focus de Astra (--ast-global-color-1
   suele ser oscuro y se pierde en fondos dark). */
a:hover,
a:focus {
    color: #F96800;
}

/* ── Botones naranja (primary-gradient) ────────────────
   El texto pasa a oscuro en hover para mantener contraste. */
a.primary-gradient:hover,
a.primary-gradient:focus,
button.primary-gradient:hover,
button.primary-gradient:focus {
    color: #1A0A00;
    text-decoration: none;
}

/* ── Botones Astra / WordPress (fondo azul por defecto) ─
   Texto naranja intenso en hover/focus. */
.ast-button:hover,
.ast-button:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    color: #F96800;
    text-decoration: none;
}

/* Glass nav */
.glass-nav {
    background: rgba(14, 27, 50, 0.6);
    backdrop-filter: blur(20px);
}

/* Architectural grid background */
.bg-architectural-grid {
    background-image:
        linear-gradient(to right, rgba(255, 182, 147, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 182, 147, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
}

/* Glows & shadows */
.strategy-glow {
    box-shadow: 0 0 40px -10px rgba(249, 104, 0, 0.5);
}

.editorial-shadow {
    box-shadow: 0 30px 30px -5px rgba(0, 0, 0, 0.15);
}

/* Primary CTA — naranja sólido, letra blanca, hover a naranja claro con letra negra */
.primary-gradient {
    background: #F96800;
    color: #ffffff !important;
    transition: background 0.2s ease, color 0.2s ease;
}

a.primary-gradient:hover,
a.primary-gradient:focus,
button.primary-gradient:hover,
button.primary-gradient:focus {
    background: #FFB693;
    color: #051329 !important;
    text-decoration: none;
}

/* Material Symbols filled variant */
.material-symbols-outlined.fill-1 {
    font-variation-settings: 'FILL' 1;
}

/* ============================================
   Navegación — Desktop Dropdowns
   ============================================ */

/* Fondo de los dropdowns (glass del design system) */
.nav-dropdown {
    background: rgba(18, 32, 54, 0.96);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.5);
}

/* Separador visual entre items de primer nivel */
.nav-item + .nav-item {
    margin-left: 0.25rem;
}

/* ============================================
   Navegación — Mobile
   ============================================ */

/* Líneas del hamburger en estado abierto */
#nav-toggle[aria-expanded="true"] .nav-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
#nav-toggle[aria-expanded="true"] .nav-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
#nav-toggle[aria-expanded="true"] .nav-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Separador entre items del menú mobile */
.mobile-nav > .mobile-nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-nav > .mobile-nav-item:last-child {
    border-bottom: none;
}

/* Rotación del icono expand_more al abrir submenú */
.mobile-nav-item a[aria-expanded="true"] > .material-symbols-outlined {
    transform: rotate(180deg);
}

/* ============================================
   Blog — Override de fondos de Astra
   Astra aplica background: white a .ast-article-post con
   especificidad 0,2,0. Usamos 0,3,0 para ganarle sin !important.
   ============================================ */

/* Blog listing — fondos oscuros del design system */
.ast-separate-container .ast-article-post.bg-surface-container,
.ast-separate-container .ast-article-single.bg-surface-container {
    background-color: #122036;
    background-image: none;
}

.ast-separate-container .ast-article-post.bg-surface-container-high,
.ast-separate-container .ast-article-single.bg-surface-container-high {
    background-color: #1d2a41;
    background-image: none;
}

/* Single post — el article usa prose sobre fondo blanco; dejamos que bg-white gane */
.ast-separate-container .ast-article-post.bg-white,
.ast-separate-container .ast-article-single.bg-white {
    background-color: #ffffff;
    background-image: none;
}

/* Neutraliza padding y borde que Astra aplica a cada artículo.
   Especificidad 0,3,0 gana sobre el 0,2,0 de Astra sin !important.
   No se toca margin: lo controla cada tarjeta con clases Tailwind. */
.ast-separate-container .ast-article-post.rounded-2xl,
.ast-separate-container .ast-article-single.rounded-2xl {
    padding: 0;
    border-bottom: none;
}

/* ast-grid-common-col añade 20px de padding lateral en cada artículo —
   lo quitamos para que el gap del grid CSS controle el espaciado real. */
.ast-separate-container .ast-article-post.ast-grid-common-col.rounded-2xl {
    padding-left: 0;
    padding-right: 0;
}

/* El contenedor #primary de Astra añade 4em de padding vertical —
   lo quitamos en las plantillas donde gestionamos el layout nosotros. */
.ast-separate-container #primary.site-main {
    padding: 0;
}