/* --- HOME SPECIFIC: HERO BANNER --- */
.hero { position: relative; height: 500px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.hero::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.hero-content { position: relative; z-index: 2; text-align: center; color: #fff; width: 100%; max-width: 700px; padding: 0 20px; }
.hero h1 { font-size: 2.5rem; font-weight: 500; margin-bottom: 10px; }
.hero p { font-size: 1.2rem; margin-bottom: 30px; }

.search-form { display: flex; background: #fff; border-radius: 4px; overflow: hidden; padding: 5px; }
.search-form input { flex-grow: 1; border: none; padding: 15px; font-size: 1rem; outline: none; }
.search-form button { background: #00aeef; color: #fff; border: none; padding: 0 30px; font-weight: bold; cursor: pointer; border-radius: 4px; transition: background 0.2s; }
.search-form button:hover { background: #008fca; }

/* --- HOME SPECIFIC: AGENTS GRID --- */
.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; margin-top: 30px; }
.agent-card { background: #fff; padding: 30px 20px; text-align: center; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid var(--border); }
.agent-card img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; margin-left: auto; margin-right: auto; }
.agent-name { color: var(--rlp-red); font-weight: 600; font-size: 1.1rem; margin-bottom: 5px; }
.agent-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 15px; }
.agent-bio { font-size: 0.9rem; color: var(--text-light); line-height: 1.6; margin-bottom: 20px; }
.agent-link { color: var(--rlp-red); font-weight: 600; }
.agent-link:hover { text-decoration: underline; }

@media (max-width: 992px) {
    .hero h1 { font-size: 2rem; }
}


/* OVERRIDE JQUERY UI'S DEFAULT BLUE HOVER */
.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-menu .ui-menu-item-wrapper:hover {
    background-color: #f4f5f7 !important; /* Soft grey */
    color: var(--rlp-red, #e3003a) !important; /* Change text to your brand red on hover */
    border: none !important;
    margin: 0 !important;
}

.ui-helper-hidden-accessible {
    display: none;
}

/* 1. Anchor the wrapper so the dropdown knows where to attach */
.search-wrapper { 
    position: relative !important; 
    width: 100%; 
    flex: 1; 
}

/* 2. Force the dropdown to float OVER the page */
.smart-dropdown {
    position: absolute !important;
    top: 100%; /* Positions it right below the text input */
    left: 0; 
    right: 0;
    background: #fff;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    max-height: 400px;
    overflow-y: auto;
    z-index: 9999 !important; /* Ensures it overlays the hero image */
    display: none; 
    text-align: left;
}

.smart-dropdown.active { 
    display: block !important; 
}

/* 3. Style the dropdown items */
.smart-category {
    padding: 8px 15px;
    background: #f4f5f7;
    font-size: 0.75rem;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.smart-option {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #E1E0E4;
    color: #0C0020;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.smart-option:last-child { 
    border-bottom: none; 
}

.smart-option:hover { 
    background: #f0f4ff; 
    color: #00aeef; /* Your brand blue */
}

/* --- MOBILE FIXES: SEARCH BAR --- */
@media (max-width: 768px) {
    .search-form {
        padding: 4px; /* Slightly tighter outer box */
    }
    
    .search-form input {
        padding: 12px 10px; /* Reduce inner padding to give text more room */
        font-size: 0.9rem; /* Shrink text slightly */
    }
    
    .search-form input::placeholder {
        font-size: 0.85rem; /* Shrink placeholder specifically */
    }
    
    .search-form button {
        padding: 0 15px; /* Reduce the width of the blue button */
        font-size: 0.95rem;
    }
}