/* =============================================================
   Conservation Careers – Job Board Design System
   ============================================================= */

:root {
  --jb-green:        #8ead35;
  --jb-green-dark:   #6d8e28;
  --jb-green-light:  #f2f7e6;
  --jb-border:       #e5e7eb;
  --jb-bg:           #ffffff;
  --jb-bg-subtle:    #f9fafb;
  --jb-bg-hover:     #f7faf0;
  --jb-text:         #1a1a1a;
  --jb-text-muted:   #4b5563;
  --jb-text-light:   #6b7280;
  --jb-radius:       6px;
  --jb-radius-sm:    4px;
  --jb-shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --jb-shadow:       0 4px 12px rgba(0,0,0,0.08);
}

/* =============================================================
   JOB LISTING ROW
   ============================================================= */

/* Base reset for the listings list */
ul.job_listings {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Strip any float/inherited theme styles from the parent theme */
ul.job_listings .job_listing-title,
ul.job_listings .job_listing-company,
ul.job_listings .job_listing-company strong,
ul.job_listings .job_listing-location,
ul.job_listings .job_listing-date,
ul.job_listings .job_listing-company-tagline {
  color: var(--jb-text) !important;
}

.job_listings li.job_listing {
  border: none !important;
  border-bottom: 1px solid var(--jb-border) !important;
  background: var(--jb-bg) !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
  position: relative;
  transition: background 0.15s ease;
}

.job_listings li.job_listing:last-child {
  border-bottom: none !important;
}

.job_listings li.job_listing:hover {
  background: var(--jb-bg-hover) !important;
}

/* Featured: green left accent — Jobify outputs job_position_featured, not featured */
.job_listings li.job_listing.featured,
.job_listings li.job_listing.job_position_featured,
.job_listings li.job_listing .jb-row--featured {
  border-left: 3px solid var(--jb-green) !important;
}

/* Members-only rows: muted left accent + subtle lock tint */
.jb-row--locked {
  border-left: 3px solid var(--jb-border) !important;
  background: var(--jb-bg-subtle) !important;
}

.jb-row--locked:hover {
  background: #f3f4f6 !important;
}

/* Invisible full-row click target — reset any inherited link styling */
.job_listings li.job_listing .job_listing-clickbox,
.job_listings li.job_listing .jb-row__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: none !important;
  text-decoration: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Row layout ────────────────────────────────────────────── */
.jb-row {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  min-height: 80px;
  box-sizing: border-box;
}

/* ── Logo ──────────────────────────────────────────────────── */
.jb-row__logo {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--jb-radius);
  background: #fff;
  border: 1px solid var(--jb-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.jb-row--locked .jb-row__logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.55);
  border-radius: inherit;
}

.jb-row--locked .jb-row__logo::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151' width='18' height='18'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  line-height: 0;
}

.jb-row__logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.jb-row__logo-placeholder {
  width: 100%;
  height: 100%;
  background: var(--jb-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--jb-radius-sm);
}

.jb-lock-icon {
  width: 20px;
  height: 20px;
  color: var(--jb-border);
}

/* ── Body: title / company / location ──────────────────────── */
.jb-row__body {
  flex: 1 1 0;
  min-width: 0;
}

.jb-row__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--jb-text) !important;
  margin: 0 0 3px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
}

.jb-row__title a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.jb-row__company {
  font-size: 13px;
  color: var(--jb-text-muted) !important;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb-row__gate {
  font-size: 12px;
  font-weight: 500;
  color: var(--jb-text-light);
  font-style: italic;
}

.jb-row__location {
  font-size: 12px;
  color: var(--jb-text-light) !important;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb-row__distance {
  color: var(--jb-green);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.jb-row__location svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--jb-text-light);
}

/* ── Meta: tag + date + deadline ───────────────────────────── */
.jb-row__meta {
  flex: 0 0 auto;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.jb-row__meta-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.jb-row__date {
  font-size: 11px;
  color: var(--jb-text-light);
  white-space: nowrap;
}

/* Deadline badge — urgency variants */
.jb-row__deadline {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid transparent;
}

.jb-row__deadline--date {
  color: var(--jb-text-light);
  background: none;
  border-color: transparent;
  font-weight: 400;
  padding: 4px;
}

.jb-row__deadline--soon {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fdba74;
}

.jb-row__deadline--urgent {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fca5a5;
}

/* ── Job type tags ─────────────────────────────────────────── */
.jb-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--jb-bg-subtle);
  color: var(--jb-text-muted);
  border: 1px solid var(--jb-border);
  white-space: nowrap;
  position: relative;
  z-index: 2;
  letter-spacing: 0.01em;
}

