/*
Theme Name: Suore Custom Theme
Author: Luis Felipe Pulgar / Desarrollador
Description: Tema personalizado a medida para Suore Divina Volonta
Version: 1.2.0
*/

/* =========================================================================
   0. TOKENS
   ========================================================================= */
:root {
    --sdv-navy:        #1e3a8a;
    --sdv-navy-hover:  #1e40af;
    --sdv-navy-soft:   #3b62ad;
    --sdv-green:       #047857;
    --sdv-green-light: #059669;
    --sdv-red:         #e74c3c;
    --sdv-line:        #e5e7eb;
    --sdv-muted:       #6b7280;
}

/* =========================================================================
   1. MENU PRINCIPAL  —  UNICA FUENTE DE VERDAD
   -------------------------------------------------------------------------
   No hay CSS de menu en header.php. No se usa !important en ningun lado.

   Las clases .nav-depth-N (en cada <ul>), .nav-item-N y .has-sub (en cada
   <li>) las emite WordPress desde el servidor (ver los filtros
   nav_menu_css_class y nav_menu_submenu_css_class en functions.php).
   Por eso no hay flash de estilos y no dependemos de `ul ul ul`.

   La visibilidad la maneja la clase .is-open que pone el JS del header.
   Nunca :hover directo -> el mouse puede cruzar hasta el submenu sin que
   se cierre.
   ========================================================================= */

/* El fondo y el color van aca ademas de en las clases de Tailwind: si
   Tailwind se compila en el navegador, sus utilidades llegan tarde y la
   barra se veria blanca por un instante. Este bloque se aplica de una. */
.main-navigation {
    position: relative;
    z-index: 60;
    background-color: var(--sdv-navy);
    color: #ffffff;
}

.main-navigation ul { margin: 0; padding: 0; list-style: none; }
.main-navigation li { margin: 0; padding: 0; position: relative; }

.main-navigation a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}

/* Flecha de los items que tienen hijos */
.main-navigation .has-sub > a::after {
    content: "";
    display: inline-block;
    width: .36rem;
    height: .36rem;
    margin-left: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    vertical-align: middle;
    opacity: .75;
    transition: transform .18s ease;
}

/* -------------------------------------------------------------------------
   1.a  MOVIL (< 768px): acordeon. El submenu empuja, no tapa.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .main-navigation ul { display: block; width: 100%; }

    .main-navigation a {
        padding: .85rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .main-navigation .nav-item-1 > a {
        font-size: .8125rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .main-navigation .has-sub > a::after { float: right; margin-top: .4rem; }
    .main-navigation li.is-open > a::after { transform: rotate(-135deg); margin-top: .65rem; }

    /* position: static -> queda en el flujo y desplaza lo de abajo */
    .main-navigation .nav-depth-2,
    .main-navigation .nav-depth-3,
    .main-navigation .nav-depth-4 {
        display: none;
        position: static;
        background-color: rgba(0, 0, 0, .18);
    }

    .main-navigation li.is-open > ul { display: block; }

    .main-navigation .nav-depth-2 > li > a { padding-left: 2rem; font-size: .875rem; }
    .main-navigation .nav-depth-3 { background-color: rgba(0, 0, 0, .3); }
    .main-navigation .nav-depth-3 > li > a { padding-left: 3rem; font-size: .8125rem; color: #dbeafe; }
    .main-navigation .nav-depth-4 > li > a { padding-left: 4rem; font-size: .8125rem; color: #dbeafe; }
}

/* -------------------------------------------------------------------------
   1.b  DESKTOP (>= 768px)
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .main-navigation .nav-depth-1 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;   /* CLAVE: el <li> ocupa TODO el alto de la barra */
    }

    .main-navigation .nav-item-1 { display: flex; align-items: stretch; }

    .main-navigation .nav-item-1 > a {
        display: flex;
        align-items: center;
        padding: 14px 20px;     /* el enlace llena la barra: cero hueco de hover */
        font-size: .8125rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    .main-navigation .nav-item-1 > a:hover,
    .main-navigation .nav-item-1.is-open > a {
        background-color: var(--sdv-navy-hover);
        color: #ffffff;
    }

    /* Cajas flotantes: nivel 2 en adelante */
    .main-navigation .nav-depth-2,
    .main-navigation .nav-depth-3,
    .main-navigation .nav-depth-4 {
        display: none;
        position: absolute;
        min-width: 15rem;
        max-width: 21rem;
        background-color: #ffffff;
        border: 1px solid var(--sdv-navy);
        box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .45);
        z-index: 1000;
    }

    /* Nivel 2: justo debajo de la barra */
    .main-navigation .nav-depth-2 { top: 100%; left: 0; border-top: none; }

    /* Nivel 3 y 4: al costado, pegados (0 px de hueco para no perder el hover) */
    .main-navigation .nav-depth-3,
    .main-navigation .nav-depth-4 { top: -1px; left: 100%; }

    /* Volteo automatico si no cabe a la derecha (lo activa el JS) */
    .main-navigation .nav-depth-3.flip,
    .main-navigation .nav-depth-4.flip { left: auto; right: 100%; }

    .main-navigation .nav-depth-2 a,
    .main-navigation .nav-depth-3 a,
    .main-navigation .nav-depth-4 a {
        padding: 12px 18px;
        color: var(--sdv-navy);
        font-size: .875rem;
        font-weight: 600;
        line-height: 1.35;
        white-space: normal;
        border-bottom: 1px solid var(--sdv-line);
    }

    .main-navigation .nav-depth-2 > li:last-child > a,
    .main-navigation .nav-depth-3 > li:last-child > a,
    .main-navigation .nav-depth-4 > li:last-child > a { border-bottom: none; }

    .main-navigation .nav-depth-2 a:hover,
    .main-navigation .nav-depth-3 a:hover,
    .main-navigation .nav-depth-4 a:hover,
    .main-navigation .nav-depth-2 li.is-open > a,
    .main-navigation .nav-depth-3 li.is-open > a {
        background-color: var(--sdv-navy);
        color: #ffffff;
    }

    /* Dentro del dropdown la flecha apunta a la derecha */
    .main-navigation .nav-depth-2 .has-sub > a::after,
    .main-navigation .nav-depth-3 .has-sub > a::after {
        float: right;
        transform: rotate(-45deg);
        margin-top: .35rem;
    }

    .main-navigation li.is-open > ul { display: block; }
}

