/* Apex Hero — lightweight Astra-compatible hero
   Performance choices: one inline curve SVG, no external assets, no backdrop-filter, no CSS animation.
   PERF CHANGES vs original:
     - Removed duplicate `background: #0b4fe8` declaration (was immediately overridden)
     - Added `contain: layout paint style` to `.apex-hero__visual` (limits repaint scope)
     - Guarded button hover effects with `@media (hover: hover)` (mobile never pays the cost)
     - Simplified `.apex-btn` transition to GPU-only properties only
     - Added `will-change: transform` inside the hover rule (promotes element only when needed)
     - Added explicit `width` + `height` on arc SVG to prevent layout shift during parse
*/

.apex-hero {
  --apex-blue: #0b4fe8;
  --apex-ink: #0b1b3a;
  --apex-muted: #dbe7ff;
  --apex-next-bg: var(--ast-global-color-4, var(--wp--preset--color--base, #f0f4ff));

  position: relative;
  overflow: hidden;
  width: 100%;
  color: #fff;
  /* PERF: removed the first `background: #0b4fe8` — it was always overridden by the rule below */
  background: #2448b8;
  font-family: inherit;
  /* PERF: contain limits repaints triggered by children to this element's box only */
  contain: layout paint;
}

.apex-hero__arc {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 78px;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}
.apex-hero__arc svg { display: block; width: 100%; height: 100%; transform: rotate(180deg); }
.apex-hero__arc path { fill: #fff; }

/* Start the next section with a clean white surface; no translucent blue seam. */
#job-posting-section.glass-liquid-theme {
  background: #fff !important;
  background-image: none !important;
}

.apex-hero__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  max-width: 1240px;
  min-height: 570px;
  margin: 0 auto;
  padding: 78px 32px;
}

.apex-hero__content { min-width: 0; text-align: left; }

@media (min-width: 1025px) {
  .apex-hero__content {
    padding-left: 56px;
    transform: translateX(24px);
  }
}

.apex-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  color: #f2f6ff;
  background: rgba(4, 36, 126, .28);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
}

.apex-hero__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #79e6b0;
  box-shadow: 0 0 0 4px rgba(121, 230, 176, .14);
}

.apex-hero__title {
  max-width: 680px;
  margin: 0 0 19px;
  color: #fff;
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.02;
}

