/* ===========================================================================
   Career page  -  archive-style layout (per-company)
   Mirrors the beta archive-jobs layout-full with a hero search and a
   side-by-side list + preview panel.
   =========================================================================== */

:root,
[data-theme="light"] {
  --cc-brand:        var(--brand, #2958ff);
  --cc-brand-text:   var(--brand-text, #fff);
  --cc-brand-soft:   rgba(41, 88, 255, 0.10);
  --cc-bg:           #ffffff;
  --cc-bg-soft:      #f6f8fb;
  --cc-bg-tint:      #f0f3f8;
  --cc-text:         #15172a;
  --cc-text-muted:   #5b6178;
  --cc-text-faint:   #9ca0ad;
  --cc-border:       #e7eaf0;
  --cc-border-strong:#cfd4de;
  --cc-shadow:       0 2px 6px rgba(15, 18, 40, 0.05);
  --cc-shadow-md:    0 12px 30px -8px rgba(15, 18, 40, 0.10);
  --cc-shadow-lg:    0 18px 40px -10px rgba(15, 18, 40, 0.18);
  --cc-urgent:       #b32737;
  --cc-warn-bg:      #fff3df;
  --cc-warn-fg:      #ad5a00;
  --cc-radius-sm:    8px;
  --cc-radius:       12px;
  --cc-radius-lg:    16px;
}

[data-theme="dark"] {
  --cc-bg:           #0c0e14;
  --cc-bg-soft:      #14171f;
  --cc-bg-tint:      #1a1e29;
  --cc-text:         #e9eaf0;
  --cc-text-muted:   #9aa0b3;
  --cc-text-faint:   #6d7388;
  --cc-border:       #1f2330;
  --cc-border-strong:#2e3445;
  --cc-brand-soft:   rgba(106, 142, 255, 0.16);
  --cc-shadow:       0 2px 6px rgba(0, 0, 0, 0.4);
  --cc-shadow-md:    0 12px 30px -8px rgba(0, 0, 0, 0.6);
  --cc-shadow-lg:    0 18px 40px -10px rgba(0, 0, 0, 0.6);
}

/* ---- Reset / base --------------------------------------------------------- */
html { background: var(--cc-bg-tint); }

.civi-career-body,
.civi-career-body *,
.civi-career-body *::before,
.civi-career-body *::after { box-sizing: border-box; }

.civi-career-body .site-header,
.civi-career-body .site-footer,
.civi-career-body .civi-top-bar,
.civi-career-body #wpadminbar { display: none !important; }

.civi-career-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--cc-bg-tint);
  color: var(--cc-text);
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Boxed site frame (desktop only) -------------------------------------
   Whole site sits inside a centred frame on a tinted body bg.
   Mobile: full-width edge-to-edge, no frame. */
.cc-frame {
  background: var(--cc-bg);
  max-width: 100%;
  margin: 0;
}
@media (min-width: 1024px) {
  .cc-frame {
    max-width: 1320px;
    margin: 28px auto;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-lg);
    /* clip (not hidden) so .cc-detail-side position:sticky still sticks to the viewport */
    overflow: clip;
    box-shadow: var(--cc-shadow-md);
  }
}

[hidden] { display: none !important; }

a { color: var(--cc-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.cc-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Top bar -------------------------------------------------------------- */
/* Inside the boxed frame so sticky is avoided; the frame is the card,
   topbar is the card's header. */
.cc-topbar {
  background: var(--cc-bg);
  border-bottom: 1px solid var(--cc-border);
}

.cc-topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-text);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  min-width: 0;
}
.cc-brand:hover { text-decoration: none; color: var(--cc-text); }

.cc-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}
.cc-brand-mark--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-brand);
  color: var(--cc-brand-text);
  font-size: 12px;
  font-weight: 800;
}
.cc-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cc-topbar-actions { display: flex; align-items: center; gap: 14px; }

.cc-text-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--cc-text);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.cc-text-link:hover { text-decoration: none; border-bottom-color: var(--cc-text); }

.cc-icon-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cc-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.cc-icon-btn:hover { background: var(--cc-bg-soft); color: var(--cc-text); }

.cc-icon-sun  { display: none; }
.cc-icon-moon { display: block; }
[data-theme="dark"] .cc-icon-sun  { display: block; }
[data-theme="dark"] .cc-icon-moon { display: none; }