/* =========================================================================
   2. TIPOGRAFIA DEL CONTENIDO  (the_content)
   Reemplaza a la clase `prose`, que NO existe sin el plugin typography.
   Usar <div class="sdv-content"> alrededor de the_content().
   ========================================================================= */
.sdv-content { color: #374151; font-size: 1rem; line-height: 1.75; }
.sdv-content > * + * { margin-top: 1.15em; }

.sdv-content h1,
.sdv-content h2,
.sdv-content h3,
.sdv-content h4 { color: var(--sdv-navy); font-weight: 800; line-height: 1.25; }
.sdv-content h2 { font-size: 1.5rem; margin-top: 2rem; }
.sdv-content h3 { font-size: 1.2rem; margin-top: 1.6rem; }
.sdv-content h4 { font-size: 1.05rem; margin-top: 1.4rem; }

.sdv-content a { color: var(--sdv-green); text-decoration: underline; text-underline-offset: 2px; }
.sdv-content a:hover { color: var(--sdv-navy); }

.sdv-content ul { list-style: disc; padding-left: 1.5rem; }
.sdv-content ol { list-style: decimal; padding-left: 1.5rem; }
.sdv-content li + li { margin-top: .4rem; }

.sdv-content img { max-width: 100%; height: auto; }
.sdv-content strong { color: #111827; font-weight: 700; }

.sdv-content blockquote {
    border-left: 3px solid var(--sdv-green);
    padding: .25rem 0 .25rem 1rem;
    color: #4b5563;
    font-style: italic;
}

.sdv-content table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sdv-content th,
.sdv-content td { border: 1px solid var(--sdv-line); padding: .5rem .75rem; text-align: left; }
.sdv-content th { background: #f9fafb; color: var(--sdv-navy); }

/* =========================================================================
   3. UTILIDADES DEL TEMA
   ========================================================================= */

/* Titulo de seccion con subrayado verde (mismo look del sidebar del home) */
.sdv-eyebrow {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1f2937;
    border-bottom: 2px solid var(--sdv-green-light);
    padding-bottom: .25rem;
}

/* Enlaces sobre fondo oscuro (categorias en los banners) */
.sdv-inv-links a { color: #bfdbfe; text-decoration: none; }
.sdv-inv-links a:hover { color: #ffffff; text-decoration: underline; }

/* =========================================================================
   4. PAGINACION  (the_posts_pagination)
   ========================================================================= */
.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
}

.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .75rem;
    border: 1px solid var(--sdv-line);
    background: #ffffff;
    color: var(--sdv-navy);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current {
    background: var(--sdv-navy);
    border-color: var(--sdv-navy);
    color: #ffffff;
}

.navigation.pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: var(--sdv-muted);
}

/* Texto solo para lectores de pantalla (WP lo emite, el tema debe ocultarlo) */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}