/**
 * Oxalis Theme — Careers job-posting detail pages
 *
 * Shared by page-job-posting.php for the 3 open roles. Figma: node
 * 2894:16388 (v1.3 Worker canvas), frames 2895:2 / 2917:94 / 2917:252.
 * Per-role content is CFS-driven (see "Job Posting Fields" group) —
 * this file is pure layout/styling, no per-role values.
 */

.ox-job-page {
  background: #FAF4E5;
}

/* .ox-fancy-stroke already has its own built-in top/bottom padding
   (--ox-stroke-pad, 80px baseline) for section-boundary spacing —
   inside a flex column with `gap`, that gap stacks on top of the
   stroke's own padding and makes the spacing too long. Cancel the
   gap's contribution specifically where the stroke sits, so only the
   stroke's own padding governs the spacing around it. */
.ox-job-hero > .ox-fancy-stroke,
.ox-job-body > .ox-fancy-stroke,
.ox-job-apply > .ox-fancy-stroke:last-child {
  margin-top: -24px;
}
.ox-job-apply > .ox-fancy-stroke:first-child {
  margin-bottom: -24px;
}

/* ─── HERO (breadcrumb + eyebrow + h1 + tags) ───────────────────── */
.ox-job-hero {
  background: #FAF4E5;
  padding: 32px 179px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px; /* matches Figma's inter-element gap (eyebrow/h1/tags) */
}
.ox-job-breadcrumb {
  display: flex;
  align-items: start;
  gap: 8px;
  min-height: 100px; /* was height:100px — min-height lets it grow if the
                         breadcrumb text wraps to 2 lines on narrow phones,
                         instead of overflowing a fixed box */
  flex-wrap: wrap;
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: #646D6B;
}
.ox-job-breadcrumb__link {
  color: #646D6B;
  text-decoration: none;
}
.ox-job-breadcrumb__link:hover {
  color: #13252A;
}
/* .ox-yardos-eyebrow(__label) is defined in yardos.css, which this
   template never loads — reproducing it here rather than pulling in an
   unrelated stylesheet. Default color (#13252A) suits the cream
   sections (hero, Why Oxalis); .ox-job-apply__eyebrow overrides it to
   light for the dark application-form section. */
.ox-yardos-eyebrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.ox-yardos-eyebrow__label {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #13252A;
}
.ox-job-hero__h1 {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 105%;
  color: #13252A;
  margin: 0;
}
.ox-job-hero__tags {
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
}
.ox-job-tag {
  background: #FAE6CE;
  padding: 8px 16px;
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.286;
  color: #13252A;
}

/* ─── JD BODY ────────────────────────────────────────────────────── */
.ox-job-body {
  background: #FAF4E5;
  padding: 0 179px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ox-job-body__overview {
  background: #FAEDDA;
  padding: 24px;
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: #13252A;
  margin: 0;
}
.ox-job-body__block {
  background: #FAF4E5;
  border: 1px solid #717C7F;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ox-job-body__block-h2 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  color: #13252A;
  margin: 0;
}
.ox-job-body__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: #13252A;
}
.ox-job-body__list li {
  position: relative;
  line-height: 1.7;
  padding-left: 20px;
}
.ox-job-body__list li::before {
  content: "•";
  position: absolute;
  left: 2px;
}