/* ===========================================================================
   Hero (background image + overlay + integrated search bar)
   =========================================================================== */
.cc-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 90px 24px 110px;
  /* Neutral dark fallback (only shown when there's no cover image AND no logo). */
  background: #1a1d24;
  text-align: center;
}

/* When only the logo is available we blur + saturate it so the hero picks
   up the brand colour without showing the literal mark. A real cover image
   is shown crisp (only dimmed by the overlay). */
.cc-hero-bg {
  position: absolute;
  inset: -60px;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.cc-hero--logo .cc-hero-bg {
  /* Heavy blur + saturation boost so the logo's dominant colour bleeds out
     across the whole hero, then a touch of brightness reduction so white
     text stays readable. */
  filter: blur(80px) saturate(2.8) brightness(.78);
  transform: scale(1.25);
}
/* Neutral darken overlay — no colour tint, so the logo colour shows through.
   Lighter for the logo variant (we WANT the colour) and a bit heavier for
   real cover photos which need more readability dimming. */
.cc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .32);
  z-index: 1;
}
.cc-hero--cover::after {
  background: rgba(0, 0, 0, .55);
}

.cc-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
}

.cc-hero-eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .8);
  margin: 0 0 8px;
}

.cc-hero-title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 12px;
  color: #fff;
}

.cc-hero-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, .85);
  margin: 0 0 32px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.cc-hero-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  margin: 0 10px;
}

/* Pill-shaped search bar */
.cc-search {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  gap: 0;
  box-shadow: var(--cc-shadow-lg);
  max-width: 100%;
  flex-wrap: wrap;
}

.cc-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 48px;
  flex: 1 1 180px;
  min-width: 0;
  color: #5b6178;
  position: relative;
}
.cc-search-field + .cc-search-field { border-left: 1px solid #ececef; }
.cc-search-field svg { flex-shrink: 0; color: #9ca0ad; }

.cc-search-field input,
.cc-search-field select {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: #15172a;
  width: 100%;
  min-width: 0;
  padding: 0;
  cursor: pointer;
}
.cc-search-field input { cursor: text; }
.cc-search-field input::placeholder { color: #9ca0ad; }
.cc-search-field select {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%235b6178' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 5 5 9 1'/></svg>") no-repeat right 0 center / 10px 6px;
  padding-right: 18px;
}

.cc-search-clear {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  color: #5b6178;
  font: inherit;
  padding: 0 16px;
  height: 48px;
  cursor: pointer;
  font-weight: 500;
}
.cc-search-clear:hover { color: #15172a; }

.cc-search-submit {
  -webkit-appearance: none;
  appearance: none;
  background: var(--cc-brand);
  color: var(--cc-brand-text);
  border: none;
  height: 48px;
  padding: 0 32px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
  flex-shrink: 0;
}
.cc-search-submit:hover { opacity: .92; }

/* ===========================================================================
   Main + sections
   =========================================================================== */
.cc-main { padding: 0; }

.cc-positions {
  padding: 36px 0 80px;
  margin-top: -50px;
  position: relative;
  z-index: 3;
}
@media (max-width: 768px) {
  .cc-positions { padding: 24px 0 56px; margin-top: -20px; }
}

/* Toolbar */
.cc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 18px;
  flex-wrap: wrap;
}
.cc-result-count { font-size: 15px; color: var(--cc-text-muted); }
.cc-result-count span { color: var(--cc-text); font-weight: 700; }

.cc-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cc-text-muted);
  font-size: 14px;
}
.cc-sort select {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  background: var(--cc-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%235b6178' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 5 5 9 1'/></svg>") no-repeat right 10px center / 10px 6px;
  padding: 7px 28px 7px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--cc-text);
  cursor: pointer;
}
[data-theme="dark"] .cc-sort select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%239aa0b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 5 5 9 1'/></svg>");
}

.cc-positions-list { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.cc-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--cc-text-muted);
  font-size: 15px;
  margin: 0;
}

/* ===========================================================================
   Job cards (beta layout-full)
   =========================================================================== */
