/* ============================================================
   view-job.css
   Stylesheet for the single job listing page (view-job.php)
   Extracted from inline <style> so the markup stays lean and
   the CSS can be cached by the browser across job pages.
   ============================================================ */

   .vj-scope {
    --vj-primary:  var(--color-primary, #0f172a);
    --vj-accent:   var(--color-accent,  #00C9A7);
    --vj-muted:    var(--color-muted,   #64748b);
    --vj-text:     var(--color-text,    #334155);
    --vj-border:   var(--color-border,  #e2e8f0);
    --vj-bg:       var(--color-bg,      #f8fafc);
    --vj-card:     var(--color-card,    #ffffff);
    --vj-danger:   var(--color-danger,  #dc2626);
    --vj-r-lg:     var(--radius-lg,  12px);
    --vj-r-xl:     var(--radius-xl,  20px);
    --vj-r-full:   var(--radius-full, 999px);
    --vj-shadow:   var(--shadow-sm, 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04));
    --vj-shadow-lg: 0 16px 40px -12px rgba(15,23,42,.18);
    --vj-font-d:   var(--font-display, 'Playfair Display', Georgia, serif);
    --vj-trans:    var(--transition, .18s ease);
}

.vj-wrap { padding: 0 0 72px; color: var(--vj-text); }
main#main-content { padding-top: 0 !important; margin-top: 0 !important; }

/* Breadcrumb */
.vj-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.82rem; color:var(--vj-muted); line-height:1; margin:0 0 28px; }
.vj-breadcrumb a { display:inline-flex; align-items:center; gap:6px; color:var(--vj-muted); text-decoration:none; font-weight:600; transition:color var(--vj-trans); }
.vj-breadcrumb a:hover { color:var(--vj-accent); }
.vj-breadcrumb .vj-breadcrumb-sep { color:var(--vj-border); font-size:.7rem; }
.vj-breadcrumb .vj-breadcrumb-current { color:var(--vj-primary); font-weight:700; }

.vj-grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px) {
    .vj-grid { grid-template-columns:1fr 340px; align-items:start; }
    .vj-sidebar { position:sticky; top:calc(var(--navbar-height,70px) + 16px); }
}

/* Job card */
.vj-card { position:relative; background:var(--vj-card); border:1px solid var(--vj-border); border-radius:var(--vj-r-xl); padding:32px; box-shadow:var(--vj-shadow); overflow:hidden; }
.vj-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--vj-accent),#0f766e); }
.vj-header { display:flex; align-items:flex-start; gap:18px; margin-bottom:24px; }
.vj-logo { width:68px; height:68px; flex-shrink:0; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:800; color:#fff; box-shadow:var(--vj-shadow); overflow:hidden; padding:0; }
.vj-logo-img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.vj-meta { flex:1; min-width:0; }
.vj-title { font-family:var(--vj-font-d); font-size:clamp(1.25rem,3vw,1.6rem); font-weight:700; color:var(--vj-primary); margin:0 0 10px; line-height:1.28; }
.vj-company-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.83rem; color:var(--vj-muted); }
.vj-company-row .fa { color:var(--vj-muted); font-size:.78rem; margin-right:2px; }
.vj-sep { color:var(--vj-border); }
.vj-pill { background:var(--vj-accent); color:var(--vj-primary); font-size:.72rem; font-weight:800; padding:3px 11px; border-radius:var(--vj-r-full); letter-spacing:.2px; display:inline-flex; align-items:center; gap:5px; }
.vj-pill .fa { font-size:.68rem; }

/* Quick info stat chips */
.vj-detail-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:26px; }
.vj-detail-item { background:var(--vj-bg); border:1px solid var(--vj-border); border-radius:var(--vj-r-lg); padding:13px 15px; transition:transform var(--vj-trans), border-color var(--vj-trans); }
.vj-detail-item:hover { transform:translateY(-2px); border-color:var(--vj-accent); }
.vj-detail-label { font-size:.68rem; font-weight:700; color:var(--vj-muted); text-transform:uppercase; letter-spacing:.6px; }
.vj-detail-val { font-size:.92rem; font-weight:700; color:var(--vj-primary); margin-top:5px; }
.vj-detail-val.is-accent { color:var(--vj-accent); }
.vj-detail-val.is-danger { color:var(--vj-danger); }

.vj-divider { border:none; border-top:1px solid var(--vj-border); margin:24px 0; }
.vj-section-title { font-family:var(--vj-font-d); font-size:1.1rem; font-weight:700; color:var(--vj-primary); margin:0 0 14px; display:flex; align-items:center; gap:10px; }
.vj-section-title .fa { color:var(--vj-accent); font-size:.95rem; }
.vj-body { font-size:.92rem; line-height:1.75; color:var(--vj-text); }
.vj-body p { margin:0 0 12px; }
.vj-body p.vj-empty-note { color:var(--vj-muted); font-style:italic; }
.vj-req-list { margin:0 0 14px; padding-left:4px; list-style:none; }
.vj-req-list li { position:relative; margin-bottom:9px; padding-left:26px; font-size:.9rem; line-height:1.55; }
.vj-req-list li::before { content:'\f00c'; font-family:'FontAwesome'; position:absolute; left:0; top:1px; color:var(--vj-accent); font-weight:800; font-size:.78rem; }
.vj-tags { display:flex; flex-wrap:wrap; gap:8px; }
.vj-tag { background:rgba(0,201,167,.09); border:1.5px solid rgba(0,201,167,.35); border-radius:var(--vj-r-full); padding:6px 15px; font-size:.8rem; font-weight:700; color:#0f766e; }

.vj-company-meta { font-size:.82rem; color:var(--vj-muted); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.vj-company-meta .fa { color:var(--vj-muted); }

/* Sidebar apply box */
.vj-apply-box { background:linear-gradient(160deg,var(--vj-primary),#1e293b); border-radius:var(--vj-r-xl); padding:26px 22px; box-shadow:var(--vj-shadow-lg); margin-bottom:16px; text-align:center; color:#fff; }
.vj-apply-box-title { font-family:var(--vj-font-d); font-size:1.15rem; font-weight:700; color:#fff; margin-bottom:8px; }
.vj-apply-box-sub { font-size:.83rem; color:#cbd5e1; margin-bottom:20px; line-height:1.55; }
.vj-apply-box .btn { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:var(--vj-r-full); font-weight:700; font-size:.9rem; text-decoration:none; }
.vj-apply-box .btn-solid { background:var(--vj-accent); color:var(--vj-primary); }
.vj-apply-box .btn-muted { background:var(--vj-bg); color:var(--vj-muted); }
.vj-trust-row { display:flex; flex-direction:column; gap:8px; margin-top:18px; text-align:left; border-top:1px solid rgba(255,255,255,.14); padding-top:16px; }
.vj-trust-item { display:flex; align-items:center; gap:9px; font-size:.78rem; color:#e2e8f0; }
.vj-trust-item .fa { width:16px; text-align:center; color:var(--vj-accent); }

.vj-card.vj-summary-card { padding:24px; }
.vj-summary-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--vj-border); font-size:.86rem; }
.vj-summary-row:last-child { border-bottom:none; }
.vj-summary-label { color:var(--vj-muted); }
.vj-summary-val { font-weight:700; color:var(--vj-primary); }
.vj-summary-val.is-accent { color:var(--vj-accent); }
.vj-summary-val.is-danger { color:var(--vj-danger); }

.vj-browse-more { margin-top:16px; text-align:center; }
.vj-browse-more .btn { width:100%; display:block; text-align:center; }

/* Application form */
.vj-form-section { margin-top:24px; background:var(--vj-card); border:1px solid var(--vj-border); border-radius:var(--vj-r-xl); padding:32px; box-shadow:var(--vj-shadow); position:relative; overflow:hidden; }
.vj-form-section::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--vj-accent),#0f766e); }
.vj-form-title { font-family:var(--vj-font-d); font-size:1.3rem; font-weight:700; color:var(--vj-primary); margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.vj-form-title .fa { color:var(--vj-accent); }
.vj-form-sub { font-size:.87rem; color:var(--vj-muted); margin-bottom:26px; line-height:1.5; }

.vj-form-step { padding:20px 0 22px; border-top:1px dashed var(--vj-border); }
.vj-form-step:first-of-type { border-top:none; padding-top:0; }
.vj-step-head { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.vj-step-num { flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--vj-primary); color:#fff; font-size:.78rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.vj-step-label { font-size:.78rem; font-weight:800; color:var(--vj-primary); text-transform:uppercase; letter-spacing:.6px; }

.vj-form-row { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:560px) { .vj-form-row.vj-form-row-2 { grid-template-columns:1fr 1fr; } }
.vj-form-group { margin-bottom:18px; }
.vj-form-row .vj-form-group { margin-bottom:0; }
.vj-form-group label { display:block; font-size:.85rem; font-weight:700; color:var(--vj-primary); margin-bottom:7px; }
.vj-form-group label .vj-required { color:var(--vj-danger); }
.vj-input, .vj-textarea {
    width:100%; padding:12px 15px; border:1.5px solid var(--vj-border); border-radius:var(--vj-r-lg);
    font-size:.92rem; font-family:inherit; color:var(--vj-text); background:var(--vj-bg);
    transition:border-color var(--vj-trans), box-shadow var(--vj-trans); box-sizing:border-box;
}
.vj-input:focus, .vj-textarea:focus { outline:none; border-color:var(--vj-accent); box-shadow:0 0 0 4px rgba(0,201,167,.15); background:var(--vj-card); }
.vj-textarea { min-height:140px; resize:vertical; line-height:1.6; }
.vj-form-hint { font-size:.78rem; color:var(--vj-muted); margin-top:6px; }

/* Custom file upload control */
.vj-file-drop { position:relative; border:2px dashed var(--vj-border); border-radius:var(--vj-r-lg); background:var(--vj-bg); padding:22px 18px; text-align:center; transition:border-color var(--vj-trans), background var(--vj-trans); }
.vj-file-drop:hover { border-color:var(--vj-accent); }
.vj-file-drop.vj-has-file { border-style:solid; border-color:var(--vj-accent); background:rgba(0,201,167,.06); }
.vj-file-drop input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.vj-file-drop-inner { display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; }
.vj-file-drop-icon { font-size:1.4rem; color:var(--vj-muted); }
.vj-has-file .vj-file-drop-icon { color:var(--vj-accent); }
.vj-file-drop-text { font-size:.87rem; color:var(--vj-primary); }
.vj-file-drop-name { font-weight:700; color:var(--vj-primary); word-break:break-all; }
.vj-file-drop-hint { font-size:.76rem; color:var(--vj-muted); }

.vj-form-submit {
    width:100%; padding:15px; margin-top:6px;
    background:linear-gradient(135deg,var(--vj-accent),#0f9d85); color:var(--vj-primary);
    border:none; border-radius:var(--vj-r-full); font-size:1rem; font-weight:800; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:9px;
    box-shadow:0 10px 24px -8px rgba(0,201,167,.55);
    transition:opacity var(--vj-trans), transform var(--vj-trans), box-shadow var(--vj-trans);
}
.vj-form-submit:hover { transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(0,201,167,.65); }
.vj-form-submit:disabled { opacity:.7; cursor:not-allowed; transform:none; }

.vj-alert { display:flex; align-items:center; gap:10px; padding:13px 17px; border-radius:var(--vj-r-lg); font-size:.875rem; font-weight:600; margin-bottom:20px; }
.vj-alert-error { background:#fef2f2; border:1.5px solid #fca5a5; color:#dc2626; }

.vj-already-applied { background:#d1fae5; border:1.5px solid #34d399; border-radius:var(--vj-r-xl); padding:32px 28px; text-align:center; margin-top:24px; }
.vj-already-applied-icon { font-size:2rem; margin-bottom:10px; color:#059669; }
.vj-already-applied-title { font-family:var(--vj-font-d); font-size:1.15rem; font-weight:700; color:#065f46; margin-bottom:6px; }
.vj-already-applied-sub { font-size:.875rem; color:#047857; line-height:1.55; }
.vj-already-applied-sub a { color:#047857; text-decoration:underline; }

/* Not found state */
.vj-notfound { text-align:center; padding:60px 20px; max-width:520px; margin:0 auto; }
.vj-notfound-icon { font-size:2.6rem; margin-bottom:12px; color:var(--vj-muted); }
.vj-notfound-title { font-family:var(--vj-font-d); font-size:1.4rem; color:var(--vj-primary); margin-bottom:8px; }
.vj-notfound-copy { color:var(--vj-muted); margin-bottom:24px; }
.vj-debug-box { text-align:left; background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:12px 16px; border-radius:8px; font-size:.82rem; margin-bottom:24px; }

/* Scroll fix
   Some shared header/mobile menu scripts lock scrolling and forget to
   undo it. Keep content scrollable regardless of leftover state. */
main#main-content, .vj-wrap, .vj-grid {
    overflow: visible !important;
    max-height: none !important;
}

/* Footer visibility guarantee. Header/footer markup lives outside this
   template, so this only guards against a leftover state class hiding it. */
footer, .site-footer, #footer, #site-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    clip: auto !important;
    clip-path: none !important;
    pointer-events: auto !important;
}