/* Home Page Specific Styles */

/* Autocomplete Dropdown Z-Index Fix */
#autocomplete-results {
    z-index: 999999 !important;
    position: absolute !important;
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* When autocomplete is visible, adjust search input border radius */
#main-search-form.autocomplete-open #main-search-input {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#autocomplete-results:not(.hidden) {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;
    margin-top: 0 !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* Ensure smooth transition when border radius changes */
#main-search-input {
    transition: border-radius 0.2s ease-in-out, border-color 0.15s ease-in-out !important;
}

/* Make dropdown appear seamlessly attached */
#autocomplete-results {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Ensure the form container allows proper positioning */
#main-search-form {
    position: relative;
}

/* Hide header elements when mobile search overlay is open */
body.mobile-search-open header {
    display: none !important;
}

/* Alpine.js cloak to prevent flash during initialization */
[x-cloak] {
    display: none !important;
}

/* Placeholder Color - Darker Grey */
#main-search-input::placeholder {
    color: #6b7280 !important;
    font-size: 0.9em !important;
}

/* Weather Icon Animations */
.animate-spin-slow {
    animation: spin 10s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Weather Widget Fade Animation */
#weather-city,
#weather-temp-range {
    transition: opacity 0.3s ease-in-out;
}

/* Mobile-First Masonry Layout */
.niriv-masonry {
    column-count: 1;
    column-gap: 8px;
    column-fill: balance;
}

.niriv-masonry > * {
    break-inside: avoid;
    margin-bottom: 8px;
}

@media (min-width: 640px) {
    .niriv-masonry {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .niriv-masonry {
        column-count: 3;
    }
}

/* Service Icons Section - Mobile width reduction */
@media (max-width: 767px) {
    .service-icons-container {
        max-width: 460px !important;
    }
    .service-icons-grid {
        gap: 0.125rem !important; /* 2px instead of 4px (gap-1) */
    }
}

/* Service Icons Hover Effect - Lift and Shadow */
.hover-lift {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.hover-lift:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Also apply hover effect to the parent link for better interaction */
.service-icons-grid a.group:hover .hover-lift {
    transform: translateY(-4px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Mobile search overlay placeholder styling */
#main-content input[type="search"]::placeholder {
    color: #d4d4d4 !important;
    font-weight: 400;
    font-size: 0.9em !important;
}