:root {
    /* Brand */
    --cp-navy: #12395c;
    --cp-navy-dark: #0d2c47;
    --cp-gold: #d2554f;
    --cp-gold-hover: #d2554f;

    /* Neutrals */
    --cp-white: #ffffff;
    --cp-gray-bg: #f4f6f8;
    --cp-card-bg: #f8f9fb;
    --cp-secondary-bg: #eef1f4;
    --cp-border: #e2e6ea;
    --cp-text: #1f2937;
    --cp-text-muted: #6b7280;

    /* Status */
    --cp-success: #16a34a;
    --cp-error: #dc2626;

    /* Category pills */
    --cp-category-student-bg: #e6f0ff;
    --cp-category-student-text: #1d4ed8;
    --cp-category-professional-bg: #fff4e0;
    --cp-category-professional-text: #b45309;

    /* Overlay / shadow */
    --cp-overlay-bg: rgba(13, 44, 71, 0.6);
    --cp-shadow: rgba(0, 0, 0, 0.25);
}

/* Landing */
.cp-landing-buttons { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.cp-btn { display:inline-block; padding:10px 20px; border-radius:6px; text-decoration:none; font-weight:600; cursor:pointer; border:none; font-size:14px; }
.cp-btn-primary { background:var(--cp-navy); color:var(--cp-white); }
.cp-btn-primary:hover { background:var(--cp-navy-dark); color:var(--cp-white); }
.cp-btn-secondary { background:var(--cp-secondary-bg); color:var(--cp-navy); }
.cp-disclaimer { font-size:12px; color:var(--cp-text-muted); max-width:700px; }

/* Search bar — single working "Search" button, no reset/refresh button */
.cp-search-bar { display:flex; gap:10px; flex-wrap:wrap; background:var(--cp-white); border:1px solid var(--cp-border); border-radius:10px; padding:14px; margin-bottom:16px; align-items:center; }
.cp-search-input { flex:1 1 220px; padding:10px 12px; border:1px solid var(--cp-border); border-radius:6px; font-size:14px; }
.cp-search-btn { background:var(--cp-navy); color:var(--cp-white); border:none; border-radius:6px; padding:10px 22px; height:42px; font-size:14px; font-weight:600; cursor:pointer; flex-shrink:0; }
.cp-search-btn:hover { background:var(--cp-navy-dark); }
.cp-results-count { color:var(--cp-text-muted); font-size:14px; margin:0 0 16px; }

/* Job listing grid — adapts to the ACTUAL rendered width of this section
   (not the browser viewport), so it works correctly inside narrower theme
   containers/sidebars too. Caps at 4 columns; never more, however wide the
   screen is; shrinks to fewer columns automatically as space allows. */
.cp-jobs-grid {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:18px;
}
.cp-no-jobs { color:var(--cp-text-muted); grid-column:1/-1; }

.cp-job-card { border:1px solid var(--cp-border); border-radius:10px; padding:20px; background:var(--cp-card-bg); display:flex; flex-direction:column; gap:14px; position:relative; }
.cp-category-pill { position:absolute; top:14px; right:14px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:4px 10px; border-radius:20px; }
.cp-category-student { background:var(--cp-category-student-bg); color:var(--cp-category-student-text); }
.cp-category-professional { background:var(--cp-category-professional-bg); color:var(--cp-category-professional-text); }
.cp-job-card-sm { background:var(--cp-card-bg); }
.cp-job-title { margin:0; font-size:18px; }
.cp-job-title a { color:var(--cp-navy); text-decoration:none !important; font-size: 20px; font-weight:700; }
.cp-job-title a:hover { color:var(--cp-gold); }

.cp-job-pills { display:flex; flex-direction:column; gap:6px; margin: 10px 0;}
.cp-pill { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--cp-border); background:var(--cp-white); color:var(--cp-navy); border-radius:6px; padding:6px 10px; font-size:16px; width:fit-content; }

.cp-view-job-btn { align-self:flex-start; margin-top:auto; text-decoration: none !important;}

/* Single job page */
.cp-job-single { max-width:1000px; }
.cp-job-hero { background:linear-gradient(135deg, var(--cp-navy), var(--cp-navy-dark)); color:var(--cp-white); border-radius:10px; padding:32px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; margin-bottom:28px; }
.cp-job-hero-title { margin:0; font-size:28px; color:var(--cp-white); }
.cp-job-hero .cp-btn-primary { background:#ffc107; color:var(--cp-navy-dark); }
.cp-job-hero .cp-btn-primary:hover { background:var(--cp-gold-hover); }

.cp-job-single-body { display:grid; grid-template-columns:2fr 1fr; gap:32px; align-items:start; }
.cp-job-single-main { line-height:1.7; color:var(--cp-text); }
.cp-job-single-main p { margin:0 0 1em; }

.cp-job-sidebar { border:1px solid var(--cp-border); border-radius:10px; padding:20px; background:var(--cp-gray-bg); position:sticky; top:20px; }
.cp-job-sidebar h4 { margin:0 0 14px; color:var(--cp-navy); border-bottom:1px solid var(--cp-border); padding-bottom:10px; }
.cp-job-sidebar p { margin:0 0 25px; font-size:14px; color:var(--cp-text); }
.cp-job-sidebar strong { color:#0f304d; font-size:12px; text-transform:uppercase; letter-spacing:0.4px; display:block; margin-bottom:2px; }
.cp-apply-btn-block { width:100%; text-align:center; margin-top:8px; padding: 16px 0;}

.cp-new-search-btn { display:inline-block; margin:28px 0; }

.cp-similar-jobs { margin-top:20px; }
.cp-similar-jobs h3 { color:var(--cp-navy); margin-bottom:16px; }

@media (max-width: 780px) {
    .cp-job-single-body { grid-template-columns:1fr; }
    .cp-job-sidebar { position:static; }
}

/* Modal */
.cp-modal-overlay { display:none; position:fixed; inset:0; background:var(--cp-overlay-bg); z-index:9999; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
.cp-modal-overlay.active { display:flex; }
.cp-modal { background:var(--cp-white); border-radius:10px; padding:28px; max-width:620px; width:100%; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 10px 40px var(--cp-shadow); }
.cp-modal-close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:26px; line-height:1; cursor:pointer; color:var(--cp-text-muted); }
.cp-modal-close:hover { color:var(--cp-navy); }

.cp-form-title { color:var(--cp-navy); margin-top:0; }

/* Student / Professional picker */
.cp-type-toggle { display:flex; gap:10px; margin:16px 0 20px; }
.cp-type-btn { flex:1; padding:14px; border:2px solid var(--cp-border); background:var(--cp-white); border-radius:8px; font-weight:600; color:var(--cp-navy); cursor:pointer; font-size:14px; }
.cp-type-btn:hover { border-color:var(--cp-gold); }
.cp-type-btn.active { border-color:var(--cp-navy); background:var(--cp-navy); color:var(--cp-white); }
.cp-type-form { margin-top:10px; }

.cp-applying-for { font-weight:600; color:var(--cp-gold); }

@media (max-width: 500px) {
    .cp-type-toggle { flex-direction:column; }
    .cp-search-bar { flex-direction:column; align-items:stretch; }
    .cp-search-input { flex:1 1 auto; }
    .cp-search-btn { width:100%; }
    .cp-modal { padding:20px 16px; }
    .cp-job-hero { padding:22px; }
    .cp-job-hero-title { font-size:22px; }
}