/* ============================================================
   Find Jobs — Design System
   ============================================================ */

/* --- Tokens ------------------------------------------------ */
:root {
  --fj-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fj-font-mono: 'Courier New', Courier, monospace;

  /* Light palette */
  --fj-bg:          #faf9f7;
  --fj-surface:     #ffffff;
  --fj-surface-alt: #f4f2ef;
  --fj-border:      #e8e4de;
  --fj-border-light:#f0ece7;

  --fj-text-primary:   #1a1612;
  --fj-text-secondary: #6b6358;
  --fj-text-muted:     #9c9189;
  --fj-text-inverse:   #ffffff;

  --fj-accent:         #c85a1a;
  --fj-accent-dark:    #a54816;
  --fj-accent-light:   #fdf0e8;
  --fj-accent-border:  #f4c9a6;

  --fj-green:          #2a7a4b;
  --fj-green-bg:       #edf7f2;

  --fj-radius-sm: 6px;
  --fj-radius:    10px;
  --fj-radius-lg: 16px;
  --fj-radius-xl: 24px;

  --fj-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --fj-shadow:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --fj-shadow-lg: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);

  --fj-transition: 150ms ease;

  --fj-header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fj-bg:          #141210;
    --fj-surface:     #1e1b18;
    --fj-surface-alt: #252118;
    --fj-border:      #322d27;
    --fj-border-light:#2a2520;

    --fj-text-primary:   #f0ede8;
    --fj-text-secondary: #b5a99d;
    --fj-text-muted:     #7a6e65;

    --fj-accent:         #e07040;
    --fj-accent-dark:    #f08050;
    --fj-accent-light:   #2a1a10;
    --fj-accent-border:  #5a3020;

    --fj-green:          #4ab872;
    --fj-green-bg:       #0d2018;

    --fj-shadow-sm: 0 1px 3px rgba(0,0,0,.24);
    --fj-shadow:    0 4px 12px rgba(0,0,0,.32);
    --fj-shadow-lg: 0 12px 32px rgba(0,0,0,.40);
  }
}

:root[data-theme="dark"] {
  --fj-bg:          #141210;
  --fj-surface:     #1e1b18;
  --fj-surface-alt: #252118;
  --fj-border:      #322d27;
  --fj-border-light:#2a2520;
  --fj-text-primary:   #f0ede8;
  --fj-text-secondary: #b5a99d;
  --fj-text-muted:     #7a6e65;
  --fj-accent:         #e07040;
  --fj-accent-dark:    #f08050;
  --fj-accent-light:   #2a1a10;
  --fj-accent-border:  #5a3020;
  --fj-green:          #4ab872;
  --fj-green-bg:       #0d2018;
  --fj-shadow-sm: 0 1px 3px rgba(0,0,0,.24);
  --fj-shadow:    0 4px 12px rgba(0,0,0,.32);
  --fj-shadow-lg: 0 12px 32px rgba(0,0,0,.40);
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fj-font-sans);
  background: var(--fj-bg);
  color: var(--fj-text-primary);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--fj-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

ul, ol { list-style: none; }

/* --- Layout ------------------------------------------------ */
.fj-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.fj-layout--sidebar {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 768px) {
  .fj-layout--sidebar {
    grid-template-columns: 1fr;
  }
  .fj-sidebar { order: 2; }
  .fj-main-content { order: 1; }
}

/* --- Header ------------------------------------------------ */
.fj-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fj-surface);
  border-bottom: 1px solid var(--fj-border);
  box-shadow: var(--fj-shadow-sm);
}

.fj-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--fj-header-h);
}

.fj-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--fj-text-primary);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  flex-shrink: 0;
}
.fj-logo:hover { text-decoration: none; color: var(--fj-accent); }
.fj-logo__icon { width: 22px; height: 22px; color: var(--fj-accent); }

.fj-nav {
  display: flex;
  gap: .25rem;
  flex: 1;
}
.fj-nav__link {
  padding: .4rem .75rem;
  border-radius: var(--fj-radius-sm);
  color: var(--fj-text-secondary);
  font-size: .9rem;
  font-weight: 500;
  transition: background var(--fj-transition), color var(--fj-transition);
  text-decoration: none;
}
.fj-nav__link:hover { background: var(--fj-surface-alt); color: var(--fj-text-primary); }
.fj-nav__link--active { color: var(--fj-accent); background: var(--fj-accent-light); }

