/* ============================================================
   ImmigrationCafe Jobs — homepage.css  (redesigned)
   Key changes vs original:
   • Apply button: green (#16A34A) not dark navy — visible, not black
   • Salary badge: deeper amber ink + slightly larger font — readable
   • Logo: 64×64 → 56×56 on ticket, giving more room to text
   • All body text bumped up 1–1.5px for readability
   • Job title, company name, badge sizes all increased
   • Section headings larger and bolder
   • Ticket gets subtle left-border accent for polish
   • Search: always-visible single-bar below header, no toggle hiding
   • Hero section more prominent with gradient band
   • Company chip cards cleaner with visible name
   ============================================================ */

/* ── Design tokens ────────────────────────────────────────── */
.icjb {
  --icjb-ink:        #0F1F3D;
  --icjb-paper:      #F5F7FA;
  --icjb-card:       #FFFFFF;
  --icjb-line:       #E2E8F0;
  --icjb-muted:      #64748B;
  --icjb-amber:      #F59E0B;
  --icjb-amber-hover:#D97706;
  --icjb-amber-ink:  #431407;   /* deeper — old #5C3A00 was too dim at small size */
  --icjb-amber-bg:   #FEF3C7;
  --icjb-blue:       #6D28D9;   /* v21: was blue #1D4ED8, now the purple brand accent */
  --icjb-blue-bg:    #F5F3FF;   /* v21: matching light violet tint */
  --icjb-purple:     #6D28D9;   /* alias — new code should prefer this name */
  --icjb-purple-dark:#4C1D95;
  --icjb-purple-bg:  #F5F3FF;
  --icjb-gray:       #475569;
  --icjb-pink:       #DB2777;
  --icjb-green:      #16A34A;
  --icjb-green-bg:   #DCFCE7;
  --icjb-apply:      #16A34A;   /* Apply button colour — distinct, never black */
  --icjb-apply-hover:#15803D;
  --icjb-radius:     12px;
  --icjb-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --icjb-font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --icjb-font-data:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-family: var(--icjb-font-body);
  background: var(--icjb-paper);
  color: var(--icjb-ink);
}
.icjb * { box-sizing: border-box; }
.icjb a { color: inherit; text-decoration: none; }

/* ── Layout shell ─────────────────────────────────────────── */
.icjb-inner {
  max-width: 520px;
  margin: 0 auto;
}

/* On mobile, some page templates (e.g. a narrow/sidebar page layout on
   your "All Jobs" page) constrain the theme's content column, which left
   dead white space on both sides of the job cards. This forces the
   plugin's content to break out and use the full device width instead,
   regardless of what container the theme wraps it in. Desktop/tablet are
   unaffected — the 520/720/1180px max-widths above still apply there. */
