/* ══════════════════════════════════════════════════════════
   HP Job Manager Pro — Frontend Styles v1.1
   Palette matches hpgovtjob.com header
   ══════════════════════════════════════════════════════════ */
:root{
  --hpjm-indigo:#0F2A4A;
  --hpjm-indigo-2:#16385F;
  --hpjm-indigo-deep:#081A2E;
  --hpjm-pine:#1F6E43;
  --hpjm-pine-dark:#155432;
  --hpjm-pine-light:#2F8F5C;
  --hpjm-saffron:#E8A33D;
  --hpjm-saffron-dark:#C77F1E;
  --hpjm-saffron-glow:rgba(232,163,61,.22);
  --hpjm-snow:#F7F9FB;
  --hpjm-text:#16202B;
  --hpjm-muted:#5B6B7C;
  --hpjm-border:#E2E8EE;
  --hpjm-red:#C0281B;
  --hpjm-stamp:#A31E22;
  --hpjm-radius:14px;
  --hpjm-shadow:0 4px 20px rgba(15,42,74,.06);
  --hpjm-shadow-lg:0 12px 34px rgba(15,42,74,.14);
}

.hpjm-home-wrap,.hpjm-cat-block,.hpjm-grid-cols,.hpjm-card,.hpjm-single-box,.hpjm-table-wrap,.hpjm-filter-tabs,.hpjm-search-box{
  box-sizing:border-box;font-family:'Inter',-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--hpjm-text);
}
.hpjm-home-wrap{
  max-width:1560px;
  margin:0 auto;
  padding:0 28px;
}
.hpjm-home-wrap *,.hpjm-single-box *{box-sizing:border-box}
.hpjm-empty{color:var(--hpjm-muted);font-style:italic;padding:20px 0}

/* ---- Quick-jump category nav (sticky chip bar at top of homepage) ---- */
.hpjm-quicknav{
  position:sticky;top:0;z-index:20;
  background:#fff;
  border-bottom:1.5px solid var(--hpjm-border);
  margin:0 0 34px;
  padding:14px 0;
  width:100%;
}
.hpjm-quicknav-inner{
  display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  max-width:1560px;margin:0 auto;padding:2px 28px;
}
.hpjm-quicknav-inner::-webkit-scrollbar{display:none}
.hpjm-quicknav-chip{
  flex:0 0 auto;
  background:var(--hpjm-snow);border:1.5px solid var(--hpjm-border);
  color:var(--hpjm-indigo);font-size:13px;font-weight:700;
  padding:8px 16px;border-radius:20px;text-decoration:none;
  white-space:nowrap;transition:all .15s ease;
}
.hpjm-quicknav-chip:hover{background:var(--hpjm-indigo);border-color:var(--hpjm-indigo);color:#fff}

/* ---- Category block ---- */
.hpjm-cat-block{margin:0 0 52px;scroll-margin-top:70px}
.hpjm-cat-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;border-bottom:1.5px solid var(--hpjm-border);padding-bottom:18px;flex-wrap:wrap;gap:14px}
.hpjm-cat-title{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:28px;font-weight:800;color:var(--hpjm-indigo);margin:0;
  position:relative;padding-left:0;display:flex;align-items:center;gap:12px;line-height:1;
}
.hpjm-cat-title::before{content:none}
.hpjm-cat-count{
  font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--hpjm-indigo),var(--hpjm-indigo-2));
  border:none;border-radius:20px;padding:4px 12px;
}
.hpjm-viewall{
  font-size:13.5px;font-weight:700;color:var(--hpjm-indigo);text-decoration:none;white-space:nowrap;
  border:none;border-bottom:2px solid var(--hpjm-saffron);padding:0 0 2px;border-radius:0;transition:color .15s ease;
}
.hpjm-viewall:hover{color:var(--hpjm-pine-dark);background:none;border-color:var(--hpjm-pine-dark)}