.fj-header__actions { display: flex; align-items: center; gap: .5rem; }

.fj-theme-toggle,
.fj-mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--fj-radius-sm);
  border: 1px solid var(--fj-border);
  background: transparent;
  cursor: pointer;
  color: var(--fj-text-secondary);
  transition: background var(--fj-transition), color var(--fj-transition);
}
.fj-theme-toggle:hover,
.fj-mobile-menu-btn:hover { background: var(--fj-surface-alt); color: var(--fj-text-primary); }
.fj-theme-toggle .fj-icon--moon { display: none; }
[data-theme="dark"] .fj-theme-toggle .fj-icon--sun { display: none; }
[data-theme="dark"] .fj-theme-toggle .fj-icon--moon { display: block; }

.fj-mobile-menu-btn { display: none; }
@media (max-width: 640px) {
  .fj-nav { display: none; }
  .fj-mobile-menu-btn { display: flex; }
}

.fj-mobile-nav {
  background: var(--fj-surface);
  border-bottom: 1px solid var(--fj-border);
  padding: .75rem 1.25rem;
  display: none;
  flex-direction: column;
  gap: .25rem;
}
.fj-mobile-nav.is-open { display: flex; }
.fj-mobile-nav__link {
  display: block;
  padding: .5rem .75rem;
  border-radius: var(--fj-radius-sm);
  color: var(--fj-text-secondary);
  font-weight: 500;
}
.fj-mobile-nav__link:hover { background: var(--fj-surface-alt); color: var(--fj-text-primary); text-decoration: none; }

/* --- Icons ------------------------------------------------- */
.fj-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: -.15em;
}
.fj-icon--xl { width: 40px; height: 40px; }

/* --- Buttons ----------------------------------------------- */
.fj-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: var(--fj-radius);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background var(--fj-transition), border-color var(--fj-transition), color var(--fj-transition), box-shadow var(--fj-transition);
  white-space: nowrap;
}
.fj-btn:hover { text-decoration: none; }

.fj-btn--primary {
  background: var(--fj-accent);
  color: #fff;
  border-color: var(--fj-accent);
}
.fj-btn--primary:hover { background: var(--fj-accent-dark); border-color: var(--fj-accent-dark); }

.fj-btn--secondary {
  background: var(--fj-surface);
  color: var(--fj-text-primary);
  border-color: var(--fj-border);
}
.fj-btn--secondary:hover { background: var(--fj-surface-alt); }

.fj-btn--outline {
  background: transparent;
  color: var(--fj-accent);
  border-color: var(--fj-accent-border);
}
.fj-btn--outline:hover { background: var(--fj-accent-light); }

.fj-btn--lg { padding: .75rem 1.5rem; font-size: 1rem; }
.fj-btn--sm { padding: .4rem .8rem; font-size: .82rem; border-radius: var(--fj-radius-sm); }
.fj-btn--full { width: 100%; justify-content: center; }