/* Conservation Careers job types */
.jb-tag--entry-level-graduate      { background:#edf9fa; color:#2a7e80; border-color:#93d6d8; }
.jb-tag--mid-level                 { background:#f2f7e6; color:#5c7a10; border-color:#8faf2e; }
.jb-tag--senior                    { background:#fef7dc; color:#9a7200; border-color:#f9c93e; }
.jb-tag--volunteer-internships     { background:#e8f2e3; color:#3a6128; border-color:#599140; }
.jb-tag--courses-training          { background:#fdeee8; color:#b84920; border-color:#f4865e; }
.jb-tag--conservation-scholarships { background:#fce9f5; color:#a01470; border-color:#eb42a4; }
.jb-tag--research-projects         { background:#f0f9e0; color:#5a7a10; border-color:#acd461; }
.jb-tag--events                    { background:#ede8e5; color:#5c3626; border-color:#5c3626; }
.jb-tag--full-time   { background:#f2f7e6; color:#5c7a10; border-color:#8faf2e; }
.jb-tag--part-time   { background:#edf9fa; color:#2a7e80; border-color:#93d6d8; }
.jb-tag--internship  { background:#e8f2e3; color:#3a6128; border-color:#599140; }
.jb-tag--volunteer   { background:#e8f2e3; color:#3a6128; border-color:#599140; }
.jb-tag--freelance   { background:#fdeee8; color:#b84920; border-color:#f4865e; }
.jb-tag--temporary   { background:#fef7dc; color:#9a7200; border-color:#f9c93e; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .jb-row__location { display: none; }
  .jb-row__meta { min-width: 0; gap: 4px; }
}

@media (max-width: 480px) {
  .jb-row { gap: 10px; padding: 14px 16px; min-height: 0; }
  .jb-row__logo { flex: 0 0 44px; width: 44px; height: 44px; }
}

/* =============================================================
   DEADLINE URGENCY BADGES
   ============================================================= */

.jb-deadline {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

.jb-deadline--date {
  background: var(--jb-bg-subtle);
  color: var(--jb-text-muted);
  border: 1px solid var(--jb-border);
}

.jb-deadline--soon {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde68a;
}

.jb-deadline--urgent {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  animation: jb-pulse 2s ease infinite;
}

@keyframes jb-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* =============================================================
   STICKY FILTER BAR (desktop) / BOTTOM SHEET (mobile)
   ============================================================= */

.job_filters {
  border: none !important;
  border-radius: var(--jb-radius) !important;
  background: var(--jb-bg) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Override any thick/coloured borders and padding the parent theme injects */
.job_filters form,
.job_filters .search_jobs {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  margin: 0 !important;
}

/* Desktop: sticky at top */
@media (min-width: 769px) {
  .job_filters {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--jb-bg);
    padding-bottom: 12px;
    margin-bottom: 0 !important;
  }
}

/* Search form — clean slate */
.job_filters .search_jobs .search_keywords,
.job_filters .search_jobs .search_location {
  flex: 1 1 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.job_filters .search_jobs .search_keywords {
  margin-right: 12px !important;
}

.job_filters .search_jobs input[type="text"] {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  color: var(--jb-text) !important;
  background: var(--jb-bg) !important;
  border: 1px solid var(--jb-border) !important;
  border-radius: var(--jb-radius) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s !important;
}

.job_filters .search_jobs input[type="text"]:focus {
  border-color: var(--jb-green) !important;
  outline: none !important;
}

/* Hide the labels (placeholders handle it) and submit button */
.job_filters .search_jobs label {
  display: none !important;
}

.job_filters .search_jobs .search_submit,
.job_filters .search_jobs input[type="hidden"] {
  display: none !important;
}

/* GJM proximity filters: 3-column grid, equal height */
.gjm-filters-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  padding: 0 !important;
}

.gjm-filter-wrapper.gjm-dropdown-filter {
  width: 100% !important;
  min-width: 0 !important;
}

/* Parent theme sets 33.5% which overflows — fix to 33.3% on desktop */
@media (min-width: 769px) {
  body form.gjm-features-enabled div.gjm-filters-count-3 {
    width: 33.3% !important;
  }
}

@media (max-width: 768px) {
  body form.gjm-features-enabled div.gjm-filters-count-3 {
    width: 100% !important;
    float: none !important;
  }
}

/* Jobify wraps the select in span.select — reset it */
.gjm-filters-wrapper span.select.gjm-filter-wrapper {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  padding: 0 !important;
}

.gjm-filters-wrapper span.select.gjm-filter-wrapper::before,
.gjm-filters-wrapper span.select.gjm-filter-wrapper::after {
  display: none !important;
  content: none !important;
}

/* Select2 container fills column and matches input height */
.gjm-filters-wrapper .select2-container {
  width: 100% !important;
  height: 44px !important;
}

.gjm-filters-wrapper .select2-selection--single {
  height: 44px !important;
  border: 1px solid var(--jb-border) !important;
  border-radius: var(--jb-radius) !important;
  background: var(--jb-bg) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
}

.gjm-filters-wrapper .select2-selection--single:focus,
.gjm-filters-wrapper .select2-container--focus .select2-selection--single {
  border-color: var(--jb-green) !important;
  outline: none !important;
}

.gjm-filters-wrapper .select2-selection__rendered {
  padding-left: 14px !important;
  padding-right: 32px !important;
  color: var(--jb-text-muted) !important;
  font-size: 14px !important;
  line-height: 44px !important;
}

.gjm-filters-wrapper .select2-selection__arrow {
  height: 44px !important;
  right: 8px !important;
}

/* Type filter chips sit below the inputs */

/* Mobile: filters display inline (no drawer) */
@media (max-width: 768px) {
  /* Reset any drawer/fixed positioning — filters flow naturally */
  .job_filters {
    position: static !important;
    transform: none !important;
    max-height: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-top: none !important;
    overflow: visible !important;
    padding: 0 12px 12px 12px !important;
  }

  /* Strip padding — cover all specificity variants GJM + Jobify may output */
  .job_filters .search_jobs,
  form.job_filters .search_jobs,
  form.gjm-features-enabled .search_jobs,
  form.job_filters.gjm-features-enabled .search_jobs,
  form.job_filters.gjm-features-enabled .search_jobs.gjm_use,
  form.job_filters.gjm-features-enabled .search_jobs.gjm_use.gjm_filters_enabled {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Keywords + location full width on mobile */
  .job_filters .search_jobs .search_keywords,
  .job_filters .search_jobs .search_location,
  form.job_filters.gjm-features-enabled .search_jobs.gjm_use.gjm_filters_enabled .search_keywords,
  form.job_filters.gjm-features-enabled .search_jobs.gjm_use.gjm_filters_enabled .search_location,
  form.job_filters.gjm-features-enabled .search_jobs.gjm_use.gjm_filters_enabled .search_region {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  /* Everything else full width */
  .job_filters .search_jobs .search_categories,
  .job_filters .search_jobs .search_submit,
  .job_filters .search_jobs .gjm-filters-wrapper,
  .job_filters .search_jobs > *:not(.search_keywords):not(.search_location):not(.search_region) {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .gjm-filters-wrapper {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .job_filters input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--jb-border);
    border-radius: var(--jb-radius);
    font-size: 16px;
    color: var(--jb-text);
    background: var(--jb-bg);
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
  }
}

/* Hide drawer-only UI elements on all screen sizes */
.jb-mobile-bar,
.jb-drawer-header,
.jb-drawer-backdrop {
  display: none !important;
}

/* Drawer header (injected by JS) */
.jb-drawer-header {
  display: none;
}

@media (max-width: 768px) {
  .jb-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--jb-border);
    position: sticky;
    top: 0;
    background: var(--jb-bg);
    z-index: 2;
  }

  .jb-drawer-header__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--jb-text);
  }

  .jb-drawer-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--jb-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: var(--jb-radius-sm);
  }

  .jb-drawer-close:hover {
    background: var(--jb-bg-subtle);
    color: var(--jb-text);
  }
}

/* Backdrop */
.jb-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 590;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.jb-drawer-backdrop.is-visible {
  display: block;
  opacity: 1;
}

.jb-no-scroll {
  overflow: hidden;
}

/* Mobile trigger bar */
.jb-mobile-bar {
  display: none;
}

@media (max-width: 768px) {
  .jb-mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--jb-bg);
    border-bottom: 1px solid var(--jb-border);
    position: sticky;
    top: 0;
    z-index: 200;
  }

  .jb-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--jb-border);
    background: var(--jb-bg);
    font-size: 14px;
    font-weight: 500;
    color: var(--jb-text);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .jb-filter-trigger:hover {
    border-color: var(--jb-green);
    color: var(--jb-green);
  }

  .jb-filter-count {
    background: var(--jb-green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    margin-left: 2px;
  }

  .jb-mobile-bar .jb-sort {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--jb-border);
    border-radius: 20px;
    font-size: 14px;
    color: var(--jb-text);
    background: var(--jb-bg);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
  }
}

/* =============================================================
   ACTIVE FILTER STATUS BAR
   ============================================================= */

.jb-filter-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  min-height: 36px;
  margin-bottom: 4px;
}

.jb-filter-status__count {
  font-size: 13px;
  color: var(--jb-text-muted);
  font-weight: 500;
}

.jb-filter-status__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 1 auto;
}

.jb-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px 3px 10px;
  background: var(--jb-green-light);
  color: var(--jb-green-dark);
  border: 1px solid #a7d4ba;
  border-radius: 20px;
}

.jb-active-chip button {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  color: var(--jb-green-dark);
  opacity: 0.7;
  display: flex;
  align-items: center;
}

.jb-active-chip button:hover {
  opacity: 1;
}

.jb-filter-status__right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.jb-filter-status__clear,
.jb-rss-btn {
  font-size: 12px;
  color: var(--jb-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.jb-filter-status__clear:hover,
.jb-rss-btn:hover {
  color: var(--jb-text);
  text-decoration: none;
}

/* WPJM's own showing_jobs — hide it since our status bar replaces it */
.job_listings .showing_jobs {
  display: none !important;
}

/* =============================================================
   LOADING SKELETON
   ============================================================= */

@keyframes jb-spin {
  to { transform: translateX(-50%) rotate(360deg); }
}

ul.job_listings.loading {
  position: relative;
  min-height: 120px;
  pointer-events: none;
}

ul.job_listings.loading li.job_listing {
  visibility: hidden !important;
}

/* Load More button spinner
   WP Job Manager adds class "loading" to .load_more_jobs during the AJAX request */
@keyframes jb-spin-inline {
  to { transform: rotate(360deg); }
}

a.load_more_jobs.loading {
  opacity: 0.75;
  pointer-events: none;
  cursor: default;
}

a.load_more_jobs.loading::after {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: jb-spin-inline 0.65s linear infinite;
  vertical-align: middle;
}

ul.job_listings.loading::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 10;
  width: 32px;
  height: 32px;
  border: 3px solid var(--jb-border);
  border-top-color: var(--jb-green);
  border-radius: 50%;
  animation: jb-spin 0.7s linear infinite;
}

/* =============================================================
   JOB TYPE FILTER CHIPS
   ============================================================= */

/* Override Jobify parent border on job_types */
.job_filters .job_types {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
}

.jb-type-filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 0;
}

.jb-type-filters::before,
.jb-type-filters::after {
  display: none !important;
  content: none !important;
}

.jb-type-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
  border-radius: var(--jb-radius);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  border: 1.5px solid var(--jb-border);
  background: var(--jb-bg);
  color: var(--jb-text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
  white-space: normal;
}

@media (max-width: 480px) {
  .jb-type-filters {
    grid-template-columns: repeat(2, 1fr);
  }
}

.jb-type-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Per-type brand colours ──────────────────────────────────────
   Unchecked: neutral grey (base .jb-type-chip)
   Hover: light tint preview
   Checked: solid brand colour + white text + ✓ indicator
   ---------------------------------------------------------------- */

/* Checkmark indicator on selected chips */
.jb-type-chip.is-checked::before,
.jb-type-chip:has(input:checked)::before {
  content: '✓';
  font-size: 10px;
  font-weight: 700;
  margin-right: 4px;
  line-height: 1;
}

/* Jobs (Early Career) — Light Blue #93d6d8 */
.jb-type-chip--entry-level-graduate:hover                                      { background:#edf9fa; border-color:#93d6d8; color:#2a7e80; }
.jb-type-chip--entry-level-graduate.is-checked,
.jb-type-chip--entry-level-graduate:has(input:checked) { background:#93d6d8; border-color:#93d6d8; color:#fff; font-weight:600; }

/* Jobs (Mid Career) — Text Green #8faf2e */
.jb-type-chip--mid-level:hover                                      { background:#f2f7e6; border-color:#8faf2e; color:#5c7a10; }
.jb-type-chip--mid-level.is-checked,
.jb-type-chip--mid-level:has(input:checked) { background:#8faf2e; border-color:#8faf2e; color:#fff; font-weight:600; }

/* Jobs (Senior) — Yellow #f9c93e (swapped from Dark Green) */
.jb-type-chip--senior:hover                                      { background:#fef7dc; border-color:#f9c93e; color:#9a7200; }
.jb-type-chip--senior.is-checked,
.jb-type-chip--senior:has(input:checked) { background:#f9c93e; border-color:#f9c93e; color:#5a4000; font-weight:600; }

/* Volunteer & Internships — Dark Green #599140 (swapped from Yellow) */
.jb-type-chip--volunteer-internships:hover                                      { background:#e8f2e3; border-color:#599140; color:#3a6128; }
.jb-type-chip--volunteer-internships.is-checked,
.jb-type-chip--volunteer-internships:has(input:checked) { background:#599140; border-color:#599140; color:#fff; font-weight:600; }

/* Courses, Training & Study — Coral #f4865e */
.jb-type-chip--courses-training:hover                                      { background:#fdeee8; border-color:#f4865e; color:#b84920; }
.jb-type-chip--courses-training.is-checked,
.jb-type-chip--courses-training:has(input:checked) { background:#f4865e; border-color:#f4865e; color:#fff; font-weight:600; }

/* Scholarships & Bursaries — Hot Pink #eb42a4 */
.jb-type-chip--conservation-scholarships:hover                                      { background:#fce9f5; border-color:#eb42a4; color:#a01470; }
.jb-type-chip--conservation-scholarships.is-checked,
.jb-type-chip--conservation-scholarships:has(input:checked) { background:#eb42a4; border-color:#eb42a4; color:#fff; font-weight:600; }

/* Project Funding — Light Green #acd461 */
.jb-type-chip--research-projects:hover                                      { background:#f0f9e0; border-color:#acd461; color:#5a7a10; }
.jb-type-chip--research-projects.is-checked,
.jb-type-chip--research-projects:has(input:checked) { background:#acd461; border-color:#acd461; color:#fff; font-weight:600; }

/* Events — Brown #5c3626 */
.jb-type-chip--events:hover                                      { background:#ede8e5; border-color:#5c3626; color:#5c3626; }
.jb-type-chip--events.is-checked,
.jb-type-chip--events:has(input:checked) { background:#5c3626; border-color:#5c3626; color:#fff; font-weight:600; }

/* JS toggle: flip is-checked class when checkbox changes */

/* =============================================================
   SINGLE JOB PAGE
   ============================================================= */

.jb-single {
  background: var(--jb-bg);
}

/* Breadcrumb */
.jb-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: var(--jb-text-muted);
  margin-bottom: 18px;
}

.jb-breadcrumb a {
  color: var(--jb-text-muted);
  text-decoration: none;
}

.jb-breadcrumb a:hover {
  color: var(--jb-green);
  text-decoration: underline;
}

.jb-breadcrumb__sep {
  color: var(--jb-text-light);
  font-size: 12px;
}

.jb-breadcrumb__current {
  color: var(--jb-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

/* Header */
.jb-single__header {
  background: var(--jb-bg);
  border-bottom: 1px solid var(--jb-border);
  padding: 32px 0 24px;
}

.jb-single__header .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero variant — background image with dark overlay */
.jb-single__header--hero {
  background-color: #1a2e1a;
  background-size: cover;  
  background-repeat: no-repeat;
  border-bottom: none;
  min-height: 380px;
  padding: 100px 0 72px;
  position: relative;
  display: flex;
  align-items: flex-end;
  background-position: 75% 55%;
}

.jb-single__header--hero::before {
  display: none;
}

.jb-single__header--hero .container {
  position: relative;
  z-index: 1;
}

.jb-single__header--hero .jb-breadcrumb,
.jb-single__header--hero .jb-breadcrumb a,
.jb-single__header--hero .jb-breadcrumb__sep,
.jb-single__header--hero .jb-breadcrumb__current {
  color: rgba(255,255,255,0.7);
}

.jb-single__header--hero .jb-breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

.jb-single__header--hero .jb-single__title {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.jb-single__header--hero .jb-single__meta,
.jb-single__header--hero .jb-single__meta .jb-meta-item,
.jb-single__header--hero .jb-single__meta .jb-meta-item a,
.jb-single__header--hero .jb-single__meta .jb-meta-sep {
  color: rgba(255,255,255,0.8);
}

.jb-single__header--hero .jb-single__meta .jb-meta-item svg {
  color: rgba(255,255,255,0.6);
}

.jb-single__header--hero .jb-tag {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}

.jb-single__header--hero .jb-notice--expired {
  background: rgba(254,243,199,0.9);
}

.jb-single__header--hero .jb-single__header-logo {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.jb-single__header-inner {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  justify-content: space-between;
}

.jb-single__header-body {
  flex: 1 1 0;
  min-width: 0;
}

.jb-single__title {
  font-size: 30px;
  font-weight: 700;
  color: var(--jb-text);
  margin: 0 0 12px;
  line-height: 1.25;
}

.jb-single__header-logo {
  flex: 0 0 160px;
  width: 160px;
  border-radius: var(--jb-radius);
  border: 1px solid var(--jb-border);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.jb-single__header-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Meta bar (from content-single-job_listing-meta.php) */
.jb-single__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: var(--jb-text-muted);
}

.jb-single__meta .jb-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.jb-single__meta .jb-meta-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--jb-text-light);
}

.jb-single__meta .jb-meta-sep {
  color: var(--jb-border);
  font-size: 16px;
  line-height: 1;
}

/* Expired badge */
.jb-notice--expired {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 4px 12px;
  border-radius: 20px;
  margin-top: 4px;
}

/* Content area */
.jb-single__content {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Two-column layout */
.jb-single__layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  padding: 36px 0 48px;
  align-items: start;
}

/* Main content column */
.jb-single__main {
  min-width: 0;
}

/* Prose typography for job descriptions is handled by the shared block below */

/* Application reminder callout */
.jb-job-quote {
  clear: both;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--jb-green-light);
  border-left: 3px solid var(--jb-green);
  border-radius: 0 var(--jb-radius) var(--jb-radius) 0;
  padding: 16px 20px;
  margin: 32px 0 8px;
}

.jb-job-quote__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--jb-green);
  opacity: 0.75;
  margin-top: 1px;
}

.jb-job-quote p {
  font-size: 14px;
  font-style: italic;
  color: var(--jb-text-muted);
  line-height: 1.6;
  margin: 0;
}

.jb-job-quote p strong {
  color: var(--jb-green-dark);
  font-style: normal;
  font-weight: 600;
}

.jb-single__company-about {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--jb-border);
}

.jb-single__company-about h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--jb-text);
  margin: 0 0 16px;
}

/* Mobile fixed apply bar — hidden on desktop */
.jb-mobile-apply {
  display: none;
}

/* Save + Share wrapper — always a row */
.jb-save-share {
  display: flex;
  gap: 8px;
}

.jb-save-share .jb-save-btn--full,
.jb-save-share .jb-share-btn {
  flex: 1;
}

/* Sidebar column */
.jb-single__sidebar {
  position: sticky;
  top: calc(var(--jb-header-h, 80px) + 40px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Parent theme sets overflow: hidden on #page which breaks sticky.
   clip prevents horizontal bleed without creating a scroll container,
   so position:sticky still works. */
.single-job_listing #page {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Sidebar card */
.jb-sidebar-card {
  background: var(--jb-bg);
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  padding: 20px;
}

.jb-sidebar-card__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--jb-text-light);
  margin: 0 0 16px;
}

/* Apply button */
.jb-apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--jb-green);
  color: #fff !important;
  border: none;
  border-radius: var(--jb-radius);
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none !important;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(142,173,53,0.3);
}

.jb-apply-btn:hover {
  background: var(--jb-green-dark);
  box-shadow: 0 3px 8px rgba(142,173,53,0.35);
  color: #fff !important;
}

.jb-apply-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Details list */
.jb-details {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jb-details__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jb-details__row dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--jb-text-light);
}

.jb-details__row dd {
  font-size: 14px;
  color: var(--jb-text);
  margin: 0;
}

.jb-details__row dd .jb-tag {
  font-size: 11px;
}

/* Sidebar company logo */
.jb-sidebar-logo {
  width: 100%;
  margin-bottom: 8px;
}

.jb-sidebar-logo img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.jb-company-jobs-link {
  color: var(--jb-green-dark);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.jb-company-jobs-link:hover {
  color: var(--jb-green);
  text-decoration: underline;
}

/* Membership gate */
.jb-gate {
  padding: 36px 0 48px;
}

.jb-gate__preview {
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
  position: relative;
  padding-bottom: 24px;
}

.jb-gate__preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #fff);
}

.jb-gate__cta {
  background: var(--jb-bg-subtle);
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  padding: 28px 32px;
  text-align: center;
  margin-top: 8px;
}

.jb-gate__cta h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--jb-text);
  margin: 0 0 10px;
}

.jb-gate__cta p {
  font-size: 14px;
  color: var(--jb-text-muted);
  margin: 0 0 20px;
  line-height: 1.6;
}

.jb-gate__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons */
.jb-btn {
  display: inline-block;
  padding: 11px 24px;
  border-radius: var(--jb-radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.jb-btn--primary {
  background: var(--jb-green);
  color: #fff !important;
  border: 1px solid var(--jb-green);
}

.jb-btn--primary:hover {
  background: var(--jb-green-dark);
  border-color: var(--jb-green-dark);
}

.jb-btn--secondary {
  background: var(--jb-bg);
  color: var(--jb-text) !important;
  border: 1px solid var(--jb-border);
}

.jb-btn--secondary:hover {
  background: var(--jb-bg-hover);
}

/* =============================================================
   SAVE / BOOKMARK BUTTON
   ============================================================= */

/* Compact icon button on listing rows */
.jb-save-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 3;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--jb-text-light);
  padding: 0;
  transition: color 0.15s ease, background 0.15s ease;
  text-decoration: none;
}

.jb-save-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  flex-shrink: 0;
}

.jb-save-btn:hover,
.jb-save-btn:focus-visible {
  color: var(--jb-green);
  background: var(--jb-green-light);
  outline: none;
}

.jb-save-btn.is-saved {
  color: var(--jb-green);
}

.jb-save-btn.is-saved svg {
  fill: currentColor;
  stroke: none;
}

.jb-save-btn--guest {
  opacity: 0.35;
}

.jb-save-btn--guest:hover {
  opacity: 1;
}

.jb-save-btn:disabled {
  cursor: wait;
  opacity: 0.5;
}

/* Give the row right padding so meta doesn't slide under the button */
.job_listings li.job_listing .jb-row {
  padding-right: 52px;
}

/* Full-width save button for single job sidebar */
.jb-save-btn--full {
  position: static;
  transform: none;
  width: 100%;
  height: auto;
  border-radius: var(--jb-radius);
  border: 1px solid var(--jb-border);
  background: var(--jb-bg);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--jb-text-muted);
  gap: 8px;
  justify-content: center;
}

.jb-save-btn--full svg {
  width: 16px;
  height: 16px;
}

.jb-save-btn--full:hover,
.jb-save-btn--full:focus-visible {
  border-color: var(--jb-green);
  color: var(--jb-green);
  background: var(--jb-green-light);
  border-radius: var(--jb-radius);
}

.jb-save-btn--full.is-saved {
  border-color: var(--jb-green);
  background: var(--jb-green-light);
  color: var(--jb-green-dark);
}

/* =============================================================
   EXPIRED NOTICE
   ============================================================= */

/* Expired notice inside single job */
.jb-single .job-manager-info {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 12px 16px;
  border-radius: var(--jb-radius);
  font-size: 14px;
  margin: 24px 0;
}

/* Responsive single job */
@media (max-width: 960px) {
  .jb-single__layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Sidebar sits below main content */
  .jb-single__sidebar {
    position: static !important;
    top: auto !important;
    gap: 0;
    border-top: 1px solid var(--jb-border);
    margin-top: 32px;
    padding-top: 24px;
  }

  /* Flatten individual cards — no borders or backgrounds */
  .jb-single__sidebar .jb-sidebar-card {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0 0 20px;
  }

  /* Hide apply card in sidebar — mobile bar takes over */
  .jb-single__sidebar .jb-sidebar-card--apply {
    display: none;
  }

  /* Fixed apply bar at bottom of viewport */
  .jb-mobile-apply {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--jb-bg);
    border-top: 1px solid var(--jb-border);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  }

  /* Prevent content disappearing behind fixed bar */
  .single-job_listing .jb-single__content {
    padding-bottom: 72px;
  }

  /* Space between save/share row and details */
  .jb-single__sidebar .jb-save-share {
    margin-bottom: 20px;
  }

  /* Details as 2-column grid */
  .jb-single__sidebar .jb-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
  }

  .jb-single__sidebar .jb-details__row {
    gap: 3px;
  }

  /* Hide the "Job Details" heading on mobile — the rows speak for themselves */
  .jb-single__sidebar .jb-sidebar-card__title {
    display: none;
  }

  /* Company logo: smaller and left-aligned */
  .jb-single__sidebar .jb-sidebar-logo img {
    max-width: 80px;
    margin: 0;
  }

  .jb-single__sidebar .jb-sidebar-logo {
    margin-bottom: 4px;
  }

  .jb-single__sidebar .jb-company-website {
    text-align: left !important;
  }

  .jb-company-jobs-link {
    text-align: left !important;
  }

  .jb-single__sidebar p[style*="text-align:center"] {
    text-align: left !important;
  }
}

@media (max-width: 640px) {
  .jb-single__header {
    padding: 24px 0 20px;
  }

  .jb-single__title {
    font-size: 22px;
  }

  .jb-single__header-inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
  }

  .jb-single__header-logo {
    display: flex;
    flex: 0 0 64px;
    width: 64px;
    padding: 6px;
  }

  .jb-single__content {
    padding: 0 16px;
  }

  .jb-single__layout {
    padding: 24px 0 36px;
  }

  .jb-gate__cta {
    padding: 20px 20px;
  }
}

/* =============================================================
   SORT CONTROL (desktop status bar)
   ============================================================= */

/* Jobify JS wraps <select> in <span class="select"> — reset wrapper, kill pseudo-elements */
.jb-filter-status__right span.select,
.jb-mobile-bar span.select {
  position: relative !important;
  display: inline-block !important;
}

.jb-filter-status__right span.select::before,
.jb-filter-status__right span.select::after,
.jb-mobile-bar span.select::before,
.jb-mobile-bar span.select::after {
  display: none !important;
  content: none !important;
}

.jb-sort--desktop {
  padding: 5px 24px 5px 10px;
  border: 1px solid var(--jb-border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--jb-text-muted);
  background: var(--jb-bg);
  cursor: pointer;
  -webkit-appearance: auto;
  appearance: auto;
}

.jb-sort--desktop:hover {
  border-color: var(--jb-green);
  color: var(--jb-green);
}

@media (max-width: 768px) {
  .jb-sort--desktop { display: none; }
}

/* =============================================================
   ALERT BUTTON (in status bar)
   ============================================================= */

.jb-alert-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--jb-border);
  background: var(--jb-bg);
  font-size: 12px;
  font-weight: 500;
  color: var(--jb-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  position: relative;
  z-index: 2;
}

.jb-alert-btn:hover {
  border-color: var(--jb-green);
  color: var(--jb-green);
  background: var(--jb-green-light);
}

/* =============================================================
   SHARE BUTTON (single job sidebar)
   ============================================================= */

.jb-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--jb-radius);
  border: 1px solid var(--jb-border);
  background: var(--jb-bg);
  font-size: 14px;
  font-weight: 500;
  color: var(--jb-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.jb-share-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.jb-share-btn:hover,
.jb-share-btn:focus-visible {
  border-color: var(--jb-green);
  color: var(--jb-green);
  background: var(--jb-green-light);
  outline: none;
}

.jb-share-btn.is-copied {
  border-color: var(--jb-green);
  color: var(--jb-green);
  background: var(--jb-green-light);
}

/* =============================================================
   RECENTLY VIEWED STRIP
   ============================================================= */

/* Recently viewed — single job page, styled to match similar jobs section */
.jb-rv {
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 24px 24px;
}

.jb-rv__header {
  margin-bottom: 16px;
}

.jb-rv__label {
  font-size: 20px;
  font-weight: 700;
  color: var(--jb-text);
}

.jb-rv__items {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.jb-rv__items::-webkit-scrollbar { display: none; }

.jb-rv__chip {
  display: inline-block;
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--jb-border);
  font-size: 12px;
  color: var(--jb-text-muted);
  text-decoration: none;
  white-space: nowrap;
  background: var(--jb-bg);
  transition: all 0.12s ease;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

.jb-rv__chip:hover {
  border-color: var(--jb-green);
  color: var(--jb-green);
  background: var(--jb-green-light);
}

/* =============================================================
   SIMILAR JOBS SECTION
   ============================================================= */

.jb-similar {
  border-top: 1px solid var(--jb-border);
  padding: 48px 0;
  background: var(--jb-bg-subtle);
}

.jb-similar__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.jb-similar__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--jb-text);
  margin: 0 0 8px;
}

.jb-similar__subtitle {
  font-size: 13px;
  color: var(--jb-text-muted);
  margin: 0 0 20px;
}

.jb-similar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  overflow: hidden;
  background: var(--jb-bg);
}

.jb-similar__list li.job_listing {
  border-bottom: 1px solid var(--jb-border) !important;
}

.jb-similar__list li.job_listing:last-child {
  border-bottom: none !important;
}

@media (max-width: 640px) {
  .jb-similar {
    padding: 32px 0;
  }

  .jb-similar__inner {
    padding: 0 16px;
  }

  /* Simplified similar job rows on mobile */
  .jb-similar__list .jb-row {
    gap: 10px;
    padding: 12px;
    min-height: unset;
  }

  .jb-similar__list .jb-row__logo {
    display: none;
  }

  .jb-similar__list .jb-row__body {
    min-width: 0;
  }

  .jb-similar__list .jb-row__title {
    font-size: 13px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .jb-similar__list .jb-row__company,
  .jb-similar__list .jb-row__location {
    font-size: 12px;
  }

  .jb-similar__list .jb-row__meta {
    align-items: flex-end;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .jb-similar__list .jb-row__date {
    display: none;
  }

  .jb-similar__list .jb-row__deadline {
    display: none;
  }
}

/* =============================================================
   COMPANY ARCHIVE PAGE (single-company.php v2)
   ============================================================= */

.jb-company-archive__header {
  background: var(--jb-bg);
  border-bottom: 1px solid var(--jb-border);
  padding: 32px 0 28px;
}

.jb-company-archive__header--hero {
  background-color: #1a2e1a;
  background-size: cover;
  background-position: center 65%;
  background-repeat: no-repeat;
  border-bottom: none;
  min-height: 380px;
  padding: 100px 0 72px;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.jb-company-archive__header--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.25) 100%);
  z-index: 0;
}

.jb-company-archive__header--hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.jb-company-archive__header--hero .jb-breadcrumb,
.jb-company-archive__header--hero .jb-breadcrumb a,
.jb-company-archive__header--hero .jb-breadcrumb__sep,
.jb-company-archive__header--hero .jb-breadcrumb__current {
  color: rgba(255,255,255,0.7);
}

.jb-company-archive__header--hero .jb-breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

.jb-company-archive__header--hero .jb-company-archive__name {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.jb-company-archive__header--hero .jb-company-archive__tagline,
.jb-company-archive__header--hero .jb-company-archive__header-inner p {
  color: rgba(255,255,255,0.8);
}

.jb-company-archive__header--hero .jb-company-archive__count {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.9);
}

.jb-company-archive__header--hero .jb-company-archive__logo {
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.3);
}

.jb-company-archive__header .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.jb-company-archive__header-inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 16px;
}

.jb-company-archive__logo {
  flex: 0 0 120px;
  width: 120px;
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  background: var(--jb-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.jb-company-archive__logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

.jb-company-archive__header-body {
  flex: 1;
  min-width: 0;
}

.jb-company-archive__name {
  font-size: 26px;
  font-weight: 700;
  color: var(--jb-text);
  margin: 0 0 6px;
  line-height: 1.25;
}

.jb-company-archive__tagline {
  font-size: 15px;
  color: var(--jb-text-muted);
  margin: 0 0 12px;
}

.jb-company-archive__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.jb-company-archive__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--jb-text-muted);
  background: var(--jb-bg-subtle);
  border: 1px solid var(--jb-border);
  border-radius: 20px;
  padding: 3px 12px;
}

.jb-company-archive__website {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--jb-green-dark);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.jb-company-archive__website:hover {
  color: var(--jb-green);
  text-decoration: underline;
}

.jb-company-archive__website svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.jb-company-archive__social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jb-company-archive__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--jb-text-muted);
  transition: color 0.15s;
}

