/* mobile-toggle.css — regole per il toggle mobile/desktop
   Includere in layout.css (o come file separato in _Layout.cshtml)
   ═══════════════════════════════════════════════════════════════ */

/* ── Checkbox toggle nell'header — visibile solo su desktop ── */
.jp-mobile-toggle-wrap {
    display: none;               /* nascosto su mobile e tablet */
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 8px;
}

@media (min-width: 768px) {
    .jp-mobile-toggle-wrap {
        display: flex;
    }
}

.jp-mobile-toggle-wrap label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── .force-mobile: sovrascrive i breakpoint come se fossimo a 375px ── */

/* Reset generale */
html.force-mobile * {
    box-sizing: border-box;
}

/* Simula viewport mobile: limita la larghezza e reimposta overflow */
html.force-mobile body {
    max-width: 390px;
    margin: 0 auto;
    overflow-x: hidden;
}

/* jp-main-wrap: comportamento mobile */
html.force-mobile .jp-main-wrap {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Nasconde elementi desktop-only */
html.force-mobile .d-lg-block,
html.force-mobile .d-md-block {
    display: none !important;
}

/* Forza layout colonna su flex container */
html.force-mobile .home-layout {
    flex-direction: column !important;
    height: auto !important;
}

html.force-mobile .home-photo {
    flex: 0 0 auto !important;
    height: clamp(200px, 45vw, 320px) !important;
    width: 100% !important;
}

html.force-mobile .home-content {
    flex: 1 !important;
    padding: 24px 16px 40px !important;
    gap: 16px !important;
    justify-content: flex-start !important;
}

/* Menu: forza 1 colonna */
html.force-mobile .menu-card-grid {
    grid-template-columns: 1fr !important;
}

/* Pannelli Admin: forza 1 colonna */
html.force-mobile .adm-grid {
    grid-template-columns: 1fr !important;
}

/* Indicatore visivo che il toggle è attivo */
html.force-mobile .jp-mobile-toggle-wrap label {
    color: #ff9800;
}

html.force-mobile .jp-mobile-toggle-wrap label::before {
    content: "📱 ";
}