/* =====================================================================
   CAPRICORN LOGISTICS — CAREERS PAGE
   Layout per the approved reference:
     1. white intro band  : heading + intro line + three benefit cards
                            (first card filled with the brand colour)
     2. grey band         : "Explore Career Opportunities" + job rows
                            (zebra rows, right-aligned link)
   The original application form sits after the job list, unchanged.
   Scoped to .cap-* so it cannot clash with the bondor theme.
   Palette from the theme: red #ca1f26 | yellow #f7c600 | navy #06172f
   ===================================================================== */

/* ---------- 1. intro band ---------- */
.cap-intro { padding: 80px 0 55px; }

.cap-intro__title {
  font-size: 38px; font-weight: 700; line-height: 1.2; color: #1d1d1d;
  margin: 0 0 16px;
}
.cap-intro__text {
  font-size: 15px; line-height: 1.8; color: #767676;
  max-width: 620px; margin: 0 0 38px;
}

.cap-benefit {
  height: 100%; margin-bottom: 30px; padding: 26px 24px 28px;
  background: #fff; border: 1px solid #e8e8ee; border-radius: 4px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.cap-benefit:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(6, 23, 47, .10);
}
.cap-benefit--filled {
  background: #ca1f26; border-color: #ca1f26; color: #fff;
}
.cap-benefit__icon { display: block; font-size: 17px; color: #1d1d1d; margin-bottom: 16px; }
.cap-benefit--filled .cap-benefit__icon { color: #fff; }
.cap-benefit__title { font-size: 16px; font-weight: 600; color: #1d1d1d; margin: 0 0 10px; }
.cap-benefit--filled .cap-benefit__title { color: #fff; }
.cap-benefit__text { font-size: 13px; line-height: 1.75; color: #767676; margin: 0; }
.cap-benefit--filled .cap-benefit__text { color: rgba(255, 255, 255, .88); }

/* ---------- 2. opportunities band ---------- */
.cap-openings { background: #f1f1f4; padding: 70px 0 80px; }

.cap-openings__title { font-size: 24px; font-weight: 700; color: #1d1d1d; margin: 0 0 12px; }
.cap-openings__text { font-size: 14.5px; line-height: 1.8; color: #767676; margin: 0 0 14px; max-width: 720px; }
.cap-openings__strong { font-size: 15px; font-weight: 600; color: #1d1d1d; margin: 0 0 30px; }

/* ---------- job rows ---------- */
.cap-row {
  display: flex; align-items: center; gap: 20px;
  padding: 26px 30px; text-decoration: none !important;
  border-bottom: 1px solid #e2e2e8;
  transition: background .25s ease, box-shadow .25s ease;
}
.cap-row:nth-child(odd) { background: #fff; }
.cap-row:hover, .cap-row:focus {
  background: #fff; text-decoration: none !important;
  box-shadow: 0 10px 28px rgba(6, 23, 47, .09);
  position: relative; z-index: 1;
}

.cap-row__main { flex: 1 1 auto; min-width: 0; }

.cap-row__titleline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cap-row__title {
  font-size: 17px; font-weight: 600; line-height: 1.35; color: #1d1d1d;
  transition: color .25s ease;
}
.cap-row:hover .cap-row__title { color: #ca1f26; }
.cap-row__new {
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: #7a5c00; background: rgba(247, 198, 0, .35);
  padding: 3px 9px; border-radius: 999px; line-height: 1.5;
}

.cap-row__desc {
  display: block; font-size: 13.5px; line-height: 1.7; color: #767676;
  margin: 7px 0 12px; max-width: 860px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.cap-row__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cap-row__meta span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: #767676;
}
.cap-row__meta i { font-size: 12px; color: #9a9aa6; }

.cap-row__more {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #767676; white-space: nowrap;
  transition: color .25s ease;
}
.cap-row__more i { font-size: 13px; transition: transform .25s ease; }
.cap-row:hover .cap-row__more { color: #ca1f26; }
.cap-row:hover .cap-row__more i { transform: translateX(3px); }

/* ---------- empty state ---------- */
.cap-openings__empty {
  background: #fff; border: 1px dashed #dcdce4; border-radius: 4px;
  padding: 40px 28px; text-align: center;
}
.cap-openings__empty p { font-size: 14.5px; line-height: 1.75; color: #767676; margin: 0; }
.cap-openings__empty a { color: #ca1f26; font-weight: 600; text-decoration: none; }
.cap-openings__empty a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .cap-intro { padding: 60px 0 40px; }
  .cap-intro__title { font-size: 30px; }
  .cap-openings { padding: 55px 0 60px; }
}
@media (max-width: 767px) {
  .cap-intro { padding: 50px 0 30px; }
  .cap-intro__title { font-size: 26px; }
  .cap-intro__text { margin-bottom: 26px; }
  .cap-row { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; }
  .cap-row__more { align-self: flex-end; }
  .cap-row__desc { -webkit-line-clamp: 4; }
}

/* ---------- form feedback (success / error + field errors) ---------- */
.cap-form-msg {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 20px; padding: 14px 16px; border-radius: 4px;
  font-size: 14px; line-height: 1.65;
}
.cap-form-msg i { margin-top: 3px; flex: 0 0 auto; }
.cap-form-msg--success { background: #eaf7ee; color: #177245; border: 1px solid #bfe3cd; }
.cap-form-msg--error   { background: #fdecec; color: #a1161c; border: 1px solid #f2c4c6; }

.cap-form-error {
  display: block; color: #ca1f26; font-size: 12px; margin-top: 6px;
}