/* ===================================

   ELETTRO IMPIANTI srl - Responsive Styles

   Mobile First Approach

   =================================== */



/* ===================================

   TABLET - 768px and up

   =================================== */

@media (max-width: 1024px) {

    /* Typography adjustments */

    h1 {

        font-size: 2.25rem;

    }

    

    h2 {

        font-size: 1.875rem;

    }

    

    .hero-headline {

        font-size: 2.5rem;

    }

    

    /* Grid adjustments */

    .grid-4 {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .grid-3 {

        grid-template-columns: repeat(2, 1fr);

    }

    

    /* Footer */

    .footer-content {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* ===================================

   MOBILE - 768px and below

   =================================== */

@media (max-width: 768px) {

    /* Base adjustments */

    :root {

        --space-3xl: 64px;

        --space-2xl: 48px;

        --space-xl: 32px;

    }

    

    /* Typography */

    h1 {

        font-size: 2rem;

    }

    

    h2 {

        font-size: 1.75rem;

    }

    

    h3 {

        font-size: 1.25rem;

    }

    

    .section-title {

        font-size: 2rem;

    }

    

    /* Hero */

    .hero {

        min-height: 500px;

        margin-top: 70px;

    }

    

    .hero-headline {

        font-size: 2rem;

    }

    

    .hero-subheadline {

        font-size: 1.125rem;

    }

    

    .hero-cta {

        flex-direction: column;

    }

    

    .hero-cta .btn {

        width: 100%;

        text-align: center;

    }

    

    /* Navigation - Mobile Menu */

    .mobile-menu-toggle {

        display: flex;

    }

    

    .navbar-menu {

        position: fixed;

        top: 70px;

        left: 0;

        right: 0;

        background-color: var(--white);

        flex-direction: column;

        padding: var(--space-md);

        box-shadow: var(--shadow-lg);

        transform: translateY(-100%);

        opacity: 0;

        visibility: hidden;

        transition: all 0.3s ease;

        max-height: calc(100vh - 70px);

        overflow-y: auto;

    }

    

    .navbar-menu.active {

        transform: translateY(0);

        opacity: 1;

        visibility: visible;

    }

    

    .navbar-nav {

        flex-direction: column;

        width: 100%;

        gap: 0;

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

    

    .nav-link {

        display: flex;

        align-items: center;

        width: 100%;

        padding: 18px 20px;

        min-height: 52px;

        box-sizing: border-box;

        border-bottom: 2px solid #E5E7EB;

        font-size: 1.0625rem;

        line-height: 1.4;

        text-decoration: none;

        color: var(--dark);

        transition: background-color 0.2s, color 0.2s;
        align-content: center;
        justify-content: center;

    }

    

    .nav-link:hover,

    .nav-link.active {

        background-color: #F3F4F6;

        color: var(--primary);

    }

    

    .nav-link::after {

        display: none;

    }

    

    .navbar-cta {

        margin-left: 0;

        width: 100%;

    }

    

    .navbar-cta .btn {

        width: 100%;

        padding: 16px 24px;

        min-height: 52px;

        font-size: 1.0625rem;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

    }

    

    /* Grids */

    .grid,

    .grid-2,

    .grid-3,

    .grid-4 {

        grid-template-columns: 1fr;

    }

    

    /* Cards */

    .card {

        padding: var(--space-md);

    }

    

    /* CTA Emergency */

    .cta-emergency {

        padding: var(--space-lg) var(--space-md);

    }

    

    .cta-emergency h2 {

        font-size: 1.5rem;

    }

    

    .cta-emergency .btn {

        font-size: 1.125rem;

        padding: 14px 32px;

        width: 100%;

    }

    

    /* Footer */

    .footer-content {

        grid-template-columns: 1fr;

        gap: var(--space-lg);

    }

    

    .footer-bottom {

        flex-direction: column;

        text-align: center;

    }

    

    .footer-legal {

        justify-content: center;

    }

    

    /* Buttons */

    .btn-large {

        padding: 14px 28px;

        font-size: 1rem;

    }

    

    /* Section spacing */

    .section {

        padding: var(--space-2xl) 0;

    }

    

    /* Contact form (will be added later) */

    .contact-grid {

        grid-template-columns: 1fr;

    }

    

    /* Projects gallery (will be added later) */

    .projects-grid {

        grid-template-columns: 1fr;

    }

    

    /* Scroll to top button */

    .scroll-to-top {

        bottom: 20px;

        right: 20px;

        width: 45px;

        height: 45px;

    }

    

    /* Cookie banner mobile */

    .cookie-banner {

        flex-direction: column;

        text-align: center;

        padding: var(--space-md);

    }

    

    .cookie-banner-buttons {

        width: 100%;

        justify-content: center;

    }

    

    .cookie-banner .btn {

        flex: 1;

    }

}



/* ===================================

   SMALL MOBILE - 480px and below

   =================================== */

@media (max-width: 480px) {

    .container {

        padding: 0 var(--space-sm);

    }

    

    h1 {

        font-size: 1.75rem;

    }

    

    h2 {

        font-size: 1.5rem;

    }

    

    .hero-headline {

        font-size: 1.75rem;

    }

    

    .hero-subheadline {

        font-size: 1rem;

    }

    

    .section-title {

        font-size: 1.75rem;

    }

    

    .btn {

        padding: 10px 20px;

        font-size: 0.9375rem;

    }

    

    .card-icon,

    .feature-icon {

        width: 56px;

        height: 56px;

        font-size: 1.25rem;

    }

}



/* ===================================

   PRINT STYLES

   =================================== */

@media print {

    .header,

    .footer,

    .mobile-menu-toggle,

    .scroll-to-top,

    .cta-emergency,

    .btn {

        display: none;

    }

    

    body {

        font-size: 12pt;

        line-height: 1.5;

        color: #000;

    }

    

    a {

        color: #000;

        text-decoration: underline;

    }

    

    .section {

        page-break-inside: avoid;

    }

}



/* ===================================

   LANDSCAPE MOBILE

   =================================== */

@media (max-width: 768px) and (orientation: landscape) {

    .hero {

        min-height: 400px;

    }

}



/* ===================================

   HIGH DPI DISPLAYS

   =================================== */

@media (-webkit-min-device-pixel-ratio: 2),

       (min-resolution: 192dpi) {

    /* Use higher quality images for retina displays */

    /* This will be handled in HTML with srcset */

}



/* ===================================

   ACCESSIBILITY - 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;

    }

}



/* ===================================

   DARK MODE SUPPORT (Optional)

   =================================== */

@media (prefers-color-scheme: dark) {

    /* Uncomment if you want to add dark mode support in the future */

    /*

    :root {

        --dark: #F3F4F6;

        --light: #1F2937;

        --white: #111827;

    }

    */

}