/* =========================================================
   CSS Halaman Job Detail — layout AMAN untuk Astra: tanpa
   trik full-bleed/JS width hack, murni CSS normal flow +
   grid. Otomatis di-load via plugin, khusus halaman detail
   lowongan (post type ssc_job).
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --jd-ink:#1C1A17;
  --jd-muted:#6b6055;
  --jd-accent:#2563EB;
  --jd-line:rgba(28,26,23,0.12);
  --jd-bg:#FBFAF8;
  --jd-card:#FFFFFF;
}

/* ---------------------------------------------------------
   ASTRA SIDEBAR KILL — pertahanan utama.
   Ini yang mencegah Astra memasang kolom sidebar bawaan +
   memaksa area konten selebar penuh, KHUSUS di halaman
   singular ssc_job. WordPress otomatis menambah class
   "single-ssc_job" ke <body> di halaman ini, jadi scoping-nya
   aman tanpa menyentuh halaman lain sama sekali.
   --------------------------------------------------------- */
body.single-ssc_job #secondary,
body.single-ssc_job .sidebar-main,
body.single-ssc_job .ast-sidebar,
body.single-ssc_job .widget-area{
  display:none !important;
}
body.single-ssc_job #primary,
body.single-ssc_job #content,
body.single-ssc_job .site-content,
body.single-ssc_job .ast-container,
body.single-ssc_job .content-area,
body.single-ssc_job .ast-row{
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
}
body.single-ssc_job #primary{ display:block !important; }

/* Reset kotak supaya semua elemen di dalam halaman ini
   menghitung width/padding dengan cara yang konsisten,
   nggak tergantung box-sizing bawaan tema. */
#ssc-job-page,
#ssc-job-page *{ box-sizing:border-box; }

#ssc-job-page{
  background:var(--jd-bg);
  font-family:'Work Sans','Helvetica Neue',Arial,sans-serif;
  width:100%;
}

/* ---------------- HEADER ---------------- */
.jd-header{
  position:relative;
  background:var(--jd-bg);
  padding:52px 24px 32px;
  width:100%;
}

.jd-header-bg{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 55% 70% at 50% 15%, rgba(37,99,235,0.07) 0%, transparent 70%);
  pointer-events:none;
}

.jd-header-inner{
  position:relative; z-index:1;
  max-width:1100px;
  margin:0 auto;
}

.jd-breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:.85rem;
  color:var(--jd-muted);
  margin:0 0 24px 0;
  flex-wrap:wrap;
}
.jd-breadcrumb a{ color:var(--jd-muted) !important; text-decoration:none !important; font-style:normal !important; transition:color .2s ease; }
.jd-breadcrumb a:hover{ color:var(--jd-accent) !important; }
.jd-breadcrumb-sep{ color:rgba(28,26,23,0.3); }
.jd-breadcrumb-current{ color:var(--jd-ink); font-weight:500; }

.jd-job-tags{ display:flex; gap:8px; margin:0 0 18px 0; }
.jd-tag{
  display:inline-block;
  padding:5px 13px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:600;
  background:var(--jd-accent);
  color:#fff;
  line-height:1.4;
}
.jd-tag--outline{
  background:transparent;
  border:1px solid var(--jd-line);
  color:var(--jd-muted);
}

.jd-title{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:clamp(30px,4.4vw,46px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--jd-ink);
  margin:0 0 18px 0;
}

.jd-meta{ display:flex; gap:24px; flex-wrap:wrap; margin:0; }
.jd-meta span{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.88rem;
  color:var(--jd-muted);
}

/* ---------------- BODY ---------------- */
.jd-body{
  background:var(--jd-bg);
  padding:0 24px 90px;
  width:100%;
}

.jd-body-inner{
  max-width:1100px;
  margin:0 auto;
  padding-top:8px;
  display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:48px;
  align-items:start;
}

/* Form apply di KIRI, deskripsi pekerjaan di KANAN — dibalik dari
   urutan HTML aslinya lewat CSS order (HTML tetap: main lalu aside). */
.jd-main{ min-width:0; order:2; }
.jd-sidebar{ min-width:0; order:1; }

/* Heading (H2) yang HR ketik di editor = judul section, seperti
   "Job Description" / "Responsibilities" / "Requirements" */
.jd-main h2,
.jd-main .jd-block-title{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:1.4rem;
  font-weight:700;
  line-height:1.3;
  color:var(--jd-ink);
  margin:44px 0 16px 0;
}
.jd-main > *:first-child,
.jd-main h2:first-child{ margin-top:0; }

.jd-main p{
  font-size:.95rem;
  font-weight:300;
  line-height:1.8;
  color:var(--jd-muted);
  margin:0 0 14px 0;
}
.jd-main p:last-child{ margin-bottom:0; }