.civi-jobs-item {
  position: relative;
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 24px 26px;
  box-sizing: border-box;
  cursor: pointer;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.civi-jobs-item[hidden] { display: none; }
.civi-jobs-item:hover { box-shadow: var(--cc-shadow-md); }
.civi-jobs-item.active {
  border-color: var(--cc-brand);
  box-shadow: var(--cc-shadow-md);
}
.civi-jobs-item.civi-jobs-featured {
  border-color: var(--cc-warn-fg);
  background: linear-gradient(180deg, rgba(255, 220, 150, .06) 0%, var(--cc-bg) 50%);
}

.civi-jobs-item .jobs-archive-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.civi-jobs-item .jobs-header-left { display: flex; align-items: center; flex: 1; min-width: 0; }

.civi-jobs-item .logo-company {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cc-bg-soft);
  flex-shrink: 0;
  margin-right: 16px;
}
.civi-jobs-item .logo-company--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--cc-brand);
  background: var(--cc-brand-soft);
  font-size: 16px;
}

.civi-jobs-item .jobs-left-inner { min-width: 0; }
.civi-jobs-item .jobs-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 5px;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.civi-jobs-item .jobs-title a {
  color: var(--cc-text);
  text-decoration: none;
  position: relative;
  z-index: 2;
}
.civi-jobs-item:hover .jobs-title a,
.civi-jobs-item.active .jobs-title a { color: var(--cc-brand); }

.cc-featured-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cc-warn-bg);
  color: var(--cc-warn-fg);
  flex-shrink: 0;
}

.civi-jobs-item .info-company {
  font-size: 14px;
  color: var(--cc-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.civi-jobs-item .authour {
  color: var(--cc-text);
  font-weight: 500;
}
.civi-jobs-item .categories-wrapper { display: inline-flex; flex-wrap: wrap; gap: 0 6px; }
.civi-jobs-item .cate { color: var(--cc-brand); font-weight: 500; }
.civi-jobs-item .cate-wrapper:not(:first-child)::before { content: ","; margin-right: 2px; color: var(--cc-text-muted); }

.civi-jobs-item .jobs-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.cc-wish {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cc-text-faint);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color .15s ease, background .15s ease;
}
.cc-wish:hover { color: var(--cc-brand); background: var(--cc-bg-soft); }
.cc-wish.is-saved { color: var(--cc-brand); }
.cc-wish.is-saved .cc-wish-icon { fill: currentColor; }
.cc-wish.is-busy { opacity: .55; pointer-events: none; }

.civi-jobs-item .jobs-des {
  margin-top: 16px;
  font-size: 14px;
  color: var(--cc-text-muted);
  line-height: 1.7;
}
@media (max-width: 576px) {
  .civi-jobs-item .jobs-des { word-break: break-word; overflow-wrap: break-word; hyphens: auto; }
}

.civi-jobs-item .jobs-archive-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.civi-jobs-item .jobs-footer-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  line-height: 1.4;
}
.label-type {
  color: #6c4cbe;
  background: #f5ecff;
}
.label-location {
  color: var(--cc-text-muted);
  background: var(--cc-bg-tint);
}
.label-location svg { color: var(--cc-text-faint); }
.label-price {
  color: var(--cc-brand);
  background: var(--cc-brand-soft);
}
[data-theme="dark"] .label-type { color: #b89bff; background: #2a1f3d; }

.civi-jobs-item .days {
  font-size: 13px;
  font-weight: 500;
  color: var(--cc-text-muted);
  margin: 0;
  white-space: nowrap;
}
.civi-jobs-item .days span { color: var(--cc-brand); font-weight: 700; }

.civi-jobs-item .civi-link-item {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.civi-jobs-item .civi-link-item:focus-visible {
  outline: 2px solid var(--cc-brand);
  outline-offset: -2px;
}

@media (max-width: 767px) {
  .civi-jobs-item { padding: 20px; }

  /* Mobile card layout: logo alone on top-left, everything else stacks below — each on its own line.
     The wish (heart) icon is hidden on mobile per request. */
  .civi-jobs-item .jobs-archive-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .civi-jobs-item .jobs-header-left {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 12px;
  }
  .civi-jobs-item .logo-company { margin-right: 0; }
  .civi-jobs-item .jobs-left-inner { width: 100%; }
  .civi-jobs-item .jobs-title { display: block; }
  .civi-jobs-item .info-company { display: flex; }

  /* Hide the wish/heart icon column entirely on mobile */
  .civi-jobs-item .jobs-header-right { display: none; }

  /* Footer rows (labels block, then days block) stack vertically; labels themselves stay as inline chips */
  .civi-jobs-item .jobs-archive-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ===========================================================================
   Full-page job detail
   =========================================================================== */
.cc-detail-crumb { padding: 20px 0 8px; }
.cc-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cc-text-muted);
  text-decoration: none;
  padding: 6px 0;
}
.cc-back:hover { color: var(--cc-text); text-decoration: none; }

.cc-detail-cover {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.cc-detail-cover img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--cc-radius-lg);
  display: block;
  background: var(--cc-bg-soft);
}