/* ─── WHY OXALIS ─────────────────────────────────────────────────── */
.ox-job-why {
  background: #FAF4E5;
  padding: 0 179px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.ox-job-why__card {
  background: #FAEDDA;
  border-left: 4px solid #03D8D8;
  padding: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ox-job-why__h2 {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 105%;
  color: #13252A;
  margin: 0;
}
.ox-job-why__body {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: #13252A;
  margin: 0;
}
.ox-job-why__pillars {
  display: flex;
  gap: 12px;
  width: 100%;
}
.ox-job-why__pillar {
  flex: 1 0 0;
  min-width: 0;
  background: #FAF4E5;
  border-bottom: 3px solid #FF6600;
  padding: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ox-job-why__pillar-h3 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: #13252A;
  margin: 0;
}
.ox-job-why__pillar-body {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: #646D6B;
  margin: 0;
}

/* ─── APPLICATION FORM (dark) ────────────────────────────────────── */
.ox-job-apply {
  background: #13252A;
  padding: 0 179px 64px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ox-job-apply__eyebrow .ox-yardos-eyebrow__label {
  color: #F3F4F4;
}
.ox-job-apply__h2 {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 105%;
  color: #F3F4F4;
  margin: 0;
}
.ox-job-apply__intro {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: #C9CFCE;
  margin: 0;
}

/* Dark override for the embedded HubSpot form — see contact-demo.css for
   why !important is used throughout (HubSpot applies its own inline
   styles at render time, which beat any non-!important CSS). */
.ox-job-apply__form,
.ox-job-apply__form .hs-form,
.ox-job-apply__form .hs-form * {
  color: #F3F4F4 !important;
}
.ox-job-apply__form .hs-form input[type="text"],
.ox-job-apply__form .hs-form input[type="email"],
.ox-job-apply__form .hs-form input[type="tel"],
.ox-job-apply__form .hs-form input[type="url"],
.ox-job-apply__form .hs-form select,
.ox-job-apply__form .hs-form textarea {
  background: #1F3035 !important;
  border: 1px solid #717C7F !important;
  color: #F3F4F4 !important;
}
.ox-job-apply__form .hs-form input:focus,
.ox-job-apply__form .hs-form select:focus,
.ox-job-apply__form .hs-form textarea:focus {
  border-color: #FF6600 !important;
}
.ox-job-apply__form .hs-form ::placeholder {
  color: #717C7F !important;
}
.ox-job-apply__form .hs-form input[type="submit"],
.ox-job-apply__form .hs-form .hs-button {
  background: #1F3035 !important;
  border: 1px solid #FF6600 !important;
  color: #F3F4F4 !important;
}
.ox-job-apply__form .hs-form input[type="submit"]:hover,
.ox-job-apply__form .hs-form .hs-button:hover {
  background: #263e44 !important;
}
.ox-job-apply__form .hs-form .legal-consent-container,
.ox-job-apply__form .hs-form .hs-richtext {
  color: #717C7F !important;
}

/* ─── LIGHT HEADER OVERRIDE (matching webinar.css / whitepaper.css pattern) ──── */
.page-template-page-job-posting-php body { background: #FAF4E5; }
.page-template-page-job-posting-php .ox-header {
  background: #FAF4E5;
  border-top-color: #FAF4E5;
}
.page-template-page-job-posting-php .ox-nav__link {
  background: #FAEDDA;
  color: #13252A;
}
.page-template-page-job-posting-php .ox-nav__link:hover { background: #F5E0C0; }
.page-template-page-job-posting-php .ox-header__divider { background: #D4C9B8; }
.page-template-page-job-posting-php .ox-header__logo { background: #FAF4E5; }
.page-template-page-job-posting-php .ox-logo__text { color: #13252A; }
.page-template-page-job-posting-php .ox-nav__list { background: #FAF4E5; }
.page-template-page-job-posting-php .ox-nav__dropdown { background: #FAF4E5; }
.page-template-page-job-posting-php .ox-nav__dropdown a { color: #13252A; }
.page-template-page-job-posting-php .ox-nav__dropdown a:hover { background: #F0E8D5; }
.page-template-page-job-posting-php .ox-logo .ox-logo__svg path,
.page-template-page-job-posting-php .ox-logo .ox-logo__svg circle { fill: #13252A; }
.page-template-page-job-posting-php .ox-nav__chevron path { stroke: #FF6600; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ox-job-hero,
  .ox-job-body,
  .ox-job-why,
  .ox-job-apply { padding-left: 64px; padding-right: 64px; }
}
@media (max-width: 900px) {
  .ox-job-hero,
  .ox-job-body,
  .ox-job-why,
  .ox-job-apply { padding-left: 32px; padding-right: 32px; }
  .ox-job-hero__h1 { font-size: 38px; }
  .ox-job-apply__h2 { font-size: 36px; }
  .ox-job-why__pillars { flex-direction: column; }
  .ox-job-breadcrumb { min-height: 0; }
}
@media (max-width: 600px) {
  .ox-job-hero,
  .ox-job-body,
  .ox-job-why,
  .ox-job-apply { padding-left: 16px; padding-right: 16px; }
}