.jb-company-archive__social a:hover {
  color: var(--jb-text);
}

.jb-company-archive__social svg {
  width: 16px;
  height: 16px;
}

/* Main content */
.jb-company-archive .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.jb-company-archive__body {
  padding: 36px 0 60px;
}

.jb-company-archive__about {
  background: var(--jb-bg-subtle);
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  padding: 24px 28px;
  margin-bottom: 32px;
}

.jb-company-archive__about h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--jb-text);
  margin: 0 0 12px;
}

.jb-company-archive__about p {
  font-size: 14px;
  color: var(--jb-text-muted);
  line-height: 1.7;
  margin: 0 0 10px;
}

.jb-company-archive__about p:last-child {
  margin-bottom: 0;
}

.jb-company-jobs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jb-company-archive__empty {
  color: var(--jb-text-muted);
  font-size: 15px;
  padding: 32px 0;
}

/* Mobile */
@media (max-width: 600px) {
  .jb-company-archive__header-inner {
    flex-direction: column;
    gap: 16px;
  }

  .jb-company-archive__logo {
    flex: none;
    width: 80px;
  }

  .jb-company-archive__name {
    font-size: 20px;
  }
}

/* =============================================================
   BLURRED LOCKED OVERLAY (non-member listing rows)
   ============================================================= */

