/* ============================================
   RESPONSIVE INDEX.PHP - Mobile Optimizations with FLUID DESIGN (Clamp)
   ============================================ */

:root {
    /* Fluid Typography */
    --fs-logo: clamp(1rem, 2.5vw + 0.5rem, 1.5rem);
    --fs-h1: clamp(2rem, 5vw + 1rem, 3.5rem);
    --fs-h2: clamp(1.8rem, 4vw + 0.5rem, 2.5rem);
    --fs-body: clamp(0.95rem, 0.5vw + 0.8rem, 1.1rem);
    
    /* Fluid Spacing */
    --pad-container: clamp(12px, 3vw, 24px);
    --pad-section: clamp(40px, 8vw, 80px);
    --gap-grid: clamp(16px, 2vw + 1rem, 40px);
}

/* Navbar - Fluid Height & Padding */
.navbar .container {
    padding: clamp(10px, 1.5vw, 16px) var(--pad-container);
}

.logo-img {
    height: auto;
    max-height: clamp(35px, 5vw, 50px);
    width: auto;
}

.logo-text {
    font-size: var(--fs-logo);
}

/* Global Typography Adjustments */
body {
    font-size: var(--fs-body);
}

.titlu-sectiune h2 {
    font-size: var(--fs-h2);
}

.titlu-sectiune p {
    font-size: var(--fs-body);
    max-width: clamp(300px, 90vw, 800px);
}

/* Mobile Optimizations (Layout changes still need media queries) */
@media (max-width: 900px) {
    
    /* Search Bar Optimization */
    .public-search input {
        width: 100%;
        min-width: 0;
        font-size: clamp(0.85rem, 2vw, 1rem);
    }
    
    /* Stack Grids Earlier for better UX */
    .servicii-grila,
    .proces-grid,
    .avantaje-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--gap-grid);
    }
    
    .harta-orar-wrap {
        flex-direction: column;
        gap: var(--gap-grid);
    }
}

/* Mobile Specific (Under 600px) */
@media (max-width: 600px) {
    
    /* Dark mode toggle positioning */
    .dark-mode-toggle {
        margin-left: auto;
        margin-right: 8px;
    }
    
    .buton-burger {
        order: 3;
    }

    /* PWA Install Button Fluid */
    #pwa-install-container {
        margin: clamp(10px, 3vw, 20px) auto;
        padding: 0 var(--pad-container);
    }
    
    #pwa-install-button {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }

    /* Form Inputs Full Width */
    .programare-rapida-form .pr-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .programare-rapida-form input {
        width: 100%;
    }
}

/* Landscape Mode Adjustments */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .navbar {
        padding: 5px 0;
    }
    
    .logo-img {
        max-height: 30px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print Styles */
@media print {
    .public-search,
    .dark-mode-toggle,
    .buton-burger,
    #pwa-install-container {
        display: none !important;
    }
}