/* ==========================================================
   WCS Careers — Frontend Styles
   Compatible with Astra + Elementor
   ========================================================== */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --wcs-primary:       #68041c;   /* WCS maroon — from Elementor global styles */
  --wcs-primary-dark:  #4e0114;
  --wcs-accent:        #68041c;   /* same maroon for required asterisks */
  --wcs-text:          #262a2b;   /* site charcoal — from Elementor text color */
  --wcs-muted:         #5a5a5a;
  --wcs-border:        #d0d5dd;
  --wcs-bg-light:      #f7f8fa;
  --wcs-radius:        4px;
  --wcs-shadow:        0 2px 8px rgba(0,0,0,.08);
  --wcs-success-bg:    #eaf6ee;
  --wcs-success-border:#34a853;
  --wcs-error-bg:      #fef2f2;
  --wcs-error-border:  #dc2626;
  --wcs-font-body:     'Roboto', sans-serif;
  --wcs-font-heading:  'Roboto Slab', serif;
}

/* ── Job Listings Grid ──────────────────────────────────── */
.wcs-job-listings {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
  margin:         1.5rem 0;
}

.wcs-job-card {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  gap:              1rem;
  background:       #fff;
  border:           1px solid var(--wcs-border);
  border-radius:    var(--wcs-radius);
  box-shadow:       var(--wcs-shadow);
  padding:          1.25rem 1.5rem;
  transition:       box-shadow .2s ease, border-color .2s ease;
}

.wcs-job-card:hover {
  box-shadow:    0 4px 16px rgba(0,0,0,.12);
  border-color:  var(--wcs-primary);
}

.wcs-job-card__body { flex: 1; }

.wcs-job-card__title {
  margin:      0 0 .5rem;
  font-size:   1.15rem;
  font-weight: 700;
  font-family: var(--wcs-font-heading);
}

.wcs-job-card__title a {
  color:           var(--wcs-primary);
  text-decoration: none;
}

.wcs-job-card__title a:hover {
  text-decoration: underline;
}

.wcs-job-card__meta {
  list-style:  none;
  margin:      0;
  padding:     0;
  display:     flex;
  flex-wrap:   wrap;
  gap:         .5rem 1.25rem;
  font-size:   .875rem;
  color:       var(--wcs-muted);
}

.wcs-meta-label {
  font-weight: 600;
  color:       var(--wcs-text);
}

.wcs-no-jobs {
  color:       var(--wcs-muted);
  font-style:  italic;
  padding:     1rem 0;
}

/* ── Job Header Meta Tags ───────────────────────────────── */
.wcs-job-header-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .5rem;
  margin:      0 0 1.5rem;
}

.wcs-tag {
  display:          inline-block;
  background:       var(--wcs-bg-light);
  border:           1px solid var(--wcs-border);
  border-radius:    100px;
  padding:          .25rem .75rem;
  font-size:        .8125rem;
  font-weight:      600;
  color:            var(--wcs-muted);
}

.wcs-tag--deadline {
  background:  #fff3cd;
  border-color:#ffc107;
  color:       #7a5900;
}

/* ── Divider ────────────────────────────────────────────── */
.wcs-divider {
  border:        none;
  border-top:    2px solid var(--wcs-border);
  margin:        2.5rem 0;
}

/* ── Application Form ───────────────────────────────────── */
.wcs-application-form-wrap {
  max-width:  800px;
  font-family: var(--wcs-font-body);
}

.wcs-form-title {
  font-size:   1.4rem;
  font-family: var(--wcs-font-heading);
  margin-bottom: .25rem;
}