@media (max-width: 639px) {
  .icjb-inner {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}

/* ── Sticky header ────────────────────────────────────────── */
.icjb-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  height: 56px;
  background: var(--icjb-card);
  border-bottom: 1px solid var(--icjb-line);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(15,31,61,.06);
}
.icjb-header-inner {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icjb-logo {
  font-family: var(--icjb-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--icjb-ink);
}
.icjb-logo span { color: var(--icjb-amber); }

/* ── Search — always visible bar (no hidden drawer) ──────── */
.icjb-search-toggle { display: none; }  /* toggle button hidden — bar is always open */

.icjb-search-drawer {
  background: var(--icjb-card);
  border-bottom: 2px solid var(--icjb-line);
  padding: 10px 18px 12px;
}
.icjb-search-form {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
}
.icjb-search-form input,
.icjb-search-form select {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--icjb-line);
  border-radius: 9px;
  font-size: 14px;
  font-family: var(--icjb-font-body);
  background: var(--icjb-paper);
  color: var(--icjb-ink);
}
.icjb-search-form input:focus,
.icjb-search-form select:focus {
  outline: none;
  border-color: var(--icjb-blue);
  box-shadow: 0 0 0 3px rgba(109,40,217,.14);
}
.icjb-search-form button {
  padding: 10px 20px;
  border: none;
  border-radius: 9px;
  background: var(--icjb-blue);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background .15s;
}
.icjb-search-form button:hover { background: #5B21B6; }

/* ── Results bar ──────────────────────────────────────────── */
.icjb-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.icjb-results-bar h2 { margin: 0; }
.icjb-clear-search {
  font-size: 13px;
  font-weight: 700;
  color: var(--icjb-blue);
  white-space: nowrap;
  flex-shrink: 0;
}
.icjb-clear-search:hover { text-decoration: underline; }

/* ── Hero band ────────────────────────────────────────────── */
.icjb-hero {
  background: linear-gradient(135deg, #2E1065 0%, #6D28D9 100%);
  padding: 28px 20px 22px;
  text-align: center;
}
.icjb-hero h1 {
  font-family: var(--icjb-font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: #ffffff;
}
.icjb-hero p {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin: 0;
  line-height: 1.55;
}

/* ── Sections ─────────────────────────────────────────────── */
.icjb-section {
  padding: 22px 18px 4px;
  scroll-margin-top: 70px;
}
.icjb-related-section {
  border-top: 1px solid var(--icjb-line);
  margin-top: 4px;
  padding-top: 24px;
}
.icjb-section h2 {
  font-family: var(--icjb-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  color: var(--icjb-ink);
}
.icjb-empty { font-size: 14px; color: var(--icjb-muted); }

/* ── Category grid ────────────────────────────────────────── */
/* Mobile: 2-row horizontal slider (swipe for more), never taller than 2 rows.
   Tablet/desktop media queries below switch back to a normal wrapping grid. */
.icjb-cat-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: minmax(148px, 1fr);
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.icjb-cat-grid::-webkit-scrollbar { display: none; }
.icjb-cat-grid .icjb-cat-card { scroll-snap-align: start; }
.icjb-cat-card {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--icjb-card);
  border: 1px solid var(--icjb-line);
  border-left: 3px solid var(--icjb-blue);
  border-radius: 9px;
  padding: 10px 8px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.icjb-cat-card:hover {
  box-shadow: 0 4px 14px rgba(15,31,61,.1);
  transform: translateY(-1px);
}
.icjb-cat-card:active { transform: translateY(0) scale(.98); }
.icjb-cat-card.icjb-collar-blue  { border-left-color: var(--icjb-blue); }
.icjb-cat-card.icjb-collar-gray  { border-left-color: var(--icjb-gray); }
.icjb-cat-card.icjb-collar-pink  { border-left-color: var(--icjb-pink); }

.icjb-cat-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icjb-blue-bg);
  color: var(--icjb-blue);
}
.icjb-cat-icon svg { width: 15px; height: 15px; }
.icjb-collar-gray .icjb-cat-icon { background: #EEF1F5; color: var(--icjb-gray); }
.icjb-collar-pink .icjb-cat-icon { background: #FCE8EF; color: var(--icjb-pink); }

.icjb-cat-text   { min-width: 0; }
.icjb-cat-label  { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icjb-cat-sub    { display: block; font-size: 10px; color: var(--icjb-muted); margin-top: 1px; }

/* ── Job feed ─────────────────────────────────────────────── */
.icjb-job-feed {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-bottom: 6px;
}

/* ── Job ticket card ──────────────────────────────────────── */
.icjb-ticket {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--icjb-card);
  border: 1px solid var(--icjb-line);
  border-left: 4px solid var(--icjb-blue);   /* left accent stripe for polish */
  border-radius: var(--icjb-radius);
  padding: 14px 14px 14px 12px;
  box-shadow: 0 1px 3px rgba(15,31,61,.05);
  transition: box-shadow .15s ease, transform .15s ease;
}
.icjb-ticket:hover {
  box-shadow: 0 6px 18px rgba(15,31,61,.1);
  transform: translateY(-2px);
}

/* logo: 56×56 (was 92×92) — smaller but still clear */
.icjb-ticket-logo {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--icjb-line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.icjb-ticket-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.icjb-ticket-logo-fallback {
  font-family: var(--icjb-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--icjb-muted);
}

/* text area */
.icjb-ticket-main { flex: 1; min-width: 0; }
.icjb-ticket-title {
  display: block;
  font-size: 15px;           /* was 14.5px */
  font-weight: 700;
  margin-bottom: 3px;
  line-height: 1.3;
  color: var(--icjb-ink);
}
.icjb-ticket-title:hover { text-decoration: underline; }
.icjb-ticket-company {
  font-size: 13px;           /* was 12px */
  font-weight: 600;
  color: var(--icjb-muted);
  margin-bottom: 9px;
}

/* ── Badges ───────────────────────────────────────────────── */
.icjb-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.icjb-badge {
  font-family: var(--icjb-font-data);
  font-size: 11.5px;         /* was 10.5px — +1px for readability */
  font-weight: 700;          /* was 600 — bolder for contrast */
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: .01em;
}

/* Salary badge: brighter background, much deeper ink so text pops */
.icjb-badge-salary {
  background: var(--icjb-amber-bg);   /* #FEF3C7 — softer gold bg */
  color: var(--icjb-amber-ink);       /* #431407 — very dark red-brown, high contrast */
  border: 1px solid #F59E0B;          /* amber border so it reads as "money" */
}
.icjb-badge-visa    { background: var(--icjb-green-bg); color: var(--icjb-green); }
.icjb-badge-self    { background: #F1F5F9; color: var(--icjb-gray); }
.icjb-badge-housing { background: var(--icjb-blue-bg); color: var(--icjb-blue); }
.icjb-badge-expiry  { background: #F8FAFC; color: var(--icjb-muted); border: 1px solid var(--icjb-line); }
.icjb-badge-jobtype.icjb-jobtype-full-time { background: #DCFCE7; color: #15803D; }
.icjb-badge-jobtype.icjb-jobtype-part-time { background: var(--icjb-blue-bg); color: var(--icjb-blue); }
.icjb-badge-jobtype.icjb-jobtype-remote    { background: #F3E8FF; color: #7E22CE; }

/* ── Ticket side (location + Apply) ───────────────────────── */
.icjb-ticket-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}
.icjb-ticket-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--icjb-green);
  white-space: nowrap;
}
.icjb-ticket-location svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Apply button — GREEN, not dark navy ──────────────────── */
.icjb-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--icjb-apply);   /* #16A34A — clearly visible green */
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .15s;
}
.icjb-apply-btn:hover { background: var(--icjb-apply-hover); }
.icjb-apply-btn-ticket  { font-size: 13px; padding: 8px 14px; }
.icjb-apply-btn-sidebar { width: 100%; justify-content: center; font-size: 14px; padding: 10px; margin-top: 4px; }
.icjb-apply-btn-sidebar svg { width: 15px; height: 15px; }

/* ── Walk-in Interview: badge, ticket accent, position chips ─ */
.icjb-badge-walkin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--icjb-amber-bg);
  color: var(--icjb-amber-ink);
  border: 1px solid var(--icjb-amber);
}
.icjb-badge-walkin svg { width: 12px; height: 12px; }

.icjb-ticket-walkin { border-left: 3px solid var(--icjb-amber); }

.icjb-position-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.icjb-position-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: #F1F5F9;
  color: var(--icjb-ink);
  border: 1px solid var(--icjb-line);
  white-space: nowrap;
}

.icjb-apply-btn-walkin { background: var(--icjb-amber); color: #1F1100; }
.icjb-apply-btn-walkin:hover { background: var(--icjb-amber-hover); }

/* Homepage banner promoting active walk-in events */
.icjb-walkin-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1.5px solid var(--icjb-amber);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  text-decoration: none !important;
  transition: transform .12s, box-shadow .15s;
}
.icjb-walkin-banner:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,158,11,.25); }
.icjb-walkin-banner-icon {
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--icjb-amber);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.icjb-walkin-banner-icon svg { width: 20px; height: 20px; }
.icjb-walkin-banner-text  { flex: 1; min-width: 0; }
.icjb-walkin-banner-title { display: block; font-size: 14.5px; font-weight: 800; color: var(--icjb-ink); }
.icjb-walkin-banner-sub   { display: block; font-size: 12px; font-weight: 600; color: #B45309; margin-top: 2px; }
.icjb-walkin-banner-arrow { flex: 0 0 16px; width: 16px; height: 16px; color: var(--icjb-amber-hover); }

/* Directions + Call/WhatsApp buttons on the single walk-in overview card */
.icjb-directions-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px;
  margin-top: -4px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: var(--icjb-blue-bg);
  color: var(--icjb-blue);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
}
.icjb-directions-btn svg { width: 15px; height: 15px; }

