/*
 * YMK Nav Icons — Estilos
 * Iconos SVG en menú de navegación principal (desktop + móvil)
 * Futuro: este archivo vivirá en ymk-nav-icons/assets/css/ymk-nav-icons.css
 */

/* ── Icono base ─────────────────────────────────────────────────────────────── */

a.ymk-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Icono de idioma (TranslatePress) ───────────────────────────────────────── */

a.ymk-nav-icon--lang {
    gap: 0.2rem;
}

span.ymk-nav-icon-lang-code {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
}

/* ── Badge (contador de carrito) ────────────────────────────────────────────── */

span.ymk-nav-icon-count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.2rem;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    background-color: var(--wp--preset--color--ymk-btn-bg);
    color: var(--wp--preset--color--ymk-btn-text);
    /* z-index positivo: el badge debe quedar SOBRE el icono, no detrás */
    z-index: 1;
    pointer-events: none;
}

/* ── Estado activo / current ────────────────────────────────────────────────── */

.ymk-rules .primary-navigation a.ymk-nav-icon.current-menu-item,
.ymk-rules .primary-navigation a.ymk-nav-icon.current-menu-item svg {
    color: var(--header--color-link-hover, var(--header--color-text));
    fill: var(--header--color-link-hover, var(--header--color-text));
}

/* ── Separación visual: primer icono tras el botón de menú móvil ────────────── */
/*    El selector original (.menu-button + .ymk-nav-icon) nunca aplica en móvil  */
/*    porque los iconos están DENTRO de .menu-button-container, antes del botón. */
/*    Usamos gap en el contenedor en su lugar (ver sección móvil más abajo).     */

/* ── Desktop: iconos en header-actions ──────────────────────────────────────── */

@media (min-width: 1025px) {
    ul.header-actions li.ymk-nav-icon {
        display: flex;
        align-items: center;
    }
}

/* ── Móvil: iconos ocultos dentro del primary-menu-container ────────────────── */

@media (max-width: 1024px) {
        li.ymk-nav-icon a {
        display:none !important
    }
}

/* ── Móvil: iconos en .menu-button-container (antes del botón hamburguesa) ──── */

.menu-button-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.primary-navigation a.ymk-mobile-icon {
    padding: 10px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Botón hamburguesa: texto oculto, icono sin margen ─────────────────────── */

button#primary-mobile-menu {
    font-size: 0;
}

button#primary-mobile-menu svg {
    margin: 0 !important;
}

/* ── Menú abierto en móvil: contenedor no colapsa ──────────────────────────── */

.primary-navigation-open .menu-button-container {
    width: auto !important;
}