/* ==========================================================================
   SHEOWS Careers Portal — scoped stylesheet
   All selectors are prefixed with .careers- to avoid clashing with site CSS.
   ========================================================================== */

:root{
  --careers-blue:#163b85;
  --careers-blue-light:#3d52a1;
  --careers-red:#F70000;
  --careers-dark:#1e2a47;
  --careers-bg:#f6f8fc;
  --careers-card:#ffffff;
  --careers-border:#e5e9f2;
  --careers-text:#1e2a47;
  --careers-text-muted:#5b6579;
  --careers-radius:16px;
  --careers-shadow:0 4px 20px rgba(22,59,133,0.08);
  --careers-shadow-hover:0 12px 32px rgba(22,59,133,0.14);
}

.careers-page{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  color:var(--careers-text);
  background:var(--careers-bg);
}

.careers-page *{ box-sizing:border-box; }

.careers-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Hero ---------- */
.careers-hero{
  background:linear-gradient(135deg, var(--careers-blue) 0%, var(--careers-blue-light) 100%);
  color:#fff;
  padding:88px 0 96px;
  text-align:center;
}
.careers-hero h1{
  font-size:clamp(2rem, 4vw, 3.2rem);
  font-weight:800;
  line-height:1.15;
  margin:0 0 20px;
  letter-spacing:-0.02em;
}
.careers-hero p{
  font-size:1.15rem;
  line-height:1.6;
  max-width:640px;
  margin:0 auto 36px;
  color:rgba(255,255,255,0.92);
}
.careers-hero-ctas{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ---------- Buttons ---------- */
.careers-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 30px;
  border-radius:100px;
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.careers-btn:hover{ transform:translateY(-2px); text-decoration:none; }

.careers-btn-primary{
  background:#fff;
  color:var(--careers-blue);
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.careers-btn-primary:hover{ box-shadow:0 12px 30px rgba(0,0,0,0.2); color:var(--careers-blue); }

.careers-btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,0.7);
  color:#fff;
}
.careers-btn-outline:hover{ background:rgba(255,255,255,0.12); color:#fff; }

.careers-btn-solid{
  background:var(--careers-blue);
  color:#fff;
}
.careers-btn-solid:hover{ background:var(--careers-blue-light); color:#fff; }

/* ---------- Section shell ---------- */
.careers-section{ padding:72px 0; }
.careers-section-alt{ background:#fff; }
.careers-section-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 48px;
}
.careers-section-head h2{
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-weight:800;
  margin:0 0 12px;
  color:var(--careers-dark);
  letter-spacing:-0.01em;
}
.careers-section-head p{
  color:var(--careers-text-muted);
  font-size:1.05rem;
  line-height:1.6;
  margin:0;
}

/* ---------- Why join cards ---------- */
.careers-value-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:24px;
}
.careers-value-card{
  background:var(--careers-card);
  border:1px solid var(--careers-border);
  border-radius:var(--careers-radius);
  padding:32px 26px;
  box-shadow:var(--careers-shadow);
  transition:box-shadow .2s ease, transform .2s ease;
}
.careers-value-card:hover{
  box-shadow:var(--careers-shadow-hover);
  transform:translateY(-4px);
}
.careers-value-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  background:rgba(22,59,133,0.08);
  color:var(--careers-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  margin-bottom:18px;
}
.careers-value-card h3{
  font-size:1.1rem;
  font-weight:700;
  margin:0 0 10px;
  color:var(--careers-dark);
}
.careers-value-card p{
  color:var(--careers-text-muted);
  font-size:0.95rem;
  line-height:1.55;
  margin:0;
}

/* ---------- Filter bar ---------- */
.careers-filterbar{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:14px;
  background:var(--careers-card);
  border:1px solid var(--careers-border);
  border-radius:var(--careers-radius);
  padding:18px;
  box-shadow:var(--careers-shadow);
  margin-bottom:36px;
}
.careers-filterbar input[type="text"],
.careers-filterbar select{
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  border:1.5px solid var(--careers-border);
  font-size:0.95rem;
  color:var(--careers-text);
  background:#fbfcfe;
  font-family:inherit;
  transition:border-color .15s ease;
}
.careers-filterbar input[type="text"]:focus,
.careers-filterbar select:focus{
  outline:none;
  border-color:var(--careers-blue-light);
  background:#fff;
}

/* ---------- Job card grid ---------- */
.careers-job-grid{
  display:grid;
  grid-template-columns:repeat(1, 1fr);
  gap:22px;
}
@media (min-width:640px){
  .careers-job-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1000px){
  .careers-job-grid{ grid-template-columns:repeat(3, 1fr); }
}

.careers-job-card{
  position:relative;
  background:var(--careers-card);
  border:1px solid var(--careers-border);
  border-radius:var(--careers-radius);
  padding:26px 24px;
  box-shadow:var(--careers-shadow);
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.careers-job-card:hover{
  box-shadow:var(--careers-shadow-hover);
  transform:translateY(-4px);
}
.careers-job-title{
  font-size:1.15rem;
  font-weight:700;
  color:var(--careers-dark);
  margin:0 0 8px;
  padding-right:80px;
}
.careers-job-meta{
  font-size:0.87rem;
  color:var(--careers-text-muted);
  margin:0 0 14px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
}
.careers-job-meta span:not(:last-child)::after{
  content:"\00b7";
  margin-left:8px;
  color:#c3cbdc;
}
.careers-job-snippet{
  font-size:0.93rem;
  line-height:1.55;
  color:var(--careers-text-muted);
  margin:0 0 20px;
  flex-grow:1;
}
.careers-job-card a.careers-job-apply{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  font-size:0.92rem;
  color:var(--careers-blue);
  text-decoration:none;
  padding:10px 18px;
  border-radius:100px;
  border:1.5px solid var(--careers-blue);
  transition:background .15s ease, color .15s ease;
}
.careers-job-card a.careers-job-apply:hover{
  background:var(--careers-blue);
  color:#fff;
}

/* ---------- Urgent badge ---------- */
.careers-badge-urgent{
  position:absolute;
  top:24px;
  right:24px;
  background:rgba(247,0,0,0.1);
  color:var(--careers-red);
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding:5px 12px;
  border-radius:100px;
}

/* ---------- Empty state ---------- */
.careers-empty{
  text-align:center;
  padding:60px 20px;
  color:var(--careers-text-muted);
  font-size:1rem;
  grid-column:1 / -1;
}
.careers-empty strong{ display:block; font-size:1.1rem; color:var(--careers-dark); margin-bottom:6px; }

/* ---------- Hiring process ---------- */
.careers-process-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:24px;
  counter-reset:careers-step;
}
.careers-process-step{
  text-align:center;
  padding:28px 20px;
  position:relative;
}
.careers-process-num{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--careers-blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1.1rem;
  margin:0 auto 16px;
}
.careers-process-step h3{
  font-size:1.02rem;
  font-weight:700;
  margin:0 0 8px;
  color:var(--careers-dark);
}
.careers-process-step p{
  font-size:0.9rem;
  color:var(--careers-text-muted);
  margin:0;
  line-height:1.5;
}

/* ---------- Benefits ---------- */
.careers-benefits-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
}
.careers-benefits-list li{
  background:var(--careers-card);
  border:1px solid var(--careers-border);
  border-radius:14px;
  padding:20px 22px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-size:0.95rem;
  color:var(--careers-text);
  box-shadow:var(--careers-shadow);
}
.careers-benefits-list li i{
  color:var(--careers-blue);
  font-size:1.1rem;
  margin-top:2px;
}

