/*!
 * Single Job post styling — applies ONLY to single `pkc-job` posts
 * (e.g. /pkc-job/senior-manager-direct-tax-leadership-role/).
 * Enqueued conditionally via is_singular('pkc-job'). Loaded LAST so it
 * wins the cascade.
 *
 * Page structure (single-pkc-job.php + content-pkc-job.php):
 *   .container.my-5
 *   └── .row > .col-12
 *       └── main.site-main
 *           └── .container-fluid
 *               └── article
 *                   ├── header.entry-header > h1.entry-title.arc-cs-ttl
 *                   └── section
 *                       └── .container.my-5 > .row
 *                           ├── .col-md-8 > .entry-content (job description)
 *                           └── .col-md-4 > h3 + .cform (CF7 application form)
 */

/* ─────────────────────────────────────────────────────────────────
 * 0. Page wrapper + grid
 * ───────────────────────────────────────────────────────────────── */
body.single-pkc-job > .container.my-5 {
    background: #f6f8fb !important;
    padding: 36px 0 56px !important;
    margin: 0 !important;
    max-width: 100% !important;
}
body.single-pkc-job > .container.my-5 > .row {
    max-width: 1200px;
    margin: 0 auto !important;
}
body.single-pkc-job .container-fluid {
    padding: 0 !important;
    max-width: 100% !important;
}
/* The inner section has its own .container.my-5; reset its margin so it
   doesn't stack with the outer page padding. */
body.single-pkc-job section > .container.my-5 {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 1200px !important;
}

/* ─────────────────────────────────────────────────────────────────
 * 1. Entry header — job title
 * ───────────────────────────────────────────────────────────────── */
body.single-pkc-job article > .entry-header {
    background: #fff;
    border: 1px solid #eef1f7;
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 6px 20px rgba(0, 38, 122, 0.06);
    margin-bottom: 24px;
}
body.single-pkc-job .entry-header .entry-title,
body.single-pkc-job .entry-title.arc-cs-ttl {
    font-size: 2rem !important;          /* 32px */
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: #0d1937 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: none !important;
    border: 0 !important;
}
body.single-pkc-job .entry-header::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: #f2c433;
    border-radius: 2px;
    margin-top: 12px;
}

/* ─────────────────────────────────────────────────────────────────
 * 2. Two-column layout: description (left) + apply form (right)
 *    The inner CF7 form uses col-4/col-8 which is way too narrow
 *    inside the col-md-4 parent — text spills out. Stack instead.
 * ───────────────────────────────────────────────────────────────── */
