/*
 * Featured markers.
 *
 * The theme already emitted `.featured-label > .featured` on company cards but
 * never styled it, so it rendered as bare text. These rules cover that markup
 * as well as the job badge added alongside it.
 *
 * Written as a small standalone stylesheet rather than a change to the theme
 * SCSS because the Vite build for this theme is not runnable here (no
 * node_modules), and an unbuildable source change would never reach the page.
 */

.jb-featured-badge,
.featured-label .featured {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f5a623, #f7c948);
    color: #3d2c00;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(245, 166, 35, 0.35);
}

.jb-featured-badge .jb-featured-star {
    font-size: 10px;
    line-height: 1;
}

/* Card corner placement. The cards are position:relative already in the theme;
   the explicit relative on the wrapper below covers the ones that are not. */
.jb-featured-anchor {
    position: relative;
}

.jb-featured-badge--corner {
    position: absolute;
    top: 12px;
    /* Logical properties so the badge moves to the left edge under RTL. */
    inset-inline-end: 12px;
    z-index: 2;
}

/*
 * The grid card already puts its job-type chip at the top inline-end
 * (.twm-jobs-grid-style1 .twm-jobs-category), so a badge in that corner covers
 * it - the badge carries z-index 2 and simply paints over the top. That was
 * true in both directions from the moment the badge was added; it only became
 * obvious in Arabic, where the half-hidden Latin chip text was unmistakable.
 *
 * Dropping the badge below the chip row keeps both readable. The offset is the
 * chip's own top (10px) plus its height (26px) plus breathing room.
 */
.twm-jobs-grid-style1 .jb-featured-badge--corner {
    top: 44px;
}

/* The home-page strip. Kept visually quiet - the cards inside it already carry
   the badge, so the section only needs to announce itself. */
.jb-featured-strip {
    padding: 40px 0 10px;
}

.jb-featured-strip .jb-featured-strip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.jb-featured-strip .jb-featured-strip-head h2 {
    margin: 0;
    font-size: 24px;
}

.jb-featured-strip .jb-featured-strip-head p {
    margin: 4px 0 0;
    font-size: 14px;
    opacity: 0.75;
}