/* Responsive Design for Italvibras Catalog */

@media (max-width: 1024px) {
    .container { padding: 0 15px; }
    .flex-header { gap: 20px; }
    .main-nav ul { gap: 8px; }
    .main-nav a { padding: 8px 12px; font-size: 0.9rem; }
    .search-box input { width: 150px; }
    .hero { padding: 60px 20px; }
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 1rem; margin-bottom: 30px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    body { font-size: 14px; }

    /* Header */
    .header-info { flex-direction: column; gap: 10px; align-items: flex-start; font-size: 0.85rem; }
    .lang-switcher { gap: 5px; }
    .lang-switcher a { padding: 3px 8px; font-size: 0.8rem; }

    .flex-header { flex-direction: column; gap: 10px; align-items: stretch; padding: 10px 0; }
    .logo { text-align: center; }
    .main-nav { width: 100%; }
    .main-nav ul { flex-direction: column; gap: 5px; }
    .main-nav a { width: 100%; padding: 10px; }
    .search-box { width: 100%; }
    .search-box form { width: 100%; }
    .search-box input { width: 100%; padding: 10px; }
    .search-box button { padding: 10px 15px; }

    /* Hero */
    .hero { padding: 40px 20px; text-align: center; }
    .hero h1 { font-size: 1.5rem; margin-bottom: 15px; }
    .hero p { font-size: 0.95rem; margin-bottom: 20px; }
    .hero .btn { display: block; width: 100%; padding: 12px; margin-bottom: 10px; }

    /* Sections */
    .trust-section { padding: 40px 20px; }
    .categories-section { padding: 40px 20px; }
    .features-section { padding: 40px 20px; }
    .cta-section { padding: 40px 20px; }

    /* Grids — solo classi specifiche per evitare override indesiderati */
    .home-cat-grid,
    .home-features-grid,
    .home-cta-box,
    .pd-grid {
        grid-template-columns: 1fr !important;
    }

    /* Footer */
    .site-footer { padding: 40px 20px 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-col { text-align: left; }

    /* Forms */
    input, textarea, select { padding: 12px; }

    /* Tables */
    table { font-size: 0.85rem; }
    th, td { padding: 8px; }

    /* Product cards */
    .prod-card { padding: 15px; }
    .prod-card h3 { font-size: 1rem; }
    .prod-card p { font-size: 0.85rem; }

    /* Buttons */
    .btn { width: 100%; padding: 12px; text-align: center; }
}

@media (max-width: 480px) {
    .container { padding: 0 10px; }

    /* Header */
    .header-top { padding: 8px 0; }
    .header-info { font-size: 0.8rem; gap: 8px; }
    .header-main .container { gap: 10px; }
    .logo img { height: 40px; }

    /* Hero */
    .hero { padding: 30px 10px; }
    .hero h1 { font-size: 1.2rem; margin-bottom: 10px; }
    .hero p { font-size: 0.9rem; margin-bottom: 15px; }

    /* Breadcrumbs */
    .breadcrumbs-inner { font-size: 0.8rem; }

    /* Grids — solo classi specifiche */
    .home-cat-grid,
    .home-features-grid,
    .home-cta-box,
    .pd-grid,
    .home-hero-inner {
        grid-template-columns: 1fr !important;
    }

    /* Footer */
    .site-footer { padding: 30px 10px 15px; }
    .footer-bottom { font-size: 0.8rem; }

    /* Modal */
    #add-product-modal { padding: 10px; }
    #add-product-modal > div { width: 95%; }

    /* Sections */
    .trust-section, .categories-section, .features-section, .cta-section {
        padding: 30px 10px;
    }

    /* Tables */
    table { font-size: 0.8rem; }
    th, td { padding: 6px; }

    /* Forms */
    input, textarea, select { padding: 10px; font-size: 16px; }
    label { font-size: 0.9rem; margin-bottom: 3px; }
}

/* Landscape mode (small devices) */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { padding: 30px 20px; }
    .hero h1 { font-size: 1.3rem; margin-bottom: 10px; }
    .hero p { margin-bottom: 15px; }
    .main-nav ul { flex-direction: row; }
}

/* Print styles */
@media print {
    .site-header, .site-footer, .lang-switcher, .search-box, .btn {
        display: none;
    }
    body { background: #fff; color: #000; }
    a { color: #000; }
    .breadcrumbs { margin: 10px 0; }
}

/* Dark mode (if user prefers) */
@media (prefers-color-scheme: dark) {
    body { background: #1a1a1a; color: #e0e0e0; }
    input, textarea, select {
        background: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }
    input:focus, textarea:focus {
        border-color: #C8001E;
        box-shadow: 0 0 0 3px rgba(200,0,30,0.2);
    }
    .site-header { background: #2a2a2a; border-bottom-color: #444; }
    .header-top { background: #1a1a1a; border-bottom-color: #444; }
    .lang-switcher a { background: #333; color: #e0e0e0; border-color: #444; }
    .lang-switcher a.active { background: #C8001E; color: #fff; }
    table { background: #2a2a2a; }
    th, td { border-color: #444; }
    tr:nth-child(even) { background: #222; }
}

/* Accessibility - focus visible */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid #C8001E;
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: more) {
    .btn-primary { background: #9f0018; border: 2px solid #000; }
    .btn-secondary { border: 2px solid #000; }
    a { text-decoration: underline; }
}