/* Custom styles for elements not fully configurable by Tailwind CSS */

/* Ensure the body takes full height and allows vertical scrolling */
html,
body {
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll */
    overscroll-behavior: contain; /* Prevent scroll chaining on mobile */
}

body {
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
}

/* Accessibility: Focus styles */
:focus-visible {
    outline: 2px solid var(--green-accent); /* Accent green focus ring */
    outline-offset: 2px;
}

/* Mobile font size adjustments as per request */
@media (max-width: 768px) {
    h2 { font-size: 20px; }
    h3 { font-size: 24px; }
    h4 { font-size: 16px; }
    .text-sm { font-size: 12px; }
    .text-base { font-size: 14px; }
    .text-lg { font-size: 16px; }
    .text-xl { font-size: 18px; }
    .text-2xl { font-size: 20px; }
    .text-3xl { font-size: 24px; }
    .text-5xl { font-size: 32px; }
    .text-6xl { font-size: 40px; }
    
    /* Increase button/input heights for mobile touch targets */
    button, input[type="text"], input[type="number"] {
        min-height: 44px;
        width: 100%; /* Full width for inputs on mobile */
    }

    /* Adjust category buttons for stacking on very small screens */
    #plant-categories {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 400px) {
    #plant-categories {
        flex-direction: column;
        align-items: stretch;
    }
    #plant-categories button {
        width: 100%;
    }
}

/* Modified header-gradient for a solid dark green background on all devices */
.header-gradient {
    background-color: var(--green-dark);
}