.jb-row__logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.jb-lock-icon {
  width: 16px;
  height: 16px;
  color: #d1d5db;
}

.jb-gate__preview {
  filter: blur(2px);
  user-select: none;
  pointer-events: none;
}

/* =============================================================
   MAP GATE (non-member upsell replacing map widget)
   ============================================================= */

/* Hide any static screenshot widget for members; hide real map widget for guests
   (body class set via filter in functions.php) */
.jb-map-member .jb-map-screenshot-widget,
.jb-map-guest  .jobify_widget_map .gjm-map-wrapper,
.jb-map-guest  .jobify_widget_map .job_listings {
  display: none !important;
}

.jb-map-gate {
  position: relative;
  width: 100%;
  min-height: 340px;
  border-radius: 12px;
  overflow: hidden;
  background: #f0f4f1;
}

/* Abstract dot-grid background suggesting a map */
.jb-map-gate__visual {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, #c8d9cd 1px, transparent 1px);
  background-size: 28px 28px;
  background-color: #eef3f0;
}

.jb-map-gate__pins {
  position: absolute;
  inset: 0;
}

.jb-map-gate__pin {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--jb-green);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(142,173,53,0.35);
  opacity: 0.55;
}

.jb-map-gate__pin::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(142,173,53,0.15);
}

