/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/


/*css agregados--------------------*/

 /* Centrar ítems del menú en desktop */
@media (min-width: 992px) {
    #nav-main .navbar-nav {
        width: 100%;
        justify-content: center;
        gap: 15px; /* Espacio entre botones del menú */
    }
}

/* Ajuste de altura para que el contenido no quede tapado por el header sticky */

@media (max-width: 991px) {
    body {
        padding-top: 85px;
    }
}

/* Estilos para los iconos Woo dentro del menú Offcanvas en Mobile */
#offcanvas-navbar .header-actions, 
#offcanvas-navbar .d-flex {
    font-size: 1.2rem; /* Iconos un poco más grandes */
}

/* Estilo para el contenedor de iconos en el menú móvil */
.offcanvas-body .bg-light {
    border: 1px solid #eee;
}

/* Ajuste de los enlaces de WooCommerce para que no se vean amontonados */
#offcanvas-navbar a {
    color: #333;
    text-decoration: none;
    position: relative;
}

/* Si usas los badges de contador de bootScore para el carrito */
#offcanvas-navbar .badge {
    position: absolute;
    top: -5px;
    right: -10px;
    font-size: 0.7rem;
}

/* Estilo para los links de cuenta/carrito en el Offcanvas */
#offcanvas-navbar .nav-link {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Color de los iconos para que resalten */
#offcanvas-navbar .fa-solid {
    width: 20px;
    text-align: center;
}

/* Mejorar el aspecto del badge del carrito dentro del link */
#offcanvas-navbar .badge {
    padding: 0.35em 0.5em;
}

/* Separador sutil después de los links de usuario/carrito */
#offcanvas-navbar ul.navbar-nav:first-child {
    margin-top: -0.5rem;
}

/* --- CONFIGURACIÓN DE COLORES PERSONALIZADOS --- */

/* 1. Fondo del Header y Menús Offcanvas */
.site-header, 
#nav-main, 
.offcanvas, 
.offcanvas-top,
.offcanvas-header,
.sticky-top.bg-body-tertiary { /* Sobreescribe la clase de bootscore */
    background-color: #8C322A !important;
    color: #F2F2F2;
}

/* 2. Color de Fuente para Enlaces y Textos */
.site-header .nav-link, 
.site-header .navbar-brand,
.site-header .btn,
.site-header i,
.offcanvas .nav-link,
.offcanvas .offcanvas-title,
.offcanvas .btn-close {
    color: #F2F2F2 !important;
}

/* 3. Efecto Hover (Rojo #FF3D3D) */
.site-header .nav-link:hover, 
.site-header .navbar-brand:hover,
.site-header .btn:hover,
.site-header .btn:hover i,
.offcanvas .nav-link:hover {
    color: #FF3D3D !important;
}

/* 4. Ajuste especial para los botones tipo "outline" */
.site-header .btn-outline-secondary {
    border-color: #F2F2F2;
}

.site-header .btn-outline-secondary:hover {
/*    background-color: #FF3D3D;
    border-color: #FF3D3D;*/
    color: #F2F2F2 !important;
}

/* 5. Ajuste del Buscador (Input text) */
#offcanvas-search input[type="search"] {
    background-color: #333333; /* Un gris ligeramente más claro para el input */
    border: 1px solid #444;
    color: #F2F2F2;
}

#offcanvas-search input[type="search"]::placeholder {
    color: #888;
}

/* 6. Botón de cerrar (X) en los Offcanvas */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Hace la X blanca */
}

/* 7. Líneas divisorias */
.border-bottom {
    border-color: #444 !important;
}

/* --- VARIABLES Y BASES --- */
:root {
    --bg-dark: #262626;
    --text-light: #F2F2F2;
    --accent-red: #FF3D3D;
    --card-bg: #333333;
}

/* --- TIPOGRAFÍAS --- */
body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6, .news-title, .card-title {
    font-family: 'Oxygen', sans-serif;
    font-weight: 900 !important;
    font-style: normal;
}

/* --- COMPONENTES --- */
.btn-red {
    background-color: var(--accent-red);
    color: white !important;
    border: none;
    padding: 10px 25px;
    font-weight: 700;
    font-style: normal;
    transition: 0.3s;
}

.btn-red:hover {
    background-color: #e03535;
    transform: translateY(-2px);
}



.news-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: 0.3s;
    border: 1px solid #444;
}

.news-card:hover {
    border-color: var(--accent-red);
}

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

.popular-list li {
    padding: 12px 0;
    border-bottom: 1px solid #444;
}

.popular-list li a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: bold;
    transition: 0.2s;
}

.popular-list li a:hover {
    color: var(--accent-red);
}

.card {
    background-color: var(--card-bg);
    border: none;
     color: #F2F2F2;
}