/* --- Badges / Tags ----------------------------------------- */
.fj-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
}
.fj-badge--featured { background: #fff4e0; color: #8a5a00; border: 1px solid #f5d9a0; }
[data-theme="dark"] .fj-badge--featured { background: #2a1f00; color: #e0b040; border-color: #5a4010; }
.fj-badge--type { background: var(--fj-green-bg); color: var(--fj-green); }
.fj-badge--location { background: var(--fj-surface-alt); color: var(--fj-text-secondary); }
.fj-badge--workmode-remote  { background: #e6f4ea; color: #1e6e3a; }
.fj-badge--workmode-hybrid  { background: #fff3e0; color: #8a4f00; }
.fj-badge--workmode-on-site { background: #e8f0fe; color: #1a4fa8; }
[data-theme="dark"] .fj-badge--workmode-remote  { background: #0d2018; color: #4ab872; }
[data-theme="dark"] .fj-badge--workmode-hybrid  { background: #2a1a00; color: #e09040; }
[data-theme="dark"] .fj-badge--workmode-on-site { background: #0d1a30; color: #6090e0; }

.fj-tag {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .2rem .55rem;
  border-radius: var(--fj-radius-sm);
  font-size: .78rem;
  background: var(--fj-surface-alt);
  color: var(--fj-text-secondary);
  border: 1px solid var(--fj-border-light);
}
.fj-tag--role { background: var(--fj-accent-light); color: var(--fj-accent); border-color: var(--fj-accent-border); }
.fj-tag--role:hover { text-decoration: none; background: var(--fj-accent-light); opacity: .85; }

/* --- Sections ---------------------------------------------- */
.fj-section { padding-block: 4rem; }
.fj-section--alt { background: var(--fj-surface-alt); }
.fj-section--404 { min-height: 60vh; display: flex; align-items: center; }

.fj-section__header { text-align: center; margin-bottom: 2.5rem; }
.fj-section__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: .5rem; }
.fj-section__subtitle { color: var(--fj-text-secondary); font-size: 1.05rem; }
.fj-section__footer { text-align: center; margin-top: 2rem; }

/* --- Hero -------------------------------------------------- */
.fj-hero {
  background: linear-gradient(135deg, var(--fj-surface) 0%, var(--fj-surface-alt) 100%);
  border-bottom: 1px solid var(--fj-border);
  padding-block: 5rem 4rem;
}
.fj-hero__content { max-width: 640px; }
.fj-hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.fj-hero__accent { color: var(--fj-accent); }
.fj-hero__subtitle { font-size: 1.1rem; color: var(--fj-text-secondary); margin-bottom: 1.75rem; max-width: 560px; }
.fj-hero__stats { display: flex; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; }
.fj-stat { text-align: left; }
.fj-stat__number { display: block; font-size: 1.75rem; font-weight: 800; color: var(--fj-accent); line-height: 1; }
.fj-stat__label  { font-size: .82rem; color: var(--fj-text-muted); font-weight: 500; }
.fj-stat--sm .fj-stat__number { font-size: 1.3rem; }
.fj-hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; }

/* --- Page Hero --------------------------------------------- */
.fj-page-hero {
  background: var(--fj-surface);
  border-bottom: 1px solid var(--fj-border);
  padding-block: 2.5rem 2rem;
}
.fj-page-hero--role { background: linear-gradient(135deg, var(--fj-surface) 0%, var(--fj-accent-light) 100%); }
.fj-page-hero__title { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; margin-bottom: .5rem; }
.fj-page-hero__subtitle { color: var(--fj-text-secondary); font-size: 1rem; margin-bottom: .5rem; }
.fj-page-hero__meta { font-size: .85rem; color: var(--fj-text-muted); }

/* --- Breadcrumb -------------------------------------------- */
.fj-breadcrumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--fj-text-muted);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.fj-breadcrumb a { color: var(--fj-text-muted); }
.fj-breadcrumb a:hover { color: var(--fj-accent); }
.fj-breadcrumb .fj-icon { width: 12px; height: 12px; }
.fj-breadcrumb span { color: var(--fj-text-secondary); }

/* --- Role Hero --------------------------------------------- */
.fj-role-hero { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.5rem; }
.fj-role-hero__icon {
  width: 72px; height: 72px;
  background: var(--fj-surface);
  border: 1px solid var(--fj-accent-border);
  border-radius: var(--fj-radius-lg);
  display: flex; align-items: center; justify-content: center;
  color: var(--fj-accent);
  flex-shrink: 0;
  box-shadow: var(--fj-shadow-sm);
}
.fj-role-hero__title { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; margin-bottom: .4rem; }
.fj-role-hero__subtitle { color: var(--fj-text-secondary); margin-bottom: .75rem; }
.fj-role-hero__stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }

@media (max-width: 480px) {
  .fj-role-hero { flex-direction: column; }
}

/* --- Company Ticker ---------------------------------------- */
.fj-company-ticker {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--fj-border-light);
}
.fj-company-ticker__label { font-size: .8rem; font-weight: 600; color: var(--fj-text-muted); text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
.fj-company-ticker__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.fj-company-chip {
  padding: .25rem .65rem;
  border-radius: 100px;
  background: var(--fj-surface);
  border: 1px solid var(--fj-border);
  font-size: .78rem;
  font-weight: 500;
  color: var(--fj-text-secondary);
}

/* --- Role Grid --------------------------------------------- */
.fj-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.fj-role-grid--full { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.fj-role-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
  background: var(--fj-surface);
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius);
  text-decoration: none;
  color: var(--fj-text-primary);
  transition: border-color var(--fj-transition), box-shadow var(--fj-transition), transform var(--fj-transition);
  position: relative;
}
.fj-role-card:hover {
  border-color: var(--fj-accent-border);
  box-shadow: var(--fj-shadow);
  transform: translateY(-1px);
  text-decoration: none;
}
.fj-role-card__icon {
  width: 40px; height: 40px;
  background: var(--fj-accent-light);
  border-radius: var(--fj-radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--fj-accent);
  flex-shrink: 0;
}
.fj-role-card__icon .fj-icon { width: 20px; height: 20px; }
.fj-role-card__body { flex: 1; min-width: 0; }
.fj-role-card__title { font-size: .9rem; font-weight: 600; line-height: 1.3; margin-bottom: .15rem; }
.fj-role-card__count { font-size: .78rem; color: var(--fj-text-muted); }
.fj-role-card__arrow { color: var(--fj-text-muted); transition: transform var(--fj-transition); flex-shrink: 0; }
.fj-role-card:hover .fj-role-card__arrow { transform: translateX(3px); color: var(--fj-accent); }

/* --- Job Grid (card layout) -------------------------------- */
.fj-job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.fj-job-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
  background: var(--fj-surface);
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);
  text-decoration: none;
  color: var(--fj-text-primary);
  transition: border-color var(--fj-transition), box-shadow var(--fj-transition), transform var(--fj-transition);
}
.fj-job-card:hover { border-color: var(--fj-accent-border); box-shadow: var(--fj-shadow); transform: translateY(-2px); text-decoration: none; }
.fj-job-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.fj-job-card__company-info { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fj-job-card__company { font-weight: 700; font-size: .85rem; color: var(--fj-accent); }
.fj-job-card__location { font-size: .78rem; color: var(--fj-text-muted); display: flex; align-items: center; gap: .25rem; }
.fj-job-card__title { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--fj-text-primary); }
.fj-job-card__excerpt { font-size: .85rem; color: var(--fj-text-secondary); line-height: 1.5; flex: 1; }
.fj-job-card__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.fj-job-card__date { font-size: .75rem; color: var(--fj-text-muted); margin-left: auto; }

/* --- Job List (listing layout) ----------------------------- */
.fj-job-list { display: flex; flex-direction: column; gap: 1rem; }

.fj-job-listing {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  background: var(--fj-surface);
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);
  padding: 1.25rem;
  transition: border-color var(--fj-transition), box-shadow var(--fj-transition);
}
.fj-job-listing:hover { border-color: var(--fj-accent-border); box-shadow: var(--fj-shadow-sm); }
.fj-job-listing__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.fj-job-listing__header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; flex-wrap: wrap; }
.fj-job-listing__badges { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.fj-job-listing__company { font-size: .85rem; font-weight: 700; color: var(--fj-accent); }
.fj-job-listing__title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.fj-job-listing__title a { color: var(--fj-text-primary); }
.fj-job-listing__title a:hover { color: var(--fj-accent); text-decoration: none; }
.fj-job-listing__desc { font-size: .875rem; color: var(--fj-text-secondary); line-height: 1.55; }
.fj-job-listing__footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.fj-job-listing__tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.fj-job-listing__date { font-size: .75rem; color: var(--fj-text-muted); display: flex; align-items: center; gap: .25rem; }
.fj-job-listing__actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: center;
  flex-shrink: 0;
  border-left: 1px solid var(--fj-border-light);
  padding-left: 1rem;
}