/* ---------- CTA band ---------- */
.careers-cta-band{
  background:var(--careers-dark);
  color:#fff;
  text-align:center;
  padding:56px 20px;
  border-radius:var(--careers-radius);
  margin:0 20px;
}
.careers-cta-band h2{
  font-size:1.6rem;
  font-weight:800;
  margin:0 0 14px;
}
.careers-cta-band p{
  color:rgba(255,255,255,0.85);
  margin:0 0 26px;
  font-size:1rem;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .careers-filterbar{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .careers-hero{ padding:64px 0 72px; }
  .careers-section{ padding:52px 0; }
  .careers-filterbar{ grid-template-columns:1fr; }
  .careers-job-title{ padding-right:0; }
  .careers-badge-urgent{ position:static; display:inline-block; margin-bottom:10px; }
}
@media (max-width:375px){
  .careers-container{ padding:0 14px; }
  .careers-hero h1{ font-size:1.7rem; }
}

/* ==========================================================================
   Content CMS (Phase 2) additions — Testimonials + FAQ accordion
   ========================================================================== */

/* ---------- Testimonials ---------- */
.careers-testimonial-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
}
.careers-testimonial-card{
  background:var(--careers-card);
  border:1px solid var(--careers-border);
  border-radius:var(--careers-radius);
  padding:30px 26px;
  box-shadow:var(--careers-shadow);
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.careers-testimonial-card:hover{
  box-shadow:var(--careers-shadow-hover);
  transform:translateY(-4px);
}
.careers-testimonial-photo{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:16px;
}
.careers-testimonial-quote{
  font-size:0.98rem;
  line-height:1.65;
  color:var(--careers-text);
  margin:0 0 18px;
  flex-grow:1;
}
.careers-testimonial-name{
  font-weight:700;
  font-size:0.95rem;
  color:var(--careers-dark);
}
.careers-testimonial-role{
  font-size:0.85rem;
  color:var(--careers-text-muted);
  margin-top:2px;
}

/* ---------- FAQ accordion ---------- */
.careers-faq-accordion{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.careers-faq-item{
  background:var(--careers-card);
  border:1px solid var(--careers-border);
  border-radius:14px;
  padding:4px 24px;
  box-shadow:var(--careers-shadow);
}
.careers-faq-question{
  cursor:pointer;
  list-style:none;
  padding:18px 28px 18px 0;
  font-weight:700;
  font-size:1rem;
  color:var(--careers-dark);
  position:relative;
}
.careers-faq-question::-webkit-details-marker{ display:none; }
.careers-faq-question::after{
  content:"+";
  position:absolute;
  right:0;
  top:16px;
  font-size:1.3rem;
  font-weight:400;
  color:var(--careers-blue);
  transition:transform .2s ease;
}
.careers-faq-item[open] .careers-faq-question::after{
  transform:rotate(45deg);
}
.careers-faq-answer{
  padding:0 0 20px;
  color:var(--careers-text-muted);
  font-size:0.95rem;
  line-height:1.6;
}

@media (max-width:640px){
  .careers-faq-item{ padding:4px 18px; }
}