.icjb-walkin-contact-row { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.icjb-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px;
  border-radius: 8px;
  background: #F1F5F9;
  color: var(--icjb-ink);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
}
.icjb-contact-btn svg { width: 16px; height: 16px; }
.icjb-contact-btn-whatsapp { background: #DCFCE7; color: #15803D; }

/* ── Contact fallback (email/phone boxes) ─────────────────── */
.icjb-apply-contact          { display: flex; flex-direction: column; gap: 6px; }
.icjb-apply-contact-ticket   { align-items: flex-end; }
.icjb-apply-contact-ticket .icjb-apply-contact-box { width: 150px; font-size: 11px; padding: 6px 8px; }
.icjb-apply-contact-sidebar  { margin-top: 4px; }
.icjb-apply-contact-label    { font-size: 12px; color: var(--icjb-muted); }
.icjb-apply-contact-box {
  border: 1px solid var(--icjb-line);
  border-radius: 7px;
  background: var(--icjb-paper);
  color: var(--icjb-ink);
  font-family: var(--icjb-font-data);
  font-size: 12.5px;
  padding: 9px 10px;
  width: 100%;
  text-align: left;
  cursor: text;
}
.icjb-apply-contact-box:focus { outline: 2px solid var(--icjb-amber); outline-offset: 1px; }

/* ── CV tool CTA ──────────────────────────────────────────── */
/* Deliberately styled to contrast with the blue ticket accents and the
   green Apply button below it — warm amber/orange, animated glow, and a
   FREE badge so it reads as "do this first" at a single glance. */
.icjb-cv-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
  border: 1.5px solid var(--icjb-amber);
  border-radius: 8px;
  padding: 6px 9px;
  margin-bottom: 7px;
  box-shadow: 0 0 0 rgba(245,158,11,.35);
  animation: icjb-cv-glow 2.2s ease-in-out infinite;
}
@keyframes icjb-cv-glow {
  0%, 100% { box-shadow: 0 2px 8px rgba(245,158,11,.18); }
  50%      { box-shadow: 0 2px 20px rgba(245,158,11,.5); }
}
.icjb-cv-cta:hover {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  transform: translateY(-1px);
}
.icjb-cv-cta-badge {
  position: absolute;
  top: -9px;
  left: 12px;
  background: var(--icjb-amber);
  color: #1F1100;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(245,158,11,.5);
}
.icjb-cv-cta-icon {
  flex: 0 0 24px; width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--icjb-amber);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(245,158,11,.4);
}
.icjb-cv-cta-icon svg { width: 12px; height: 12px; }
.icjb-cv-cta-text  { flex: 1; min-width: 0; }
.icjb-cv-cta-title { display: block; font-size: 11.5px; font-weight: 800; color: var(--icjb-ink); line-height: 1.25; }
.icjb-cv-cta-sub   { display: block; font-size: 10px; color: #B45309; font-weight: 700; margin-top: 1px; }
.icjb-cv-cta > svg { flex: 0 0 12px; width: 12px; height: 12px; color: var(--icjb-amber-hover); }

/* ── Companies carousel ───────────────────────────────────── */
.icjb-carousel-wrap { position: relative; }
.icjb-company-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.icjb-company-strip::-webkit-scrollbar { display: none; }
.icjb-company-chip {
  flex: 0 0 auto;
  width: 128px;
  background: var(--icjb-card);
  border: 1px solid var(--icjb-line);
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  transition: box-shadow .15s;
}
.icjb-company-chip:hover { box-shadow: 0 4px 12px rgba(15,31,61,.1); }
.icjb-company-avatar {
  width: 64px; height: 64px;
  margin: 0 auto 8px;
  border-radius: 12px;
  background: var(--icjb-ink);
  color: #fff;
  font-family: var(--icjb-font-display);
  font-weight: 800;
  font-size: 24px;
  display: flex; align-items: center; justify-content: center;
}
.icjb-company-logo {
  width: 64px; height: 64px;
  margin: 0 auto 8px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--icjb-line);
  padding: 5px;
  display: block;
}
.icjb-company-name  { font-size: 11px; font-weight: 700; line-height: 1.3; margin-bottom: 3px; }
.icjb-company-count { font-size: 10px; color: var(--icjb-green); font-weight: 600; }

