/* ==========================================================================
   Sunartech Careers & Job Board — v1.3.0
   --------------------------------------------------------------------------
   Rewritten to:
   - fix low-contrast orange headline text on the hero (was #ff6248 on a
     dark blue gradient background)
   - remove ~2 generations of dead/duplicate CSS left over from earlier
     versions (a full search/filter/pagination layer for a UI that no
     longer exists, plus a near-duplicate "hardening" layer that only
     added !important to slightly different values)
   - route all color usage through CSS variables so the Primary/Accent
     colors saved under Jobs → Settings actually take effect
   - add consistent focus states for accessibility
   - align single-job page and job-card visuals into one design language
   ========================================================================== */

:root {
  --stjb-primary: #0b5cff;
  --stjb-accent: #ff6248;
  --stjb-dark: #111827;
  --stjb-text: #202936;
  --stjb-muted: #667085;
  --stjb-border: #e3e7ed;
  --stjb-bg: #f7f9fc;
  --stjb-radius: 14px;
  --stjb-shadow-sm: 0 5px 18px rgba(15, 23, 42, .05);
  --stjb-shadow-md: 0 16px 38px rgba(16, 24, 40, .10);
}

/* ---------- Base ----------
   A few properties get !important here and on the grid/card/heading/button
   rules below — these are the specific properties that page-builder and
   theme global styles (Elementor, Divi, block-theme defaults) most often
   reset via higher-specificity or later-loaded CSS: font-family, font-size,
   color, margin/padding on headings, grid layout, and link/button styling.
   This replaces the old approach of duplicating the *entire* ruleset a
   second time with !important tacked on everything, which was the actual
   source of the drift/bloat in the previous version. */
.stjb-wrap,
.stjb-single {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  color: var(--stjb-text) !important;
  box-sizing: border-box;
}
.stjb-wrap *, .stjb-single * { box-sizing: border-box; }

.stjb-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.stjb-apply-now:focus-visible,
.stjb-apply-button:focus-visible,
.stjb-submit:focus-visible,
.stjb-back:focus-visible,
.stjb-job-box a:focus-visible,
.stjb-form-grid input:focus-visible,
.stjb-form-grid textarea:focus-visible,
.stjb-consent input:focus-visible {
  outline: 2px solid var(--stjb-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .stjb-job-box, .stjb-job-box:hover, .stjb-submit, .stjb-apply-button { transition: none !important; transform: none !important; }
}

/* ---------- Section heading ---------- */
.stjb-jobs-section { background: #fff; padding: 68px 30px 90px; }
/* The careers hero/banner above this section was removed at the user's request
   (v1.4.1). This section is now the first thing in the shortcode's markup, so it
   gets its own top padding rather than inheriting spacing that assumed a hero
   sat above it. */
.stjb-jobs-section-top { padding-top: 56px; }
.stjb-jobs-container { max-width: 1180px; margin: 0 auto; }
.stjb-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 32px;
}
.stjb-section-heading .stjb-eyebrow { color: var(--stjb-muted); margin-bottom: 8px; }
.stjb-section-heading h2 {
  font-size: 38px !important;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--stjb-dark) !important;
  margin: 0 !important;
}
.stjb-job-count {
  font-size: 14px;
  color: var(--stjb-muted);
  white-space: nowrap;
  padding-bottom: 4px;
}

