/**
 * Commandment Page - Mobile Styles
 * App-style design for lovesite.co.il
 * Works with site header and footer
 */

@media (max-width: 768px) {
    /* ========================================
       Page Body - Mobile
       ======================================== */
    body.commandment-page-body {
        background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 50%, #f48fb1 100%) !important;
        overflow-x: hidden !important;
        min-height: 100vh !important;
    }

    /* Accessibility widget positioning */
    .a11y-widget-panel {
        z-index: 9999 !important;
        position: fixed !important;
    }

    /* ========================================
       MOBILE RESTRUCTURE SUPPORT
       ======================================== */

    /* When JS has restructured, hide old content */
    body.mobile-restructured > *:not(.commandment-page-content):not(.mobile-header):not(.mobile-bottom-nav):not(.a11y-widget-panel):not(.a11y-toggle-btn):not(.auth-overlay):not(.pull-to-refresh):not(script):not(style):not(link) {
        display: none !important;
    }

    body.mobile-restructured > .user-top-bar,
    body.mobile-restructured > .site-footer,
    body.mobile-restructured > footer,
    body.mobile-restructured > div:not(.commandment-page-content):not(.a11y-widget-panel):not(.auth-overlay):not(.pull-to-refresh) {
        display: none !important;
    }

    body.mobile-restructured > .commandment-page-content {
        display: block !important;
    }

    /* ========================================
       Content Container - Mobile
       ======================================== */
    .commandment-page-content {
        display: block !important;
        padding: 70px 12px 90px !important;
        min-height: 100vh !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        z-index: 10 !important;
        margin: 0 !important;
    }

    /* ========================================
       Page Header - Mobile
       ======================================== */
    .cmd-page-header {
        border-radius: 16px !important;
        padding: 24px 16px !important;
        margin-bottom: 20px !important;
    }

    .cmd-page-header .header-icon {
        font-size: 3rem !important;
        margin-bottom: 12px !important;
    }

    .cmd-page-header h1 {
        font-size: 1.4rem !important;
        margin-bottom: 8px !important;
    }

    .cmd-page-header .subtitle {
        font-size: 0.95rem !important;
    }

    /* ========================================
       Navigation - Mobile
       ======================================== */
    .cmd-nav {
        flex-direction: row !important;
        justify-content: space-between !important;
        margin-bottom: 20px !important;
        gap: 10px !important;
    }

    .cmd-nav-btn {
        padding: 10px 14px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
        gap: 6px !important;
    }

    .cmd-nav-center {
        display: none !important;
    }

    /* ========================================
       Commandments List - Mobile
       ======================================== */
    .commandments-list {
        gap: 10px !important;
    }

    .commandment-item {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        gap: 12px !important;
    }

    .commandment-item:hover {
        transform: none !important;
    }

    .commandment-item:active {
        transform: scale(0.99) !important;
    }

    .item-number {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }

    .item-text {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        padding-top: 3px !important;
    }

    /* ========================================
       Raw Content - Mobile
       ======================================== */
    .raw-content {
        padding: 16px !important;
        border-radius: 12px !important;
        font-size: 0.95rem !important;
        line-height: 1.8 !important;
    }

    .raw-content table {
        font-size: 0.9rem !important;
    }

    .raw-content td {
        padding: 8px 10px !important;
    }

    /* ========================================
       Footer Navigation - Mobile
       ======================================== */
    .cmd-footer-nav {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 20px !important;
        padding-top: 20px !important;
    }

    .cmd-footer-nav a {
        padding: 12px 20px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* ========================================
       Touch Feedback
       ======================================== */
    .cmd-nav-btn,
    .commandment-item,
    .cmd-footer-nav a {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    /* ========================================
       Safe Area Support (iPhone notch)
       ======================================== */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .commandment-page-content {
            padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* Small phones */
@media (max-width: 375px) {
    .commandment-page-content {
        padding: 65px 10px 85px !important;
    }

    .cmd-page-header {
        padding: 20px 14px !important;
    }

    .cmd-page-header .header-icon {
        font-size: 2.5rem !important;
    }

    .cmd-page-header h1 {
        font-size: 1.2rem !important;
    }

    .cmd-nav-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .commandment-item {
        padding: 12px 14px !important;
    }

    .item-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }

    .item-text {
        font-size: 0.9rem !important;
    }
}