/**
 * Header móvil y tablet: layout fullwidth + logo a la izquierda.
 * Mismas reglas para transparente y scrolled (#masthead.scrolled).
 * @package KenkatsuTheme
 */

/* ========== TABLET (768px - 1024px): mismo problema que móvil ========== */
@media (min-width: 768px) and (max-width: 1024px) {
    #masthead #mobile-header .site-main-header-wrap,
    #masthead #mobile-header .site-header-row-container,
    #masthead.scrolled #mobile-header .site-main-header-wrap,
    #masthead.scrolled #mobile-header .site-header-row-container {
        justify-content: flex-start !important;
    }
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner,
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner > .site-container {
        padding-left: calc(1.5rem - 20px) !important;
        padding-right: 1.5rem !important;
    }
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-header-row-container-inner,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-header-row-container-inner > .site-container {
        padding-left: calc(1.5rem - 30px) !important;
        padding-right: 1.5rem !important;
    }
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-header-row-container-inner {
        max-width: none !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    #mobile-header .site-header-row-tablet-layout-fullwidth > .site-header-row-container-inner > .site-container,
    #mobile-header .site-header-row-mobile-layout-fullwidth > .site-header-row-container-inner > .site-container,
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner > .site-container,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-header-row-container-inner > .site-container {
        max-width: none !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }
    #masthead #mobile-header .site-main-header-wrap .site-branding,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding,
    #masthead.scrolled #mobile-header .site-main-header-wrap .mobile-site-branding {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
    }
    #masthead #mobile-header .site-main-header-wrap .site-branding .custom-logo,
    #masthead #mobile-header .site-main-header-wrap .site-branding img,
    #masthead #mobile-header .site-main-header-wrap .site-branding a.brand img,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding .custom-logo,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding img,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding .custom-logo,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding img,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding a.brand img,
    #masthead.scrolled #mobile-header .site-main-header-wrap .mobile-site-branding .custom-logo,
    #masthead.scrolled #mobile-header .site-main-header-wrap .mobile-site-branding img {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    #masthead #mobile-header .site-main-header-wrap .site-branding img,
    #masthead #mobile-header .site-main-header-wrap .site-branding .custom-logo,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding img,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding .custom-logo,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding img,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding .custom-logo,
    #masthead.scrolled #mobile-header .site-main-header-wrap .mobile-site-branding img,
    #masthead.scrolled #mobile-header .site-main-header-wrap .mobile-site-branding .custom-logo {
        transform: scale(1.21);
        transform-origin: left center;
    }
}

/* ========== MÓVIL (max 767px) ========== */
@media (max-width: 767px) {
    /* Padres: no centrar en transparente ni en scrolled (Kadence a veces centra al hacer scroll) */
    #masthead #mobile-header .site-main-header-wrap,
    #masthead #mobile-header .site-header-row-container,
    #masthead.scrolled #mobile-header .site-main-header-wrap,
    #masthead.scrolled #mobile-header .site-header-row-container {
        justify-content: flex-start !important;
    }
    /* Padding: logo 20px más a la izquierda (transparente); scrolled 10px más a la izquierda (30px total) */
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner,
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner > .site-container {
        padding-left: calc(1.5rem - 20px) !important;
        padding-right: 1.5rem !important;
    }
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-header-row-container-inner,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-header-row-container-inner > .site-container {
        padding-left: calc(1.5rem - 30px) !important;
        padding-right: 1.5rem !important;
    }
    /* Contenedor interior: ancho completo (transparente y scrolled) */
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-header-row-container-inner {
        max-width: none !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    /* .site-container: ancho completo y alinear a la izquierda (transparente y scrolled) */
    #mobile-header .site-header-row-mobile-layout-fullwidth > .site-header-row-container-inner > .site-container,
    #masthead #mobile-header .site-main-header-wrap .site-header-row-container-inner > .site-container,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-header-row-container-inner > .site-container {
        max-width: none !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }
    /* Logo a la izquierda (transparente y scrolled) */
    #masthead #mobile-header .site-main-header-wrap .site-branding,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding,
    #masthead.scrolled #mobile-header .site-main-header-wrap .mobile-site-branding {
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
    }
    #masthead #mobile-header .site-main-header-wrap .site-branding .custom-logo,
    #masthead #mobile-header .site-main-header-wrap .site-branding img,
    #masthead #mobile-header .site-main-header-wrap .site-branding a.brand img,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding .custom-logo,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding img,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding .custom-logo,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding img,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding a.brand img,
    #masthead.scrolled #mobile-header .site-main-header-wrap .mobile-site-branding .custom-logo,
    #masthead.scrolled #mobile-header .site-main-header-wrap .mobile-site-branding img {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    /* Logo ~21% más grande en ambos headers (1.1 × 1.1) */
    #masthead #mobile-header .site-main-header-wrap .site-branding img,
    #masthead #mobile-header .site-main-header-wrap .site-branding .custom-logo,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding img,
    #masthead #mobile-header .site-main-header-wrap .mobile-site-branding .custom-logo,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding img,
    #masthead.scrolled #mobile-header .site-main-header-wrap .site-branding .custom-logo,
    #masthead.scrolled #mobile-header .site-main-header-wrap .mobile-site-branding img,
    #masthead.scrolled #mobile-header .site-main-header-wrap .mobile-site-branding .custom-logo {
        transform: scale(1.21);
        transform-origin: left center;
    }
}