.apex-hero__title span { color: #9dc5ff; }

.apex-hero__text {
  max-width: 540px;
  margin: 0;
  color: var(--apex-muted);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
}

.apex-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.apex-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  /* PERF: only animate GPU-composited properties; `background-color` and `border-color`
     are paint-only, `transform` is compositor-only — all three avoid layout thrash */
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.apex-btn--primary { color: var(--apex-blue); background: #fff; }
.apex-btn--secondary { color: #fff; border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .08); }

/* PERF: hover effects gated on real pointer devices — touch users never trigger these
   paint layers, saving composite work on every finger interaction */
@media (hover: hover) {
  .apex-btn--primary:hover {
    color: var(--apex-blue);
    background: #edf4ff;
    transform: translateY(-1px);
    will-change: transform; /* promote to own compositor layer on hover only */
  }
  .apex-btn--secondary:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, .15);
  }
}

.apex-btn:focus-visible { outline: 3px solid #a7f3d0; outline-offset: 3px; }

.apex-hero__trust {
  display: flex;
  gap: 0;
  margin-top: 40px;
}

.apex-trust-item {
  min-width: 130px;
  padding: 0 22px;
  border-left: 1px solid rgba(255, 255, 255, .25);
}
.apex-trust-item:first-child { padding-left: 0; border-left: 0; }
.apex-trust-item strong, .apex-trust-item span { display: block; }
.apex-trust-item strong { color: #fff; font-size: 16px; line-height: 1.2; }
.apex-trust-item span { margin-top: 5px; color: #bdd2ff; font-size: 11px; line-height: 1.3; }

.apex-hero__visual {
  position: relative;
  min-height: 410px;
  /* PERF: contain isolates the decorative visual panel from the rest of the page.
     paint = its children can't cause repaints outside this box.
     layout + style = changes here never invalidate layout or style of siblings. */
  contain: layout paint style;
}

.apex-dashboard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(390px, 88%);
  padding: 22px;
  border: 1px solid #d9e5f8;
  border-radius: 16px;
  color: var(--apex-ink);
  background: #fff;
  box-shadow: none;
  transform: translate(-50%, -50%);
}
.apex-dashboard__topline, .apex-dashboard__row, .apex-dashboard__status { display: flex; align-items: center; }
.apex-dashboard__topline { justify-content: space-between; margin-bottom: 25px; }
.apex-dashboard__brand { color: #6680ad; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.apex-dashboard__status { gap: 6px; color: #0b9f65; font-size: 11px; font-weight: 700; }
.apex-dashboard__status i { width: 6px; height: 6px; border-radius: 50%; background: #16c784; }
.apex-dashboard__heading { margin-bottom: 13px; font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.apex-dashboard__search { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid #e5ebf5; border-radius: 7px; color: #91a1bc; font-size: 11px; }
.apex-dashboard__search span { width: 11px; height: 11px; border: 2px solid #4f82e8; border-radius: 50%; }
.apex-dashboard__search b { margin-left: auto; color: #4f82e8; font-size: 17px; }
.apex-dashboard__filters { display: flex; gap: 7px; margin: 17px 0; overflow: hidden; white-space: nowrap; }
.apex-dashboard__filters span { padding: 6px 9px; border-radius: 5px; color: #7c8ca7; background: #f3f6fb; font-size: 10px; font-weight: 700; }
.apex-dashboard__filters .is-active { color: #fff; background: var(--apex-blue); }
.apex-dashboard__row { gap: 10px; padding: 12px 0; border-top: 1px solid #edf1f7; }
.apex-dashboard__row > i { width: 29px; height: 29px; flex: 0 0 auto; border-radius: 7px; background: #dce9ff; }
.apex-dashboard__row:nth-of-type(2) > i { background: #e4f7ee; }
.apex-dashboard__row div { min-width: 0; flex: 1; }
.apex-dashboard__row b, .apex-dashboard__row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apex-dashboard__row b { font-size: 11px; }
.apex-dashboard__row small { margin-top: 3px; color: #8695ad; font-size: 9px; }
.apex-dashboard__row em { padding: 4px 6px; border-radius: 4px; color: #0b9f65; background: #eafaf2; font-size: 8px; font-style: normal; font-weight: 800; }

@media (max-width: 900px) {
  .apex-hero__wrap { grid-template-columns: 1fr; min-height: 0; padding: 48px 24px 92px; text-align: center; }
  .apex-hero__content { display: flex; flex-direction: column; align-items: center; }
  .apex-hero__visual { width: min(520px, 100%); min-height: 360px; margin: 3px auto 0; }
  .apex-hero__text { max-width: 600px; }
  .apex-hero__trust { text-align: left; }
}

@media (max-width: 520px) {
  .apex-hero__wrap { gap: 0; padding: 22px 18px 72px; text-align: left; }
  .apex-hero__content { align-items: flex-start; text-align: left; }
  .apex-hero__eyebrow { margin-bottom: 7px; padding: 5px 10px; font-size: 9px; }
  .apex-hero__title { max-width: 300px; font-size: clamp(23px, 7vw, 29px); letter-spacing: -.035em; line-height: 1.08; margin-bottom: 6px; }
  .apex-hero__text { max-width: 330px; font-size: 11.5px; line-height: 1.4; }
  .apex-hero__actions { width: 100%; max-width: 300px; gap: 7px; margin-top: 12px; }
  .apex-btn { flex: 0 1 auto; min-height: 34px; padding: 0 11px; border-radius: 7px; font-size: 10.5px; }
  .apex-hero__trust { width: 100%; max-width: 330px; margin-top: 13px; }
  .apex-trust-item { min-width: 0; flex: 1; padding: 0 7px; text-align: left; }
  .apex-trust-item strong { font-size: 11px; }
  .apex-trust-item span { font-size: 8px; }
  .apex-hero__arc { height: 54px; }
  /* PERF: dashboard is hidden on mobile — `display:none` means the browser never
     paints it on small viewports, saving composite work entirely */
  .apex-hero__visual { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .apex-btn { transition: none; }
}

#job-posting-section { scroll-margin-top: 100px; }