/* ---- Grid ----
   Fixed column counts per breakpoint (not auto-fill) so a 4-post
   homepage row never leaves a lopsided empty gap on wide screens
   and always sits perfectly on desktop / laptop / tablet / mobile.
   align-items:start stops a card with less content from being
   force-stretched into a tall, empty-looking box next to a card
   with a longer title. */
.hpjm-grid-cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));align-items:start}
.hpjm-cols-1{grid-template-columns:1fr}
.hpjm-cols-2{grid-template-columns:repeat(2,1fr)}
.hpjm-cols-3{grid-template-columns:repeat(3,1fr)}
.hpjm-cols-4{grid-template-columns:repeat(4,1fr)}

/* Large desktop / laptop ≥1025px: full column count as set above */

/* Small laptop / large tablet 901px–1024px: cap at 3 columns */
@media(max-width:1024px){
  .hpjm-cols-3,.hpjm-cols-4{grid-template-columns:repeat(3,1fr)}
}

/* Tablet 641px–900px: 2 columns */
@media(max-width:900px){
  .hpjm-cols-2,.hpjm-cols-3,.hpjm-cols-4{grid-template-columns:repeat(2,1fr)}
  .hpjm-grid-cols{gap:18px}
}

/* Mobile ≤640px: single column, full width cards */
@media(max-width:640px){
  .hpjm-grid-cols,.hpjm-cols-1,.hpjm-cols-2,.hpjm-cols-3,.hpjm-cols-4{grid-template-columns:1fr}
}

