/* ── Prateek Careers Manager — Frontend CSS v3 ─────────────────────────── */

/* Brand color is injected dynamically via wp_head as --pcm-brand */
:root { --pcm-brand: #f0a500; }

/* ── Hero Banner ─────────────────────────────────────────────────────────── */
.pcm-hero-banner {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    /* full-bleed: break out of theme content container */
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
}

.pcm-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.08); /* very light wash — keeps photo vivid */
}

.pcm-hero-title {
    position: absolute;
    top: 24px;
    left: 40px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #1a2e44;
    background: rgba(255,255,255,0.82);
    padding: 6px 16px;
    border-radius: 2px;
    z-index: 2;
}

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.pcm-page-wrap {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
}

/* ── Job listings table ──────────────────────────────────────────────────── */
.pcm-careers-wrap { font-family: Arial, sans-serif; }
.pcm-careers-heading { text-align:center; font-size:22px; font-weight:600; color:#1a2e44; margin-bottom:20px; }
.pcm-listing-table { width:100%; border-collapse:collapse; font-size:14px; }
.pcm-listing-table thead tr { background:#c8cdd1; }
.pcm-listing-table th,
.pcm-listing-table td { padding:10px 12px; border:1px solid #dde1e4; text-align:left; }
.pcm-listing-table tbody tr:nth-child(even) { background:#f9fafb; }
.pcm-listing-table tbody tr:hover { background:#eef4fb; }
.pcm-jlink { color:#1b6ca8; text-decoration:none; font-weight:500; }
.pcm-jlink:hover { text-decoration:underline; }
.pcm-jcode { color:#888; font-size:12px; font-weight:normal; }
.pcm-no-jobs { padding:20px; text-align:center; color:#666; }
.pcm-general-note { margin-top:18px; font-size:13px; color:#555; border-top:1px solid #dde1e4; padding-top:12px; }
.pcm-general-note a { color:var(--pcm-brand); font-weight:600; }

/* ── Job detail ──────────────────────────────────────────────────────────── */
.pcm-detail-tagline { text-align:center; font-size:22px; font-weight:600; color:#1a2e44; margin-bottom:22px; }
.pcm-detail-card { border:1px solid #dde1e4; border-radius:4px; overflow:hidden; }
.pcm-detail-hdr { background:#c8cdd1; font-weight:700; font-size:15px; padding:10px 16px; color:#222; }
.pcm-detail-tbl { width:100%; border-collapse:collapse; font-size:14px; }
.pcm-detail-tbl th { width:200px; padding:10px 16px; background:#fafbfc; border-bottom:1px solid #eee; font-weight:600; color:#444; text-align:left; vertical-align:top; }
.pcm-detail-tbl td { padding:10px 16px; border-bottom:1px solid #eee; vertical-align:top; }
.pcm-detail-tbl td ul { margin:0; padding-left:18px; }
.pcm-detail-tbl td li { margin-bottom:5px; }
.pcm-apply-wrap { padding:16px; }

/* ── Buttons — all use var(--pcm-brand) ──────────────────────────────────── */
.pcm-btn-apply,
.pcm-btn-submit {
    display:         inline-block;
    background:      var(--pcm-brand);
    color:           #fff;
    border:          none;
    padding:         10px 30px;
    border-radius:   4px;
    font-size:       14px;
    font-weight:     700;
    text-decoration: none;
    cursor:          pointer;
    letter-spacing:  .3px;
    transition:      filter .2s, background .2s;
}
.pcm-btn-apply:hover,
.pcm-btn-submit:hover {
    filter: brightness(0.88);
    color:  #fff;
}
.pcm-btn-submit { padding:11px 40px; font-size:15px; }

.pcm-closed { padding:16px; color:#c0392b; font-weight:600; }
.pcm-back { margin-top:14px; font-size:13px; }
.pcm-back a { color:#1b6ca8; text-decoration:none; }
.pcm-back a:hover { text-decoration:underline; }

/* ── Application form ────────────────────────────────────────────────────── */
.pcm-form-wrap { font-family:Arial,sans-serif; }
.pcm-form-hdr  { background:#c8cdd1; font-weight:700; font-size:15px; padding:10px 16px; border-radius:3px 3px 0 0; }
.pcm-apply-form { border:1px solid #dde1e4; border-top:none; padding:20px; background:#fff; }

.pcm-form-alert { background:#fdf0f0; border:1px solid #e74c3c; color:#c0392b; padding:10px 16px; border-radius:3px; margin-bottom:16px; font-size:14px; }

.pcm-frow { display:flex; flex-wrap:wrap; gap:14px 18px; margin-bottom:16px; }
.pcm-frow-readonly { background:#f8f9fa; padding:14px; border:1px solid #eee; border-radius:3px; margin-bottom:18px; }

.pcm-fg { display:flex; flex-direction:column; width:100%; }
.pcm-fg.pcm-half { width:calc(50% - 9px); }

.pcm-fg label { font-size:13px; font-weight:600; color:#333; margin-bottom:4px; }
.pcm-req { color:#e74c3c; }

.pcm-fg input,
.pcm-fg select,
.pcm-fg textarea {
    padding:8px 10px;
    border:1px solid #ccc;
    border-radius:3px;
    font-size:14px;
    width:100%;
    box-sizing:border-box;
    background:#fff;
    transition:border-color .2s, box-shadow .2s;
}
.pcm-fg input:focus,
.pcm-fg select:focus,
.pcm-fg textarea:focus {
    border-color:#1b6ca8;
    outline:none;
    box-shadow:0 0 0 2px rgba(27,108,168,.1);
}
.pcm-frow-readonly .pcm-fg input[readonly] { background:#eef2f6; color:#666; }

.pcm-ferr { color:#e74c3c; font-size:12px; margin-top:3px; }

.pcm-exp { display:flex; gap:10px; }
.pcm-exp select { flex:1; }

.pcm-fg small { font-size:11px; color:#888; margin-top:3px; }

.pcm-fsubmit { margin-top:10px; padding-top:16px; border-top:1px solid #eee; }

/* Invalid field highlight */
.pcm-field-invalid { border-color:#e74c3c !important; box-shadow:0 0 0 2px rgba(231,76,60,.12) !important; }

/* ── Thank You ───────────────────────────────────────────────────────────── */
.pcm-thankyou { text-align:center; padding:60px 20px; }
.pcm-ty-icon { width:70px;height:70px;background:#27ae60;color:#fff;font-size:34px;line-height:70px;border-radius:50%;margin:0 auto 20px; }
.pcm-thankyou h2 { font-size:26px;color:#1a2e44;margin-bottom:12px; }
.pcm-thankyou p { font-size:15px;color:#555;max-width:500px;margin:0 auto 24px; }

/* ── Error ───────────────────────────────────────────────────────────────── */
.pcm-error { color:#c0392b; font-weight:600; padding:20px 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:600px) {
    .pcm-hero-banner { height:240px; }
    .pcm-hero-title  { font-size:11px; left:16px; top:14px; }
    .pcm-fg.pcm-half { width:100%; }
    .pcm-detail-tbl th { width:120px; }
    .pcm-listing-table { font-size:13px; }
}