/*
 * ESES Brand Overrides for Epic Job Board v2 widget + cards.
 * The plugin CSS (synced from ETS) hardcodes ETS teal hex codes throughout.
 * This stylesheet maps every teal selector to ESES blue (#0063a6) or red (#ab0a3d).
 *
 * Brand palette:
 *   #0063a6  primary blue   (replaces ETS dark teals #0d6e6e, #007481, #1a3a4a, #31727F, #005a65, #006370)
 *   #2a7fb8  mid blue       (replaces medium teal #1a9a9a)
 *   #4d99c9  light blue     (replaces bright teal #2ab5a8)
 *   #b0d4ed  pale blue      (replaces light teal border #a0dede)
 *   #e8f0f7  very pale blue (replaces light teal bg #edf8f8)
 *   #ab0a3d  red accent
 */

/* ============================================
 * v2 Filter Widget (hero search card)
 * ============================================ */

/* Hero gradient — deeper ESES blue palette for high contrast against List/Map tabs */
.ejb-v2.search-hero {
    background: linear-gradient(135deg, #062a4a 0%, #0a3d6e 45%, #0063a6 100%) !important;
    padding-top: 80px !important;
}
@media (max-width: 991px) {
    .ejb-v2.search-hero { padding-top: 60px !important; }
}

/* Hero background image — AI-generated muted classroom scene. */
.ejb-v2 .hero-bg-image {
    background-image: url('https://epicspecialeducationstaffing.com/wp-content/themes/onum-child/images/eses-hero-classroom.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}
.ejb-v2 .hero-bg-image.loaded {
    opacity: 0.12 !important; /* damp the classroom image so the dark gradient dominates */
}

/* Italic accent text in hero title (#7eeede) */
.ejb-v2 .hero-title em {
    color: #f18a00 !important;
}

/* Hide the "Hi {name}!" greeting on logged-in users (looks awkward in the hero) */
.ejb-v2 .hero-greeting { display: none !important; }

/* Search-form field labels ("WHAT'S YOUR SPECIALTY?", "LOCATION") — was #1a9a9a */
.ejb-v2 .sf-label {
    color: #0063a6 !important;
}

/* Search-form field active border + chevron (was teal) */
.ejb-v2 .sf:hover,
.ejb-v2 .sf.active { background: #e8f0f7 !important; }
.ejb-v2 .sf-chip-outer { border-color: #b0d4ed !important; }
.ejb-v2 .sf.active .chev { stroke: #0063a6 !important; }
.ejb-v2 .sf:focus-within { border-color: #0063a6 !important; }
.ejb-v2 .sf-icon { color: #0063a6 !important; }

/* Dropdown items: hover / selected (#edf8f8 bg + #0d6e6e text) */
.ejb-v2 .dd-i.selected,
.ejb-v2 .dd-i:hover,
.ejb-v2 .ac-opt:hover,
.ejb-v2 .ac-opt.selected,
.ejb-v2 .dd-city-item:hover {
    background: #e8f0f7 !important;
    color: #0063a6 !important;
}

/* Selected-state checkbox/chevron */
.ejb-v2 .dd-i.selected { font-weight: 600 !important; }

/* Filter chips */
.ejb-v2 .filter-chip,
.ejb-v2 .ac-chip,
.ejb-v2 .selected-chip {
    background: #e8f0f7 !important;
    border-color: #b0d4ed !important;
    color: #0063a6 !important;
}
.ejb-v2 .filter-chip:hover { background: #b0d4ed !important; }

/* Search input border — was #1a3a4a */
.ejb-v2 .loc-search,
.ejb-v2 .ac-input,
.ejb-v2 input[type="text"] {
    border-color: #0063a6 !important;
}
.ejb-v2 .loc-search:focus,
.ejb-v2 .ac-input:focus,
.ejb-v2 input[type="text"]:focus {
    border-color: #0063a6 !important;
}

/* Location autocomplete border (was #31727F) */
.ejb-v2 .pac-container,
.ejb-v2 .loc-autocomplete,
.ejb-v2 .ac-list {
    border-color: #0063a6 !important;
}

/* Explore Jobs button — Onum octf-btn-icon style (white circle, blue arrow) */
.ejb-v2 .go-btn {
    background: #0063a6 !important;
}
.ejb-v2 .go-btn:hover {
    background: #004a82 !important;
    box-shadow: 0 8px 24px rgba(0, 99, 166, 0.45) !important;
}
.ejb-v2 .go-btn .btn-arrow {
    background: #ffffff !important;
}
.ejb-v2 .go-btn .btn-arrow svg {
    stroke: #0063a6 !important;
    color: #0063a6 !important;
}
.ejb-v2 .go-btn:hover .btn-arrow {
    background: #ffffff !important;
    transform: translateX(3px);
}
.ejb-v2 .go-btn:hover .btn-arrow svg {
    stroke: #004a82 !important;
    color: #004a82 !important;
}

/* Generic fallback search button */
.ejb-v2 .search-btn,
.ejb-v2 button[type="submit"]:not(.go-btn) {
    background: #0063a6 !important;
    border-color: #0063a6 !important;
    color: #fff !important;
}

/* Loading bar gradient (lines 988/992 — #58AFA6) */
.ejb-v2 .loading-bar,
.ejb-v2 .progress::before,
.ejb-v2 .progress::after {
    background: linear-gradient(to right, transparent, #0063a6) !important;
}

/* Dropdown scrollbar accent #7eeede */
.ejb-v2 .dd-scroll::-webkit-scrollbar-thumb {
    background: #b0d4ed !important;
}
.ejb-v2 .dd-scroll::-webkit-scrollbar-thumb:hover {
    background: #0063a6 !important;
}

/* Sort/filter chip borders */
.ejb-v2 .sort-chip,
.ejb-v2 .filter-chip { border-color: #0063a6 !important; }
.ejb-v2 .sort-chip:hover,
.ejb-v2 .filter-chip:hover { background: #0063a6 !important; color: #fff !important; }

/* Sort By chip on the results header (high-specificity, ID-selector match) */
#ats-job-filter-sort-by-container.sort-chip {
    border-color: #0063a6 !important;
}
#ats-job-filter-sort-by-container.sort-chip:hover {
    background: rgba(0, 99, 166, 0.06) !important;
    border-color: #004a82 !important;
}
.sort-chip select,
.sort-chip select#ats-job-filter-sort-by-pay-rate {
    color: #0063a6 !important;
}

/* "Showing X jobs" / counts text */
.ejb-v2 .results-count,
.ejb-v2 .jobs_loaded {
    color: #0063a6 !important;
}

/* "291+ ASSIGNMENTS LIVE" pulsing dot (was #7eeede light teal) */
.ejb-v2 .badge-dot {
    background: #f18a00 !important; /* warm cream — visible on blue hero gradient */
}

/* Trending pill numbers (was #7eeede) — small count after each city pill */
.ejb-v2 .tc-count {
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* Selected-item pills inside specialty and location dropdowns
 * (.spec-tag and .loc-tag) — were ETS light teal #edf8f8 / #a0dede / #0d6e6e
 */
.ejb-v2 .spec-tag,
.ejb-v2 .loc-tag {
    background: #e8f0f7 !important;
    border-color: #b0d4ed !important;
    color: #0063a6 !important;
}
.ejb-v2 .spec-tag-x,
.ejb-v2 .loc-tag-x {
    background: rgba(0, 99, 166, 0.15) !important;
    color: #0063a6 !important;
}
.ejb-v2 .spec-tag-x:hover,
.ejb-v2 .loc-tag-x:hover {
    background: rgba(0, 99, 166, 0.3) !important;
}

/* "+N more" tag — was teal */
.ejb-v2 .more-tag {
    background: rgba(0, 99, 166, 0.15) !important;
    border-color: #b0d4ed !important;
    color: #0063a6 !important;
}
.ejb-v2 .more-tag:hover {
    background: rgba(0, 99, 166, 0.25) !important;
}

/* ============================================
 * v2 Job Cards (#007481, #006370, etc.)
 * ============================================ */

.jc-v2:hover { border-color: #0063a6 !important; }

.jc-v2 .jc-type { color: #0063a6 !important; }

.jc-v2 .jc-title { color: #222 !important; }
.jc-v2 .jc-title:hover { color: #ab0a3d !important; }

.jc-v2 .jc-pay { color: #0063a6 !important; }
.jc-v2 .jc-pay span { color: #555 !important; }

.jc-v2 .epic-select-badge { background: #ab0a3d !important; }

/* Card icon strokes — #007481 in svg fills/strokes */
.jc-v2 .jm svg { stroke: #999 !important; }

/* ============================================
 * Onum button layout inside v2 cards
 * ============================================ */

.jc-v2 .jc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.jc-v2 .jc-actions .ot-button {
    display: inline-block;
}

.jc-v2 .jc-actions .ot-button + .ot-button {
    margin-left: 0;
}

.jc-v2 .jc-ref-note {
    display: block;
    width: 100%;
    color: #ab0a3d;
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    line-height: 1.45;
}
.jc-v2 .jc-ref-note--boost {
    line-height: 1.5;
    text-align: center;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    white-space: normal;
    word-wrap: break-word;
}
.jc-v2 .jc-ref-note strong {
    color: #ab0a3d;
    font-weight: 800;
}

/* ============================================
 * Job Map (panel + Leaflet markers/clusters)
 * Remaps every #007481 / #006370 in ejb-job-map.css
 * ============================================ */

/* View-tabs (Job List / Job Map) — active state */
.ejb-view-tab.active,
.ejb-view-btn.active {
    background: #0063a6 !important;
    color: #fff !important;
}
.ejb-view-tab.active svg,
.ejb-view-btn.active svg { stroke: #fff !important; color: #fff !important; }

/* Side-panel job listing — category label, salary, accents (#007481) */
.ejb-map-card .ejb-map-card-cat,
.ejb-map-card .ejb-map-card-type,
.ejb-map-card .ejb-map-card-pay {
    color: #0063a6 !important;
}
.ejb-map-card.highlighted {
    border-color: #0063a6 !important;
    background: #f0f6fc !important;
}
.ejb-map-card:hover {
    border-color: #0063a6 !important;
}

/* Map markers — cluster icons */
.ejb-cluster,
.ejb-cluster-small,
.ejb-cluster-medium,
.ejb-cluster-large {
    background: #0063a6 !important;
    color: #fff !important;
    border-color: rgba(0, 99, 166, 0.4) !important;
}
.ejb-cluster:hover,
.ejb-cluster-small:hover,
.ejb-cluster-medium:hover,
.ejb-cluster-large:hover {
    background: #004a82 !important;
}

/* Single map markers */
.ejb-marker {
    background: #0063a6 !important;
    border-color: #fff !important;
}
.ejb-marker.pulse { box-shadow: 0 0 0 0 rgba(0, 99, 166, 0.7) !important; }

/* Loading spinner border */
.ejb-map-loading::after,
.ejb-map-spinner {
    border-top-color: #0063a6 !important;
}

/* Map marker popup card (SCHOOL label, price, VIEW JOB button) */
.ejb-popup-cat,
.ejb-popup-type {
    color: #0063a6 !important;
}
.ejb-popup-pay {
    color: #0063a6 !important;
}
.ejb-popup-link {
    background: #0063a6 !important;
    color: #fff !important;
}
.ejb-popup-link:hover,
.ejb-popup-link:visited,
.ejb-popup-link:active {
    background: #004a82 !important;
    color: #fff !important;
}
.leaflet-popup-content a:hover {
    color: #ab0a3d !important;
}

/* Light-teal background blocks (#edf8f8) → light blue */
.ejb-map-panel-header,
.ejb-map-card,
.ejb-map-empty {
    background-color: #fff !important;
}

/* SVG icons in map panel/cards (stroke #007481) */
.ejb-map-card svg,
.ejb-map-empty svg,
.ejb-map-panel svg {
    stroke: #0063a6 !important;
}

/* Toggle / filter buttons on map */
.ejb-map-filter-btn,
.ejb-map-action-btn {
    background: #0063a6 !important;
    color: #fff !important;
    border-color: #0063a6 !important;
}
.ejb-map-filter-btn:hover,
.ejb-map-action-btn:hover {
    background: #004a82 !important;
    border-color: #004a82 !important;
}