.wcs-form-instructions {
  color:     var(--wcs-muted);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

/* Fieldsets */
.wcs-fieldset {
  border:        1px solid var(--wcs-border);
  border-radius: var(--wcs-radius);
  padding:       1.25rem 1.5rem;
  margin:        0 0 1.5rem;
  background:    #fff;
}

.wcs-fieldset legend {
  font-weight:  700;
  font-size:    1rem;
  font-family:  var(--wcs-font-heading);
  color:        var(--wcs-primary);
  padding:      0 .5rem;
  margin-left:  -.25rem;
}

.wcs-fieldset--certification {
  background: var(--wcs-bg-light);
}

.wcs-certification-text {
  font-style:  italic;
  font-size:   .875rem;
  color:       var(--wcs-muted);
  margin-bottom: 1rem;
}

/* Cards inside fieldsets (edu / work entries) */
.wcs-card {
  background:    var(--wcs-bg-light);
  border:        1px solid var(--wcs-border);
  border-radius: var(--wcs-radius);
  padding:       1rem 1.25rem;
  margin-bottom: 1rem;
}

.wcs-card:last-child { margin-bottom: 0; }

.wcs-entry-label {
  font-weight:   700;
  font-size:     .8125rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:         var(--wcs-primary);
  margin:        0 0 .75rem;
}

/* Subsection label */
.wcs-subsection-label {
  margin: .75rem 0 .5rem;
  font-size: .9rem;
}

/* Field rows */
.wcs-field-row {
  display:  flex;
  flex-wrap: wrap;
  gap:      .75rem;
  margin-bottom: .75rem;
}

.wcs-field-row:last-child { margin-bottom: 0; }

.wcs-two-col   .wcs-field { flex: 1 1 calc(50% - .5rem); min-width: 180px; }
.wcs-three-col .wcs-field { flex: 1 1 calc(33% - .5rem); min-width: 140px; }
.wcs-four-col  .wcs-field { flex: 1 1 calc(25% - .5rem); min-width: 120px; }

.wcs-field--wide  { flex: 2 1 300px !important; }
.wcs-field--small { flex: 0 1 80px  !important; min-width: 60px !important; }

/* Individual fields */
.wcs-field { display: flex; flex-direction: column; gap: .3rem; }

.wcs-field:not(.wcs-field-row .wcs-field) { margin-bottom: .75rem; }

.wcs-field label {
  font-size:   .875rem;
  font-weight: 600;
  color:       var(--wcs-text);
}

.wcs-field input[type="text"],
.wcs-field input[type="email"],
.wcs-field input[type="tel"],
.wcs-field input[type="date"],
.wcs-field input[type="number"],
.wcs-field textarea,
.wcs-field select {
  width:         100%;
  border:        1px solid var(--wcs-border);
  border-radius: var(--wcs-radius);
  padding:       .45rem .65rem;
  font-size:     .9375rem;
  color:         var(--wcs-text);
  background:    #fff;
  transition:    border-color .15s ease, box-shadow .15s ease;
  box-sizing:    border-box;
}

.wcs-field input:focus,
.wcs-field textarea:focus {
  outline:    none;
  border-color: var(--wcs-primary);
  box-shadow:   0 0 0 3px rgba(26,60,110,.15);
}

.wcs-field textarea { resize: vertical; min-height: 80px; }

.wcs-field input[type="file"] {
  padding: .35rem 0;
  font-size: .875rem;
}

.wcs-field-hint {
  font-size: .8rem;
  color:     var(--wcs-muted);
  margin:    .15rem 0 0;
}

/* Radio / checkbox groups */
.wcs-radio-group,
.wcs-checkbox-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       .4rem 1rem;
  margin-top:.15rem;
}

.wcs-radio-group label,
.wcs-checkbox-group label {
  font-weight: 400;
  display:     flex;
  align-items: center;
  gap:         .3rem;
  cursor:      pointer;
}

/* Required asterisk */
span.required { color: var(--wcs-accent); }

/* Inline validation error states (applied by JS submit sweep) */
.wcs-field input.wcs-input-error,
.wcs-field textarea.wcs-input-error {
  border-color: var(--wcs-error-border);
  box-shadow:   0 0 0 1px var(--wcs-error-border);
}

.wcs-radio-group.wcs-radio-error,
.wcs-checkbox-group.wcs-radio-error {
  background:     var(--wcs-error-bg);
  outline:        1px solid var(--wcs-error-border);
  outline-offset: 4px;
  border-radius:  var(--wcs-radius);
}