.bg-red { background-color: var(--accent-red) !important; }

/* --- ESTILOS DEL FOOTER --- */
footer {
    background-color: #1a1a1a; /* Un tono más oscuro que el cuerpo */
    padding: 60px 0 20px;
    margin-top: 50px;
    color: #aaa;
    border-top: 1px solid #333;
}

footer h3 {
    color: var(--text-light) !important;
    font-family: 'Oxygen', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-links a {
    color: #aaa;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--accent-red);
    padding-left: 5px; /* Pequeño efecto de movimiento */
}

.social-icons a {
    color: #F2F2F2;
    font-size: 1.2rem;
    margin-right: 15px;
    background: #333;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
}

.social-icons a:hover {
    background-color: var(--accent-red);
    color: white;
    transform: translateY(-3px);
}

footer hr {
    border-color: #333;
    opacity: 1;
    margin: 30px 0;
}

footer .small {
    font-style: normal; /* Quitamos el italic del body para el copyright */
}

/* --- ESTILOS DE SINGLE POST --- */

/* Ajuste de imagen principal */
.news-header-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

/* Estilos para el contenido de WordPress (the_content) */
.news-content {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #e0e0e0;
}

.news-content p {
    margin-bottom: 1.5rem;
}

.news-content h2, .news-content h3 {
    color: var(--accent-red);
    margin-top: 2rem;
}


/* Botones de compartir */
.social-sharing a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin: 0 8px;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    transition: transform 0.3s ease, background 0.3s ease;
    background-color: #333; /* Fondo neutro oscuro */
}

.social-sharing a:hover {
    transform: translateY(-5px);
    background-color: var(--accent-red);
}

/* Colores específicos de redes sociales al hacer hover (opcional) */
.social-sharing a.facebook:hover { background-color: #3b5998; }
.social-sharing a.twitter:hover { background-color: #000000; }
.social-sharing a.whatsapp:hover { background-color: #25d366; }
.social-sharing a.linkedin:hover { background-color: #0077b5; }
.social-sharing a.telegram:hover { background-color: #0088cc; }

/* Tipografía de títulos en single */
.font-oxygen {
    font-family: 'Oxygen', sans-serif;
    font-weight: 900;
}

/* --- ESTILOS DE COMENTARIOS --- */

.comments-section h3 {
    font-family: 'Oxygen', sans-serif;
    color: var(--text-light);
    margin-bottom: 30px;
}

/* Lista de comentarios */
/*.comment-list {
    list-style: none;
    padding: 0;
}

.comment-body {
    background: #252525;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 3px solid #444;
}
*/
.comment-author b {
  /*  color: var(--accent-red);*/
}
/*
.comment-metadata a {
    color: #888;
    font-size: 0.85rem;
    text-decoration: none;
}
*/
/* Formulario de comentarios */
#respond {
    background: #1a1a1a;
    padding: 30px;
    border-radius: 10px;
    margin-top: 40px;
}

#reply-title {
    font-size: 1.5rem;
    color: #fff;
}

/* Campos de entrada (Nombre, Email, Web, Comentario) */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
   background-color: #eee !important;
    border: 1px solid #444 !important;
  /*  color: #fff !important;*/
    border-radius: 5px;
    padding: 12px;
    width: 100%;
    margin-bottom: 15px;
}

#commentform textarea:focus,
#commentform input:focus {
    border-color: var(--accent-red) !important;
    outline: none;
    box-shadow: 0 0 5px rgba(255, 61, 61, 0.3);
}

/* Botón de Enviar Comentario */
#commentform .submit {
    background-color: var(--accent-red) !important;
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 5px !important;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

#commentform .submit:hover {
    background-color: #e03535 !important;
    transform: translateY(-2px);
}

/* Etiquetas del formulario */
#commentform label {
    color: #bbb;
    margin-bottom: 5px;
    display: block;
}

/* --- ESTILOS PÁGINA 404 --- */

.text-red {
    color: var(--accent-red) !important;
}

.display-1 {
    font-size: 8rem;
    letter-spacing: -5px;
    line-height: 1;
}

/* Animación de rotación lenta para el icono de disco */
.fa-spin-slow {
    animation: fa-spin 5s linear infinite;
    font-size: 4rem;
    color: #444;
    margin-top: -20px;
    display: block;
}

.error-404-visual {
    position: relative;
    margin-bottom: 2rem;
}

/* Ajuste del buscador en la página 404 */
.search-404 .search-form {
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.search-404 .search-field {
    height: 55px;
    font-size: 1.1rem;
}

.search-404 .search-submit {
    padding: 0 30px;
}

/* Efecto hover en el botón outline */
.btn-outline-light:hover {
    background-color: #f2f2f2;
    color: #121212 !important;
}