.icjb-carousel-btn {
  display: none;
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--icjb-line);
  background: var(--icjb-card);
  box-shadow: 0 2px 6px rgba(15,31,61,.12);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.icjb-carousel-btn svg { width: 14px; height: 14px; }
.icjb-carousel-prev { left: -14px; }
.icjb-carousel-next { right: -14px; }

/* ── Single job: top band ─────────────────────────────────── */
.icjb-topbar {
  background: var(--icjb-paper);
  border-bottom: 1px solid var(--icjb-line);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.icjb-topbar-category {
  font-size: 12px;
  color: var(--icjb-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  width: 100%;
}

/* ── Single job: detail layout ────────────────────────────── */
.icjb-detail-grid   { display: block; padding: 20px 18px; width: 100%; }
.icjb-detail-main   { font-size: 15px; line-height: 1.75; width: 100%; }
.icjb-detail-main p { margin: 0 0 14px; }
.icjb-detail-sidebar { width: 100%; margin-top: 24px; }
.icjb-overview-card  {
  background: var(--icjb-paper);
  border: 1px solid var(--icjb-line);
  border-radius: var(--icjb-radius);
  padding: 22px;
}
.icjb-overview-heading { font-family: var(--icjb-font-display); font-weight: 800; font-size: 17px; margin: 0 0 20px; }
.icjb-overview-row     { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.icjb-overview-icon    { width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px; background: var(--icjb-blue-bg); color: var(--icjb-blue); display: flex; align-items: center; justify-content: center; }
.icjb-overview-icon svg { width: 20px; height: 20px; }
.icjb-overview-icon.icjb-overview-icon-logo { width: 60px; height: 60px; background: #fff; border: 1px solid var(--icjb-line); border-radius: 10px; padding: 4px; }
.icjb-overview-logo    { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.icjb-overview-label   { display: block; font-size: 12.5px; color: var(--icjb-muted); margin-bottom: 3px; }
.icjb-overview-value   { display: block; font-size: 16px; font-weight: 700; color: var(--icjb-ink); }

/* ── Focus styles ─────────────────────────────────────────── */
.icjb a:focus-visible,
.icjb button:focus-visible { outline: 2px solid var(--icjb-amber); outline-offset: 2px; }

/* ── Mobile: narrow wrap ──────────────────────────────────── */
@media (max-width: 420px) {
  .icjb-ticket { flex-wrap: wrap; }
  .icjb-ticket-side {
    flex: 0 0 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--icjb-line);
  }
  .icjb-apply-contact-ticket              { align-items: flex-start; }
  .icjb-apply-contact-ticket .icjb-apply-contact-box { width: 130px; }
}

/* ── Tablet ───────────────────────────────────────────────── */
@media (min-width: 640px) {
  .icjb-inner,
  .icjb-header-inner,
  .icjb-search-form { max-width: 720px; }
  .icjb-hero h1 { font-size: 26px; }
  .icjb-cat-grid {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* ── Desktop ──────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .icjb-inner,
  .icjb-header-inner,
  .icjb-search-form { max-width: 1180px; }
  .icjb-header { padding: 0 32px; height: 62px; }
  .icjb-search-drawer { padding: 12px 32px 14px; }
  .icjb-topbar        { padding: 18px 32px; }
  .icjb-detail-grid   { display: grid; grid-template-columns: 1fr 360px; gap: 36px; padding: 36px; }
  .icjb-detail-sidebar { margin-top: 0; }
  .icjb-overview-card  { position: sticky; top: 20px; }
  .icjb-section        { padding: 36px 32px 6px; }
  .icjb-hero           { padding: 48px 32px 36px; }
  .icjb-hero h1        { font-size: 36px; max-width: 720px; margin: 0 auto 10px; }
  .icjb-hero p         { font-size: 16px; max-width: 560px; margin: 0 auto; }
  .icjb-section h2     { font-size: 20px; margin-bottom: 18px; }
  .icjb-cat-grid       { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(6, 1fr); gap: 12px; overflow-x: visible; }
  .icjb-company-chip   { width: 148px; padding: 18px 10px; }
  .icjb-company-avatar,
  .icjb-company-logo   { width: 72px; height: 72px; }
  .icjb-carousel-btn   { display: flex; }
  .icjb-carousel-wrap  { padding: 0 6px; }
  .icjb-ticket-logo    { flex: 0 0 64px; width: 64px; height: 64px; } /* slightly bigger on desktop */
  .icjb-ticket-title   { font-size: 16px; }
  .icjb-ticket-company { font-size: 14px; }
  .icjb-badge          { font-size: 12px; padding: 5px 10px; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .icjb-ticket,
  .icjb-company-strip { transition: none; scroll-behavior: auto; }
  .icjb-cv-cta { animation: none; }
}

/* ── Hide theme featured image on single job posts ─────────── */
body.single-icjb_job .post-thumbnail,
body.single-icjb_job .entry-thumbnail,
body.single-icjb_job .wp-post-image,
body.single-icjb_job img.attachment-post-thumbnail,
body.single-icjb_job .featured-image { display: none !important; }

/* ============================================================
   PATCH: Force Apply / View Job button green regardless of
   theme overrides. Using !important intentionally — the theme
   is the only thing that could still win specificity here.
   ============================================================ */
.icjb .icjb-apply-btn,
.icjb-ticket .icjb-apply-btn,
a.icjb-apply-btn {
  background: #16A34A !important;
  color: #ffffff !important;
  border: none !important;
}
.icjb .icjb-apply-btn:hover,
.icjb-ticket .icjb-apply-btn:hover,
a.icjb-apply-btn:hover {
  background: #15803D !important;
  color: #ffffff !important;
}

/* Contract / Freelance badge colours */
.icjb-badge-jobtype.icjb-jobtype-contract  { background: #FEF9C3; color: #854D0E; }
.icjb-badge-jobtype.icjb-jobtype-freelance { background: #F3E8FF; color: #6B21A8; }

/* ============================================================
   DETAIL PAGE: top category + meta bar
   ============================================================ */
.icjb-detail-topbar {
  border-bottom: 1px solid var(--icjb-line);
  background: var(--icjb-card);
  padding-bottom: 0;
}

/* ── Category pills strip ─────────────────────────────────── */
.icjb-cat-pills-wrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--icjb-line);
}
.icjb-cat-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.icjb-cat-pills::-webkit-scrollbar { display: none; }

/* Left/right fade-edge hint */
.icjb-pills-fade-left,
.icjb-pills-fade-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 36px;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 2;
}
.icjb-pills-fade-left  {
  left: 0;
  background: linear-gradient(to right, var(--icjb-card) 0%, transparent 100%);
  opacity: 0;
}
.icjb-pills-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--icjb-card) 0%, transparent 100%);
  opacity: 0;
}

/* Individual pill */
.icjb-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--icjb-line);
  background: var(--icjb-paper);
  color: var(--icjb-muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  text-decoration: none;
}
.icjb-cat-pill:hover {
  border-color: var(--icjb-blue);
  color: var(--icjb-blue);
  background: var(--icjb-blue-bg);
}
.icjb-cat-pill--active {
  background: var(--icjb-ink) !important;
  border-color: var(--icjb-ink) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(15,31,61,.25);
}

/* Collar colour for inactive pills */
.icjb-cat-pill.icjb-collar-blue:not(.icjb-cat-pill--active):hover { border-color: var(--icjb-blue); color: var(--icjb-blue); background: var(--icjb-blue-bg); }
.icjb-cat-pill.icjb-collar-gray:not(.icjb-cat-pill--active):hover { border-color: var(--icjb-gray); color: var(--icjb-gray); background: #EEF1F5; }
.icjb-cat-pill.icjb-collar-pink:not(.icjb-cat-pill--active):hover { border-color: var(--icjb-pink); color: var(--icjb-pink); background: #FCE8EF; }

.icjb-pill-icon { display: flex; align-items: center; }
.icjb-pill-icon svg { width: 14px; height: 14px; }
.icjb-pill-label { line-height: 1; }
.icjb-pill-count {
  background: rgba(0,0,0,.08);
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.icjb-cat-pill--active .icjb-pill-count { background: rgba(255,255,255,.22); }

/* ── Meta strip (category label + type + location + salary) ─ */
.icjb-detail-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px 14px;
}
.icjb-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 7px;
}
.icjb-meta-chip svg { width: 14px; height: 14px; }
.icjb-meta-chip--cat {
  background: var(--icjb-blue-bg);
  color: var(--icjb-blue);
}
.icjb-meta-chip--loc {
  background: var(--icjb-green-bg);
  color: var(--icjb-green);
}

/* On desktop, constrain the topbar to the content width */
@media (min-width: 1024px) {
  .icjb-cat-pills  { padding: 14px 32px; }
  .icjb-detail-meta-strip { padding: 14px 32px 16px; max-width: 1180px; margin: 0 auto; }
}

/* ============================================================
   v3 PATCH: All 5 fixes from feedback
   ============================================================ */

/* ── FIX 4: Search bar — no background fill, compact on mobile ── */
.icjb-search-drawer {
  background: transparent;
  padding: 14px 16px 16px;
  border-bottom: 1px solid var(--icjb-line);
}
.icjb-search-inner {
  max-width: 720px;
  margin: 0 auto;
}
.icjb-search-tagline {
  font-size: 13px;
  font-weight: 700;
  color: var(--icjb-purple);
  margin: 0 0 10px;
  letter-spacing: .01em;
}
.icjb-search-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.icjb-search-form input,
.icjb-search-form select {
  flex: 1;
  min-width: 120px;
  padding: 11px 13px;
  border: 1.5px solid var(--icjb-line);
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--icjb-font-body);
  background: var(--icjb-card);
  color: var(--icjb-ink);
  box-shadow: none;
}
.icjb-search-form input:focus,
.icjb-search-form select:focus {
  outline: 2px solid #FCD34D;
  box-shadow: 0 0 0 4px rgba(252,211,77,.25);
}
.icjb-search-form button {
  padding: 11px 22px;
  border: none;
  border-radius: 10px;
  background: var(--icjb-amber);
  color: #1F1100;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(245,158,11,.4);
  transition: background .15s, transform .1s;
}
.icjb-search-form button:hover { background: var(--icjb-amber-hover); transform: translateY(-1px); }
.icjb-clear-search-inline {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--icjb-muted);
  font-weight: 600;
  cursor: pointer;
}
.icjb-clear-search-inline:hover { color: var(--icjb-purple); }
@media (max-width: 480px) {
  .icjb-search-drawer { padding: 10px 14px 12px; }
  .icjb-search-tagline { font-size: 12px; margin-bottom: 8px; }
  .icjb-search-form { gap: 7px; }
  .icjb-search-form input,
  .icjb-search-form select { font-size: 13.5px; padding: 10px 11px; }
  .icjb-search-form button { padding: 10px 16px; font-size: 13.5px; }
}
@media (min-width: 768px) {
  .icjb-search-drawer { padding: 16px 24px 18px; }
  .icjb-search-form { flex-wrap: nowrap; }
}