/* List (bullet) yang HR bikin lewat block List di Gutenberg */
.jd-main ul,
.jd-main .jd-list{
  margin:0 0 20px 0;
  padding:0 0 0 20px;
  list-style:none;
}
.jd-main ul li,
.jd-main .jd-list li{
  position:relative;
  font-size:.92rem;
  font-weight:300;
  line-height:1.75;
  color:var(--jd-muted);
  margin-bottom:12px;
  padding-left:6px;
}
.jd-main ul li:last-child,
.jd-main .jd-list li:last-child{ margin-bottom:0; }
.jd-main ul li::before,
.jd-main .jd-list li::before{
  content:'';
  position:absolute;
  left:-20px; top:9px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--jd-accent);
}

/* Kalau HR belum isi konten sama sekali, kasih placeholder yang
   sopan daripada kolom kanan kosong melompong. */
.jd-main:empty::before{
  content:'Job description will be added soon.';
  display:block;
  font-size:.92rem;
  font-style:italic;
  color:var(--jd-muted);
}

/* ---- sidebar apply form ---- */

.jd-apply-card{
  background:var(--jd-card);
  border:1px solid var(--jd-line);
  border-radius:16px;
  padding:30px 26px;
  box-shadow:0 10px 34px rgba(28,26,23,0.06);
}

.jd-apply-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.2rem;
  font-weight:700;
  line-height:1.3;
  color:var(--jd-ink);
  margin:0 0 8px 0;
}
.jd-apply-sub{
  font-size:.84rem;
  font-weight:300;
  line-height:1.6;
  color:var(--jd-muted);
  margin:0 0 24px 0;
}

.jd-form{ display:flex; flex-direction:column; margin:0; }

.jd-field{
  position:relative;
  margin:0 0 18px 0;
}
.jd-field--upload{ margin-bottom:0; }

.jd-label{
  display:block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--jd-muted);
  margin:0 0 8px 0;
}
.jd-input, .jd-textarea{
  display:block;
  width:100%;
  border:1.5px solid var(--jd-line) !important;
  border-radius:8px;
  outline:none !important;
  background:#FFFFFF !important;
  background-color:#FFFFFF !important;
  font-family:'Work Sans',sans-serif;
  font-size:.95rem;
  color:var(--jd-ink) !important;
  -webkit-text-fill-color:var(--jd-ink) !important;
  padding:11px 14px;
  resize:none;
  opacity:1 !important;
  pointer-events:auto !important;
  cursor:text !important;
  -webkit-user-select:text !important;
  user-select:text !important;
  box-shadow:none !important;
  box-sizing:border-box;
  transition:border-color .2s ease;
}
.jd-input:focus, .jd-textarea:focus{
  border-color:var(--jd-accent) !important;
}
.jd-input:disabled, .jd-textarea:disabled{
  opacity:.5 !important;
  cursor:not-allowed !important;
}
.jd-textarea{ min-height:70px; line-height:1.55; }

.jd-counter{
  display:block;
  text-align:right;
  font-size:.72rem;
  color:var(--jd-muted);
  margin:6px 0 0 0;
}

.jd-error{
  display:none;
  font-size:.76rem;
  color:var(--jd-accent);
  margin:8px 0 0 0;
}
.jd-field.has-error .jd-input,
.jd-field.has-error .jd-textarea{ border-color:var(--jd-accent) !important; }
.jd-field.has-error .jd-error{ display:block; }

/* ---- upload zone ---- */
.jd-upload-zone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  padding:26px 16px;
  border:1.5px dashed var(--jd-line);
  border-radius:12px;
  color:var(--jd-muted);
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.jd-upload-zone:hover,
.jd-upload-zone.is-dragover{
  border-color:var(--jd-accent);
  background:rgba(37,99,235,0.04);
  color:var(--jd-accent);
}
.jd-upload-zone.has-file{
  border-style:solid;
  border-color:var(--jd-accent);
  background:rgba(37,99,235,0.05);
  color:var(--jd-ink);
}
.jd-upload-text small{
  display:block;
  margin-top:4px;
  font-size:.72rem;
  font-weight:300;
  opacity:.75;
}

.jd-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin:24px 0 0 0;
  padding:15px 24px;
  border:none;
  border-radius:999px;
  background:var(--jd-ink);
  color:#fff;
  font-family:'Work Sans',sans-serif;
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
  transition:background .3s ease, opacity .3s ease;
}
.jd-submit:hover{ background:var(--jd-accent); }
.jd-submit:disabled{ opacity:.6; cursor:default; }

.jd-success{
  display:none;
  margin:20px 0 0 0;
  padding:14px 16px;
  border-radius:10px;
  background:rgba(37,99,235,0.08);
  border:1px solid rgba(37,99,235,0.25);
  color:var(--jd-ink);
  font-size:.85rem;
  line-height:1.6;
}
.jd-form.is-submitted .jd-success{ display:block; }

/* ---------------------------------------------------------
   Fix defensif link breadcrumb (tema kadang paksa warna biru +
   underline + italic ke semua <a>).
   --------------------------------------------------------- */
#jd-header a,
#jd-body a{
  font-style:normal !important;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .jd-body-inner{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .jd-header{ padding:44px 20px 44px; }
  .jd-body{ padding:0 20px 70px; }
}