/* ============================================
   Responsive Styles
   Mobile-First Approach
   ============================================ */

/* ============================================
   Tablet (768px and below)
   ============================================ */
@media (max-width: 768px) {
    /* Typography adjustments */
    html {
        font-size: 14px;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.35rem; }

    /* Container */
    .container {
        padding: 0 1rem;
    }

    /* Navigation */
    .nav-wrapper {
        flex-wrap: wrap;
    }

    .menu-toggle {
        display: flex;
        order: 2;
    }

    .logo {
        order: 1;
    }

    .nav-menu {
        order: 3;
        width: 100%;
        flex-direction: column;
        background-color: var(--white);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        gap: 0;
        margin-top: var(--spacing-sm);
        border-top: 1px solid #e0e0e0;
    }

    .nav-menu.active {
        max-height: 400px;
        padding: var(--spacing-sm) 0;
    }

    .nav-menu li {
        width: 100%;
        text-align: center;
    }

    .nav-menu a {
        display: block;
        padding: var(--spacing-sm);
        width: 100%;
    }

    .language-toggle {
        width: 100%;
        justify-content: center;
        margin-top: var(--spacing-xs);
    }

    .logo-image {
        height: 50px;
    }

    /* Hero Section */
    .hero {
        padding: var(--spacing-lg) 0;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    /* Section spacing */
    .section {
        padding: var(--spacing-md) 0;
    }

    /* Section header */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    /* Grids */
    .fatawa-grid,
    .videos-grid,
    .books-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    /* Page header */
    .page-title {
        font-size: 2rem;
    }

    .page-subtitle {
        font-size: 1rem;
    }

    /* About page */
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-sidebar {
        order: -1;
    }

    /* Ask page */
    .ask-footer {
        grid-template-columns: 1fr;
    }

    /* CTA section */
    .cta-title {
        font-size: 1.75rem;
    }

    .cta-text {
        font-size: 1rem;
    }

    /* Filters */
    .filters-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        width: 100%;
    }

    .filter-select,
    .filter-input {
        width: 100%;
        min-width: auto;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-md);
    }

    .footer-logo {
        order: 1;
    }

    .footer-links {
        order: 3;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .footer-social {
        order: 2;
        justify-content: center;
    }

    .footer-logo img {
        height: 60px;
    }

    /* Fatwa actions */
    .fatwa-actions {
        flex-direction: column;
    }

    /* Google Form */
    .google-form-container iframe {
        height: 1000px;
    }

    /* Book cards */
    .book-cover {
        height: 300px;
    }

    /* Padding adjustments */
    .form-container,
    .ask-intro,
    .about-main,
    .fatwa-detail {
        padding: var(--spacing-md);
    }
}

/* ============================================
   Mobile (480px and below)
   ============================================ */
@media (max-width: 480px) {
    /* Typography */
    html {
        font-size: 13px;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }

    /* Container */
    .container {
        padding: 0 0.75rem;
    }

    /* Logo */
    .logo-image {
        height: 45px;
    }

    /* Hero */
    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    /* Buttons */
    .button {
        padding: 0.6rem 1.2rem;
    }

    .button-primary-large {
        padding: 0.85rem 1.5rem;
        font-size: 1.1rem;
    }

    /* Cards */
    .fatwa-card,
    .video-card,
    .book-card {
        padding: var(--spacing-sm);
    }

    .book-cover {
        height: 280px;
    }

    /* Page header */
    .page-title {
        font-size: 1.75rem;
    }

    /* CTA section */
    .cta-title {
        font-size: 1.5rem;
    }

    /* Footer */
    .footer {
        padding: var(--spacing-md) 0 var(--spacing-sm);
    }

    .footer-logo img {
        height: 50px;
    }

    /* Spacing adjustments */
    .section {
        padding: var(--spacing-sm) 0;
    }

    /* Form elements */
    .form-input,
    .form-textarea,
    .filter-select,
    .filter-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Fatwa meta */
    .fatwa-meta {
        font-size: 0.85rem;
    }

    /* Video card */
    .video-title {
        font-size: 1rem;
    }

    /* Book card */
    .book-title {
        font-size: 1.15rem;
    }

    /* Success icon */
    .success-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
}

/* ============================================
   Large Desktop (1400px and above)
   ============================================ */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .fatawa-grid,
    .videos-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }

    .books-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .navbar,
    .hero-actions,
    .section-header .view-all,
    .footer,
    .fatwa-actions,
    .menu-toggle,
    .filters-section {
        display: none;
    }

    body {
        background-color: white;
    }

    .hero {
        background: none;
        color: black;
        padding: 1rem 0;
    }

    .hero-title,
    .section-title,
    .page-title {
        color: black;
    }

    .fatwa-detail,
    .about-main {
        box-shadow: none;
        padding: 0;
    }

    a {
        color: black;
        text-decoration: underline;
    }
}

/* ============================================
   Accessibility Improvements
   ============================================ */

/* Focus states */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@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;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .button-primary,
    .button-primary-large,
    .nav-menu .cta-button {
        border: 2px solid currentColor;
    }

    .fatwa-card,
    .video-card,
    .book-card {
        border: 2px solid var(--primary-color);
    }
}

/* Dark mode support (optional, can be enabled later) */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
    :root {
        --text-primary: #ffffff;
        --text-secondary: #b0b0b0;
        --off-white: #1a1a1a;
        --white: #2d2d2d;
        --light-grey: #3d3d3d;
    }
    */
}