/* ── FIX 3: Location text — larger and more prominent ─────── */
.icjb-ticket-location {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--icjb-green) !important;
  letter-spacing: .01em;
}
.icjb-ticket-location svg { width: 15px !important; height: 15px !important; }

/* ── "More Jobs" load-more button ────────────────────────── */
.icjb-loadmore-wrap {
  text-align: center;
  padding: 20px 0 8px;
}
.icjb-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--icjb-purple);
  color: #fff !important;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 32px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(15,31,61,.25);
  transition: background .15s, transform .12s, box-shadow .15s;
  font-family: inherit;
}
.icjb-loadmore-btn:hover:not(:disabled) {
  background: #5B21B6;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(109,40,217,.35);
}
.icjb-loadmore-btn:disabled {
  opacity: .7;
  cursor: default;
  transform: none;
}
.icjb-loadmore-btn svg { flex-shrink: 0; }
.icjb-loadmore-btn.is-loading svg { animation: icjb-spin .8s linear infinite; }
@keyframes icjb-spin { to { transform: rotate(360deg); } }

/* ── FIX 2: Company chips — styled as links, hover effect ─── */
a.icjb-company-chip {
  display: block;
  text-decoration: none !important;
  color: var(--icjb-ink);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
a.icjb-company-chip::after {
  content: 'View Jobs →';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--icjb-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 6px 4px;
  transform: translateY(100%);
  transition: transform .2s ease;
}
a.icjb-company-chip:hover::after { transform: translateY(0); }
a.icjb-company-chip:hover {
  box-shadow: 0 6px 20px rgba(15,31,61,.18);
  border-color: var(--icjb-blue);
}

/* ── FIX 5: Related jobs salary badge — fix overflow ─────── */
.icjb-related-section .icjb-badge-row {
  flex-wrap: wrap;
}
.icjb-related-section .icjb-badge-salary {
  white-space: normal !important;
  word-break: break-word;
  max-width: 100%;
}
.icjb-related-section .icjb-ticket {
  flex-wrap: wrap;
}
.icjb-related-section .icjb-ticket-main {
  min-width: 0;
  width: 100%;
}
/* On related jobs, put side below main on narrow screens */
@media (max-width: 540px) {
  .icjb-related-section .icjb-ticket {
    display: block;
  }
  .icjb-related-section .icjb-ticket-side {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px dashed var(--icjb-line);
    width: 100%;
    display: flex;
  }
  .icjb-related-section .icjb-badge-salary {
    font-size: 11px;
  }
}

/* ============================================================
   v14 PATCH: Posted date on tickets, job_type last, mobile margins
   ============================================================ */

/* Posted date row on ticket cards */
.icjb-ticket-posted {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--icjb-muted);
  font-weight: 500;
  margin-top: 7px;
}
.icjb-ticket-posted svg {
  flex-shrink: 0;
  opacity: .7;
}

