/**
 * WhyAgency Search Box Styles
 * 
 * This provides minimal styling. 
 * Most styling comes from Tailwind classes in the template.
 * Override these variables in your theme to customize colors.
 */

:root {
    /* Primary colors - customize in your theme */
    --whyagency-search-primary: #0066b3;
    --whyagency-search-primary-hover: #0B5187;
    --whyagency-search-border: #c9d1e0;
    --whyagency-search-tag-bg: rgba(162, 185, 224, 0.25);
    --whyagency-search-tag-hover: rgba(162, 185, 224, 0.38);
    --whyagency-search-text: #2d2d2f;
    --whyagency-search-dark: #141516;
}

/* Minimal resets for non-Tailwind environments */
.whyagency-search-wrapper * {
    box-sizing: border-box;
}

/* Search form focus state */
.whyagency-search-form input:focus {
    outline: none;
}

/* Tag link defaults */
.whyagency-search-tag {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Accessibility improvements */
.whyagency-search-form input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

.whyagency-search-form button[type="submit"] {
    background: none;
    border: none;
    padding: 0;
}

/* Voice Search Icon */
.whyagency-search-wrapper .voice-search-icon {
    user-select: none;
}

/* Print styles */
@media print {
    .whyagency-search-wrapper {
        display: none;
    }
}

/* RTL Support */
[dir="rtl"] .whyagency-search-form {
    direction: rtl;
}

/* Mobile Responsive Styles */
@media (max-width: 767px) {
    /* Reduce input container padding on mobile */
    .whyagency-search-form > div {
        padding: 12px 16px !important;
    }
    
    /* Reduce gap between icons */
    .whyagency-search-form > div > div {
        gap: 12px !important;
    }
    
    /* Make voice icon slightly smaller on mobile */
    .whyagency-search-form .relative.w-\[38px\] {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Tags container - enable horizontal scroll */
    .whyagency-search-tags {
        width: 100%;
        overflow: hidden;
    }
    
    /* Tags horizontal scroll on mobile */
    .whyagency-search-tags > div {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        padding-bottom: 4px; /* Space for potential iOS bounce */
    }
    
    /* Hide scrollbar but keep functionality */
    .whyagency-search-tags > div::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    /* Tags should not shrink or wrap */
    .whyagency-search-tag {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* 
 * Override Examples (add to your theme's style.css):
 * 
 * :root {
 *     --whyagency-search-primary: #your-color;
 *     --whyagency-search-primary-hover: #your-hover-color;
 * }
 * 
 * .whyagency-search-wrapper {
 *     max-width: 1200px;
 * }
 */