/* ---------- Job grid & card ---------- */
.stjb-jobs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
.stjb-job-box {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  min-height: 400px;
  border: 1px solid var(--stjb-border) !important;
  border-radius: var(--stjb-radius) !important;
  background: #fff !important;
  padding: 30px 28px 27px !important;
  box-shadow: var(--stjb-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stjb-job-box:hover {
  transform: translateY(-4px);
  border-color: #cfd5dd;
  box-shadow: var(--stjb-shadow-md);
}
.stjb-job-box.is-featured { border-top: 3px solid var(--stjb-accent); padding-top: 28px; }
.stjb-job-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--stjb-accent);
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stjb-job-box h3 {
  font-size: 21px !important;
  line-height: 1.28;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--stjb-dark) !important;
  margin: 0 0 9px !important;
}
.stjb-job-box h3 a { color: inherit !important; text-decoration: none !important; }
.stjb-job-box h3 a:hover { color: var(--stjb-primary); }
.stjb-job-company { font-size: 13px; font-weight: 600; color: var(--stjb-muted); margin: 0 0 18px; }
.stjb-job-excerpt { font-size: 14px; line-height: 1.62; color: #3f4855; margin: 0 0 22px; }
.stjb-job-excerpt p { margin: 0; }
.stjb-job-meta {
  margin: auto 0 0;
  padding-top: 19px;
  border-top: 1px solid #e9edf1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 16px;
}
.stjb-job-meta span { font-size: 12px; font-weight: 500; color: #384250; line-height: 1.45; }
.stjb-job-meta b {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8a94a3;
  margin-bottom: 4px;
}
.stjb-apply-now {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 22px !important;
  padding: 12px 18px !important;
  background: var(--stjb-dark) !important;
  color: #fff !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700;
}
.stjb-apply-now:hover { background: var(--stjb-accent); }
.stjb-apply-now span { margin-left: 8px; font-size: 15px; line-height: 1; }

.stjb-empty {
  text-align: center;
  padding: 60px 25px;
  border: 1px dashed #d7dce3;
  border-radius: var(--stjb-radius);
  background: #fafbfc;
}
.stjb-empty h3 { margin: 0 0 8px; font-size: 22px; color: var(--stjb-dark); }
.stjb-empty p { margin: 0; color: var(--stjb-muted); font-size: 14px; }

/* ---------- Pagination ---------- */
.stjb-jobs-pagination { margin-top: 40px; display: flex; justify-content: center; }
.stjb-jobs-pagination ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.stjb-jobs-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--stjb-border);
  border-radius: 8px;
  color: var(--stjb-text);
  text-decoration: none;
  font-size: 14px;
}
.stjb-jobs-pagination .page-numbers.current { background: var(--stjb-primary); border-color: var(--stjb-primary); color: #fff; }
.stjb-jobs-pagination a.page-numbers:hover { border-color: var(--stjb-primary); color: var(--stjb-primary); }
.stjb-jobs-pagination .page-numbers.dots { border: none; }

/* ---------- Single job page ---------- */
.stjb-single-hero { background: var(--stjb-bg); padding: 55px 24px; }
.stjb-container { max-width: 1100px; margin: auto; }
.stjb-back {
  display: inline-block;
  color: var(--stjb-muted);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 32px;
}
.stjb-back:hover { color: var(--stjb-primary); }
.stjb-single-title { display: flex; gap: 22px; align-items: center; }
.stjb-single-title h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; margin: 4px 0 8px; letter-spacing: -.03em; color: var(--stjb-dark); }
.stjb-single-title p { margin: 0; color: var(--stjb-muted); }
.stjb-single .stjb-eyebrow { color: var(--stjb-muted); }

/* Was indented 100px to line up with the title-row avatar that sat to its left;
   that avatar has been removed, so this now sits flush with the title above it. */
.stjb-meta-large { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; }
.stjb-meta-item { display: inline-flex; align-items: center; gap: 7px; color: var(--stjb-text); }
.stjb-meta-icon { display: inline-flex; width: 16px; height: 16px; color: var(--stjb-primary); flex-shrink: 0; }
.stjb-meta-icon svg { width: 100%; height: 100%; }