.jb-map-gate__pin--lg {
  width: 18px;
  height: 18px;
  opacity: 0.75;
}

/* Frosted overlay */
.jb-map-gate__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.jb-map-gate__cta {
  text-align: center;
  padding: 32px 28px;
  max-width: 380px;
}

.jb-map-gate__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--jb-green-light);
  color: var(--jb-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.jb-map-gate__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--jb-text);
  margin: 0 0 10px;
}

.jb-map-gate__desc {
  font-size: 14px;
  color: var(--jb-text-muted);
  margin: 0 0 20px;
  line-height: 1.55;
}

.jb-map-gate__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--jb-radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.jb-btn--primary {
  background: var(--jb-green);
  color: #fff;
}

.jb-btn--primary:hover {
  background: var(--jb-green-dark);
  color: #fff;
}

.jb-btn--ghost {
  background: transparent;
  color: var(--jb-green);
  border: 1px solid var(--jb-green);
}

.jb-btn--ghost:hover {
  background: var(--jb-green-light);
}

.jb-btn--secondary {
  background: var(--jb-bg);
  color: var(--jb-text-muted);
  border: 1px solid var(--jb-border);
}

.jb-btn--secondary:hover {
  border-color: var(--jb-text-muted);
  color: var(--jb-text);
}