@media (max-width: 600px) {
  .fj-job-listing { flex-direction: column; }
  .fj-job-listing__actions { flex-direction: row; border-left: none; border-top: 1px solid var(--fj-border-light); padding-left: 0; padding-top: .75rem; }
}

/* --- Job hero (detail page) -------------------------------- */
.fj-job-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.fj-job-hero__content { flex: 1; }
.fj-job-hero__company-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.fj-job-hero__company { font-size: .9rem; font-weight: 700; color: var(--fj-accent); }
.fj-job-hero__title { font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 800; margin-bottom: .75rem; }
.fj-job-hero__meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .875rem; color: var(--fj-text-secondary); }
.fj-job-hero__meta span { display: flex; align-items: center; gap: .35rem; }
.fj-job-hero__actions { display: flex; gap: .75rem; flex-direction: column; flex-shrink: 0; }
@media (max-width: 480px) { .fj-job-hero__actions { flex-direction: row; flex-wrap: wrap; width: 100%; } }

/* --- Sidebar ----------------------------------------------- */
.fj-sidebar { position: sticky; top: calc(var(--fj-header-h) + 1rem); display: flex; flex-direction: column; gap: 1rem; }

.fj-sidebar__widget {
  background: var(--fj-surface);
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);
  padding: 1.1rem;
}
.fj-sidebar__title {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fj-text-muted);
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.fj-sidebar__title .fj-icon { width: 13px; height: 13px; }
.fj-sidebar__links { display: flex; flex-direction: column; gap: .15rem; }
.fj-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .5rem;
  border-radius: var(--fj-radius-sm);
  font-size: .85rem;
  color: var(--fj-text-secondary);
  transition: background var(--fj-transition), color var(--fj-transition);
}
.fj-sidebar__link:hover { background: var(--fj-surface-alt); color: var(--fj-text-primary); text-decoration: none; }
.fj-sidebar__link--more { color: var(--fj-accent); font-weight: 600; }
.fj-sidebar__link-count { font-size: .75rem; color: var(--fj-text-muted); font-weight: 600; background: var(--fj-surface-alt); padding: .1rem .35rem; border-radius: 100px; }
.fj-sidebar__text { font-size: .85rem; color: var(--fj-text-secondary); margin-bottom: .75rem; }

