/**
 * Responsive Styles - Avraham Theme
 * 
 * @package Avraham_Theme
 */

/* ========================================
   Breakpoint Reference
   ======================================== 
   Mobile:     < 480px
   Mobile L:   480px - 767px
   Tablet:     768px - 1023px
   Desktop:    1024px - 1279px
   Desktop L:  1280px - 1399px
   Desktop XL: >= 1400px
   ======================================== */

/* ========================================
   Prevent Horizontal Scrolling on Mobile
   ======================================== */
   @media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100vw;
        position: relative;
    }
    
    .site-main,
    .front-page-content,
    .page-content,
    main {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    * {
        max-width: 100%;
    }
    
    img,
    video,
    iframe,
    embed,
    object {
        max-width: 100%;
        height: auto;
    }
    
    .container,
    .container-fluid,
    [class*="container"] {
        max-width: 100vw;
        overflow-x: hidden;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }
    
    /* Prevent negative margins from causing overflow */
    section,
    div,
    article {
        max-width: 100vw;
    }
}

/* ========================================
   Extra Small Devices (< 480px)
   ======================================== */
@media (max-width: 479px) {
    :root {
        --container-padding: 1rem;
    }
    
    .btn {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }
    
    .btn-lg {
        padding: var(--space-3) var(--space-6);
    }
}

/* ========================================
   Small Devices (480px - 767px)
   ======================================== */
@media (min-width: 480px) and (max-width: 767px) {
    :root {
        --container-padding: 1.25rem;
    }
}

/* ========================================
   Medium Devices / Tablets (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --container-padding: 1.5rem;
    }
}

/* ========================================
   Large Devices / Desktops (1024px - 1279px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --container-padding: 2rem;
    }
}

/* ========================================
   Extra Large Devices (>= 1280px)
   ======================================== */
@media (min-width: 1280px) {
    :root {
        --container-padding: 2rem;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .site-header,
    .site-footer,
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
    
    .site-main {
        margin-top: 0;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    img {
        max-width: 100% !important;
    }
}

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

/* ========================================
   High Contrast Mode
   ======================================== */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #000080;
        --color-secondary: #b8860b;
    }
    
    .btn {
        border-width: 3px;
    }
    
    a:focus,
    button:focus {
        outline-width: 3px;
    }
}

/* ========================================
   Dark Mode Support (Future)
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here if needed */
}