/**
 * FF Careers — Fantastic Finishes
 * Styles for [ff_careers] shortcode output.
 *
 * Brand match (per Dan + ffpalmbeach.com inspection):
 *   Primary CTA bg:   #007ac0 (FF blue) — white text, NO hover transition
 *   Body fonts:       Raleway primary (matches BeTheme stack)
 *   Headings:         #232323 / dark
 *   Muted text:       #747474 (BeTheme default body)
 *   Card surfaces:    #ffffff with #e5e5e5 hairline border
 *   Radius:           4px
 *
 * Hover treatment is intentionally suppressed on buttons per client direction.
 * Card-level affordances (border tint, subtle elevation) preserved because
 * they communicate clickability without changing button color.
 */

.ff-careers {
    --ffc-bg-page: #ffffff;
    --ffc-bg-card: #ffffff;
    --ffc-fg: #232323;
    --ffc-fg-body: #444444;
    --ffc-fg-muted: #747474;
    --ffc-border: #e5e5e5;
    --ffc-border-strong: #cfcfcf;
    --ffc-blue: #007ac0;
    --ffc-blue-text: #ffffff;
    --ffc-radius: 4px;

    font-family: "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--ffc-fg-body);
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px 96px;
    font-size: 15px;
    line-height: 1.65;
}

/* -------- List header -------- */
.ff-careers__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 36px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ffc-border);
}
.ff-careers__heading {
    font-family: "Raleway", "Open Sans", sans-serif;
    font-size: clamp(1.625rem, 2.6vw, 2rem);
    font-weight: 700;
    color: var(--ffc-fg);
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.ff-careers__count {
    font-family: "Raleway", sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ffc-fg-muted);
    margin: 0;
    font-weight: 600;
}

/* -------- Job list -------- */
.ff-careers__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.ff-careers__card {
    background: var(--ffc-bg-card);
    border: 1px solid var(--ffc-border);
    border-radius: var(--ffc-radius);
    padding: 26px 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: start;
}
.ff-careers__card-body { min-width: 0; }

.ff-careers__job-title {
    font-family: "Raleway", "Open Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ffc-fg);
    margin: 0 0 12px;
    letter-spacing: 0.005em;
}

/* -------- Meta row -------- */
.ff-careers__meta {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    font-family: "Raleway", sans-serif;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.ff-careers__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ffc-fg-muted);
    font-weight: 600;
    text-transform: uppercase;
}
.ff-careers__meta-item svg { flex: none; opacity: .8; color: var(--ffc-blue); }
.ff-careers__meta-item--location {
    color: var(--ffc-fg);
}
.ff-careers__meta-item--salary {
    color: var(--ffc-blue);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
}

/* -------- Excerpt & posted -------- */
.ff-careers__excerpt {
    color: var(--ffc-fg-body);
    line-height: 1.65;
    margin: 0 0 12px;
    font-size: 14px;
    max-width: 64ch;
}
.ff-careers__posted {
    font-family: "Raleway", sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ffc-fg-muted);
    margin: 0;
    font-weight: 600;
}

/* -------- Actions -------- */
.ff-careers__card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    min-width: 168px;
}

/* Buttons match the FF site button system: solid blue, white text, NO hover.
   Per client direction: no hover treatment is applied. */
.ff-careers__link,
.ff-careers__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 11px 26px;
    border-radius: var(--ffc-radius);
    text-decoration: none !important;
    line-height: 1;
    cursor: pointer;
}

/* Secondary: outlined */
.ff-careers__link {
    background: #ffffff;
    color: var(--ffc-fg) !important;
    border: 1px solid var(--ffc-border-strong);
}

/* Primary: solid FF blue, white text. No hover state. */
.ff-careers__cta {
    background: var(--ffc-blue);
    color: var(--ffc-blue-text) !important;
    border: 1px solid var(--ffc-blue);
}

/* -------- Empty state -------- */
.ff-careers--empty {
    display: flex;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
}
.ff-careers__empty-inner {
    max-width: 620px;
    text-align: center;
    padding: 60px 40px;
    border: 1px solid var(--ffc-border);
    border-radius: var(--ffc-radius);
    background: #fff;
}
.ff-careers__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    color: var(--ffc-blue);
    margin: 0 auto 22px;
    opacity: .9;
}
.ff-careers__empty-heading {
    font-family: "Raleway", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--ffc-fg);
    margin: 0 0 14px;
    letter-spacing: 0.005em;
    line-height: 1.25;
}
.ff-careers__empty-body {
    color: var(--ffc-fg-body);
    line-height: 1.65;
    font-size: 15px;
    margin: 0 auto 26px;
    max-width: 50ch;
}

/* -------- Links inside description HTML -------- */
.ff-careers a:not(.ff-careers__link):not(.ff-careers__cta) {
    color: var(--ffc-blue);
    text-decoration: underline;
}

/* -------- Responsive -------- */
@media (max-width: 768px) {
    .ff-careers { padding: 0 20px 64px; }
    .ff-careers__card {
        grid-template-columns: 1fr;
        padding: 22px 20px;
        gap: 16px;
    }
    .ff-careers__card-actions {
        flex-direction: row;
        min-width: 0;
    }
    .ff-careers__link,
    .ff-careers__cta {
        flex: 1;
        padding: 11px 16px;
    }
    .ff-careers__empty-inner {
        padding: 44px 22px;
    }
}