.stjb-single-grid {
  max-width: 1100px;
  margin: auto;
  padding: 55px 24px 70px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 55px;
}
.stjb-description { font-size: 16px; line-height: 1.8; }
.stjb-description h2, .stjb-description h3 { line-height: 1.25; margin-top: 34px; color: var(--stjb-dark); }
.stjb-apply-card {
  height: max-content;
  position: sticky;
  top: 30px;
  border: 1px solid var(--stjb-border);
  border-radius: var(--stjb-radius);
  padding: 25px;
  box-shadow: var(--stjb-shadow-sm);
}
.stjb-apply-card strong { font-size: 19px; color: var(--stjb-dark); }
.stjb-apply-card p { color: var(--stjb-muted); font-size: 13px; line-height: 1.6; margin: 8px 0 0; }
.stjb-apply-button {
  display: block;
  text-align: center;
  text-decoration: none !important;
  padding: 14px;
  margin-top: 20px;
  border: 0;
  border-radius: 10px;
  background: var(--stjb-primary);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.stjb-apply-button:hover { background: var(--stjb-dark); }
.stjb-apply-button span { margin-left: 7px; }

/* Anchor targets scrolled to via #stjb-apply — offset so the page doesn't
   land flush against the viewport edge or under a sticky theme header. */
#stjb-apply { scroll-margin-top: 32px; }
html { scroll-behavior: smooth; }

/* ---------- Application form ---------- */
.stjb-application { margin-top: 55px; padding-top: 50px; border-top: 1px solid var(--stjb-border); }
.stjb-form-heading h2 { font-size: 30px; margin: 0 0 7px; color: var(--stjb-dark); }
.stjb-form-heading p { color: var(--stjb-muted); margin: 0 0 8px; }
.stjb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; margin-top: 18px; }
.stjb-form-grid p { margin: 10px 0; }
.stjb-form-grid .full { grid-column: 1 / -1; }
.stjb-form-grid label { display: block; font-size: 12px; font-weight: 700; color: var(--stjb-text); margin-bottom: 7px; }
.stjb-form-grid input,
.stjb-form-grid textarea {
  width: 100%;
  border: 1px solid var(--stjb-border);
  border-radius: 9px;
  padding: 12px 14px;
  background: #fff;
  font: inherit;
  color: var(--stjb-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.stjb-form-grid input:focus,
.stjb-form-grid textarea:focus {
  border-color: var(--stjb-primary);
  box-shadow: 0 0 0 3px rgba(11, 92, 255, .12);
}
.stjb-form-grid input[type="file"] { padding: 9px 14px; cursor: pointer; }
.stjb-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--stjb-muted); margin: 18px 0; }
.stjb-consent input { margin-top: 2px; }

.stjb-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: var(--stjb-primary);
  color: #fff;
  border-radius: 10px;
  padding: 14px 26px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.stjb-submit:hover { background: var(--stjb-dark); }
.stjb-submit:disabled { opacity: .65; cursor: progress; }

.stjb-success {
  text-align: center;
  background: #f1fbf5;
  border: 1px solid #ccebd8;
  border-radius: var(--stjb-radius);
  padding: 45px;
  margin-top: 50px;
}
.stjb-success-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #159447;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: auto;
  font-size: 25px;
}
.stjb-success h2 { margin: 15px 0 8px; color: var(--stjb-dark); }
.stjb-success p { color: var(--stjb-muted); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .stjb-jobs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stjb-section-heading h2 { font-size: 32px; }
  .stjb-single-grid { grid-template-columns: 1fr; }
  .stjb-apply-card { position: static; }
}
@media (max-width: 650px) {
  .stjb-jobs-section { padding: 48px 20px 65px; }
  .stjb-jobs-section-top { padding-top: 40px; }
  .stjb-section-heading { display: block; margin-bottom: 26px; }
  .stjb-section-heading h2 { font-size: 28px; }
  .stjb-job-count { margin-top: 10px; }
  .stjb-jobs-grid { grid-template-columns: 1fr; gap: 17px; }
  .stjb-job-box { min-height: 0; padding: 25px 21px 23px; }
  .stjb-job-box h3 { font-size: 20px; }
  .stjb-single-title { flex-direction: column; align-items: flex-start; gap: 14px; }
  .stjb-form-grid { grid-template-columns: 1fr; }
  .stjb-form-grid .full { grid-column: auto; }
}