@media (max-width: 480px) {
  .jb-map-gate { min-height: 280px; }
  .jb-map-gate__cta { padding: 24px 20px; }
  .jb-map-gate__title { font-size: 17px; }
  .jb-map-gate__actions { flex-direction: column; }
  .jb-map-gate__actions .jb-btn { width: 100%; }
}

/* =============================================================
   ALERTS MODAL OVERRIDE
   ============================================================= */

/* Dialog wrapper */
/* =============================================================
   ALERTS MODAL
   ============================================================= */

dialog.jm-dialog {
  border: none;
  background: transparent;
  padding: 0;
  overflow: visible;
  margin: auto;
  width: calc(100% - 40px);
  max-width: 480px;
}

dialog.jm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.jm-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.jm-dialog-open {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 20px;
}

.jm-dialog-modal {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 460px;
  overflow: hidden;
}

/* Green accent bar at top */
.jm-dialog-modal::before {
  content: '';
  display: block;
  height: 5px;
  background: var(--jb-green);
}

.jm-dialog-modal-container {
  position: relative;
}

.jm-dialog-modal-content {
  padding: 32px 32px 28px;
}

/* Close button */
.jm-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--jb-bg-subtle);
  color: var(--jb-text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}

.jm-dialog-close:hover {
  background: var(--jb-border);
  color: var(--jb-text);
}

.jm-dialog-close .jm-ui-button__icon::before {
  content: '\00d7';
  font-size: 18px;
  line-height: 1;
  font-style: normal;
}

/* Title */
.jm-dialog .jm-form-large-field {
  font-size: 20px;
  font-weight: 700;
  color: var(--jb-text);
  margin: 0 0 8px;
  background: none;
  border: none;
  padding: 0;
  line-height: 1.2;
}

/* Subtitle / description */
.jm-dialog .jm-form,
.jm-dialog .jm-notice,
.jm-dialog p {
  font-family: inherit;
  font-size: 14px;
  color: var(--jb-text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

.jm-dialog .job-alert-search-terms {
  margin-bottom: 16px;
}

/* Inputs */
.jm-dialog input[type="email"],
.jm-dialog input[type="text"],
.jm-dialog select {
  border: 1px solid var(--jb-border) !important;
  border-radius: var(--jb-radius) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  width: 100% !important;
  color: var(--jb-text) !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s !important;
}

.jm-dialog input[type="email"]:focus,
.jm-dialog input[type="text"]:focus,
.jm-dialog select:focus {
  border-color: var(--jb-green) !important;
}

/* Jobify wraps selects in .select — kill its pseudo-elements in the modal */
.jm-dialog span.select {
  display: block !important;
  position: relative !important;
}

.jm-dialog span.select::before,
.jm-dialog span.select::after {
  display: none !important;
  content: none !important;
}

.jm-form-input--inline-wrapper {
  border: none !important;
}

.jm-dialog .jm-form-field {
  margin-bottom: 18px;
}

/* Frequency row: label + select inline */
.jm-dialog label[for="alert_frequency"] {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--jb-text-muted);
  margin-bottom: 6px;
}

/* Fine-print permission */
.jm-dialog .jm-form-fine-print {
  font-size: 12px;
  color: var(--jb-text-muted);
  margin-bottom: 24px;
  background: var(--jb-bg-subtle);
  border-radius: var(--jb-radius);
  padding: 10px 12px;
}

.jm-dialog .jm-form-fine-print label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  line-height: 1.5;
}

/* Action buttons */
.jm-dialog .jm-ui-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jm-dialog .jm-ui-button,
.jm-dialog .jm-ui-button:visited {
  background: var(--jb-green) !important;
  border: none !important;
  border-radius: var(--jb-radius) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 11px 28px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background 0.15s !important;
  white-space: nowrap !important;
}

.jm-dialog .jm-ui-button:hover {
  background: var(--jb-green-dark) !important;
}

.jm-dialog .jm-ui-button--link {
  background: none !important;
  color: var(--jb-text-muted) !important;
  font-size: 13px !important;
  padding: 0 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}

.jm-dialog .jm-ui-button--link:hover {
  color: var(--jb-text) !important;
  background: none !important;
}

/* Mobile: slide up from bottom */
@media (max-width: 480px) {
  .jm-dialog-open {
    align-items: flex-end;
    padding: 0;
  }

  .jm-dialog-modal {
    border-radius: 16px 16px 0 0;
    max-width: 100%;
  }

  .jm-dialog-modal-content {
    padding: 28px 20px 36px;
  }
}

/* =============================================================
   COMPREHENSIVE MOBILE FIXES
   ============================================================= */

@media (max-width: 768px) {

  /* Listing rows — no bookmark column, more info visible */
  .jb-row {
    padding: 12px 16px;
    gap: 10px;
    min-height: unset;
  }

  /* Remove the right padding that was reserved for the bookmark button */
  .job_listings li.job_listing .jb-row {
    padding-right: 16px;
  }

  /* Hide bookmark button entirely on mobile */
  .jb-save-btn:not(.jb-save-btn--full) {
    display: none !important;
  }

  .jb-row__logo {
    display: none;
  }

  /* Title: allow 3 lines */
  .jb-row__title {
    font-size: 14px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Company name / Members Only — ensure it always shows */
  .jb-row__company {
    font-size: 12px;
    white-space: normal;
  }

  .jb-row__gate {
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    color: var(--jb-text-muted);
  }

  /* Show location on mobile */
  .jb-row__location {
    font-size: 12px;
    display: flex;
  }

  .jb-row__meta {
    gap: 4px;
    align-items: flex-end;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .jb-row__date {
    display: none;
  }

  /* Show deadline badge on mobile — useful info */
  .jb-row__deadline {
    display: inline-block;
  }

  .jb-tag {
    font-size: 11px;
  }

  /* Filter status bar */
  .jb-filter-status {
    padding: 8px 0;
    gap: 6px;
  }

  .jb-filter-status__count {
    font-size: 12px;
  }

  .jb-filter-status__right .jb-sort--desktop,
  .jb-filter-status__right span.select { display: none !important; }

  /* Recently viewed — single job page */
  .jb-rv {
    padding: 24px 16px 16px;
  }

  /* Single job */
  .jb-single__title {
    font-size: 20px;
  }

  .jb-single__meta {
    font-size: 13px;
    gap: 8px;
  }

  .jb-sidebar-card {
    padding: 16px;
  }

  .jb-apply-btn {
    font-size: 16px;
    padding: 15px 20px;
  }

  /* Gate CTA */
  .jb-gate {
    padding: 24px 0 36px;
  }

  .jb-gate__actions {
    flex-direction: column;
  }

  .jb-gate__actions .jb-btn {
    text-align: center;
  }
}

/* =============================================================
   GLOBAL TEXT COLOUR
   ============================================================= */

body {
  color: #2d2d2d !important;
}

/* =============================================================
   SINGLE BLOG POST
   ============================================================= */

/* Blog sidebar */
.single-post .widget-area--sidebar {
  padding-top: 32px;
}

.single-post .widget-area--sidebar .widget {
  margin-bottom: 24px;
  padding: 0 0 24px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--jb-border);
  border-radius: 0;
}

.single-post .widget-area--sidebar .widget:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.single-post .widget-area--sidebar .widget-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--jb-text-muted);
  margin: 0 0 12px;
}

/* Featured image */
.jb-post__hero {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}

.jb-post__hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* Meta row */
.jb-post__meta-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.jb-post__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--jb-green-dark) !important;
  background: var(--jb-green-light);
  border: 1px solid var(--jb-green);
  border-radius: 20px;
  padding: 3px 10px;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}

.jb-post__cat:hover {
  background: var(--jb-green);
  color: #fff !important;
}

.jb-post__date,
.jb-post__read-time {
  font-size: 13px;
  color: var(--jb-text-muted);
}

.jb-post__date::before,
.jb-post__read-time::before {
  content: '·';
  margin-right: 8px;
  color: var(--jb-text-light);
}