.cc-detail-hero { padding: 28px 0 12px; }
.cc-detail-hero-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cc-detail-hero-main { flex: 1 1 480px; min-width: 0; }

.cc-detail-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--cc-text);
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cc-detail-byline {
  font-size: 15px;
  color: var(--cc-text-muted);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.cc-detail-byline strong { color: var(--cc-text); font-weight: 600; }
.cc-detail-cate { color: var(--cc-brand); font-weight: 500; }
.cc-detail-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.cc-detail-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cc-dv-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cc-text-faint);
  margin: 0 8px;
}
.cc-dv-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cc-text-faint);
}

.cc-detail-body { padding: 24px 0 80px; }
@media (max-width: 768px) {
  .cc-detail-body { padding: 18px 0 56px; }
}
.cc-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.cc-detail-main { min-width: 0; }
.cc-detail-side { display: flex; flex-direction: column; gap: 16px; }

.cc-detail-cta {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--cc-border);
}


/* Right-rail cards */
.cc-side-card {
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 22px;
}
.cc-side-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--cc-text);
}
.cc-side-title--inline { margin: 0; }
.cc-side-sub { font-size: 13px; color: var(--cc-text-muted); margin: 4px 0 0; }
.cc-side-cta { margin-top: 18px; }

.cc-side-company-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.cc-side-company-head .logo-company {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cc-bg-soft);
  flex-shrink: 0;
}
.cc-side-company-head .logo-company--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--cc-brand);
  background: var(--cc-brand-soft);
  font-size: 14px;
}

.cc-detail-more {
  padding: 16px 0 80px;
  border-top: 1px solid var(--cc-border);
}

/* Shared icon button */
.cc-dv-icon {
  -webkit-appearance: none;
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--cc-border);
  background: var(--cc-bg);
  color: var(--cc-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cc-dv-icon:hover { background: var(--cc-bg-soft); color: var(--cc-text); }
.cc-dv-icon.is-copied { background: var(--cc-brand-soft); color: var(--cc-brand); border-color: transparent; }
.cc-dv-icon.cc-wish.is-saved { color: var(--cc-brand); border-color: var(--cc-brand); }
.cc-dv-icon.cc-wish.is-saved .cc-wish-icon { fill: currentColor; }
.cc-dv-icon.cc-wish.is-busy { opacity: .55; pointer-events: none; }

/* Tabs */
.cc-dv-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--cc-border);
  margin-top: 0;
}
.cc-dv-tab {
  padding: 14px 0;
  margin-right: 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cc-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.cc-dv-tab:hover { color: var(--cc-text); text-decoration: none; }
.cc-dv-tab.is-active { color: var(--cc-text); border-bottom-color: var(--cc-brand); }

.cc-dv-body { padding: 22px 24px 24px; }
.cc-tab-pane { display: none; }
.cc-tab-pane.is-active { display: block; }

.cc-prose-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--cc-text);
}
.cc-prose-body p { margin: 0 0 12px; }
.cc-prose-body p:last-child { margin-bottom: 0; }
.cc-prose-body h2,
.cc-prose-body h3,
.cc-prose-body h4 {
  color: var(--cc-text);
  font-weight: 700;
  margin: 22px 0 10px;
  font-size: 16px;
}
.cc-prose-body ul,
.cc-prose-body ol { padding-left: 22px; margin: 0 0 14px; }
.cc-prose-body li { margin-bottom: 6px; }
.cc-prose-body strong { color: var(--cc-text); font-weight: 600; }
.cc-prose-body a { color: var(--cc-brand); }
.cc-prose-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
}
.cc-prose-body th,
.cc-prose-body td {
  border-bottom: 1px solid var(--cc-border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.cc-prose-body th { font-weight: 600; color: var(--cc-text); }

.cc-dv-error {
  color: var(--cc-text-faint);
  text-align: center;
  padding: 40px 0;
  font-size: 15px;
  margin: 0;
}

.cc-dv-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--cc-border);
}

