/* =====================================================================
   PK Jobs Hub — upgrades.css
   Loaded AFTER css/style.css. Adds mobile nav, filters, ad slots with
   reserved space (no layout shift), job detail layout, trust blocks.
   ===================================================================== */
:root {
  --pk-brand: #0f9d8a;
  --pk-brand-dark: #0b7a6b;
  --pk-ink: #111827;
  --pk-muted: #6b7280;
  --pk-line: #e5e7eb;
  --pk-bg-soft: #f6f8f9;
  --pk-warn-bg: #fff7ed;
  --pk-warn: #c2410c;
  --pk-radius: 12px;
}

/* ---------- Accessibility ---------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--pk-ink); color:#fff; padding:.6rem 1rem; z-index:1000; }
.skip-link:focus { left:1rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:3px solid var(--pk-brand); outline-offset:2px; }
input, select, textarea { font-size:16px; } /* stops iOS zoom-on-focus */

/* ---------- Mobile navigation ---------- */
.nav-toggle { display:none; background:none; border:1px solid var(--pk-line); border-radius:8px; width:44px; height:44px; font-size:1.2rem; cursor:pointer; color:var(--pk-ink); }
.nav-menu { display:flex; align-items:center; gap:1.5rem; flex:1; justify-content:space-between; }
.nav-menu { margin-left:2rem; }                 /* space between logo and "Home" */
.nav-links a { white-space:nowrap; }
.nav-calc i { color:var(--pk-brand); margin-right:.15rem; }
@media (min-width: 901px) and (max-width: 1360px) { .calc-word { display:none; } }  /* laptops: "Salary / Tax" only */
@media (max-width: 900px) {
  .nav-container { flex-wrap:wrap; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }
  .nav-menu { margin-left:0; display:none; width:100%; flex-direction:column; align-items:stretch; gap:.75rem; padding:.75rem 0; }
  .nav-menu.open { display:flex; }
  .nav-menu .nav-links { display:flex; flex-direction:column; gap:0; }
  .nav-menu .nav-links a { display:block; padding:.8rem .25rem; border-bottom:1px solid var(--pk-line); }
  .nav-menu .nav-auth { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
  .nav-menu .nav-auth a { text-align:center; padding:.7rem .5rem; }
}

/* ---------- Hero ---------- */
.hero { max-width:960px; margin:1.5rem auto 1rem; padding:0 1rem; text-align:center; }
.hero h1 { font-size:clamp(1.5rem, 4.5vw, 2.4rem); line-height:1.2; margin:0 0 .6rem; color:var(--pk-ink); }
.hero-sub { color:var(--pk-muted); margin:0 0 1.25rem; }
.quick-chips { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1rem auto; padding:0 1rem; max-width:1100px; }
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .9rem; border:1px solid var(--pk-line); border-radius:999px; background:#fff; color:var(--pk-ink); text-decoration:none; font-size:.9rem; min-height:36px; }
.chip:hover { border-color:var(--pk-brand); color:var(--pk-brand-dark); }
.count { color:var(--pk-muted); font-weight:400; font-size:.85em; }
.section-cta { margin-top:1.75rem; }
.muted { color:var(--pk-muted); }

/* ---------- Ad slots: labelled + space reserved = zero CLS ---------- */
.ad-wrap { max-width:1200px; margin:1.75rem auto; padding:0 1rem; text-align:center; clear:both; }
.ad-label { display:block; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:#9ca3af; margin-bottom:.35rem; }
.ad-display  { min-height:120px; }
.ad-infeed   { min-height:250px; }
.ad-inarticle{ min-height:250px; margin:1.75rem 0; padding:0; }
.ad-multiplex{ min-height:320px; }
@media (min-width: 768px) { .ad-display { min-height:110px; } }
.grid-full { grid-column:1 / -1; }

/* ---------- Search & filters ---------- */
.filter-bar { max-width:1100px; margin:0 auto 1.25rem; padding:0 1rem; }
.filter-row { display:flex; gap:.5rem; align-items:stretch; flex-wrap:wrap; }
.filter-field { display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--pk-line); border-radius:10px; padding:0 .8rem; min-height:48px; flex:1 1 180px; }
.filter-field.grow { flex:2 1 260px; }
.filter-field i { color:var(--pk-muted); }
.filter-field input { border:0; outline:0; width:100%; background:transparent; padding:.7rem 0; }
.filter-row .btn-search { min-height:48px; padding:0 1.4rem; border-radius:10px; }
.filter-more { margin-top:.75rem; background:#fff; border:1px solid var(--pk-line); border-radius:10px; }
.filter-more summary { cursor:pointer; padding:.8rem 1rem; font-weight:600; list-style:none; min-height:44px; }
.filter-more summary::-webkit-details-marker { display:none; }
.filter-count { background:var(--pk-brand); color:#fff; border-radius:999px; padding:0 .5rem; font-size:.8rem; margin-left:.25rem; }
.filter-panel { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem 1.5rem; padding:0 1rem 1rem; }
.filter-panel fieldset { border:0; padding:0; margin:0; }
.filter-panel legend { font-weight:600; margin-bottom:.4rem; font-size:.9rem; }
.filter-panel select { width:100%; min-height:44px; border:1px solid var(--pk-line); border-radius:8px; padding:0 .6rem; background:#fff; }
.check-list { max-height:220px; overflow:auto; display:flex; flex-direction:column; gap:.15rem; }
.check-list label, .filter-panel fieldset > label { display:flex; gap:.5rem; align-items:center; min-height:36px; cursor:pointer; font-size:.92rem; }
.check-list input { width:18px; height:18px; accent-color:var(--pk-brand); }
.filter-actions { display:flex; gap:.5rem; align-items:center; grid-column:1 / -1; }

/* ---------- Job cards ---------- */
.job-card-modern { padding:0; }
.job-card-link { display:flex; flex-direction:column; gap:.75rem; height:100%; padding:1.1rem; color:inherit; text-decoration:none; }
.job-card-modern:hover { box-shadow:0 6px 22px rgba(0,0,0,.07); }
.job-card-modern .job-title { font-size:1.02rem; line-height:1.35; margin:0 0 .2rem; }
.verified-tick { color:#0284c7; font-size:.85em; }
.badge-urgent { background:var(--pk-warn-bg); color:var(--pk-warn); }
.btn-apply-card { margin-top:auto; text-align:center; }
.expired-card { opacity:.75; }

/* ---------- Empty state & SEO copy ---------- */
.empty-state { grid-column:1 / -1; text-align:center; padding:2.5rem 1rem; background:#fff; border:1px dashed var(--pk-line); border-radius:var(--pk-radius); max-width:720px; margin:1rem auto; }
.empty-state i { font-size:2.2rem; color:#9ca3af; }
.empty-actions { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
.seo-copy { max-width:860px; margin:2.5rem auto 0; padding:0 1rem; color:#374151; line-height:1.7; }
.seo-copy h2 { font-size:1.15rem; }

/* ---------- Homepage trust block ---------- */
.trust-block { background:var(--pk-bg-soft); padding:2.5rem 1rem; margin-top:2.5rem; }
.trust-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:2rem; }
.trust-grid h2 { font-size:1.15rem; margin-top:0; }
.trust-grid p, .tick-list { color:#374151; line-height:1.7; }
.tick-list { padding-left:1.1rem; }
.tick-list li { margin-bottom:.4rem; }

/* ---------- Directories ---------- */
.province-heading { max-width:1200px; margin:2rem auto .75rem; padding:0 1rem; font-size:1.15rem; }
.nationwide-card { display:flex; align-items:center; gap:.75rem; max-width:1168px; margin:0 auto 1rem; padding:1rem 1.25rem; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:var(--pk-radius); color:var(--pk-ink); text-decoration:none; }
.nationwide-card span { flex:1; }
.company-card-name { font-size:.95rem; margin:.5rem 0 .2rem; }

/* ---------- Job detail ---------- */
.notice-closed { display:flex; gap:.75rem; align-items:flex-start; background:var(--pk-warn-bg); border:1px solid #fed7aa; color:#7c2d12; border-radius:var(--pk-radius); padding:1rem 1.2rem; margin:1rem 0; }
.company-header-compact h1 { font-size:clamp(1.3rem, 3.6vw, 1.85rem); line-height:1.25; margin:0 0 .35rem; }
.job-employer-line { margin:0 0 .3rem; font-weight:600; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.job-details-grid { margin:0; }
.job-details-grid dt { font-size:.8rem; color:var(--pk-muted); margin-bottom:.2rem; }
.job-details-grid dd { margin:0; font-weight:600; }
.job-detail-box.urgent dd { color:var(--pk-warn); }
.action-row { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
.btn-apply-main { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:var(--pk-brand); color:#fff; font-weight:700; padding:.9rem 1.6rem; border-radius:10px; text-decoration:none; min-height:48px; }
.btn-apply-main:hover { background:var(--pk-brand-dark); color:#fff; }
.job-description-content { line-height:1.75; color:#1f2937; overflow-wrap:anywhere; }
.job-description-content table { width:100%; border-collapse:collapse; display:block; overflow-x:auto; }
.job-description-content td, .job-description-content th { border:1px solid var(--pk-line); padding:.45rem .6rem; }
.job-howto, .employer-box, .similar-jobs { margin-top:2rem; background:#fff; border:1px solid var(--pk-line); border-radius:var(--pk-radius); padding:1.25rem 1.4rem; }
.similar-jobs { background:transparent; border:0; padding:0; }
.job-howto ol { padding-left:1.2rem; line-height:1.7; }
.safety-note { background:var(--pk-bg-soft); border-radius:10px; padding:.8rem 1rem; font-size:.92rem; }
.employer-facts { list-style:none; padding:0; margin:.5rem 0 1rem; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; color:#374151; }

/* ---------- Footer ---------- */
.footer-heading { font-size:1rem; margin:0 0 .75rem; }

/* ---------- Mobile polish ---------- */
@media (max-width: 640px) {
  .jobs-container { grid-template-columns:1fr !important; gap:.75rem; }
  .company-header-compact { gap:.75rem; }
  .company-header-compact img { width:56px; height:56px; }
  .action-row a, .action-row span { flex:1 1 100%; }
  .share-btn span { display:none; }
  .breadcrumb { font-size:.8rem; overflow-x:auto; flex-wrap:nowrap; white-space:nowrap; }
}