/* assets/zen-jobs.css - final updated (class-controlled accordion + single job styles) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

:root{
  --bg:#000;
  --card-bg:#111;
  --card-inner:#1b1b1b;
  --muted:#bdbdbd;
  --accent:#2b2b2b;
  --white-90: rgba(255,255,255,0.92);
  --muted-80: rgba(191,191,191,0.9);
}

/* Container */
body .zen-jobs-board {
  font-family: "Open Sans", Arial, sans-serif;
  color: #fff;
  background: transparent;
  max-width:1200px;
  margin: 24px auto;
  padding: 6px 20px;
  box-sizing:border-box;
}

/* Title */
.zen-jobs-title {
  font-weight:700;
  font-size:40px;
  text-align:center;
  margin: 6px 0 18px;
  color:var(--white-90);
}

/* Search */
.zen-search-row { text-align:center; margin: 6px 0 28px; }
.zen-search-wrap {
  display:inline-flex;
  align-items:center;
  background:var(--accent);
  padding:8px 12px;
  border-radius:24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.02);
}
#zen-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: #cfcfcf;
  font-size:14px;
  min-width:420px;
  padding:8px 12px;
  line-height:1.2;
  caret-color: #fff;
}
.zen-search-icon {
  display:inline-flex;
  width:36px;
  height:36px;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  background: #1e1e1e;
  border:1px solid rgba(255,255,255,0.03);
  cursor:pointer;
}

/* Departments */
.zen-department { margin-bottom: 22px;background-color: #1A1A1A!important;padding: 20px!important;border-radius: 25px!important; }
.zen-dept-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background: linear-gradient(180deg,#141414,#0f0f0f);
  border-radius:14px;
  padding:14px 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.03);
  cursor:pointer;
  user-select: none;
}
.zen-dept-header:focus { outline: 2px solid rgba(255,255,255,0.04); outline-offset:2px; }
.zen-dept-title { font-size:20px; font-weight:600; color:var(--white-90); margin:0; }
.zen-dept-count { display:none; } /* hide numeric count (icon-only header) */

/* Arrow styling (supports SVG/img or text) */
.zen-dept-arrow {
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted-80);
  opacity:0.95;
  transition: transform .18s ease, color .15s ease;
  font-size:18px;
}
.zen-dept-arrow img {
  display:block;
  width:18px;
  height:18px;
  transition: transform .18s ease;
}

/* Accordion control: grid hidden by default, shown when parent .open is present */
.zen-jobs-grid {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
  margin-top:14px;
  padding:18px;
  box-sizing:border-box;
}

/* show grid when department has .open */
.zen-department.open .zen-jobs-grid {
  display: grid;
}

/* keep arrow rotation in sync with .open */
.zen-department.open .zen-dept-arrow img,
.zen-department.open .zen-dept-arrow {
  transform: rotate(180deg);
}

/* Job card */
.zen-job-card {
  display:flex;
  gap:14px;
  align-items:center;
  background: #2B2B2B;
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.02);
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
  text-decoration:none;
  color:inherit;
  transition: transform .12s ease, box-shadow .12s ease;
  min-height:100px;
}
.zen-job-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.7); }

/* Thumbnail */
.zen-job-thumb { width:97px; height:97px; border-radius:8px; overflow:hidden; background:#222; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.zen-job-thumb img { width:100%; height:100%; object-fit:cover; }

/* Body layout */
.zen-job-body { flex:1; display:flex; flex-direction:column; justify-content:center; }
.zen-job-title { font-size:18px; font-weight:600; margin:0 0 6px; color:var(--white-90); line-height:1.1; }

/* small summary left / job-type right row */
.zen-job-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:14px;
}
.dept-small { color:var(--muted); font-size:14px; opacity:0.95; }
.job-type { color:var(--muted); font-size:14px; opacity:0.95; text-align:right; white-space:nowrap; }

/* Search results special styling (flat grid) */
/* When server returns a search-results container, it should be rendered with .open so grid shows */
.search-results .zen-dept-title { font-weight:700; }
.search-results .zen-jobs-grid { grid-template-columns: repeat(2, 1fr); }
.search-results .zen-dept-header { cursor:default; }

/* small screens */
@media (max-width:980px){
  .zen-jobs-grid { grid-template-columns: 1fr; }
  #zen-search-input { min-width: 260px; }
  .zen-dept-header { padding:12px 14px; }
  .zen-job-card { padding:12px; gap:12px; }
  .zen-job-title { font-size:16px; }
  .zen-job-thumb { width:72px; height:72px; }
}

/* utility */
.zen-dept-header .zen-dept-title { margin-right:auto; }
.zen-department + .zen-department { margin-top:!important;background-color: #1A1A1A!important;padding: 20px!important;border-radius: 25px!important; }
.zen-loading { color: #999; text-align:center; padding:20px; }

/* === Single Job Page Styles === */
.single-job-page {
  max-width: 1200px!important;
  margin: 30px auto;
  padding: 18px 20px;
  box-sizing: border-box;
  color: #fff;
  font-family: "Open Sans", Arial, sans-serif;
}

/* Back row above title */
.zen-back-row { margin-bottom: 10px; }
.zen-back-link {
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:#bdbdbd;
  text-decoration:none;
  transition: all .18s;
}
.zen-back-link:hover { color:#fff; transform:translateX(-3px); }
.zen-back-link svg { width:14px; height:14px; stroke:currentColor; }

/* Title */
.zen-single-title {
  font-weight:700;
  font-size:28px;
  margin: 6px 0 14px;
  color:#fff;
}

/* Top area: thumbnail left, intro on right */
.zen-single-top {
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom: 10px;
}
.zen-single-thumb-wrap { flex: 0 0 97px; }
.zen-single-thumb { width:97px; height:97px; border-radius:8px; object-fit:cover; display:block; }
.zen-single-intro {
  flex:1;
  color:#dcdcdc;
  font-size:14px;
  line-height:20px;
  margin-top:6px;
}

/* main content */
.zen-single-content {
  margin-top: 12px;
  color:#e6e6e6;
  font-size:15px;
  line-height:24px;
}
.zen-single-content ul { margin-left:20px; margin-bottom:12px; }
.zen-single-content li { margin-bottom:8px; }

/* small meta row */
.zen-single-meta {
  margin-top:18px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  color:#cfcfcf;
  font-size:14px;
}
.zen-single-meta-item strong { color:#fff; margin-right:6px; font-weight:600; }

/* Responsive */
@media (max-width:820px){
  .zen-single-top { flex-direction:row; align-items:flex-start; }
  .zen-single-intro { font-size:14px; }
}
@media (max-width:560px){
  .zen-single-top { flex-direction:column; }
  .zen-single-thumb { width:80px; height:80px; }
  .zen-single-title { font-size:22px; }
  .zen-single-content { font-size:15px; line-height:22px; }
}