.wcs-field-hint.wcs-hint-error { color: #991b1b; }

/* Button */
.wcs-btn {
  display:          inline-block;
  background:       var(--wcs-primary);
  color:            #fff;
  padding:          .6rem 1.4rem;
  border-radius:    var(--wcs-radius);
  text-decoration:  none;
  font-size:        .9375rem;
  font-weight:      600;
  border:           none;
  cursor:           pointer;
  transition:       background .2s ease;
  white-space:      nowrap;
}

.wcs-btn:hover { background: var(--wcs-primary-dark); color: #fff; }

.wcs-btn--primary {
  font-size:  1rem;
  padding:    .75rem 2.5rem;
}

.wcs-form-submit { padding: 1rem 0 2rem; }

/* Success / Error notices */
.wcs-form-success,
.wcs-form-error {
  border-radius: var(--wcs-radius);
  padding:       1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size:     .9375rem;
}

.wcs-form-success {
  background:   var(--wcs-success-bg);
  border:       1px solid var(--wcs-success-border);
  color:        #1a5c2a;
}

.wcs-form-error {
  background:   var(--wcs-error-bg);
  border:       1px solid var(--wcs-error-border);
  color:        #991b1b;
}

/* ── Single Job Page ────────────────────────────────────── */

/* Hide "By Author / Date" — not meaningful for a job posting */
.single-job_opening .entry-meta {
  display: none;
}

/* Maroon header band: title block */
.single-job_opening .entry-header {
  background:    var(--wcs-primary);
  border-radius: var(--wcs-radius) var(--wcs-radius) 0 0;  /* flat bottom — joins tag strip below */
  padding:       1.75rem 2rem;
  margin:        0;   /* Astra adds margin-top:4em and margin-bottom:1.2em — both unwanted here */
}

.single-job_opening .entry-title {
  font-family: var(--wcs-font-heading);
  font-size:   2rem;
  color:       #fff;
  margin:      0;
  line-height: 1.25;
}

/* Meta-tag strip — visually continues the header band */
.single-job_opening .wcs-job-header-meta {
  background:    rgba(104, 4, 28, .07);
  border:        1px solid rgba(104, 4, 28, .18);
  border-top:    none;
  border-radius: 0 0 var(--wcs-radius) var(--wcs-radius);
  padding:       .8rem 2rem;
  margin:        0 0 2.5rem;
}

/* Job description section headings */
.single-job_opening .entry-content h2 {
  font-family:    var(--wcs-font-heading);
  font-size:      1.2rem;
  color:          var(--wcs-text);
  border-bottom:  2px solid var(--wcs-border);
  padding-bottom: .4rem;
  margin-top:     2rem;
}

.single-job_opening .entry-content h3 {
  font-family: var(--wcs-font-heading);
  font-size:   1rem;
  color:       var(--wcs-primary);
  margin-top:  1.25rem;
}

/* Divider between description and apply section — thicker, maroon-tinted */
.single-job_opening .wcs-divider {
  border-top-width: 3px;
  border-top-color: var(--wcs-primary);
  margin:           3rem 0 2.5rem;
}

/* "Apply for this position" heading */
.single-job_opening .wcs-form-title {
  color:       var(--wcs-primary);
  font-size:   1.5rem;
  margin-bottom: .5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .single-job_opening .entry-title     { font-size: 1.5rem; }
  .single-job_opening .entry-header    { padding: 1.25rem 1.5rem; }
  .single-job_opening .wcs-job-header-meta { padding: .65rem 1.5rem; }
}

/* ── Resume opt-in checkbox ─────────────────────────────── */
.wcs-resume-opt__label {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  font-weight: 600;
  cursor:      pointer;
}

.wcs-resume-opt__label input[type="checkbox"] {
  width:  1.1em;
  height: 1.1em;
  cursor: pointer;
}

/* ── Apply Button (single job page trigger) ─────────────── */
.wcs-apply-section {
  margin: 2rem 0;
}

.wcs-btn--apply {
  font-size: 1.125rem;
  padding:   .9rem 3rem;
}

/* ── Modal ──────────────────────────────────────────────── */
.wcs-modal {
  display:  none;
  position: fixed;
  inset:    0;
  z-index:  100000;
}

.wcs-modal.is-open {
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  padding:         2.5rem 1rem;
  overflow-y:      auto;
}

.wcs-modal__backdrop {
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, .6);
  cursor:     pointer;
}

.wcs-modal__panel {
  position:      relative;
  z-index:       1;
  background:    #fff;
  border-radius: var(--wcs-radius);
  box-shadow:    0 8px 40px rgba(0, 0, 0, .28);
  width:         100%;
  max-width:     860px;
  flex-shrink:   0;
}

.wcs-modal__header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  background:      var(--wcs-primary);
  border-radius:   var(--wcs-radius) var(--wcs-radius) 0 0;
  padding:         1.25rem 1.5rem;
}

.wcs-modal__title {
  font-family:   var(--wcs-font-heading);
  font-size:     1.35rem;
  margin:        0;
  line-height:   1.3;
  /* High-specificity rule below overrides .single-job_opening .entry-content h2 */
}

.wcs-modal__header .wcs-modal__title {
  color:          #fff !important;
  border-bottom:  none !important;
  padding-bottom: 0 !important;
  margin-top:     0 !important;
  font-size:      1.35rem !important;
}

.wcs-modal__close {
  background:  transparent;
  border:      none;
  color:       rgba(255, 255, 255, .8);
  font-size:   2rem;
  line-height: 1;
  cursor:      pointer;
  padding:     0 .2rem;
  margin-left: 1rem;
  flex-shrink: 0;
  transition:  color .15s ease;
}

.wcs-modal__close:hover,
.wcs-modal__close:focus {
  color:   #fff;
  outline: 2px solid rgba(255, 255, 255, .6);
}

.wcs-modal__body {
  padding: 1.75rem 2rem 2.5rem;
}

/* Certification + Submit — hidden until valid resume attached */
.wcs-cert-gate {
  display: none;
}

/* Scroll lock applied to body while modal is open */
.wcs-body-locked {
  overflow: hidden;
}

/* ── Modal — mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
  .wcs-modal.is-open {
    padding: 0;
    align-items: flex-start;
  }

  .wcs-modal__panel {
    border-radius: 0;
    min-height:    100vh;
    box-shadow:    none;
  }

  .wcs-modal__header {
    border-radius: 0;
    position:      sticky;
    top:           0;
    z-index:       2;
  }

  .wcs-modal__body {
    padding: 1.25rem 1rem 2.5rem;
  }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .wcs-job-card {
    flex-direction: column;
    align-items:    flex-start;
  }

  .wcs-job-card__action { width: 100%; }
  .wcs-btn              { width: 100%; text-align: center; }

  .wcs-two-col .wcs-field,
  .wcs-three-col .wcs-field,
  .wcs-four-col .wcs-field {
    flex: 1 1 100%;
  }

  .wcs-field--small { flex: 1 1 100% !important; }
}