body.single-pkc-job section > .container > .row {
    gap: 24px;
    margin: 0 !important;
}
body.single-pkc-job section > .container > .row > .col-12.col-md-8 {
    flex: 1 1 calc(66% - 12px);
    max-width: calc(66% - 12px);
    padding: 0 !important;
}
body.single-pkc-job section > .container > .row > .col-12.col-md-4 {
    flex: 1 1 calc(34% - 12px);
    max-width: calc(34% - 12px);
    padding: 0 !important;
}
@media (max-width: 991px) {
    body.single-pkc-job section > .container > .row > .col-12.col-md-8,
    body.single-pkc-job section > .container > .row > .col-12.col-md-4 {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * 3. Left column — job description card
 * ───────────────────────────────────────────────────────────────── */
body.single-pkc-job .entry-content {
    background: #fff !important;
    border: 1px solid #eef1f7;
    border-radius: 14px;
    padding: 32px !important;
    box-shadow: 0 4px 14px rgba(0, 38, 122, 0.05);
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: #2c2f36 !important;
}
body.single-pkc-job .entry-content p {
    margin: 0 0 16px !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: #2c2f36 !important;
}
body.single-pkc-job .entry-content h2 {
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: #0d1937 !important;
    line-height: 1.3 !important;
    margin: 26px 0 12px !important;
    padding: 0 0 8px !important;
    border-bottom: 2px solid #f2c433 !important;
    display: inline-block !important;
    text-transform: none !important;
    font-family: 'Poppins', sans-serif !important;
}
body.single-pkc-job .entry-content h3,
body.single-pkc-job .entry-content h4 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #1f2a44 !important;
    line-height: 1.35 !important;
    margin: 22px 0 10px !important;
    text-transform: none !important;
    font-family: 'Poppins', sans-serif !important;
    border: 0 !important;
}
body.single-pkc-job .entry-content ul,
body.single-pkc-job .entry-content ol {
    padding-left: 0 !important;
    margin: 0 0 18px !important;
    list-style: none !important;
}
body.single-pkc-job .entry-content ul li,
body.single-pkc-job .entry-content ol li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px !important;
    font-weight: 400 !important;
    line-height: 1.7;
    color: #2c2f36;
    font-size: 1rem !important;
}
body.single-pkc-job .entry-content ul li {
    padding-left: 24px;
}
body.single-pkc-job .entry-content ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 7px;
    height: 7px;
    background: #f2c433;
    border-radius: 50%;
}
body.single-pkc-job .entry-content ol { counter-reset: pkc-job-counter; }
body.single-pkc-job .entry-content ol li {
    padding-left: 40px;             /* 24px circle + 16px gap = clears the marker */
    min-height: 28px;
    margin-bottom: 16px !important;
    line-height: 1.7;
}
body.single-pkc-job .entry-content ol li::before {
    counter-increment: pkc-job-counter;
    content: counter(pkc-job-counter);
    position: absolute;
    left: 0; top: 3px;
    width: 24px; height: 24px;
    background: #00267a;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
/* Make any <strong>/<b> at the start of a list item read as a sub-heading
   (most job posts open each numbered item with a bold category label). */
body.single-pkc-job .entry-content ol li > strong:first-child,
body.single-pkc-job .entry-content ol li > b:first-child {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1f2a44;
    margin: 0 0 6px;
    line-height: 1.35;
}
body.single-pkc-job .entry-content a {
    color: #1a4cd0 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(26, 76, 208, 0.35) !important;
    text-underline-offset: 3px;
}
body.single-pkc-job .entry-content a:hover {
    color: #00267a !important;
    text-decoration-color: currentColor !important;
}
body.single-pkc-job .entry-content strong { color: #0d1937; }

/* Department badge — only render when the job has a department set.
   The template always outputs `<p class="job_dept">…meta…</p>`, so
   when no department is configured we end up with an empty <p> that
   would otherwise show as an empty yellow pill. Hide via :empty +
   the whitespace-only variant via :has(text only).               */
body.single-pkc-job .entry-content .job_dept,
body.single-pkc-job p.job_dept {
    display: inline-block !important;
    background: #fff8e1 !important;
    color: #00267a !important;
    border: 1px solid #f2c433;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 0 18px !important;
    font-family: 'Poppins', sans-serif !important;
}
body.single-pkc-job .entry-content .job_dept:empty,
body.single-pkc-job p.job_dept:empty {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
 * 4. Right column — Apply here CF7 form card
 *    The form ships an internal `.row > .col-4 (label) + .col-8 (input)`
 *    grid that crashes inside the narrow sidebar column. Stack labels
 *    above inputs and turn the whole thing into a clean card.
 * ───────────────────────────────────────────────────────────────── */
body.single-pkc-job .col-md-4 > h3.lxd,
body.single-pkc-job .col-md-4 > h3:first-child {
    font-size: 1.25rem !important;       /* 20px — was 40px hero */
    font-weight: 800 !important;
    color: #0d1937 !important;
    text-align: center !important;
    margin: 0 0 16px !important;
    padding: 0 0 12px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-family: 'Poppins', sans-serif !important;
    border-bottom: 1px solid #eef1f7;
}
body.single-pkc-job .cform {
    background: #fff !important;
    border: 1px solid #e5e9f2;
    border-radius: 14px;
    padding: 24px 22px;
    box-shadow: 0 6px 18px rgba(0, 38, 122, 0.08);
    position: sticky;
    top: 100px;
}
body.single-pkc-job .cform .wpcf7-form .row > .col-12,
body.single-pkc-job .cform form.wpcf7-form > .row > .col-12 {
    padding: 0 !important;
}
/* Make each label row stack (label on top, input below, full width) */
body.single-pkc-job .cform .wpcf7-form .row {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 0 12px !important;
    gap: 4px;
}
body.single-pkc-job .cform .wpcf7-form .row > .col-4,
body.single-pkc-job .cform .wpcf7-form .row > .col-8 {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
body.single-pkc-job .cform .wpcf7-form .row > .col-4 p,
body.single-pkc-job .cform .wpcf7-form .row > .col-8 p {
    margin: 0 !important;
    padding: 0 !important;
}
body.single-pkc-job .cform label {
    display: block !important;
    font-size: 0.8125rem !important;     /* 13px */
    font-weight: 600 !important;
    color: #4a505d !important;
    margin: 0 0 4px !important;
    font-family: 'Poppins', sans-serif !important;
    text-transform: none !important;
}
body.single-pkc-job .cform .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}
body.single-pkc-job .cform input[type=text],
body.single-pkc-job .cform input[type=email],
body.single-pkc-job .cform input[type=tel],
body.single-pkc-job .cform input[type=file],
body.single-pkc-job .cform select,
body.single-pkc-job .cform textarea {
    width: 100% !important;
    max-width: 100% !important;
    background: #f9fafd !important;
    border: 1px solid #d6dce8 !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    font-size: 0.9375rem !important;
    font-family: 'Poppins', sans-serif !important;
    color: #1f2a44 !important;
    height: auto !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.single-pkc-job .cform input:focus,
body.single-pkc-job .cform select:focus,
body.single-pkc-job .cform textarea:focus {
    outline: none !important;
    background: #fff !important;
    border-color: #00267a !important;
    box-shadow: 0 0 0 3px rgba(0, 38, 122, 0.12) !important;
}
body.single-pkc-job .cform input[type=file] {
    padding: 8px 12px !important;
    background: #fff !important;
    cursor: pointer;
}
/* The "(only PDF <2MB)" helper text */
body.single-pkc-job .cform label + span[style*="70%"] {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
    display: block !important;
    margin-bottom: 4px;
}
/* Submit button row + anchor wrapper */
body.single-pkc-job .cform .row > .col-12.text-center {
    margin-top: 8px;
    padding-top: 14px !important;
    border-top: 1px solid #eef1f7;
}
body.single-pkc-job .cform .row > .col-12.text-center > p {
    margin: 0 !important;
}
body.single-pkc-job .cform a:has(input.wpcf7-submit),
body.single-pkc-job .cform p:has(input.wpcf7-submit) {
    display: block;
    text-decoration: none !important;
}
body.single-pkc-job .cform input.wpcf7-submit {
    width: 100% !important;
    background: #f2c433 !important;
    color: #1f2a44 !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 12px 22px !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    font-family: 'Poppins', sans-serif !important;
    cursor: pointer;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 14px rgba(242, 196, 51, 0.30);
    transition: background .15s ease, transform .15s ease;
}
body.single-pkc-job .cform input.wpcf7-submit:hover {
    background: #ffd84a !important;
    transform: translateY(-1px);
}
/* Inline validation/response messages */
body.single-pkc-job .cform .wpcf7-response-output {
    font-size: 0.8125rem;
    border-radius: 6px;
    margin: 12px 0 0 !important;
    padding: 10px 14px !important;
}

/* ─────────────────────────────────────────────────────────────────
 * 5. Responsive
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    body.single-pkc-job .cform {
        position: static;       /* unstick the form when stacked under */
        margin-top: 8px;
    }
}
@media (max-width: 575px) {
    body.single-pkc-job > .container.my-5 { padding: 24px 0 36px !important; }
    body.single-pkc-job article > .entry-header { padding: 22px 20px; border-radius: 10px; }
    body.single-pkc-job .entry-content { padding: 22px 20px !important; border-radius: 10px; }
    body.single-pkc-job .cform { padding: 20px 18px; border-radius: 10px; }
    body.single-pkc-job .entry-header .entry-title,
    body.single-pkc-job .entry-title.arc-cs-ttl { font-size: 1.625rem !important; }
    body.single-pkc-job .entry-content h2 { font-size: 1.125rem !important; }
}