/*
 * Global Responsive Styles (WordPress Core Standard)
 * Applies to all sites in the network
 */

/* ─────────────────────────────────────────────
   BREAKPOINTS NATIVOS DE WORDPRESS CORE
   ───────────────────────────────────────────── */
@media (max-width: 1200px) {
    #nav-top-container {
        position: absolute;
        top: 5px;
    }

    #search-top-container {
        margin-top: 12px;
    }

    .nav-main {
         gap: 8px !important;
    }
}

/* ─────────────────────────────────────────────
   CUSTOM NAVIGATION BREAKPOINT (768px)
   Forzamos el menú horizontal hasta los 768px
   ───────────────────────────────────────────── */
@media (min-width: 769px) {
    /* Ocultar botón hamburguesa */
    .nav-main .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    /* Mostrar contenedor de navegación */
    .nav-main .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: block !important;
        position: static !important;
        z-index: auto !important;
        background-color: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
    }

    /* Forzar disposición horizontal de los items */
    .nav-main .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 15px !important;
    }

    /* Ocultar botón de cierre */
    .nav-main .wp-block-navigation__responsive-container-close {
        display: none !important;
    }
}

/* Large Tablet / Small Desktop (1024px) */
@media (max-width: 1024px) {
    .nav-top {
        gap: 5px !important;
        letter-spacing: -0.5px !important;
        margin-right: 5px !important;
    }

    .nav-main {
        gap: 7px !important;
    }

    /* Ajustes para iPad Pro y portátiles pequeños */
}

/* Desktop / Large Tablet (> 960px) */
@media (max-width: 960px) {
    .header-derecha {
        flex-flow: column;
        align-items: end !important;
        gap: 5px;
    }

    .nav-main {
        line-height: 12px;
        max-width: 500px;
    }

    .footer-menu {
        font-size: 0.75rem !important;
        font-weight: 500 !important;
    }

    .wp-block-navigation__submenu-container {
      margin-top: 4px !important; /* Desplazar a la derecha */
    }

    /* Ajustes para pantallas intermedias */
}

/* Tablet (WordPress Standard: 782px) */
/* Es el punto donde las columnas nativas suelen apilarse */
@media (max-width: 782px) {
    .nav-main {
        max-width: 350px;
    }

    header .wp-block-search__inside-wrapper {
        width: unset !important
    }

    header .wp-block-search__input {
        max-width: 110px;
    }

    .footer-menu {
        font-size: 0.60rem !important;
        font-weight: 400 !important;
        width: 80%;
    }

}

/* Mobile Large (WordPress Standard: 600px) */
@media (max-width: 600px) {

    .header-social-links {
        display: none !important;
    }

    .nav-top li a {
        font-size: 0.7rem !important;
    }

    .nav-main {
        max-width: 360px;

        ul {
            font-weight: 500 !important;
            font-size: 0.78rem;
            line-height: 4px;
        }
    }

    header .wp-block-search {
        display: none !important;
    }

    .footer-menu {
        font-size: 0.60rem !important;
        font-weight: 400 !important;
        width: 80%;
    }

    .footer-copy {
        font-size: 0.60rem !important;
    }
}

/* ─────────────────────────────────────────────
   MOBILE OVERLAY MENU STYLES
   ───────────────────────────────────────────── */

/* Ajustes globales para el botón hamburguesa */
.wp-block-navigation-navigation-layers__open-button,
.wp-block-navigation__responsive-container-open {
    padding: 0 !important;
    background: transparent !important;
    color: var(--wp--preset--color--primary) !important;
}

.wp-block-navigation__responsive-container-open svg {
    width: 32px;
    height: 32px;
}

/* El menú desplegable (overlay) */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;

}

.wp-block-navigation__responsive-container-content {
    padding-right: 10px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    font-size: 1.5rem !important;
    border-bottom: 1px solid #eee;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    gap: 0 !important;
}

/* Mobile Small (WordPress Standard: 480px) */
@media (max-width: 480px) {
    /* Ajustes para móviles pequeños */
    .custom-logo {
        max-width: 165px !important;
        height: 70px !important;
    }

}