/**
 * Shakerin Astra - Responsive CSS
 * سازگار با موبایل، تبلت، دسکتاپ و تلویزیون
 */

/* ============================================
   Mobile (320px - 767px)
   ============================================ */
@media (max-width: 767px) {
    /* Header */
    .header-main {
        padding: var(--spacing-sm) 0;
    }
    
    .header-logo img {
        max-height: 45px;
    }
    
    .header-nav {
        display: none;
    }
    
    .header-info {
        display: none;
    }
    
    .btn-donation {
        padding: 8px 14px;
        font-size: var(--font-size-sm);
    }
    
    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
    }
    
    .mobile-menu-toggle span {
        width: 26px;
    }
    
    /* Footer */
    .footer-main {
        padding: var(--spacing-xl) 0 var(--spacing-lg);
    }
    
    .footer-main .row > div {
        margin-bottom: var(--spacing-lg);
    }
    
    .footer-title {
        font-size: var(--font-size-base);
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    /* Typography */
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    body { font-size: 15px; }
}

/* ============================================
   Tablet (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .header-logo img {
        max-height: 55px;
    }
    
    .header-nav .main-menu {
        gap: var(--spacing-md);
    }
    
    .header-nav .main-menu a {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs);
    }
    
    .btn-donation {
        padding: 8px 16px;
        font-size: var(--font-size-sm);
    }
    
    .mobile-menu-toggle {
        width: 38px;
        height: 38px;
    }
    
    .container {
        padding: 0 var(--spacing-md);
    }
    
    /* Typography */
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
}

/* ============================================
   Desktop (1024px - 1919px)
   ============================================ */
@media (min-width: 1024px) and (max-width: 1919px) {
    .container {
        max-width: 1200px;
    }
    
    /* Typography */
    h1 { font-size: 48px; }
    h2 { font-size: 36px; }
    h3 { font-size: 28px; }
    body { font-size: 18px; }
}

/* ============================================
   Desktop Small (1024px - 1280px) - برای رزولوشن 1280x1024
   ============================================ */
@media (min-width: 1024px) and (max-width: 1280px) {
    .header-nav {
        gap: 8px;
    }
    .header-nav .main-menu a {
        padding: 10px 10px;
        font-size: 15px;
    }
    
    .header-nav .main-menu li:not(:last-child)::after {
        margin: 0 10px;
    }
    
    .btn-donation {
        padding: 8px 16px;
        font-size: var(--font-size-sm);
    }
    
    .header-info {
        font-size: 14px;
    }
    
    /* About Section - جلوگیری از بیرون زدن محتوا */
    .about-section-wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .about-section .about-content-row {
        padding-left: 0;
        padding-right: 0;
    }
    
    .about-section .about-image-col {
        padding-left: 8px;
        padding-right: 8px;
        max-width: 50%;
        flex: 0 0 50%;
    }
    
    .about-section .about-text-col {
        padding-left: 8px;
        padding-right: 8px;
        max-width: 50%;
        flex: 0 0 50%;
    }
    
    .about-section .about-text-box {
        margin-left: 0;
        margin-right: 0;
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .about-section .plyrReplacedSlider .item {
        min-height: 350px;
    }
    
    .about-section .about-text-box {
        min-height: 350px;
    }
}

/* ============================================
   Large Desktop / TV (1920px and above)
   ============================================ */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
        padding: 0 var(--spacing-xl);
    }
    
    /* Typography - 20% larger */
    h1 { font-size: 56px; }
    h2 { font-size: 42px; }
    h3 { font-size: 32px; }
    body { font-size: 20px; }
    
    /* Spacing - 30% more */
    .header-main {
        padding: calc(var(--spacing-md) * 1.3) 0;
    }
    
    .footer-main {
        padding: calc(var(--spacing-xxl) * 1.3) 0 calc(var(--spacing-xl) * 1.3);
    }
    
    .header-logo img {
        max-height: 75px;
    }
    
    .footer-logo img {
        max-height: 75px;
    }
    
    /* Buttons larger */
    .btn-donation {
        padding: 10px 20px;
        font-size: calc(var(--font-size-base) * 1.1);
    }
    
    /* Menu items larger */
    .header-nav .main-menu {
        gap: calc(var(--spacing-lg) * 1.3);
    }
    
    .header-nav .main-menu a {
        font-size: calc(var(--font-size-base) * 1.1);
        padding: calc(var(--spacing-xs) * 1.3) calc(var(--spacing-sm) * 1.3);
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .shakerin-header,
    .shakerin-footer,
    .back-to-top,
    .mobile-menu-overlay {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
}