/**
 * Storefront Mobile Footer Accordion
 * Estilos para dispositivos móveis
 */

/* Estilos para mobile (aplicado via JavaScript baseado no breakpoint) */
body.smfa-mobile-active .site-footer .footer-widgets .widget {
    margin-bottom: 1.5em;
}

/* Título do widget - agora clicável */
body.smfa-mobile-active .site-footer .footer-widgets .widget-title {
    position: relative;
    cursor: pointer;
    padding-right: 40px;
    margin-bottom: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    transition: color 0.3s ease;
}

body.smfa-mobile-active .site-footer .footer-widgets .widget-title:hover {
    opacity: 0.8;
}

/* Ícone de expansão */
body.smfa-mobile-active .site-footer .footer-widgets .widget-title::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Ícone quando expandido */
body.smfa-mobile-active .site-footer .footer-widgets .widget-title.smfa-active::after {
    content: '−';
    transform: translateY(-50%) rotate(0deg);
}

/* Variação: Setas */
body.smfa-icon-arrow.smfa-mobile-active .site-footer .footer-widgets .widget-title::after {
    content: '▼';
    font-size: 16px;
}

body.smfa-icon-arrow.smfa-mobile-active .site-footer .footer-widgets .widget-title.smfa-active::after {
    content: '▲';
}

/* Variação: Chevrons */
body.smfa-icon-chevron.smfa-mobile-active .site-footer .footer-widgets .widget-title::after {
    content: '›';
    font-size: 20px;
    transform: translateY(-50%) rotate(90deg);
}

body.smfa-icon-chevron.smfa-mobile-active .site-footer .footer-widgets .widget-title.smfa-active::after {
    transform: translateY(-50%) rotate(-90deg);
}

/* Conteúdo do widget - escondido por padrão em mobile */
body.smfa-mobile-active .site-footer .footer-widgets .widget > *:not(.widget-title) {
    display: none;
    overflow: hidden;
}

/* Conteúdo visível quando expandido */
body.smfa-mobile-active .site-footer .footer-widgets .widget.smfa-open > *:not(.widget-title) {
    display: block;
    animation: smfaSlideDown 0.3s ease;
}

/* Animação de slide down */
@keyframes smfaSlideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* Melhorias visuais */
body.smfa-mobile-active .site-footer .footer-widgets .widget {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1em;
}

body.smfa-mobile-active .site-footer .footer-widgets .widget:last-child {
    border-bottom: none;
}

/* Espaçamento do conteúdo quando expandido */
body.smfa-mobile-active .site-footer .footer-widgets .widget.smfa-open > *:not(.widget-title) {
    margin-top: 1em;
}

/* Estilos para listas de menus */
body.smfa-mobile-active .site-footer .footer-widgets .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.smfa-mobile-active .site-footer .footer-widgets .widget ul li {
    padding: 0.5em 0;
}

/* Remover estilos em desktop */
@media screen and (min-width: 769px) {
    body.smfa-mobile-active .site-footer .footer-widgets .widget-title {
        cursor: default;
        padding-right: 0;
    }
    
    body.smfa-mobile-active .site-footer .footer-widgets .widget-title::after {
        display: none;
    }
    
    body.smfa-mobile-active .site-footer .footer-widgets .widget > *:not(.widget-title) {
        display: block !important;
    }
}

/* Acessibilidade */
body.smfa-mobile-active .site-footer .footer-widgets .widget-title:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Transição suave */
body.smfa-mobile-active .site-footer .footer-widgets .widget * {
    transition: all 0.3s ease;
}