/* =============================================
   WILLBERG GROUP — Careers Page
   Extends willberg-group-styles.css. Uses the same
   design tokens (--navy, --amber, --font-display,
   --font-cond, --border, --transition, etc).
   ============================================= */

/* ---- Page header sub-copy + CTAs ---- */
.page-header__eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.page-header__lede {
  color: var(--grey-light);
  font-size: 1.05rem;
  max-width: 56ch;
  margin-bottom: 2rem;
}
.page-header__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* =============================================
   CULTURE / WHY JOIN
   ============================================= */
.culture__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 5rem;
  align-items: center;
}
.culture__text p {
  color: var(--grey-light);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}
.culture__panel {
  background: var(--navy-light);
  border: 1px solid var(--border);
  padding: 3rem 2.5rem;
}
.culture__stats {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.culture__quote {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  color: var(--grey-light);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* =============================================
   PERKS / WHAT WE OFFER
   ============================================= */
.perks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 4rem;
}
.perk-card {
  background: var(--navy);
  padding: 2.75rem 2.25rem;
  border-top: 3px solid transparent;
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.perk-card:hover {
  border-color: var(--amber);
  transform: translateY(-4px);
  background: var(--amber-glow);
}
.perk-card__icon {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  margin-bottom: 1.5rem;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background var(--transition);
}
.perk-card:hover .perk-card__icon {
  transform: scale(1.12) rotate(8deg);
  background: var(--amber);
  color: var(--navy);
}
.perk-card__name {
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.perk-card__desc {
  font-size: 0.9rem;
  color: var(--grey);
  line-height: 1.65;
}

/* =============================================
   OPEN POSITIONS
   ============================================= */
.jobs__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 3rem;
}
.jobs__head-copy p {
  color: var(--grey);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.job-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 3rem;
}
.job-filter {
  font-family: var(--font-cond);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-light);
  background: transparent;
  border: 1px solid var(--border);
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.job-filter:hover {
  border-color: var(--amber);
  color: var(--white);
}
.job-filter.active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--navy);
}

.jobs__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.job-card {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: border-color var(--transition);
}
.job-card:hover { border-left-color: var(--amber); }
.job-card[open] { border-left-color: var(--amber); }

.job-card summary { list-style: none; }
.job-card summary::-webkit-details-marker { display: none; }
.job-card summary::marker { content: ""; }

.job-card__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
  cursor: pointer;
}
.job-card__title-row {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.job-card__title {
  font-family: var(--font-cond);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--white);
}
.job-card__ref {
  font-family: var(--font-cond);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--grey);
}
.job-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
}
.job-card__tag {
  font-family: var(--font-cond);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-glow);
  border: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
}
.job-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--grey);
}
.job-card__meta-item svg { width: 14px; height: 14px; flex-shrink: 0; }

.job-card__chevron {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
}
.job-card__chevron svg { width: 14px; height: 14px; transition: transform var(--transition); }
.job-card[open] .job-card__chevron svg { transform: rotate(180deg); }

.job-card__body {
  margin: 0 2rem;
  padding: 1.75rem 0 2rem;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
}
.job-card__col h4 {
  font-family: var(--font-cond);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.85rem;
}
.job-card__col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.job-card__col li {
  font-size: 0.88rem;
  color: var(--grey-light);
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}
.job-card__col li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 4px; height: 4px;
  background: var(--amber);
}
.job-card__apply {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.75rem;
}

.jobs__empty {
  display: none;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--grey);
  border: 1px dashed var(--border);
}
.jobs__empty.visible { display: block; }

/* =============================================
   HIRING PROCESS
   ============================================= */
.process-band { background: var(--navy-light); padding: 6rem 0; }
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
}
.process__step { position: relative; }
.process__num {
  width: 3.25rem;
  height: 3.25rem;
  border: 1.5px solid var(--amber);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--amber);
  margin-bottom: 1.5rem;
}
.process__step h3 {
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.process__step p {
  font-size: 0.88rem;
  color: var(--grey);
  line-height: 1.65;
}

/* =============================================
   ACCESSIBILITY
   ============================================= */
.job-card summary:focus-visible,
.job-filter:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .perk-card:hover, .perk-card:hover .perk-card__icon { transform: none; }
}

/* =============================================
   MOBILE NAV FIX
   willberg-group-styles.css has two unconditional
   .nav__hamburger rules — a later one (line ~1199)
   re-sets display:none outside any media query, which
   wins the cascade and hides the hamburger at every
   width, including mobile. This override restores it
   on this page. See the note in the chat response for
   the sitewide fix.
   ============================================= */
@media (max-width: 768px) {
  .nav__hamburger { display: flex; }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .culture__grid { grid-template-columns: 1fr; gap: 3rem; }
  .perks__grid { grid-template-columns: 1fr 1fr; }
  .process__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
}

@media (max-width: 768px) {
  .page-header__ctas { width: 100%; }
  .page-header__ctas .btn { flex: 1; justify-content: center; }

  .perks__grid { grid-template-columns: 1fr; }

  .jobs__head { flex-direction: column; align-items: flex-start; }

  .job-card__summary { flex-wrap: wrap; padding: 1.5rem; }
  .job-card__body { grid-template-columns: 1fr; margin: 0 1.5rem; padding: 1.5rem 0 1.75rem; }
  .job-card__meta { gap: 0.75rem 1rem; }

  .process__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 480px) {
  .job-card__summary { padding: 1.25rem; gap: 1rem; }
  .job-card__title { font-size: 1.05rem; }
  .job-card__chevron { width: 2rem; height: 2rem; }
}