/* ---- Card ---- */
.hpjm-card{position:relative;background:#fff;border:1.5px solid var(--hpjm-border);border-radius:var(--hpjm-radius);padding:20px 20px 18px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,transform .15s,border-color .2s;overflow:visible;box-shadow:var(--hpjm-shadow);min-height:340px}
.hpjm-card:hover{box-shadow:var(--hpjm-shadow-lg);transform:translateY(-5px);border-color:var(--hpjm-saffron)}
.hpjm-card::after{content:none}
.hpjm-card::before{
  content:'';position:absolute;top:0;left:18px;right:18px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--hpjm-saffron) 0%,#fff 50%,var(--hpjm-pine) 100%);opacity:.9;
}
.hpjm-card-featured{border-color:var(--hpjm-saffron);box-shadow:0 10px 28px var(--hpjm-saffron-glow)}
.hpjm-card-ribbon{
  position:absolute;top:16px;right:18px;left:auto;
  display:flex;align-items:center;gap:5px;
  background:none;box-shadow:none;transform:none;padding:0;
  color:var(--hpjm-saffron-dark);font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
}
.hpjm-card-ribbon::before{content:'★';font-size:11px}
.hpjm-card-badges{display:flex;gap:6px;flex-wrap:wrap}
.hpjm-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:20px;color:#fff}
.hpjm-badge-active{background:var(--hpjm-pine)}
.hpjm-badge-upcoming{background:var(--hpjm-saffron-dark)}
.hpjm-badge-closed{background:#8E1F1F}
.hpjm-badge-new{background:linear-gradient(135deg,var(--hpjm-saffron),var(--hpjm-saffron-dark));color:#241701}
.hpjm-badge-closing{background:var(--hpjm-red)}
.hpjm-card-title{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:18px;font-weight:700;line-height:1.32;margin:2px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hpjm-card-title a{color:var(--hpjm-indigo);text-decoration:none}
.hpjm-card-title a:hover{color:var(--hpjm-pine-dark)}
.hpjm-card-org{font-size:11.5px;font-weight:700;color:var(--hpjm-muted);text-transform:uppercase;letter-spacing:.4px}
.hpjm-card-meta{list-style:none;margin:2px 0 0;padding:0;font-size:13px;color:var(--hpjm-indigo-2);display:flex;flex-direction:column;gap:7px}
.hpjm-card-meta li{display:flex;align-items:flex-start;gap:8px}
.hpjm-card-meta li span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hpjm-card-meta svg{flex:0 0 auto;width:15px;height:15px;margin-top:1px;fill:none;stroke:var(--hpjm-pine-light);stroke-width:1.8}
.hpjm-card-meta strong{color:var(--hpjm-muted);font-weight:600;margin-right:3px}
.hpjm-card-foot{
  margin-top:auto;padding-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px dashed var(--hpjm-border);
}
.hpjm-card-stamp{
  position:relative;flex:0 0 auto;width:72px;height:72px;border-radius:50%;
  border:2px solid var(--hpjm-stamp);color:var(--hpjm-stamp);opacity:.9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:rotate(-8deg);
}
.hpjm-card-stamp::before{content:'';position:absolute;inset:5px;border-radius:50%;border:1px dashed var(--hpjm-stamp)}
.hpjm-card-stamp .hpjm-stamp-l1{font-family:'IBM Plex Mono',monospace;font-size:6.5px;font-weight:700;letter-spacing:.4px}
.hpjm-card-stamp .hpjm-stamp-l2{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;line-height:1.15;text-align:center;white-space:pre-line;text-transform:uppercase}
.hpjm-card-btn{
  flex:1 1 auto;margin-top:0;text-align:center;
  background:linear-gradient(135deg,var(--hpjm-indigo),var(--hpjm-indigo-2));
  color:#fff;font-weight:700;font-size:13px;padding:12px 14px;border-radius:9px;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:background .2s;
}
.hpjm-card-btn:hover{opacity:1;background:linear-gradient(135deg,var(--hpjm-pine),var(--hpjm-pine-light));color:#fff}

/* ---- Filter tabs (list shortcode) ---- */
.hpjm-filter-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.hpjm-tab{background:#fff;border:1.5px solid var(--hpjm-border);color:var(--hpjm-muted);font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:20px;cursor:pointer;transition:all .15s}
.hpjm-tab:hover{border-color:var(--hpjm-pine)}
.hpjm-tab.active{background:var(--hpjm-indigo);border-color:var(--hpjm-indigo);color:#fff}

/* ---- Table ---- */
.hpjm-table-wrap{overflow-x:auto;border:1.5px solid var(--hpjm-border);border-radius:12px;-webkit-overflow-scrolling:touch}
.hpjm-table{width:100%;border-collapse:collapse;font-size:13.5px}
.hpjm-table th{background:var(--hpjm-snow);color:var(--hpjm-indigo);font-weight:800;text-align:left;padding:12px 14px;border-bottom:1.5px solid var(--hpjm-border);white-space:nowrap}
.hpjm-table td{padding:12px 14px;border-bottom:1px solid var(--hpjm-border)}
.hpjm-table tr:last-child td{border-bottom:none}
.hpjm-table a{color:var(--hpjm-indigo);text-decoration:none;font-weight:700}
.hpjm-table a:hover{color:var(--hpjm-saffron-dark)}
.hpjm-table-link{white-space:nowrap}

/* ---- Search box ---- */
.hpjm-search-box{display:flex;gap:0;max-width:480px;border:1.5px solid var(--hpjm-border);border-radius:10px;overflow:hidden}
.hpjm-search-box input{flex:1;border:none;padding:11px 14px;font-size:14px;outline:none;min-width:0}
.hpjm-search-box button{background:var(--hpjm-indigo);color:#fff;border:none;padding:0 20px;font-weight:700;cursor:pointer}
.hpjm-search-box button:hover{background:var(--hpjm-indigo-2)}

/* ══════════════════════════════════════════════════════════
   SINGLE JOB PAGE — PRO REDESIGN
   ══════════════════════════════════════════════════════════ */

/* Page title + breadcrumb: theme prints these directly above our
   injected box. WordPress auto-adds the .single-hp_job body class,
   so we can safely give them proper breathing room site-wide,
   only on job pages — without touching any other post type. */
body.single-hp_job .entry-header,
body.single-hp_job .page-header{
  padding-top:36px !important;
}
body.single-hp_job h1.entry-title,
body.single-hp_job .entry-title{
  font-size:clamp(26px,4vw,40px) !important;
  color:var(--hpjm-indigo) !important;
  line-height:1.25 !important;
  margin-bottom:10px !important;
}
body.single-hp_job .breadcrumb,
body.single-hp_job .breadcrumbs,
body.single-hp_job nav.breadcrumb,
body.single-hp_job .yoast-breadcrumb,
body.single-hp_job .rank-math-breadcrumb{
  padding-bottom:22px !important;
  font-size:13.5px !important;
  color:var(--hpjm-muted) !important;
}

/* Main box */
.hpjm-single-box{
  background:#fff;
  border:1.5px solid var(--hpjm-border);
  border-radius:18px;
  padding:0;
  margin-bottom:30px;
  box-shadow:var(--hpjm-shadow);
  overflow:hidden;
}

/* Top strip — accent bar */
.hpjm-single-box::before{
  content:'';
  display:block;
  height:5px;
  background:linear-gradient(90deg,var(--hpjm-saffron),var(--hpjm-pine) 55%,var(--hpjm-indigo));
}

.hpjm-single-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:22px 24px 0;
  margin-bottom:14px;
}
.hpjm-single-org{font-weight:800;color:var(--hpjm-indigo);font-size:15.5px}

/* Status badge — glowing pill */
.hpjm-single-head .hpjm-badge{
  font-size:11px;padding:5px 14px;letter-spacing:.4px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

/* Quick-facts table — Advt No / Posts / Age / Salary / Fee */
.hpjm-facts-table{
  width:calc(100% - 48px);
  margin:0 24px 20px;
  border-collapse:collapse;
  background:var(--hpjm-snow);
  border:1px solid var(--hpjm-border);
  border-radius:12px;
  overflow:hidden;
  font-size:14px;
}
.hpjm-facts-table td{padding:13px 18px;border-bottom:1px solid var(--hpjm-border)}
.hpjm-facts-table tr:last-child td{border-bottom:none}
.hpjm-facts-table td:first-child{
  font-weight:700;color:var(--hpjm-muted);width:42%;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;
}
.hpjm-facts-table td:last-child{font-weight:800;color:var(--hpjm-indigo);font-size:15px}
.hpjm-facts-table tr:nth-child(even){background:rgba(15,42,74,.025)}

.hpjm-single-section{margin:0 24px 20px}
.hpjm-single-section h3{
  font-size:15.5px;color:var(--hpjm-indigo);margin:0 0 12px;
  border-left:4px solid var(--hpjm-saffron);padding-left:12px;
  font-weight:800;
}
.hpjm-single-section p{margin:0;line-height:1.75;font-size:15px}

.hpjm-dates-table{width:100%;border-collapse:collapse;font-size:13.5px}
.hpjm-dates-table td{padding:10px 12px;border-bottom:1px solid var(--hpjm-border)}
.hpjm-dates-table td:first-child{font-weight:700;color:var(--hpjm-muted);width:45%}
.hpjm-dates-table tr:last-child td{border-bottom:none}

/* ---- Important Links — pro buttons ---- */
.hpjm-links-section{
  background:var(--hpjm-snow);
  border-radius:14px;
  padding:20px 20px 22px;
  margin:0 24px 26px;
  border:1px solid var(--hpjm-border);
}
.hpjm-links-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
  margin-top:4px;
}
.hpjm-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;border-radius:10px;
  font-size:13.5px;font-weight:700;text-decoration:none;
  background:#fff;border:1.5px solid var(--hpjm-border);color:var(--hpjm-indigo);
  transition:all .18s ease;
  white-space:nowrap;
}
.hpjm-btn-ico{font-size:14px;line-height:1}
.hpjm-btn:hover{
  border-color:var(--hpjm-pine);color:var(--hpjm-pine-dark);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(15,42,74,.12);
}
.hpjm-btn-primary{
  background:linear-gradient(135deg,var(--hpjm-pine-light),var(--hpjm-pine-dark));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(21,84,50,.28);
}
.hpjm-btn-primary:hover{opacity:.92;color:#fff;box-shadow:0 8px 20px rgba(21,84,50,.35)}

/* Buy Study Material — saffron/gold CTA, visually distinct so it stands out as a monetised action */
.hpjm-btn-study{
  background:linear-gradient(135deg,var(--hpjm-saffron),var(--hpjm-saffron-dark));
  border-color:transparent;color:#241701;
  box-shadow:0 4px 14px var(--hpjm-saffron-glow);
  font-weight:800;
}
.hpjm-btn-study:hover{opacity:.92;color:#241701;box-shadow:0 8px 22px var(--hpjm-saffron-glow)}

/* ---- Pagination ---- */
.hpjm-pagination{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.hpjm-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:8px;border:1.5px solid var(--hpjm-border);color:var(--hpjm-indigo);text-decoration:none;font-weight:700;font-size:13px}
.hpjm-pagination .page-numbers.current{background:var(--hpjm-indigo);border-color:var(--hpjm-indigo);color:#fff}

/* ══════════════════════════════════════════════════════════
   MOBILE — everything below tuned for phones
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){

  .hpjm-home-wrap{padding:0 16px}
  .hpjm-quicknav-inner{padding:2px 16px}

  body.single-hp_job .entry-header,
  body.single-hp_job .page-header,
  body.single-hp_job .entry-content{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .hpjm-single-box{
    margin-left:0;margin-right:0;
    border-radius:14px;
  }
  .hpjm-single-head{padding:18px 16px 0}
  .hpjm-single-org{font-size:14px}

  /* Quick facts table: tighter on phones */
  .hpjm-facts-table{
    width:calc(100% - 32px);
    margin:0 16px 18px;
    font-size:13px;
  }
  .hpjm-facts-table td{padding:11px 14px}
  .hpjm-facts-table td:last-child{font-size:14px}

  .hpjm-single-section{margin:0 16px 18px}
  .hpjm-single-section p{font-size:14.5px}

  /* Important Links: exactly 2 columns as requested, buttons stack in a clean grid */
  .hpjm-links-section{margin:0 16px 22px;padding:16px 14px 18px}
  .hpjm-links-row{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .hpjm-btn{
    padding:12px 10px;
    font-size:12.5px;
    flex-direction:column;
    gap:5px;
    text-align:center;
  }
  .hpjm-btn-ico{font-size:17px}

  /* If an odd number of buttons leaves one alone on the last row,
     let it span full width so it doesn't look stranded */
  .hpjm-links-row a:last-child:nth-child(odd){
    grid-column:1 / -1;
    flex-direction:row;
  }

  .hpjm-grid-cols{gap:16px}
  .hpjm-card{padding:18px 18px 16px;min-height:0}

  .hpjm-quicknav{padding:10px 0;margin-bottom:22px}
  .hpjm-quicknav-chip{font-size:12px;padding:7px 13px}
  .hpjm-cat-head{flex-wrap:wrap;gap:10px}
  .hpjm-cat-title{font-size:22px}
  .hpjm-viewall{font-size:12.5px}
  .hpjm-card-stamp{width:62px;height:62px}
  .hpjm-card-stamp .hpjm-stamp-l2{font-size:9px}
  .hpjm-card-foot{flex-wrap:wrap}

  .hpjm-search-box{max-width:100%}

  body{overflow-x:hidden}
  img,table{max-width:100%;height:auto}

  /* Sticky mobile Apply Now bar — phones only, fixed to bottom */
  body.single-hp_job{padding-bottom:74px}
  .hpjm-mobile-apply-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:#fff;
    border-top:1.5px solid var(--hpjm-border);
    box-shadow:0 -8px 24px rgba(15,42,74,.12);
  }
  .hpjm-mobile-apply-bar a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(135deg,var(--hpjm-pine-light),var(--hpjm-pine-dark));
    color:#fff;text-decoration:none;font-weight:800;font-size:15px;
    padding:14px;border-radius:11px;
    box-shadow:0 6px 18px rgba(21,84,50,.3);
  }
}

@media(min-width:769px){
  .hpjm-mobile-apply-bar{display:none}
}

@media(max-width:400px){
  .hpjm-single-grid{grid-template-columns:1fr 1fr}
  .hpjm-links-row{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════════════
   ONLINE COURSES MODULE
   ══════════════════════════════════════════════════════════ */

/* ---- Price display (single course page + cards) ---- */
.hpjm-course-price-row{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:0 24px;margin:2px 0 18px;
}
.hpjm-course-price-row-sm{padding:0;margin:2px 0 10px}
.hpjm-course-price{font-size:26px;font-weight:800;color:var(--hpjm-pine-dark)}
.hpjm-course-price-row-sm .hpjm-course-price{font-size:20px}
.hpjm-course-price-old{font-size:15px;color:var(--hpjm-muted);text-decoration:line-through}
.hpjm-course-discount{
  font-size:11px;font-weight:800;color:#fff;
  background:var(--hpjm-red);padding:3px 10px;border-radius:20px;
}

/* ---- Demo video embed ---- */
.hpjm-course-video-wrap{
  position:relative;width:100%;padding-top:56.25%;
  border-radius:12px;overflow:hidden;background:#000;
  box-shadow:0 6px 20px rgba(15,42,74,.15);
}
.hpjm-course-video-wrap iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;border:0;
}

/* ---- What's included checklist ---- */
.hpjm-course-includes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.hpjm-course-includes li{display:flex;align-items:flex-start;gap:8px;font-size:14.5px;line-height:1.5}
.hpjm-tick{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--hpjm-pine);color:#fff;font-size:11px;font-weight:800;
  margin-top:1px;
}

/* ---- Course card tweaks ---- */
.hpjm-course-card{padding-bottom:18px}
.hpjm-card-btn-course{
  background:linear-gradient(135deg,var(--hpjm-saffron),var(--hpjm-saffron-dark));
  color:#241701;
}
.hpjm-card-btn-course:hover{opacity:.9;color:#241701}

@media(max-width:768px){
  .hpjm-course-price-row{padding:0 16px}
  .hpjm-course-price{font-size:22px}
  .hpjm-course-includes{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════
   PREMIUM ARTICLE CONTENT — the AI-generated SEO body content
   (Eligibility / Dates / Salary / How to Apply / FAQ) gets its
   own styled card so it matches the details box above it,
   instead of falling back to unstyled theme defaults.
   ══════════════════════════════════════════════════════════ */
.hpjm-article{
  background:#fff;
  border:1.5px solid var(--hpjm-border);
  border-radius:18px;
  padding:36px 40px;
  margin-bottom:30px;
  box-shadow:var(--hpjm-shadow);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--hpjm-text);
}
.hpjm-article > *:first-child{margin-top:0}
.hpjm-article > *:last-child{margin-bottom:0}

.hpjm-article p{
  font-size:16px;line-height:1.85;color:var(--hpjm-text);
  margin:0 0 20px;
}

.hpjm-article h2{
  font-size:22px;font-weight:800;color:var(--hpjm-indigo);
  margin:38px 0 18px;padding-bottom:14px;
  border-bottom:2px solid var(--hpjm-border);
  display:flex;align-items:center;gap:12px;
  line-height:1.3;
}
.hpjm-article h2:first-child{margin-top:0}
.hpjm-article h2::before{
  content:'';flex:0 0 auto;width:6px;height:24px;border-radius:3px;
  background:linear-gradient(180deg,var(--hpjm-saffron),var(--hpjm-pine));
}

.hpjm-article h3{
  font-size:17px;font-weight:800;color:var(--hpjm-pine-dark);
  margin:24px 0 10px;
  display:flex;align-items:center;gap:8px;
}

/* FAQ pattern: every h3 in our AI content is a question, immediately
   followed by its answer paragraph — style that pair as a card. */
.hpjm-article h3::before{content:'❓';font-size:15px;flex:0 0 auto}
.hpjm-article h3 + p{
  background:var(--hpjm-snow);
  border:1px solid var(--hpjm-border);
  border-left:4px solid var(--hpjm-pine);
  border-radius:10px;
  padding:16px 18px;
  margin:0 0 18px;
  font-size:15px;
}

.hpjm-article ul,.hpjm-article ol{margin:0 0 22px;padding:0;list-style:none}
.hpjm-article ul li,.hpjm-article ol li{
  position:relative;padding:12px 0 12px 38px;
  font-size:15.5px;line-height:1.7;
  border-bottom:1px dashed var(--hpjm-border);
}
.hpjm-article ul li:last-child,.hpjm-article ol li:last-child{border-bottom:none}
.hpjm-article ul li::before{
  content:'✓';position:absolute;left:0;top:11px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(31,110,67,.1);color:var(--hpjm-pine);
  font-size:12px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.hpjm-article ol{counter-reset:hpjm-step}
.hpjm-article ol li::before{
  counter-increment:hpjm-step;content:counter(hpjm-step);
  position:absolute;left:0;top:10px;
  width:22px;height:22px;border-radius:50%;
  background:var(--hpjm-indigo);color:#fff;
  font-size:11.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.hpjm-article strong{color:var(--hpjm-indigo);font-weight:800}
.hpjm-article a{color:var(--hpjm-pine-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ---- Similar Jobs — premium card grid, not a bullet list ---- */
.hpjm-similar-jobs{margin:0 0 30px}
.hpjm-similar-jobs h2{
  font-size:20px;font-weight:800;color:var(--hpjm-indigo);
  margin:0 0 16px;display:flex;align-items:center;gap:10px;
}
.hpjm-similar-jobs h2::before{
  content:'';width:6px;height:22px;border-radius:3px;
  background:linear-gradient(180deg,var(--hpjm-saffron),var(--hpjm-pine));
}
.hpjm-similar-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.hpjm-similar-card{
  position:relative;display:flex;flex-direction:column;gap:6px;
  background:#fff;border:1.5px solid var(--hpjm-border);border-radius:14px;
  padding:18px 44px 18px 18px;
  text-decoration:none;color:var(--hpjm-text);
  transition:all .18s ease;
  box-shadow:var(--hpjm-shadow);
}
.hpjm-similar-card:hover{
  border-color:var(--hpjm-pine);
  transform:translateY(-3px);
  box-shadow:var(--hpjm-shadow-lg);
}
.hpjm-similar-badge{
  align-self:flex-start;
  font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;color:#fff;
}
.hpjm-similar-title{font-size:15px;font-weight:800;color:var(--hpjm-indigo);line-height:1.4}
.hpjm-similar-org{font-size:12.5px;color:var(--hpjm-muted);font-weight:600}
.hpjm-similar-arrow{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:18px;color:var(--hpjm-pine);opacity:0;transition:all .18s ease;
}
.hpjm-similar-card:hover .hpjm-similar-arrow{opacity:1;right:14px}

/* ══════════════════════════════════════════════════════════
   TABLET — 769px to 1024px
   ══════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .hpjm-article{padding:30px 28px}
  .hpjm-similar-grid{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════════════
   MOBILE — article content + similar jobs
   ══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .hpjm-article{
    padding:22px 18px;
    border-radius:14px;
    margin-left:0;margin-right:0;
  }
  .hpjm-article h2{font-size:18.5px;margin:28px 0 14px;padding-bottom:10px}
  .hpjm-article h2::before{width:5px;height:19px}
  .hpjm-article h3{font-size:15px}
  .hpjm-article p{font-size:14.5px;line-height:1.75;margin-bottom:16px}
  .hpjm-article ul li,.hpjm-article ol li{font-size:14.5px;padding:10px 0 10px 32px}
  .hpjm-article h3 + p{padding:13px 14px;font-size:14px}

  .hpjm-similar-grid{grid-template-columns:1fr}
  .hpjm-similar-jobs{margin:0 0 24px}
}

@media(max-width:400px){
  .hpjm-article{padding:18px 14px}
  .hpjm-article h2{font-size:17px}
}

/* ══════════════════════════════════════════════════════════
   SINGLE JOB PAGE — SIDEBAR (ads, channels, search, latest jobs)
   ══════════════════════════════════════════════════════════ */
.hpjm-single-layout{
  display:flex;
  align-items:flex-start;
  gap:30px;
}
.hpjm-single-main{
  flex:1 1 0;
  min-width:0; /* lets flex child shrink below content size instead of overflowing */
}
.hpjm-single-sidebar{
  flex:0 0 320px;
  width:320px;
  display:flex;
  flex-direction:column;
  gap:20px;
  position:sticky;
  top:20px;
}
.hpjm-side-box{
  background:#fff;
  border:1.5px solid var(--hpjm-border);
  border-radius:14px;
  padding:18px;
  box-shadow:var(--hpjm-shadow);
}
.hpjm-side-title{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:15.5px;font-weight:800;color:var(--hpjm-indigo);
  margin:0 0 14px;padding-bottom:10px;
  border-bottom:1.5px solid var(--hpjm-border);
}

/* Ad boxes */
.hpjm-side-ad{padding:12px;text-align:center}
.hpjm-side-custom{padding:14px}
.hpjm-side-custom img{max-width:100%;height:auto;border-radius:8px}
.hpjm-ad-label{
  display:block;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--hpjm-muted);margin-bottom:8px;
}
.hpjm-side-ad img{max-width:100%;height:auto;border-radius:8px}

/* Telegram / WhatsApp channel buttons */
.hpjm-side-channels{display:flex;flex-direction:column;gap:10px;padding:14px}
.hpjm-channel-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:10px;font-weight:800;font-size:13.5px;
  text-decoration:none;transition:opacity .15s;
}
.hpjm-channel-btn:hover{opacity:.9}
.hpjm-channel-tg{background:#25a4e0;color:#fff}
.hpjm-channel-wa{background:#1fae5a;color:#fff}

/* Latest Jobs mini list */
.hpjm-side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hpjm-side-list li{border-bottom:1px dashed var(--hpjm-border)}
.hpjm-side-list li:last-child{border-bottom:none}
.hpjm-side-list a{
  display:flex;align-items:flex-start;gap:9px;
  padding:10px 0;text-decoration:none;
}
.hpjm-side-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:5px}
.hpjm-dot-active{background:var(--hpjm-pine)}
.hpjm-dot-upcoming{background:var(--hpjm-saffron-dark)}
.hpjm-dot-closed{background:#8E1F1F}
.hpjm-side-list-title{
  font-size:13px;font-weight:600;line-height:1.4;color:var(--hpjm-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hpjm-side-list a:hover .hpjm-side-list-title{color:var(--hpjm-pine-dark)}

/* Browse by Category list */
.hpjm-side-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hpjm-side-cats li{border-bottom:1px dashed var(--hpjm-border)}
.hpjm-side-cats li:last-child{border-bottom:none}
.hpjm-side-cats a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 0;text-decoration:none;font-size:13.5px;font-weight:700;color:var(--hpjm-indigo);
}
.hpjm-side-cats a:hover{color:var(--hpjm-pine-dark)}
.hpjm-side-cats a span{
  background:var(--hpjm-snow);border:1px solid var(--hpjm-border);color:var(--hpjm-muted);
  font-size:11px;font-weight:700;border-radius:20px;padding:2px 9px;
}

/* Sidebar's own search box: match the widget's compact width */
.hpjm-side-box .hpjm-search-box{max-width:100%}

/* Small laptop / tablet: narrower fixed sidebar */
@media(max-width:1200px){
  .hpjm-single-sidebar{flex:0 0 280px;width:280px}
}

/* Tablet and below: sidebar drops beneath the article, full width, no longer sticky */
@media(max-width:900px){
  .hpjm-single-layout{flex-direction:column;gap:22px}
  .hpjm-single-sidebar{
    position:static;
    width:100%;
    flex-basis:auto;
  }
  .hpjm-side-box{padding:16px}
}

@media(max-width:640px){
  .hpjm-single-layout{gap:18px}
  .hpjm-side-channels{flex-direction:row;flex-wrap:wrap}
  .hpjm-channel-btn{flex:1 1 auto}
}