/* ==========================================================================
   JobNest Qatar — homepage-only rules (index.php)
   Shared Qatar colours live in qatar-theme.css (loaded first). Layout, sizes
   and spacing come from the original JobNest styles (base.css and index.php).
   ========================================================================== */

/* ------------------------------------------------------------ hero */
.hero-title .hero-country {
    color: var(--qa-ink);
    /* Maroon sits over the hero photo; a soft light halo keeps it readable on
       both dark and bright areas without changing the colour. */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85),
                 0 0 8px rgba(255, 255, 255, 0.65),
                 0 0 14px rgba(255, 255, 255, 0.4);
}

/* Heading matches the original JobNest hero: the brand line at 2.6rem and the
   "RECRUITMENT MADE EASY" line at 0.62em of it. Phones keep the original mobile
   sizes from index.php (.hero-title 16px/14px, which override this). */
.hero .hero-title {
    margin: 0;
    font-size: 2.6rem;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.hero .hero-title .hero-brand { display: block; }
.hero .hero-title .hero-sub-line {
    display: block;
    margin-top: 6px;
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Homepage "Search Jobs" button: original JobNest navy (base.css .btn-search)
   instead of the shared maroon from qatar-theme.css. */
.hero-search .btn-search { background: #0f3950; }
.hero-search .btn-search:hover,
.hero-search .btn-search:focus { background: #0b63bb; border-color: #4a5568; }

/* Employer logo strip (Qatar employers only). Same sizes as the original
   .slider/.slide; the page script sets --logo-duration from the strip's
   width so the speed is constant, and adds .is-ready once it is built. */
#logo-slider { animation: none !important; will-change: transform; }
#logo-slider.is-ready { animation: scroll var(--logo-duration, 50s) linear infinite !important; }
.slider:hover #logo-slider.is-ready { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    #logo-slider.is-ready { animation: none !important; }
}

/* ------------------------------------------------------------ job cards */
.job-category {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-category i { color: var(--qa-maroon); margin-right: 2px; }

/* Narrow five-column cards (1200-1439px): let Posted/Closing wrap instead
   of the closing date being clipped at the card edge. */
@media (min-width: 769px) and (max-width: 1439px) {
    .job-dates { flex-wrap: wrap; row-gap: 2px; }
}

#job-listings .jobs-empty-state {
    grid-column: 1 / -1;
    padding: 30px 16px;
    text-align: center;
    color: #5d7186;
}
#job-listings .jobs-empty-state i { color: var(--qa-maroon); font-size: 22px; margin-bottom: 8px; }
#job-listings .jobs-empty-state h3 { font-size: 1rem; font-weight: 700; color: #183b61; margin-bottom: 4px; }
#job-listings .jobs-empty-state p { font-size: 0.85rem; margin: 0; }
#job-listings.is-loading { opacity: 0.5; pointer-events: none; }