/* Date chip in detail meta strip */
.icjb-meta-chip--date {
  background: #F1F5F9;
  color: var(--icjb-muted);
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
}
.icjb-meta-chip--date svg { width: 13px; height: 13px; opacity: .75; }

/* ── Reduce mobile side margins across all sections ───────── */
@media (max-width: 640px) {
  .icjb-section             { padding-left: 10px !important; padding-right: 10px !important; }
  .icjb-ticket              { padding: 12px 10px 12px 8px; gap: 10px; }
  .icjb-ticket-logo         { flex: 0 0 48px; width: 48px; height: 48px; }
  .icjb-search-drawer       { padding-left: 10px !important; padding-right: 10px !important; }
  .icjb-detail-meta-strip   { padding-left: 10px !important; padding-right: 10px !important; }
  .icjb-cat-pills           { padding-left: 10px; padding-right: 10px; }
  .icjb-detail-grid         { padding: 12px 10px !important; }
  .icjb-overview-card       { padding: 14px 12px; }
  .icjb-npc-wrap,
  .icjb-wrap                { padding-left: 10px !important; padding-right: 10px !important; }
  /* ticket side: tighter on mobile */
  .icjb-ticket-side         { gap: 7px; }
  .icjb-apply-btn-ticket    { font-size: 12px; padding: 7px 11px; }
  /* badge text smaller on very narrow screens */
  .icjb-badge               { font-size: 11px; padding: 3px 8px; }
  .icjb-ticket-title        { font-size: 14px; }
  .icjb-ticket-company      { font-size: 12.5px; }
}