/* --- Filters ----------------------------------------------- */
.fj-filter-group { margin-bottom: 1rem; }
.fj-filter-group:last-child { margin-bottom: 0; }
.fj-filter-label { display: block; font-size: .78rem; font-weight: 600; color: var(--fj-text-muted); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .06em; }
.fj-filter-options { display: flex; flex-direction: column; gap: .2rem; }
.fj-filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .5rem;
  border-radius: var(--fj-radius-sm);
  border: none;
  background: transparent;
  font-size: .85rem;
  color: var(--fj-text-secondary);
  cursor: pointer;
  text-align: left;
  transition: background var(--fj-transition), color var(--fj-transition);
}
.fj-filter-btn:hover { background: var(--fj-surface-alt); color: var(--fj-text-primary); }
.fj-filter-btn--active { background: var(--fj-accent-light); color: var(--fj-accent); font-weight: 600; }
.fj-filter-count { font-size: .72rem; color: var(--fj-text-muted); background: var(--fj-surface-alt); padding: .1rem .3rem; border-radius: 100px; }
.fj-filter-btn--active .fj-filter-count { background: var(--fj-accent-border); color: var(--fj-accent); }

/* --- Search bar -------------------------------------------- */
.fj-search { margin-bottom: 1rem; }
.fj-search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.fj-search__icon {
  position: absolute;
  left: .85rem;
  width: 16px;
  height: 16px;
  color: var(--fj-text-muted);
  pointer-events: none;
}
.fj-search__input {
  width: 100%;
  padding: .65rem .85rem .65rem 2.5rem;
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius);
  background: var(--fj-surface);
  color: var(--fj-text-primary);
  font-size: .9rem;
  font-family: var(--fj-font-sans);
  transition: border-color var(--fj-transition), box-shadow var(--fj-transition);
}
.fj-search__input::placeholder { color: var(--fj-text-muted); }
.fj-search__input:focus {
  outline: none;
  border-color: var(--fj-accent);
  box-shadow: 0 0 0 3px var(--fj-accent-light);
}

