/**
 * MemberSphere Theme - Responsive Stylesheet
 *
 * Mobile-first responsive styles.
 *
 * @package MemberSphere_Theme
 * @version 1.0.0
 */

/* ==========================================================================
   Breakpoints:
   - xs: < 576px
   - sm: >= 576px
   - md: >= 768px
   - lg: >= 992px
   - xl: >= 1200px
   ========================================================================== */

/* ==========================================================================
   Small Devices (Phones - < 576px)
   ========================================================================== */

@media (max-width: 575px) {
    :root {
        --ms-container-padding: 1rem;
    }

    /* Typography */
    h1, .h1 {
        font-size: 1.75rem;
    }

    h2, .h2 {
        font-size: 1.5rem;
    }

    h3, .h3 {
        font-size: 1.25rem;
    }

    /* Grid */
    .ms-grid-2,
    .ms-grid-3,
    .ms-grid-4 {
        grid-template-columns: 1fr;
    }

    /* Cards */
    .ms-card-body {
        padding: var(--ms-spacing-md);
    }

    /* Posts */
    .posts-list .post-thumbnail img {
        height: 150px;
    }

    .entry-title {
        font-size: 1.25rem;
    }

    /* Buttons */
    .ms-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .ms-btn-lg {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }

    /* Tables */
    .ms-table th,
    .ms-table td {
        padding: var(--ms-spacing-sm);
        font-size: 0.875rem;
    }

    /* Forms */
    .ms-form-input,
    .ms-form-textarea,
    .ms-form-select {
        padding: 0.5rem 0.75rem;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Pagination */
    .pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   Small Devices (Phones Landscape - >= 576px)
   ========================================================================== */

@media (min-width: 576px) {
    /* Grid */
    .ms-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Posts Grid */
    .posts-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Medium Devices (Tablets - >= 768px)
   ========================================================================== */

@media (min-width: 768px) {
    :root {
        --ms-container-padding: 1.5rem;
    }

    /* Typography */
    h1, .h1 {
        font-size: 2rem;
    }

    h2, .h2 {
        font-size: 1.75rem;
    }

    /* Grid */
    .ms-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ms-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Forms - Inline Form Groups */
    .ms-form-inline {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ms-spacing-md);
    }

    .ms-form-inline .ms-form-group {
        flex: 1;
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Large Devices (Desktops - >= 992px)
   ========================================================================== */

@media (min-width: 992px) {
    :root {
        --ms-container-padding: 2rem;
    }

    /* Typography */
    h1, .h1 {
        font-size: 2.5rem;
    }

    h2, .h2 {
        font-size: 2rem;
    }

    /* Grid */
    .ms-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .ms-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Layout with Sidebar */
    .site-content .ms-container {
        grid-template-columns: 1fr 300px;
    }

    /* No Sidebar */
    .ms-no-sidebar .site-content .ms-container {
        grid-template-columns: 1fr;
        max-width: var(--ms-container-narrow);
    }

    /* Posts Grid */
    .posts-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Extra Large Devices (Large Desktops - >= 1200px)
   ========================================================================== */

@media (min-width: 1200px) {
    /* Container */
    .ms-container {
        padding-left: 0;
        padding-right: 0;
    }

    /* Grid */
    .ms-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Layout with Sidebar */
    .site-content .ms-container {
        grid-template-columns: 1fr 320px;
    }

    /* Posts Grid */
    .posts-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    /* Hide non-essential elements */
    .site-header,
    .site-footer,
    .sidebar,
    .main-navigation,
    .user-menu,
    .mobile-menu-toggle,
    .pagination,
    .ms-btn,
    .skip-link,
    #wpadminbar {
        display: none !important;
    }

    /* Reset colors */
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    /* Links */
    a {
        color: #000 !important;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    /* Images */
    img {
        max-width: 100% !important;
    }

    /* Page breaks */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    p, blockquote, ul, ol, dl, table, pre {
        page-break-inside: avoid;
    }

    /* Layout */
    .site-content {
        padding: 0 !important;
    }

    .ms-container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Cards */
    .ms-card {
        box-shadow: none !important;
        border: 1px solid #ddd;
    }
}

/* ==========================================================================
   Touch Device Optimizations
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .ms-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .primary-menu > li > a {
        padding: var(--ms-spacing-md);
    }

    /* Disable hover effects */
    .menu-item-has-children:hover > .sub-menu {
        opacity: 0;
        visibility: hidden;
    }

    .menu-item-has-children.submenu-open > .sub-menu {
        opacity: 1;
        visibility: visible;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable smooth scroll */
    html {
        scroll-behavior: auto;
    }

    /* Disable sticky header animation */
    .has-sticky-header .site-header {
        transition: none;
    }
}

/* ==========================================================================
   Dark Mode (System Preference)
   ========================================================================== */

/* Uncomment to enable automatic dark mode based on system preference */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --ms-text-color: #F9FAFB;
        --ms-text-light: #9CA3AF;
        --ms-bg-body: #111827;
        --ms-bg-white: #1F2937;
        --ms-bg-gray: #374151;
        --ms-border-color: #4B5563;
        --ms-header-bg: #1F2937;
        --ms-header-text: #F9FAFB;
    }
}
*/

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --ms-border-color: #000;
        --ms-shadow: none;
        --ms-shadow-md: none;
        --ms-shadow-lg: none;
    }

    .ms-btn,
    .ms-card,
    .ms-form-input,
    .ms-form-textarea,
    .ms-form-select {
        border-width: 2px;
    }

    a {
        text-decoration: underline;
    }
}