/* Menús Padre > Hijo: [ic_zonas_municipios], [ic_categorias_subcategorias] */

/* -----------------------------------------------------------------------------
 * Base común.
 * -------------------------------------------------------------------------- */
.ic-sm {
    position: relative;
}

.ic-sm ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ic-sm a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75em;
    text-decoration: none;
}

/* El <li> es estático para que el submenú se alinee con la parte superior de la lista. */
.ic-sm__parent {
    position: static;
}

/* Padres (zonas / categorías): negro con ligero engrosado.
   !important: los estilos de enlace de Elementor (por elemento) tienen más especificidad. */
.ic-sm .ic-sm__parent-link,
.ic-sm .ic-sm__parent-link .ic-sm__label {
    color: #000 !important;
    text-shadow: 0 0 .3px #000 !important;
}

.ic-sm__arrow {
    flex: 0 0 auto;
    transform: rotate(45deg);
}

/* -----------------------------------------------------------------------------
 * Tablet y móvil (≤1024px): diseño original (desplegable lateral blanco).
 * -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ic-sm {
        --ic-sm-width: 300px;
        --ic-sm-sub-width: 260px;
        --ic-sm-bg: #fff;
        --ic-sm-sub-bg: #fff;
        --ic-sm-color: inherit;
        --ic-sm-hover-bg: rgba(0, 0, 0, .05);
        --ic-sm-hover-color: #000;
        --ic-sm-border: rgba(0, 0, 0, .08);
        --ic-sm-padding: .55em 1em;
        --ic-sm-shadow: 0 6px 18px rgba(0, 0, 0, .12);
        --ic-sm-max-height: none;
        font-size: inherit;
        line-height: 1.3;
    }

    .ic-sm a {
        padding: var(--ic-sm-padding);
        color: var(--ic-sm-color);
        transition: background-color .15s, color .15s;
    }

    .ic-sm a:hover,
    .ic-sm a:focus-visible,
    .ic-sm__parent.is-open > a {
        background: var(--ic-sm-hover-bg);
        color: var(--ic-sm-hover-color);
    }

    .ic-sm__parents {
        position: relative;
        width: var(--ic-sm-width);
        background: var(--ic-sm-bg);
    }

    .ic-sm__arrow {
        width: .45em;
        height: .45em;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        opacity: .6;
    }

    .ic-sm__children {
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 10;
        width: var(--ic-sm-sub-width);
        min-height: 100%;
        max-height: var(--ic-sm-max-height);
        overflow-y: auto;
        background: var(--ic-sm-sub-bg);
        border-left: 1px solid var(--ic-sm-border);
        box-shadow: var(--ic-sm-shadow);
        visibility: hidden;
        opacity: 0;
        transition: opacity .15s, visibility .15s;
    }

    /* Sin JS: hover/focus puro. Con JS: clase .is-open (con hover intent). */
    .ic-sm:not(.is-js) .ic-sm__parent:hover > .ic-sm__children,
    .ic-sm:not(.is-js) .ic-sm__parent:focus-within > .ic-sm__children,
    .ic-sm__parent.is-open > .ic-sm__children {
        visibility: visible;
        opacity: 1;
    }
}

/* Móvil (≤767px): acordeón. */
@media (max-width: 767px) {
    .ic-sm__parents {
        width: 100%;
    }

    .ic-sm__children {
        position: static;
        display: none;
        width: 100%;
        min-height: 0;
        max-height: none;
        border-left: 0;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
    }

    .ic-sm__child-link {
        padding-left: 2em;
    }

    .ic-sm__parent.is-open > .ic-sm__children {
        display: block;
    }

    .ic-sm__arrow {
        transform: rotate(135deg);
        transition: transform .15s;
    }

    .ic-sm__parent.is-open .ic-sm__arrow {
        transform: rotate(-45deg);
    }
}

/* -----------------------------------------------------------------------------
 * Escritorio (≥1025px): diseño aragonartesano.com — desplegable de 1200px,
 * fondo gris, padres a la izquierda e hijos a su derecha.
 * -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .ic-sm {
        --ic-sm-container: 1200px;
        --ic-sm-width: 390px;
        --ic-sm-bg: #f2f2f2;
        --ic-sm-color: #222;
        --ic-sm-hover-color: #000;
        --ic-sm-arrow-color: #999;
        --ic-sm-font-size: 13px;
        --ic-sm-sub-font-size: 14px;
        --ic-sm-box-padding: 24px;
        --ic-sm-padding: 4px 0;
        --ic-sm-sub-padding: 4px 10px;
        --ic-sm-list-padding: 0;
        /* Ancho fijo (no 100%): el desplegable del menú suele ajustarse al contenido. */
        box-sizing: border-box;
        width: var(--ic-sm-container);
        max-width: 100vw;
        margin: 0;
        padding: var(--ic-sm-box-padding);
        background: var(--ic-sm-bg);
        line-height: 1.3;
        text-align: left;
    }

    .ic-sm *,
    .ic-sm *::before,
    .ic-sm *::after {
        box-sizing: border-box;
    }

    .ic-sm a {
        color: var(--ic-sm-color);
        background: none;
    }

    /* Hover / abierto: subrayado del texto, sin cambio de fondo. */
    .ic-sm a:hover,
    .ic-sm a:focus-visible,
    .ic-sm__parent.is-open > a {
        color: var(--ic-sm-hover-color);
        background: none;
    }

    .ic-sm__parent-link:hover .ic-sm__label,
    .ic-sm__parent-link:focus-visible .ic-sm__label,
    .ic-sm__parent.is-open > .ic-sm__parent-link .ic-sm__label,
    .ic-sm__child-link:hover,
    .ic-sm__child-link:focus-visible {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        color: #000 !important;
    }

    /* Estático: la columna de hijos se posiciona respecto al <nav>. */
    .ic-sm__parents {
        position: static;
        width: var(--ic-sm-width);
        padding: var(--ic-sm-list-padding);
        font-size: var(--ic-sm-font-size);
    }

    .ic-sm__parent-link {
        padding: var(--ic-sm-padding);
    }

    .ic-sm__arrow {
        width: 5px;
        height: 5px;
        margin-right: 2px;
        border-top: 1px solid var(--ic-sm-arrow-color);
        border-right: 1px solid var(--ic-sm-arrow-color);
    }

    /* Desde el final de la columna de padres hasta el borde derecho del <nav>, a todo el alto
       respetando el padding del desplegable (scroll si no cabe). */
    .ic-sm__children {
        position: absolute;
        top: var(--ic-sm-box-padding);
        bottom: var(--ic-sm-box-padding);
        left: calc(var(--ic-sm-box-padding) + var(--ic-sm-width));
        right: var(--ic-sm-box-padding);
        z-index: 10;
        overflow-y: auto;
        padding: var(--ic-sm-list-padding);
        background: var(--ic-sm-bg);
        font-size: var(--ic-sm-sub-font-size);
        visibility: hidden;
    }

    .ic-sm__child-link {
        display: block;
        padding: var(--ic-sm-sub-padding);
    }

    /* Sin JS: hover/focus puro. Con JS: clase .is-open (con hover intent). */
    .ic-sm:not(.is-js) .ic-sm__parent:hover > .ic-sm__children,
    .ic-sm:not(.is-js) .ic-sm__parent:focus-within > .ic-sm__children,
    .ic-sm__parent.is-open > .ic-sm__children {
        visibility: visible;
    }

}