/* Facts */
.cc-facts {
  margin-top: 32px;
  padding: 22px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-bg);
}
.cc-facts-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cc-text-faint);
  margin: 0 0 14px;
}
.cc-facts-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin: 0;
}
.cc-facts-list > div { min-width: 0; }
.cc-facts-list dt {
  font-size: 11px;
  color: var(--cc-text-faint);
  margin: 0 0 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cc-facts-list dd {
  margin: 0;
  font-size: 14px;
  color: var(--cc-text);
  font-weight: 500;
  word-wrap: break-word;
}

/* Company overview */
.cc-company-card { color: var(--cc-text); }
/* Typography comes from .cc-prose-body (added alongside this class); keep only the spacing here. */
.cc-company-content { margin-bottom: 18px; }
.cc-company-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-bg);
}
.cc-company-facts > div { min-width: 0; }
.cc-company-facts dt {
  font-size: 11px;
  font-weight: 600;
  color: var(--cc-text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 4px;
}
.cc-company-facts dd { margin: 0; font-size: 14px; color: var(--cc-text); font-weight: 500; word-break: break-word; }

/* ---- Buttons ------------------------------------------------------------- */
.cc-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: opacity .15s ease, background .15s ease;
  line-height: 1;
  white-space: nowrap;
}
.cc-btn:hover { text-decoration: none; }
.cc-btn--primary {
  background: var(--cc-brand);
  color: var(--cc-brand-text);
  border-color: var(--cc-brand);
}
.cc-btn--primary:hover { opacity: .92; color: var(--cc-brand-text); }
.cc-btn--block { width: 100%; }

/* Spinner */
.cc-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--cc-border);
  border-top-color: var(--cc-brand);
  border-radius: 50%;
  animation: cc-spin .7s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* ---- Contact ------------------------------------------------------------ */
.cc-contact {
  padding: 56px 0;
  border-top: 1px solid var(--cc-border);
  background: var(--cc-bg-tint);
}
.cc-h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 22px;
  color: var(--cc-text);
}
.cc-contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 36px;
  margin: 0;
}
.cc-contact-list > div { min-width: 0; }
.cc-contact-list dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cc-text-faint);
  margin: 0 0 6px;
}
.cc-contact-list dd {
  margin: 0;
  font-size: 15px;
  color: var(--cc-text);
  word-break: break-all;
}
.cc-contact-list a {
  color: var(--cc-text);
  border-bottom: 1px solid var(--cc-border);
  padding-bottom: 1px;
}
.cc-contact-list a:hover { text-decoration: none; border-bottom-color: var(--cc-text); }

/* ---- Footer ------------------------------------------------------------- */
.cc-footer {
  padding: 28px 0;
  border-top: 1px solid var(--cc-border);
  font-size: 13px;
  color: var(--cc-text-muted);
  background: var(--cc-bg);
}
.cc-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.cc-footer-brand { color: var(--cc-text); font-weight: 600; text-decoration: none; }
.cc-footer-social { display: flex; align-items: center; gap: 18px; }
.cc-footer-social a {
  color: var(--cc-text-muted);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid transparent;
}
.cc-footer-social a:hover { color: var(--cc-text); border-bottom-color: var(--cc-text); text-decoration: none; }
.cc-footer-credit { margin: 0; }
.cc-footer-credit a { color: var(--cc-text); border-bottom: 1px solid var(--cc-border); padding-bottom: 1px; }
.cc-footer-credit a:hover { text-decoration: none; border-bottom-color: var(--cc-text); }

/* ===========================================================================
   Desktop: 2-col layout on the detail page (main + sticky sidebar)
   =========================================================================== */
@media (min-width: 1024px) {
  .cc-detail-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
  .cc-detail-side {
    position: sticky;
    top: 88px;
  }
}

