/* Career page. Header/footer/buttons come from home-base.css and site-footer.css. */

.career-page { padding: 24px 0 64px; }
.career-page .container { width: min(1320px, calc(100% - 48px)); max-width: none; padding-inline: 24px; }
.career-page .hide { display: none; }

.career-header-img { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 0 32px; }

/* Jobs table */
.career-table { width: 100%; margin: 0; border-collapse: collapse; }
.career-table th { padding: 14px 12px; font-size: 15px; font-weight: 700; color: var(--csm-navy, #1b2a6b); border-bottom: 2px solid var(--csm-line, #e5e8ef); white-space: nowrap; }
.career-table td { padding: 16px 12px; font-size: 15px; vertical-align: middle; border-bottom: 1px solid var(--csm-line, #e5e8ef); color: var(--csm-ink, #172033); }
.career-table td:first-child a { color: var(--csm-navy, #1b2a6b); font-weight: 600; text-decoration: none; }
.career-table td:first-child a:hover { text-decoration: underline; }
.career-table td:last-child, .career-table th:last-child { text-align: right; white-space: nowrap; }
.career-table td:nth-child(3), .career-table th:nth-child(3) { white-space: nowrap; }
.career-table .csm-nav-btn { padding: 8px 18px; font-size: 13px; }

/* Application form */
#careerFormContainer { max-width: 860px; margin: 48px auto 0; padding: 32px; border: 1px solid var(--csm-line, #e5e8ef); border-radius: 18px; background: #fff; box-shadow: 0 6px 20px rgba(27, 42, 107, 0.08); }
#careerFormContainer #sendmessage, #careerFormContainer #errormessage { display: none; }
#careerFormContainer .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
#careerFormContainer .form-row > .col-md-12 { grid-column: 1 / -1; padding-left: 0; padding-right: 0; }
#careerFormContainer .form-group { margin-bottom: 16px; }
#careerFormContainer .form-control, #careerFormContainer .form-select { padding: 11px 14px; font-size: 15px; border: 1px solid var(--csm-line, #d5dae6); border-radius: 10px; box-shadow: none; }
#careerFormContainer .form-control:focus { border-color: var(--csm-navy, #1b2a6b); box-shadow: 0 0 0 3px rgba(27, 42, 107, 0.12); }
#careerFormContainer textarea.form-control { resize: vertical; }
#careerFormContainer .career-file-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--csm-muted, #667085); }
#careerFormContainer .validation { display: none; margin-top: 4px; font-size: 13px; color: #c62828; }
#careerFormContainer .csm-nav-btn { padding: 12px 32px; font-size: 15px; }

/* Job details modal */
#jobDetailModal .modal-content, #commonDisplayModal .modal-content { border: 0; border-radius: 18px; }
#jobDetailModal .modal-title, #commonDisplayModal .modal-title { font-size: 1.25rem; font-weight: 700; color: var(--csm-navy, #1b2a6b); }

@media (max-width: 767px) {
  .career-page .container { width: calc(100% - 32px); padding-inline: 0; }
  #careerFormContainer { padding: 20px; margin-top: 32px; }
  #careerFormContainer .form-row { grid-template-columns: 1fr; }
  .career-table th, .career-table td { padding: 10px 6px; font-size: 13px; }
  .career-table .csm-nav-btn { padding: 6px 12px; font-size: 12px; }
}

/* Job description is admin-entered HTML: keep its own fonts/colours/highlights exactly as authored, only keep it inside the modal. */
#jobDetailModalContent { overflow-wrap: anywhere; }
#jobDetailModalContent * { max-width: 100%; }
#jobDetailModalContent img { height: auto !important; max-height: 280px; object-fit: contain; }
#jobDetailModalContent table { width: 100%; }
/* let the dialog size to its content (Bootstrap's scrollable dialog is always full height) */
#jobDetailModal .modal-dialog-scrollable { height: auto; }
#jobDetailModal .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3rem); }

/* Buttons: rounded-rectangle (8px) like the menu promo buttons, not pills */
.career-page .csm-nav-btn, #careerFormContainer .csm-nav-btn, #jobDetailModal .csm-nav-btn, #commonDisplayModal .csm-nav-btn { border-radius: 8px; }