/* --- Results header ---------------------------------------- */
.fj-results-header { margin-bottom: 1rem; }
.fj-results-count { font-size: .85rem; color: var(--fj-text-muted); }

/* --- Prose card -------------------------------------------- */
.fj-prose-card {
  background: var(--fj-surface);
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.fj-prose-card h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }
.fj-prose-card p { color: var(--fj-text-secondary); line-height: 1.7; }
.fj-external-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; margin-top: .75rem; color: var(--fj-accent); }

/* --- Job summary ------------------------------------------- */
.fj-job-summary__list { display: grid; grid-template-columns: auto 1fr; gap: .5rem .75rem; align-items: center; margin-bottom: 1rem; font-size: .875rem; }
.fj-job-summary__list dt { color: var(--fj-text-muted); display: flex; align-items: center; gap: .35rem; font-weight: 500; }
.fj-job-summary__list dt .fj-icon { width: 14px; height: 14px; }
.fj-job-summary__list dd { color: var(--fj-text-secondary); font-weight: 500; }

/* --- Related jobs ------------------------------------------ */
.fj-related-jobs { margin-top: 1.5rem; }
.fj-related-jobs__title { font-size: 1.1rem; font-weight: 700; margin-bottom: .35rem; }
.fj-related-jobs__subtitle { font-size: .875rem; color: var(--fj-text-secondary); margin-bottom: 1rem; }
.fj-related-jobs .fj-btn { margin-top: .75rem; }

/* --- CTA box ----------------------------------------------- */
.fj-cta-box {
  background: var(--fj-accent-light);
  border: 1px solid var(--fj-accent-border);
  border-radius: var(--fj-radius-xl);
  padding: 2.5rem;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.fj-cta-box__icon { width: 40px; height: 40px; color: var(--fj-accent); margin: 0 auto 1rem; }
.fj-cta-box__title { font-size: 1.4rem; font-weight: 700; margin-bottom: .75rem; }
.fj-cta-box__text { color: var(--fj-text-secondary); margin-bottom: 1.5rem; line-height: 1.65; }

/* --- Empty state ------------------------------------------- */
.fj-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
  gap: .75rem;
}
.fj-empty-state--lg { padding: 5rem 1.5rem; }
.fj-empty-state__icon { width: 48px; height: 48px; color: var(--fj-text-muted); }
.fj-empty-state__code { font-size: 5rem; font-weight: 900; color: var(--fj-border); line-height: 1; }
.fj-empty-state__title { font-size: 1.4rem; font-weight: 700; }
.fj-empty-state__text { color: var(--fj-text-secondary); max-width: 400px; }
.fj-empty-state__actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem; }

/* --- Footer ------------------------------------------------ */
.fj-footer {
  background: var(--fj-surface);
  border-top: 1px solid var(--fj-border);
  margin-top: auto;
}
.fj-footer__inner {
  display: flex;
  gap: 3rem;
  padding-block: 3rem;
  flex-wrap: wrap;
}
.fj-footer__brand { flex: 1; min-width: 200px; }
.fj-footer__tagline { font-size: .875rem; color: var(--fj-text-muted); margin-top: .5rem; max-width: 280px; line-height: 1.55; }
.fj-footer__nav { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.fj-footer__nav-group { display: flex; flex-direction: column; gap: .5rem; }
.fj-footer__nav-heading { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--fj-text-muted); margin-bottom: .15rem; }
.fj-footer__nav-link { font-size: .875rem; color: var(--fj-text-secondary); }
.fj-footer__nav-link:hover { color: var(--fj-accent); }
.fj-footer__bottom { border-top: 1px solid var(--fj-border); padding-block: 1rem; }
.fj-footer__bottom p { font-size: .8rem; color: var(--fj-text-muted); }

/* --- Animations -------------------------------------------- */
.fj-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease;
}
.fj-reveal.fj-revealed {
  opacity: 1;
  transform: none;
}

/* --- Utility ----------------------------------------------- */
.fj-hidden { display: none !important; }