@media (min-width: 1280px) {
  .cc-detail-grid { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* Mobile-only Apply CTA inside the sidebar — hidden by default, shown on < 1024px.
   Placed AFTER .cc-btn so it overrides .cc-btn { display: inline-flex }. */
.cc-detail-cta-mobile { display: none; }

/* ---- Topbar account (logged-in avatar dropdown) -------------------------- */
.cc-account { position: relative; display: inline-flex; }
.cc-account-trigger {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--cc-border);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--cc-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  height: 38px;
  max-width: 220px;
  transition: background .15s ease, border-color .15s ease;
}
.cc-account-trigger:hover { background: var(--cc-bg-soft); }
.cc-account.is-open .cc-account-trigger {
  background: var(--cc-bg-soft);
  border-color: var(--cc-text-faint);
}
.cc-account-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cc-bg-soft);
  flex-shrink: 0;
}
.cc-account-avatar--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-brand-soft);
  color: var(--cc-brand);
  font-weight: 700;
  font-size: 13px;
}
.cc-account-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.cc-account-caret {
  flex-shrink: 0;
  color: var(--cc-text-faint);
  transition: transform .2s ease;
}
.cc-account.is-open .cc-account-caret { transform: rotate(180deg); }

.cc-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow-md);
  padding: 6px;
  z-index: 100;
}
.cc-account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cc-text);
  text-decoration: none;
  border-radius: calc(var(--cc-radius) - 4px);
  transition: background .15s ease, color .15s ease;
}
.cc-account-item:hover {
  background: var(--cc-bg-soft);
  color: var(--cc-text);
  text-decoration: none;
}
.cc-account-item svg { color: var(--cc-text-faint); flex-shrink: 0; }
.cc-account-item:hover svg { color: var(--cc-text); }
.cc-account-item--danger:hover { color: var(--cc-urgent); }
.cc-account-item--danger:hover svg { color: var(--cc-urgent); }

@media (max-width: 768px) {
  /* On mobile, just show avatar — hide name to save space */
  .cc-account-name { display: none; }
  .cc-account-trigger { padding: 4px; }
}

/* ===========================================================================
   < 1024px (tablet + mobile): single-column detail page.
   Order: content -> About this role -> Apply now (mobile CTA) -> Company / View all positions.
   The in-content .cc-detail-cta is hidden; the .cc-detail-cta-mobile inside the sidebar shows.
   =========================================================================== */
@media (max-width: 1023px) {
  .cc-detail-cta { display: none; }
  .cc-detail-cta-mobile {
    display: inline-flex;
    width: 100%;
    margin: 4px 0;
  }
}

/* ===========================================================================
   Smaller screens
   =========================================================================== */
@media (max-width: 768px) {
  .cc-container { padding: 0 16px; }
  .cc-topbar-inner { padding: 0 16px; height: 56px; }
  .cc-text-link { display: none; }

  .cc-hero { padding: 60px 20px 90px; }
  .cc-hero-title { font-size: 30px; }
  .cc-hero-sub { font-size: 14px; }

  .cc-search { border-radius: 18px; padding: 10px; }
  .cc-search-field {
    flex: 1 1 100%;
    height: 44px;
    border-left: none !important;
    border-bottom: 1px solid #ececef;
  }
  .cc-search-field:last-of-type { border-bottom: none; }
  .cc-search-clear { width: auto; }
  .cc-search-submit {
    width: 100%;
    margin-top: 6px;
  }

  .cc-positions { padding-top: 24px; margin-top: -30px; }
  .cc-toolbar { gap: 10px; }
  .cc-result-count { font-size: 14px; }

  .cc-facts-list,
  .cc-company-facts { grid-template-columns: 1fr; gap: 12px; }

  .cc-detail-cover { padding: 0 16px; }
  .cc-detail-cover img { aspect-ratio: 16 / 9; border-radius: var(--cc-radius); }
  .cc-detail-title { font-size: 24px; }
  .cc-detail-hero-actions { width: 100%; justify-content: flex-end; }
  .cc-detail-hero-actions .cc-btn { flex: 1; }
  .cc-side-card { padding: 18px; }
  .cc-dv-tabs { overflow-x: auto; white-space: nowrap; }
}