/* ── Country flag emoji ──────────────────────────────────── */
.icjb-flag {
  font-style: normal;
  font-size: 1.75em;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
/* Slightly larger in the meta strip chips */
.icjb-meta-chip--loc .icjb-flag { font-size: 1.8em; }
/* In the overview sidebar */
.icjb-overview-value .icjb-flag { font-size: 1.65em; }

/* ============================================================
   v21 PATCH: JobBoard-style redesign — purple + gold palette,
   3-column homepage layout (categories / listings / recruiters),
   and a new "Career articles" section.
   ============================================================ */

/* ── Ticket Apply CTA — outlined purple, matches reference ── */
.icjb-apply-btn-ticket {
  background: #fff;
  color: var(--icjb-purple) !important;
  border: 1.5px solid var(--icjb-purple);
  font-size: 13px;
  padding: 8px 16px;
}
.icjb-apply-btn-ticket:hover {
  background: var(--icjb-purple);
  color: #fff !important;
}

/* ── Homepage mobile/tablet order ─────────────────────────────
   Below 1024px, show the job feed first, then the categories
   list, then the recruiters strip — so people land on jobs
   immediately instead of scrolling past the sidebars first. */
@media (max-width: 1023px) {
  .icjb-homepage-grid {
    display: flex;
    flex-direction: column;
  }
  .icjb-homepage-grid > .icjb-walkin-banner { order: 0; }
  .icjb-homepage-grid > section:nth-of-type(2) { order: 1; } /* jobs */
  .icjb-homepage-grid > section:nth-of-type(1) { order: 2; } /* categories */
  .icjb-homepage-grid > section:nth-of-type(3) { order: 3; } /* companies */
}

/* ── Homepage 3-column layout (desktop only) ─────────────────
   Mobile/tablet: sections stay in the order set above — only
   >=1024px switches to the categories / listings / recruiters
   grid seen in the reference design. */
@media (min-width: 1024px) {
  .icjb-homepage-grid {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 210px;
    column-gap: 24px;
    align-items: start;
  }
  .icjb-homepage-grid > .icjb-walkin-banner {
    grid-column: 1 / -1;
  }
  .icjb-homepage-grid > section:nth-of-type(1) { grid-column: 1; }
  .icjb-homepage-grid > section:nth-of-type(2) { grid-column: 2; }
  .icjb-homepage-grid > section:nth-of-type(3) { grid-column: 3; }

  /* Categories become a plain vertical checklist, not a horizontal
     scroller — same links/data, just a sidebar layout. */
  .icjb-homepage-grid > section:nth-of-type(1) .icjb-cat-grid {
    display: flex;
    flex-direction: column;
    grid-auto-flow: unset;
    overflow: visible;
    gap: 2px;
    padding-bottom: 0;
  }
  .icjb-homepage-grid > section:nth-of-type(1) .icjb-cat-card {
    border: none;
    border-radius: 7px;
    padding: 8px 6px;
    gap: 10px;
  }
  .icjb-homepage-grid > section:nth-of-type(1) .icjb-cat-card:hover {
    background: var(--icjb-purple-bg);
    box-shadow: none;
    transform: none;
  }
  .icjb-homepage-grid > section:nth-of-type(1) .icjb-cat-icon {
    width: 24px; height: 24px;
  }
  .icjb-homepage-grid > section:nth-of-type(1) .icjb-cat-label { font-size: 13px; }
  .icjb-homepage-grid > section:nth-of-type(1) .icjb-cat-sub   { font-size: 11px; }

  /* Recruiters column becomes a plain stacked logo list instead of a
     horizontal carousel with arrows. */
  .icjb-homepage-grid > section:nth-of-type(3) .icjb-carousel-wrap { position: static; }
  .icjb-homepage-grid > section:nth-of-type(3) .icjb-carousel-btn { display: none !important; }
  .icjb-homepage-grid > section:nth-of-type(3) .icjb-company-strip {
    display: flex;
    flex-direction: column;
    overflow: visible;
    gap: 16px;
    padding-bottom: 0;
  }
  .icjb-homepage-grid > section:nth-of-type(3) .icjb-company-chip {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 0;
    border: none;
  }
  .icjb-homepage-grid > section:nth-of-type(3) .icjb-company-chip::after { display: none; }
  .icjb-homepage-grid > section:nth-of-type(3) .icjb-company-chip:hover { box-shadow: none; }
  .icjb-homepage-grid > section:nth-of-type(3) .icjb-company-logo,
  .icjb-homepage-grid > section:nth-of-type(3) .icjb-company-avatar {
    width: 40px; height: 40px; margin: 0; border-radius: 8px; flex-shrink: 0;
  }
  .icjb-homepage-grid > section:nth-of-type(3) .icjb-company-name  { font-size: 13px; margin-bottom: 1px; }
  .icjb-homepage-grid > section:nth-of-type(3) .icjb-company-count { font-size: 11px; }
}

/* ── Career articles section ──────────────────────────────── */
.icjb-articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .icjb-articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .icjb-articles-grid { grid-template-columns: repeat(3, 1fr); }
}
.icjb-article-card {
  display: block;
  background: var(--icjb-card);
  border: 1px solid var(--icjb-line);
  border-radius: var(--icjb-radius);
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.icjb-article-card:hover {
  box-shadow: 0 6px 18px rgba(15,31,61,.1);
  transform: translateY(-2px);
}
.icjb-article-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--icjb-purple-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icjb-article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.icjb-article-thumb-fallback { color: var(--icjb-purple); opacity: .5; }
.icjb-article-thumb-fallback svg { width: 32px; height: 32px; }
.icjb-article-title {
  padding: 12px 14px 14px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--icjb-ink);
}
.icjb-article-card:hover .icjb-article-title { text-decoration: underline; }