/* Title */
.jb-post__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1a1a;
  margin: 0 0 20px;
}

/* Wrap — no width overrides, let the column do that */
.jb-post__wrap {
  padding: 24px 0 48px;
}

/* Byline */
.jb-post__byline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--jb-border);
  margin-bottom: 32px;
}

.jb-post__byline img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.jb-post__author-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a !important;
  text-decoration: none !important;
}

.jb-post__author-name:hover {
  color: var(--jb-green) !important;
}

/* Post body */
/* Shared prose typography — blog posts, pages, job descriptions, default single template.
   Excludes .has-jobs (the [jobs] shortcode page) to avoid touching the job board UI. */
.jb-post__content,
.entry-summary,
.jb-single__main .job_listing-description {
  font-size: 16px;
  line-height: 1.8;
  color: #2d2d2d;
}

.jb-post__content h2,
.jb-post__content h3,
.jb-post__content h4,
.entry-summary h2,
.entry-summary h3,
.entry-summary h4,
.jb-single__main .job_listing-description h2,
.jb-single__main .job_listing-description h3,
.jb-single__main .job_listing-description h4 {
  margin-top: 2em;
  margin-bottom: 0.5em;
  color: #1a1a1a;
  line-height: 1.25;
}

.jb-post__content h2,
.entry-summary h2,
.jb-single__main .job_listing-description h2 { font-size: 24px; }

.jb-post__content h3,
.entry-summary h3,
.jb-single__main .job_listing-description h3 { font-size: 20px; }

.jb-post__content h4,
.entry-summary h4,
.jb-single__main .job_listing-description h4 { font-size: 16px; font-weight: 700; }

.jb-post__content p,
.entry-summary p,
.jb-single__main .job_listing-description p { margin-bottom: 1.4em; }

.jb-post__content img,
.entry-summary img {
  max-width: 100%;
  height: auto;
  border-radius: var(--jb-radius);
}

.jb-post__content iframe,
.entry-summary iframe { max-width: 100%; }

.jb-post__content ul,
.jb-post__content ol,
.entry-summary ul,
.entry-summary ol,
.jb-single__main .job_listing-description ul,
.jb-single__main .job_listing-description ol {
  padding-left: 1.5em;
  margin-bottom: 1.4em;
}

.jb-post__content li,
.entry-summary li,
.jb-single__main .job_listing-description li { margin-bottom: 0.4em; }

.jb-post__content blockquote,
.entry-summary blockquote,
.jb-single__main .job_listing-description blockquote {
  border-left: 4px solid var(--jb-green);
  margin: 2em 0;
  padding: 14px 20px;
  background: var(--jb-green-light);
  border-radius: 0 var(--jb-radius) var(--jb-radius) 0;
  font-style: italic;
  color: var(--jb-text-muted);
}

.jb-post__content a:not(.button):not([class*="btn"]):not(.wp-block-button__link):not(.elementor-button),
.entry-summary a:not(.button):not([class*="btn"]):not(.wp-block-button__link):not(.elementor-button) {
  color: var(--jb-green);
  text-decoration: underline;
}

/* Footer */
.jb-post__footer {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--jb-border);
}

.jb-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}

.jb-post__tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--jb-text-muted) !important;
  background: var(--jb-bg-subtle);
  border: 1px solid var(--jb-border);
  border-radius: 20px;
  padding: 3px 12px;
  text-decoration: none !important;
  transition: border-color 0.15s, color 0.15s;
}

.jb-post__tag:hover {
  border-color: var(--jb-green);
  color: var(--jb-green) !important;
}

/* Author card */
.jb-post__author-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--jb-bg-subtle);
  border: 1px solid var(--jb-border);
  border-radius: 10px;
  padding: 20px;
}

.jb-post__author-card img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.jb-post__author-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--jb-text-light);
  margin: 0 0 3px;
}

.jb-post__author-card-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a !important;
  text-decoration: none !important;
  margin-bottom: 5px;
}

.jb-post__author-card-name:hover { color: var(--jb-green) !important; }

.jb-post__author-card-bio {
  font-size: 13px;
  color: var(--jb-text-muted);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .jb-post__hero img { height: auto; }
  .jb-post__title { font-size: 22px; }
  .jb-post__content { font-size: 15px; }
  .jb-post__author-card { flex-direction: column; }
}

/* =============================================================
   PODCAST POSTS: contain overflow
   ============================================================= */

body.is-podcast-post {
  overflow-x: hidden;
}

.is-podcast-post .content-area,
.is-podcast-post article {
  min-width: 0;
}


.is-podcast-post .entry-summary iframe,
.is-podcast-post .entry-content iframe,
.is-podcast-post .entry-summary img,
.is-podcast-post .entry-content img {
  max-width: 100% !important;
  height: auto;
}

.is-podcast-post .entry-summary iframe,
.is-podcast-post .entry-content iframe {
  aspect-ratio: 16 / 9;
}

/* =============================================================
   MY ACCOUNT – Quick Links dashboard section
   Targets the outer section by Elementor ID so edits in
   Elementor remain fully functional.
   ============================================================= */

/* Page heading */
.elementor-element-6ab76f04 .elementor-heading-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--jb-text-muted) !important;
  margin-bottom: 20px !important;
}

/* Gap between the 4 columns */
.elementor-element-6c238d1 .elementor-container {
  gap: 20px !important;
}

/* Each of the 4 inner columns becomes a card */
.elementor-element-6c238d1 .elementor-column > .elementor-widget-wrap {
  background: #fff;
  border: 1px solid var(--jb-border);
  border-radius: 8px;
  padding: 24px !important;
  box-sizing: border-box;
  align-self: flex-start;
}

/* First text widget in each column = the green category intro */
.elementor-element-6c238d1 .elementor-column .elementor-widget:first-child p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px !important;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--jb-green-light);
}

.elementor-element-6c238d1 .elementor-column .elementor-widget:first-child strong,
.elementor-element-6c238d1 .elementor-column .elementor-widget:first-child b {
  color: var(--jb-green-dark);
  font-size: 15px;
}

/* Subheadings: bold paragraphs like "Website Tools", "Community Campfire" */
.elementor-element-6c238d1 .elementor-widget-text-editor p > b,
.elementor-element-6c238d1 .elementor-widget-text-editor p > strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--jb-text-light);
  margin: 20px 0 8px;
}

/* Remove top margin from very first subheading */
.elementor-element-6c238d1 .elementor-widget-text-editor p:first-of-type > b,
.elementor-element-6c238d1 .elementor-widget-text-editor p:first-of-type > strong {
  margin-top: 0;
}

/* Strip default list styles */
.elementor-element-6c238d1 .elementor-widget-text-editor ul {
  list-style: none !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

.elementor-element-6c238d1 .elementor-widget-text-editor li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Link styling */
.elementor-element-6c238d1 .elementor-widget-text-editor li a,
.elementor-element-6c238d1 .elementor-widget-text-editor li span a {
  display: block;
  font-size: 14px;
  color: var(--jb-text-muted) !important;
  text-decoration: none !important;
  padding: 4px 0;
  transition: color 0.15s ease;
}

.elementor-element-6c238d1 .elementor-widget-text-editor li a:hover,
.elementor-element-6c238d1 .elementor-widget-text-editor li span a:hover {
  color: var(--jb-green) !important;
}

/* =============================================================
   JOB GATE — conserv_courses_register_prompt restyled
   ============================================================= */

.job-snippet.content-area {
  max-width: none !important;
  padding: 0 !important;
  margin: 24px 0 20px !important;
  position: relative;
}

.job-snippet.content-area::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}

.job-snippet .job-overview-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--jb-text-light) !important;
  margin: 0 0 10px !important;
}

.job-snippet p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--jb-text-muted);
  margin: 0;
}

/* Strip container-fluid Bootstrap wrapper */
.unlock-container-parent {
  margin: 0 !important;
  padding: 0 !important;
}

/* Neutralise any rule that forces every div inside to 100% width */
.conserv_courses_register_prompt div {
  width: auto !important;
}

/* Main gate card — override the Bootstrap overlay structure */
.conserv_courses_register_prompt {
  display: block !important;
  position: static !important;
  overflow: visible !important;
  padding: 40px 32px !important;
  margin-bottom: 48px !important;
  background: var(--jb-bg-subtle) !important;
  border: 1px solid var(--jb-border) !important;
  border-radius: var(--jb-radius) !important;
  text-align: center !important;
}

