/* style.css */

/* Import your font (moved from header.php) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* A custom utility class for your "sexy" logo gradient.
  We can apply this to the text in header.php
*/
.logo-gradient {
    background-image: linear-gradient(to right, #38bdf8, #34d399); /* from-blue-400 to-teal-400 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

/* This is the wrapper for the search input */
.autocomplete {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* This is the dropdown box itself */
.autocomplete-items {
    position: absolute;
    border: 1px solid #374151; /* slate-700 */
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%; /* Position it right below the input */
    left: 0;
    right: 0;
    background-color: #334155; /* slate-700 */
    border-radius: 0 0 0.5rem 0.5rem; /* rounded-b-lg */
    overflow: hidden;
}

/* This is for each individual company item */
.autocomplete-items div {
    padding: 0.75rem 1rem; /* p-3 */
    cursor: pointer;
    background-color: #334155; /* slate-700 */
    border-bottom: 1px solid #475569; /* slate-600 */
    color: #f1f5f9; /* slate-100 */
}

/* Item hover effect */
.autocomplete-items div:hover {
    background-color: #475569; /* slate-600 */
}

/* This is for the "active" item (when using arrow keys) */
.autocomplete-active {
    background-color: #1e40af !important; /* blue-800 */
    color: #ffffff;
    
}
/* style.css */

/* ... (Existing styles like @import and .logo-gradient) ... */

/* --- Logo Specific Styles --- */

/* This defines the colors for the SVG icon paths */
.icon-fill-teal {
    fill: #34d399; /* teal-400 */
}

.icon-fill-indigo {
    fill: #6366f1; /* indigo-500 (Used instead of blue-400 for better contrast against dark background) */
}

/* This applies the font weight to the text */
.logo-text-bold {
    font-weight: 800; /* Extra Bold */
    color: #F3F4F6;
}

.logo-text-light {
    font-weight: 400; /* Regular */
    color: #9ca3af; /* gray-400 */
}