/*
Theme Name: Madara-Child
Description:  A child theme for Madara - WordPress Theme for Manga, Novel sites
Author:       Madara
Author URI:   https://mangabooth.com/
Template: madara
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Version: 1.0.3
*/

/* --- ESTILOS PARA LA CUADRÍCULA "NEW MANGA" --- */

/* Título de la sección (ej. "New Manga") */
.home-content .c-blog__heading.style-1 h3.h4 {
    font-size: 24px; /* Tamaño como en mgeko */
    font-weight: 700;
    margin-bottom: 5px;
}

/* Descripción de la sección */
.home-content .c-blog__heading.style-1 .c-blog__heading-text {
    font-size: 15px; /* Tamaño como en mgeko */
    color: #555;
}

/* Cada item individual de la cuadrícula */
.home-content .page-item-detail {
    background: none; /* Quitar el fondo de Madara */
    border: none;
    box-shadow: none; /* Quitar la sombra de Madara */
    margin-bottom: 20px;
}

/* Portada (imagen) */
.home-content .page-item-detail .item-thumb {
    border-radius: 4px; /* Bordes redondeados como mgeko */
    overflow: hidden; /* Asegura que la imagen respete el borde redondeado */
}

/* Ocultar elementos que mgeko no tiene */
.home-content .page-item-detail .item-summary .list-chapter,
.home-content .page-item-detail .item-summary .meta-item,
.home-content .page-item-detail .item-rate,
.home-content .page-item-detail .item-thumb .summary-content,
.home-content .page-item-detail .item-thumb .thumb-overlay {
    display: none;
}

/* Título del manga */
.home-content .page-item-detail .item-summary .h5-title {
    margin-top: 8px; /* Espacio entre imagen y título */
    text-align: left; /* Alineación como mgeko */
}

.home-content .page-item-detail .item-summary .h5-title a {
    color: #333; /* Color de texto (ajustar si usas modo noche) */
    font-size: 15px;
    font-weight: 600; /* Letra un poco más gruesa */
    line-height: 1.4em;
    
    /* Esto simula el 'text2row' de mgeko (limita a 2 líneas) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2.8em; /* 1.4em * 2 líneas */
}

/* --- ESTILOS DE CABECERA (HEADER) --- */

/* Contenedor principal de la cabecera */
.c-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Enlaces del menú principal (Manga Updates, Browse, etc.) */
.c-header .main-menu > li > a {
    color: #333; /* Color de texto oscuro */
    font-weight: 600;
    font-size: 15px;
    text-transform: none; /* Quitar mayúsculas */
}

.c-header .main-menu > li > a:hover {
    color: #3b82f6; /* Color azul al pasar el mouse */
}

/* Botón de Login / Sign In */
.c-header .btn-login a {
    background-color: #3b82f6; /* Color azul de mgeko */
    color: #ffffff !important; /* Texto blanco */
    border-radius: 5px;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    text-transform: uppercase;
}

.c-header .btn-login a:hover {
    background-color: #2563eb; /* Azul un poco más oscuro al pasar el mouse */
}

/* Ocultar "Fan comics" (si lo tienes) y ajustar logo */
.c-header .c-logo .sub-title {
    display: none;
}

.c-header .c-logo {
    padding-top: 10px; /* Ajustar alineación vertical del logo */
}

/* --- ESTILOS DE PIE DE PÁGINA (FOOTER) --- */

.site-footer {
    background-color: #ffffff; /* Fondo blanco */
    border-top: 1px solid #e0e0e0;
    color: #555;
    padding: 30px 0;
}

/* Ocultar títulos de widgets en el footer */
.site-footer .widget-title {
    display: none;
}

/* Alinear el copyright y los enlaces */
.site-footer .c-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Enlaces (Privacy, Terms, etc.) */
.site-footer .menu {
    padding-left: 0;
    list-style: none;
    margin-top: 15px;
}

.site-footer .menu li {
    margin-bottom: 10px;
}

.site-footer .menu li a {
    color: #555;
    text-decoration: none;
    font-weight: 600;
}

.site-footer .menu li a:before {
    content: "> "; /* Añadir el símbolo '>' como en mgeko */
    color: #3b82f6;
}

.site-footer .menu li a:hover {
    color: #3b82f6;
}

/* --- ESTILOS PARA EL SLIDER "Why Sign Up?" - V4 (FORZADO CON !important) --- */

/* Este código es más 'agresivo'. 
  Apunta a la clase '.slider-content' donde sea que esté 
  y usa '!important' para ganar cualquier conflicto.
*/

div.slider-content {
    background-color: rgba(0, 0, 0, 0.45) !important; /* Fondo semitransparente */
    border: 2px solid #ffffff !important;           /* Bordeado blanco */
    border-radius: 10px !important;                  /* Bordes redondeados */
    padding: 30px 35px !important;                   /* Espacio interior */
    text-align: center !important;                   /* Centrado */
    max-width: 650px !important;                     /* Ancho máximo */
    margin: 20px auto !important;                    /* Centrado (con margen superior/inferior) */
    display: block !important;                       /* Asegura que sea visible */
    box-sizing: border-box;                          /* Evita problemas de padding */
}

/* 2. El título (H3) */
div.slider-content h3 {
    color: #ffffff !important; 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); 
    font-size: 30px !important; 
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* 3. Los párrafos (p) */
div.slider-content p {
    color: #ffffff !important; 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    font-size: 17px !important; 
    margin-bottom: 15px !important;
    line-height: 1.5 !important; 
}

/* 4. El botón "Create Account" */
div.slider-content .button {
    display: inline-block !important; /* Asegura visibilidad */
    background-color: #3b82f6 !important; 
    color: #ffffff !important; 
    padding: 12px 30px !important; 
    text-decoration: none !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    margin-top: 15px !important; 
    text-shadow: none !important; 
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Efecto hover para el botón */
div.slider-content .button:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
    transform: scale(1.05) !important; 
}