/* Hide the decorative blurred background layer */
.conserv_courses_register_prompt .overlay-bg {
  display: none !important;
}

/* Re-declare full-width for the divs that need it */
.conserv_courses_register_prompt .overlay,
.conserv_courses_register_prompt .cc-free-signup-block,
.conserv_courses_register_prompt .cc-social-login-reset,
.conserv_courses_register_prompt .cc-trial-benefits {
  width: 100% !important;
}

/* Make content layer a plain centred column */
.conserv_courses_register_prompt .overlay {
  position: static !important;
}

.unlock-job-container {
  max-width: 480px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 !important;
}

/* Lock icon */
.unlock-job-container > img.mb-3 {
  width: 56px;
  height: auto;
  margin: 0 0 20px !important;
}

/* Headings */
.unlock-job-container h2,
.cc-free-signup-block h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--jb-text) !important;
  margin: 0 0 10px !important;
}

.unlock-job-container h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--jb-text-muted) !important;
  margin: 0 0 14px !important;
}

.unlock-job-container p,
.cc-free-signup-block > p {
  font-size: 14px !important;
  color: var(--jb-text-muted) !important;
  line-height: 1.6 !important;
  margin: 0 0 16px !important;
}

/* Trial CTA button */
.trial-btn {
  display: inline-block !important;
  padding: 11px 28px !important;
  background: var(--jb-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--jb-radius) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  cursor: pointer;
}

.trial-btn:hover {
  background: var(--jb-green-dark) !important;
  color: #fff !important;
}

/* Benefits list */
.cc-trial-benefits {
  width: 100%;
  max-width: 380px;
  text-align: left !important;
  margin: 0 auto 8px !important;
}

.cc-trial-benefits p {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--jb-text-muted) !important;
  margin-bottom: 10px !important;
}

.cc-trial-benefits p img {
  flex-shrink: 0;
  width: 18px !important;
  margin: 2px 0 0 !important;
}

/* CC Free signup block */
.cc-free-signup-block {
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Social login buttons container */
.cc-social-login-reset {
  margin-bottom: 4px;
}

/* Auth links — full reset to prevent theme button styles bleeding in */
.cc-auth-links {
  display: block !important;
  font-size: 14px !important;
  color: var(--jb-text-muted) !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  text-align: center !important;
}

.cc-auth-links .link-text,
.cc-auth-links a.link-text,
.cc-auth-links a.link-text:link,
.cc-auth-links a.link-text:visited {
  display: inline !important;
  color: var(--jb-green) !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
}

.cc-auth-links a.link-text:hover {
  text-decoration: underline !important;
  background: none !important;
}

.cc-divider {
  display: inline !important;
  margin: 0 6px !important;
  opacity: 0.5;
  background: none !important;
  padding: 0 !important;
  color: var(--jb-text-light) !important;
}

/* =============================================================
   ARCHIVE / SEARCH HEADER
   ============================================================= */

.jb-archive-header {
  background: var(--jb-bg-subtle);
  border-bottom: 1px solid var(--jb-border);
  padding: 48px 0 40px;
  margin-bottom: 40px;
}

.jb-archive-header__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--jb-green-dark);
  margin: 0 0 8px;
}

.jb-archive-header__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--jb-text);
  margin: 0 0 10px;
  line-height: 1.2;
}

.jb-archive-header__desc {
  font-size: 15px;
  color: var(--jb-text-muted);
  margin: 0;
  max-width: 600px;
}

/* =============================================================
   ARCHIVE / SEARCH LAYOUT
   ============================================================= */

.jb-archive-layout {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.jb-archive-main {
  flex: 1;
  min-width: 0;
}

/* =============================================================
   BLOG SIDEBAR
   ============================================================= */

.widget-area--sidebar {
  width: 280px;
  flex-shrink: 0;
  padding-top: 8px;
}

.widget-area--sidebar .widget {
  background: var(--jb-bg-subtle);
  border-radius: 10px;
  padding: 24px 24px 28px;
  margin-bottom: 32px;
}

.widget-area--sidebar .widget-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--jb-text-muted);
  margin: 0 0 18px;
}

/* Search */
.widget-area--sidebar .searchform {
  display: flex;
  gap: 8px;
}

.widget-area--sidebar .searchform__input {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  padding: 11px 14px;
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  color: var(--jb-text);
  background: var(--jb-bg);
  outline: none;
  transition: border-color 0.15s;
}

.widget-area--sidebar .searchform__input::placeholder {
  color: var(--jb-text-light);
}

.widget-area--sidebar .searchform__input:focus {
  border-color: var(--jb-green);
}

.widget-area--sidebar .searchform__submit {
  flex-shrink: 0;
  padding: 11px 16px;
  background: var(--jb-green);
  border: none;
  border-radius: var(--jb-radius);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s;
}

.widget-area--sidebar .searchform__submit:hover {
  background: var(--jb-green-dark);
}

/* Newsletter intro text */
.widget-area--sidebar .textwidget {
  font-size: 14px;
  color: var(--jb-text-muted);
  line-height: 1.7;
}

/* ConvertKit form tweaks inside sidebar */
.widget-area--sidebar .formkit-form .formkit-input {
  font-size: 14px !important;
  padding: 11px 14px !important;
  border-radius: var(--jb-radius) !important;
  border-color: var(--jb-border) !important;
  background-color: var(--jb-bg) !important;
}

.widget-area--sidebar .formkit-form .formkit-submit > span {
  padding: 12px 18px !important;
  font-size: 14px !important;
}

@media (max-width: 768px) {
  .jb-archive-layout {
    flex-direction: column;
  }
  .widget-area--sidebar {
    width: 100%;
  }
}

.jb-archive-empty {
  padding: 40px 0;
  color: var(--jb-text-muted);
}

.jb-archive-empty p {
  font-size: 16px;
  margin-bottom: 20px;
}

/* =============================================================
   BLOG CARD (archive / search loop)
   ============================================================= */

.jb-blog-card {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--jb-border);
  list-style: none;
  margin: 0;
}

.jb-blog-card:first-child {
  padding-top: 0;
}

.jb-blog-card__img {
  flex: 0 0 220px;
  width: 220px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--jb-bg-subtle);
  display: block;
  align-self: flex-start;
}

.jb-blog-card__img img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.jb-blog-card:hover .jb-blog-card__img img {
  transform: scale(1.03);
}

.jb-blog-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jb-blog-card__meta-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.jb-blog-card__date,
.jb-blog-card__read-time {
  font-size: 12px;
  color: var(--jb-text-muted);
}

.jb-blog-card__date::before,
.jb-blog-card__read-time::before {
  content: '·';
  margin-right: 6px;
  color: var(--jb-text-light);
}

.jb-blog-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.jb-blog-card__title a {
  color: var(--jb-text);
  text-decoration: none;
  transition: color 0.15s;
}

.jb-blog-card__title a:hover {
  color: var(--jb-green-dark);
}

.jb-blog-card__excerpt {
  font-size: 14px;
  color: var(--jb-text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.jb-blog-card__excerpt p {
  margin: 0;
}

.jb-blog-card__author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.jb-blog-card__author img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.jb-blog-card__author span {
  font-size: 13px;
  color: var(--jb-text-muted);
}

@media (max-width: 600px) {
  .jb-blog-card {
    flex-direction: column;
  }
  .jb-blog-card__img {
    flex: none;
    width: 100%;
  }
  .jb-blog-card__img img {
    height: 180px;
  }
  .jb-archive-header__title {
    font-size: 24px;
  }
}

/* =============================================================
   RELATED POSTS (bottom of single post)
   ============================================================= */

.jb-related {
  border-top: 2px solid var(--jb-border);
  margin-top: 48px;
  padding-top: 40px;
}

.jb-related__heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--jb-text);
  margin: 0 0 24px;
}

.jb-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.jb-related__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--jb-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--jb-bg);
  transition: box-shadow 0.2s, transform 0.2s;
}

.jb-related__card:hover {
  box-shadow: var(--jb-shadow);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}

.jb-related__img {
  overflow: hidden;
  background: var(--jb-bg-subtle);
}

.jb-related__img img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.jb-related__card:hover .jb-related__img img {
  transform: scale(1.04);
}

.jb-related__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.jb-related__cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--jb-green-dark);
}

.jb-related__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--jb-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jb-related__date {
  font-size: 12px;
  color: var(--jb-text-light);
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 768px) {
  .jb-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .jb-related__grid {
    grid-template-columns: 1fr;
  }
}