/**
 * Flexible Job Board — frontend styles.
 * Colors/radius come from CSS variables set inline from the Appearance settings.
 */

.fjb-featured,
.fjb-listing,
.fjb-detail { margin: 0 auto; max-width: 1200px; }

/* ---------- Featured ---------- */
.fjb-featured-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; }
.fjb-featured-title { margin: 0; font-size: 1.5rem; }
.fjb-see-all { color: var(--fjb-link, #f5a623); text-decoration: none; font-weight: 600; }
.fjb-see-all:hover { text-decoration: underline; }

.fjb-card-grid { display: grid; gap: 1.5rem; }
.fjb-cols-1 { grid-template-columns: 1fr; }
.fjb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.fjb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.fjb-cols-4 { grid-template-columns: repeat(4, 1fr); }

.fjb-card {
	background: var(--fjb-card-bg, #fff);
	border: 1px solid #e6e6e6;
	border-radius: var(--fjb-card-radius, 8px);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.fjb-card-title { margin: 0 0 .5rem; font-size: 1.2rem; }
.fjb-card-meta { margin-bottom: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.fjb-tagline { font-weight: 600; color: var(--fjb-secondary, #333); }
.fjb-chip { background: rgba(0,0,0,.05); border-radius: 999px; padding: .15rem .65rem; font-size: .82rem; }
.fjb-card-desc { color: #555; flex: 1 1 auto; }
.fjb-card-link, .fjb-read-more {
	display: inline-block; margin-top: 1rem; font-weight: 600;
	color: var(--fjb-link, #f5a623); text-decoration: none;
}
.fjb-card-link:hover, .fjb-read-more:hover { text-decoration: underline; }

/* ---------- Listing ---------- */
.fjb-breadcrumb { font-size: .9rem; margin: 1rem 0; color: #777; display: flex; gap: .4rem; flex-wrap: wrap; }
.fjb-breadcrumb a { color: var(--fjb-link, #f5a623); text-decoration: none; }
.fjb-count { font-weight: 600; margin: 1rem 0; }

.fjb-job-item {
	display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem;
	border: 1px solid #e6e6e6; border-radius: var(--fjb-card-radius, 8px);
	padding: 1.5rem; margin-bottom: 1.25rem; background: var(--fjb-card-bg, #fff);
}
.fjb-job-item.no-sidebar { grid-template-columns: 1fr; }
.fjb-job-title { margin: 0 0 .5rem; }
.fjb-job-aside { border-left: 1px solid #eee; padding-left: 1.5rem; }

.fjb-meta-table { width: 100%; border-collapse: collapse; }
.fjb-meta-table th { text-align: left; padding: .35rem .5rem .35rem 0; color: #666; white-space: nowrap; vertical-align: top; font-weight: 600; }
.fjb-meta-table td { padding: .35rem 0; }

/* ---------- Detail ---------- */
.fjb-detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; }
.fjb-detail-title { margin-top: 0; }
.fjb-detail-section { margin: 1.5rem 0; }
.fjb-detail-section ul { padding-left: 1.25rem; }
.fjb-detail-aside { position: sticky; top: 1rem; align-self: start; }

/* ---------- Apply form ---------- */
.fjb-apply, .fjb-apply-external {
	border: 1px solid #e6e6e6; border-radius: var(--fjb-card-radius, 8px);
	padding: 1.5rem; background: var(--fjb-card-bg, #fff);
}
.fjb-apply h2, .fjb-apply-external h2 { margin-top: 0; }
.fjb-row { margin-bottom: 1rem; display: flex; flex-direction: column; }
.fjb-row label { font-weight: 600; margin-bottom: .35rem; }
.fjb-row input[type="text"], .fjb-row input[type="email"], .fjb-row textarea {
	width: 100%; padding: .6rem .75rem; border: 1px solid #ccc; border-radius: 6px; font: inherit;
}
.fjb-file-wrap { display: flex; align-items: stretch; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }
.fjb-file-display { flex: 1 1 auto; border: 0; padding: .6rem .75rem; }
.fjb-browse { background: rgba(0,0,0,.06); padding: .6rem 1rem; cursor: pointer; font-weight: 600; }
.fjb-file-input { display: none; }
.fjb-file-info { color: #777; }
.fjb-file-error, .fjb-consent-error { color: #c0392b; font-size: .85rem; }
.fjb-consent label { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; flex-direction: row; }
.fjb-submit, .fjb-apply-btn {
	background: var(--fjb-button, #f5a623); color: var(--fjb-button-text, #fff);
	border: 0; border-radius: 6px; padding: .8rem 1.5rem; font-weight: 700; cursor: pointer;
	text-decoration: none; display: inline-block;
}
.fjb-submit:hover, .fjb-apply-btn:hover { filter: brightness(.95); }
.fjb-form-messages { margin-top: 1rem; }
.fjb-form-messages .fjb-success { color: #1e7e34; font-weight: 600; }
.fjb-form-messages .fjb-error { color: #c0392b; }

/* ---------- Search ---------- */
.fjb-search { margin: 1rem 0 1.5rem; }
.fjb-search-fields { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.fjb-search-field { display: flex; flex-direction: column; flex: 1 1 180px; }
.fjb-search-field label { font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.fjb-search-field input { padding: .6rem .75rem; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
.fjb-search-btn { background: var(--fjb-button, #f5a623); color: var(--fjb-button-text, #fff); border: 0; border-radius: 6px; padding: .65rem 1.5rem; font-weight: 700; cursor: pointer; }

/* ---------- Banner ---------- */
.fjb-banner { background-size: cover; background-position: center; min-height: 200px; display: flex; align-items: center; justify-content: center; border-radius: var(--fjb-card-radius, 8px); background-color: var(--fjb-secondary, #333); }
.fjb-banner-title { color: #fff; font-size: 2rem; text-align: center; }

/* ---------- Pagination ---------- */
.fjb-pagination { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1.5rem; }
.fjb-pagination .page-numbers { padding: .45rem .8rem; border: 1px solid #ddd; border-radius: 6px; text-decoration: none; color: var(--fjb-secondary, #333); }
.fjb-pagination .page-numbers.current { background: var(--fjb-primary, #f5a623); color: #fff; border-color: var(--fjb-primary, #f5a623); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.fjb-detail-grid { grid-template-columns: 1fr; }
	.fjb-job-item { grid-template-columns: 1fr; }
	.fjb-job-aside { border-left: 0; padding-left: 0; border-top: 1px solid #eee; padding-top: 1rem; }
	.fjb-cols-3, .fjb-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.fjb-card-grid { grid-template-columns: 1fr; }
}