/* Shared Styles for Eco Estate Solutions */

:root {
    --primary-color: #16a34a;
    --secondary-color: #0891b2;
    --light-bg: #f0fdf4;
    --dark-text: #111827;
}

/* Smooth Transitions */
* {
    transition-property: color, background-color, border-color, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #15803d;
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

picture {
    display: block;
    width: 100%;
}

/* Image Optimization */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Button Styles */
.btn-primary {
    @apply bg-green-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-green-700 transition;
}

.btn-secondary {
    @apply border-2 border-green-600 text-green-600 px-6 py-3 rounded-lg hover:bg-green-50 transition font-semibold;
}

/* Card Hover Effects */
.card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Gradient Background */
.gradient-green-blue {
    background: linear-gradient(135deg, #16a34a 0%, #0891b2 100%);
}

/* Text Selection */
::selection {
    background: var(--primary-color);
    color: white;
}

/* Form Focus States */
input:focus,
textarea:focus,
select:focus {
    @apply border-green-500 ring-2 ring-green-200;
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1 {
        @apply text-3xl;
    }
    h2 {
        @apply text-2xl;
    }
    h3 {
        @apply text-xl;
    }

    /* Make images responsive on mobile */
    img {
        @apply w-full h-auto;
    }

    /* Stack components on mobile */
    .grid {
        @apply gap-4;
    }
}

@media (max-width: 640px) {
    h1 {
        @apply text-2xl;
    }
    h2 {
        @apply text-xl;
    }

    /* Adjust padding on mobile */
    button, input, select, textarea {
        @apply text-base;
    }
}

/* Accessibility */
a:focus,
button:focus {
    @apply outline-offset-2 outline-2 outline-green-600;
}

/* High DPI Screens */
@media (min-resolution: 2dppx) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Print Styles */
@media print {
    nav,
    footer {
        display: none;
    }

    img {
        max-width: 100%;
        page-break-inside: avoid;
    }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-track {
        background: #1f2937;
    }
}

/* Responsive Grid Utilities */
@media (max-width: 1024px) {
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        @apply md:grid-cols-2;
    }
}

@media (max-width: 768px) {
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3,
    .grid-cols-1.md\:grid-cols-2 {
        @apply grid-cols-1;
    }
}

/* Flex Utilities for Responsive */
@media (max-width: 768px) {
    .flex.space-x-8 {
        @apply flex-col space-x-0 space-y-4;
    }
}

/* Touch-friendly Buttons */
@media (hover: none) and (pointer: coarse) {
    button, a {
        @apply text-lg py-4 px-6;
    }
}

/* Container Queries for Modern Browsers */
@supports (container-type: inline-size) {
    @container (max-width: 450px) {
        .card-hover {
            @apply hover:shadow-md;
        }
    }
}