/**
 * TypeSearch CSS by Cinch Web Solutions
 * WordPress Plugin: TypeSearch by Cinch
 * Version: 0.1.0
 * 
 * Functional styling approach - looks good out of the box, easy to override
 */

/* CORE FUNCTIONALITY - Form structure and positioning */
.typesearch-enabled .search-form {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    margin: 0;
}

/* FUNCTIONAL STYLING - Basic appearance that works everywhere */
.typesearch-enabled .search-field {
    /* Layout and spacing */
    flex: 1;
    width: 100%;
    padding: 10px 45px 10px 15px;
    margin: 0;
    
    /* Basic visual styling */
    border: 1px solid #ddd;
    border-radius: 20px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    color: #333;
    outline: none;
    
    /* Animation-specific transitions */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Focus states for functionality and accessibility */
.typesearch-enabled .search-field:focus,
.typesearch-enabled .search-field.focused {
    border-color: #0073aa;
    box-shadow: 0 0 0 1px rgba(0, 115, 170, 0.25);
}

/* Placeholder styling for animation */
.typesearch-enabled .search-field::placeholder {
    color: #666;
    font-style: inherit;
    transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.typesearch-enabled .search-field:focus::placeholder,
.typesearch-enabled .search-field.focused::placeholder {
    color: #999;
    opacity: 0.7;
}

/* Smooth placeholder fade during typing */
.typesearch-enabled .search-field:not(:placeholder-shown)::placeholder {
    opacity: 0;
}

/* FUNCTIONAL BUTTON STYLING */
.typesearch-enabled .search-submit {
    /* Positioning */
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    
    /* Size and shape */
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    
    /* Visual styling */
    border: none;
    border-radius: 50%;
    background: #0073aa;
    color: white;
    cursor: pointer;
    
    /* Hide text content */
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    
    /* Smooth interactions */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.typesearch-enabled .search-submit:hover {
    background: #005a87;
}

.typesearch-enabled .search-submit:active {
    transform: translateY(-50%) scale(0.95);
}

/* Search icon using custom SVG */
.typesearch-enabled .search-submit::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path fill="%23ffffff" d="M14.73,13.4102001 L11.6,10.3402001 C12.5044621,9.22227274 12.9985678,7.82818871 13,6.39020012 C12.9670056,2.83183646 10.0584085,-0.0275382459 6.5,0.000200118553 C2.94382384,-0.022028014 0.0384657007,2.83416253 0,6.39020012 C0.0384657007,9.94623771 2.94382384,12.8024282 6.5,12.7802001 C7.94941603,12.7761574 9.35642524,12.2907392 10.5,11.4002001 L13.64,14.4802001 C13.7863606,14.6169368 13.9797136,14.6921296 14.18,14.6904367 C14.3776226,14.6937912 14.5684687,14.6181729 14.71,14.4802001 C14.855884,14.3382612 14.938737,14.1437368 14.94,13.9402001 C14.9459017,13.7421651 14.8699388,13.5504493 14.73,13.4102001 Z M6.5,1.50020012 C9.21903029,1.49954204 11.4401814,3.67182784 11.5,6.39020012 C11.4841833,7.70040038 10.9484896,8.95064382 10.0107865,9.86584205 C9.07308342,10.7810402 7.81019791,11.2862101 6.5,11.2702001 C5.18902017,11.2888824 3.92459749,10.7845864 2.98630956,9.86881737 C2.04802164,8.95304835 1.51316418,7.70124697 1.5,6.39020012 C1.51318186,5.0782572 2.04771726,3.82544738 2.98570835,2.90809209 C3.92369944,1.99073681 5.18808844,1.48419856 6.5,1.50020012 Z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ACCESSIBILITY - Required functionality */
.typesearch-enabled .screen-reader-text {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* RESPONSIVE BEHAVIOR - Functional requirements */
@media (max-width: 768px) {
    .typesearch-enabled .search-field {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 12px 45px 12px 15px; /* Larger touch targets */
    }
    
    .typesearch-enabled .search-submit {
        width: 38px;
        height: 38px;
        right: 2px;
    }
}

/* DARK MODE SUPPORT - Basic functionality */
@media (prefers-color-scheme: dark) {
    .typesearch-enabled .search-field {
        background: #2c2c2c;
        color: #fff;
        border-color: #555;
    }
    
    .typesearch-enabled .search-field::placeholder {
        color: #aaa;
    }
    
    .typesearch-enabled .search-field:focus,
    .typesearch-enabled .search-field.focused {
        border-color: #00a0d2;
        box-shadow: 0 0 0 1px rgba(0, 160, 210, 0.25);
    }
}

/* THEME OVERRIDE HELPERS */
/* 
 * Themes can easily override these styles using:
 * 
 * Equal specificity (will override due to cascade):
 * .search-form .search-field { your-styles }
 * 
 * Higher specificity:
 * .site-header .search-form .search-field { your-styles }
 * .my-theme .typesearch-enabled .search-field { your-styles }
 * 
 * CSS custom properties for easy theming:
 */
.typesearch-enabled {
    --ts-border-color: #ddd;
    --ts-focus-color: #0073aa;
    --ts-bg-color: #fff;
    --ts-text-color: #333;
    --ts-button-color: #0073aa;
    --ts-icon-color: %23ffffff; /* URL-encoded white for SVG */
}

.typesearch-enabled .search-field {
    border-color: var(--ts-border-color);
    background: var(--ts-bg-color);
    color: var(--ts-text-color);
}

.typesearch-enabled .search-field:focus,
.typesearch-enabled .search-field.focused {
    border-color: var(--ts-focus-color);
}

.typesearch-enabled .search-submit {
    background: var(--ts-button-color);
}

/* Dynamic icon color using CSS custom property */
.typesearch-enabled .search-submit::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path fill="var(--ts-icon-color, %23ffffff)" d="M14.73,13.4102001 L11.6,10.3402001 C12.5044621,9.22227274 12.9985678,7.82818871 13,6.39020012 C12.9670056,2.83183646 10.0584085,-0.0275382459 6.5,0.000200118553 C2.94382384,-0.022028014 0.0384657007,2.83416253 0,6.39020012 C0.0384657007,9.94623771 2.94382384,12.8024282 6.5,12.7802001 C7.94941603,12.7761574 9.35642524,12.2907392 10.5,11.4002001 L13.64,14.4802001 C13.7863606,14.6169368 13.9797136,14.6921296 14.18,14.6904367 C14.3776226,14.6937912 14.5684687,14.6181729 14.71,14.4802001 C14.855884,14.3382612 14.938737,14.1437368 14.94,13.9402001 C14.9459017,13.7421651 14.8699388,13.5504493 14.73,13.4102001 Z M6.5,1.50020012 C9.21903029,1.49954204 11.4401814,3.67182784 11.5,6.39020012 C11.4841833,7.70040038 10.9484896,8.95064382 10.0107865,9.86584205 C9.07308342,10.7810402 7.81019791,11.2862101 6.5,11.2702001 C5.18902017,11.2888824 3.92459749,10.7845864 2.98630956,9.86881737 C2.04802164,8.95304835 1.51316418,7.70124697 1.5,6.39020012 C1.51318186,5.0782572 2.04771726,3.82544738 2.98570835,2.90809209 C3.92369944,1.99073681 5.18808844,1.48419856 6.5,1.50020012 Z"/></svg>');
}

/* 
 * CUSTOMIZATION EXAMPLES:
 * 
 * Theme can override with CSS custom properties:
 * .typesearch-enabled {
 *     --ts-border-color: #e91e63;
 *     --ts-focus-color: #e91e63;
 *     --ts-button-color: #e91e63;
 *     --ts-icon-color: %23ffffff;
 * }
 * 
 * For different button colors, adjust icon color:
 * .my-light-button {
 *     --ts-button-color: #f8f9fa;
 *     --ts-icon-color: %23172E26; (your original dark green)
 * }
 * 
 * Or override specific styles:
 * .my-theme .search-field {
 *     border-radius: 0;
 *     border-width: 2px;
 * }
 * 
 * Use your original SVG color for light backgrounds:
 * .light-theme .typesearch-enabled {
 *     --ts-button-color: #ffffff;
 *     --ts-icon-color: %23172E26;
 * }
 */