/* FF Jobs Board styles.
Canonical: ~/projects/ff-jobs/theme/jobs/board.css
Deployed: generatepress_child/jobs/board.css
The archive filter bar reuses the .job-filters* classes already styled in
the FF theme's Additional CSS (round-up filter bar) — do not restyle here. */
.ff-jobs-board__header { margin-bottom: 24px; }
.ff-jobs-board__strap { color: #555; max-width: 640px; }
/* Filter bar spacing: the base .job-filters styles live in the FF theme's
Additional CSS (shared with the round-up) — board pages add breathing room
above and below without touching the shared rules. */
.ff-jobs-board .job-filters { margin: 12px 0 44px 0; }
/* Country jump-nav + section headings — copied from the round-up's inline
_CSS (html_builder.py) so the board matches it exactly. */
/* Country chip card, grouped by region (2026-08-26): region label rows with
a uniform chip grid — equal widths, no ragged wrapping. */
/* Directory-style card (Jamie 2026-08-26): one COLUMN per region — region
label at the top, its countries listed vertically beneath as plain links. */
.country-nav {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px 24px; padding: 16px 20px;
border: 1px solid #ddd; border-radius: 12px; margin: 18px 0 44px 0;
}
.country-nav__label { grid-column: 1 / -1; font-weight: 600; }
.country-nav__region-label {
display: block; margin-bottom: 6px;
font-size: .78em; font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: #777;
}
.country-nav__chips a {
display: block; padding: 3px 0; text-decoration: none;
font-size: .95em; line-height: 1.35;
}
.country-nav__chips a:hover { text-decoration: underline; }
/* Region + country headings: regions are the h2 tier, countries h3 within. */
.region-heading {
font-size: 1.5em; margin: 56px 0 4px; padding-bottom: 8px;
border-bottom: 2px solid #e5e5e5;
}
.ff-jobs-board .region-heading:first-of-type { margin-top: 38px !important; }
.country-heading { font-size: 1.15em; margin: 34px 0 14px; }
.country-heading[id] { scroll-margin-top: 90px; }
.ff-jobs-board__more { margin: 14px 0 0 0; font-weight: 600; }
.ff-jobs-board__more a { text-decoration: none; }
.ff-jobs-board__more a:hover { text-decoration: underline; }
.back-to-top { margin: 14px 0 0 0; }
.back-to-top a { text-decoration: none; }
.back-to-top a:hover { text-decoration: underline; }
/* 3-column card grid, matching the round-up's .gb-grid look (Jamie 2026-08-14:
single column showed too few jobs at once on desktop). */
.ff-jobs-board__list {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0;
}
@media (max-width: 980px) { .ff-jobs-board__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .ff-jobs-board__list { grid-template-columns: 1fr; } }
/* Card styling copied from the round-up's inline _CSS (.gb-container +
.job-meta + the View Job button) so the two surfaces match exactly.
Class stays ff-job-card: gb-container belongs to the GenerateBlocks
plugin and would pick up its styles unpredictably outside post content. */
.ff-job-card {
padding: 20px; border: 1px solid #ccc; border-radius: 12px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, .1);
}
.ff-job-card h3 a { text-decoration: none; }
.ff-job-card .job-meta { font-size: 0.85em; color: #555; margin: 2px 0 8px 0; }
.ff-view-job {
display: inline-block; background: #0366d6; color: #fff !important;
padding: 13px; border-radius: 6px; text-decoration: none;
}
.ff-view-job:hover, .ff-view-job:focus { color: #fff !important; }
/* Single listing: the round-up card, one-up. Width capped so a full-width
card doesn't look stretched next to the 1/3-width archive cards. */
.ff-job-single__breadcrumb { font-size: .9em; margin-bottom: 12px; }
.ff-job-single__card { max-width: 720px; margin-top: 24px; }
.ff-job-single__card h1 { font-size: 1.6em; margin: 0 0 12px; }
.ff-job-single__content { margin: 14px 0 18px; }
.ff-job-single__content h3 { font-size: 1.05em; margin: 18px 0 6px; }
.ff-job-single__content h3:first-child { margin-top: 0; }
.ff-job-single__content p { margin: 0 0 10px; }
.ff-job-salary-context {
background: #f2f8fc; border-left: 4px solid #006caa; border-radius: 0 8px 8px 0;
padding: 12px 16px; font-size: .92em; margin: 16px 0 20px;
}
.ff-job-related { max-width: 100%; margin-top: 44px; }
.ff-job-related h2 { margin-bottom: 4px; }
.ff-job-single__disclaimer { color: #777; font-size: .85em; max-width: 560px; margin-top: 18px; }
.ff-job-single__dates { color: #777; font-size: .85em; }
.ff-job-expired-notice {
border: 1px solid #d97706; background: #fffbeb; border-radius: 10px;
padding: 14px 18px; margin-bottom: 20px;
}
.ff-jobs-signup {
margin: 0 0 32px; padding: 20px 24px; border: 1px solid #006caa;
border-radius: 12px; background: #f2f8fc;
}
.ff-jobs-signup h2 { margin: 0 0 12px; font-size: 1.25em; }
.ff-jobs-signup > p { margin: 0 0 12px; color: #444; }
/* MC4WP form internals (form 505427): email + button inline, checkboxes below.
The child theme's dist/css/main.css boxes EVERY .mc4wp-form (grey bg,
shadow, 1.6rem !important padding, 520px centred) for the newsletter
forms — neutralise it here, scoped, so those forms are untouched.
!important is required to beat the theme's own !important rules. */
.ff-jobs-signup .mc4wp-form {
background: transparent !important; box-shadow: none !important;
border: 0 !important; border-radius: 0 !important;
padding: 0 !important; margin: 0 !important; max-width: none !important;
}
/* One text size throughout the box; heading excepted. */
.ff-jobs-signup, .ff-jobs-signup > p, .ff-jobs-signup label,
.ff-jobs-signup input[type="email"], .ff-jobs-signup input[type="submit"] {
font-size: 15px !important; font-family: inherit !important;
}
/* Form 505427 markup: email
submit
. Flex order: email + button row one, fieldset full-width
below, with browser default fieldset/legend spacing zeroed (it created a
visible gap under "Also subscribe me to:"). */
.ff-jobs-signup .mc4wp-form-fields { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.ff-jobs-signup .mc4wp-form-fields p { margin: 0 !important; }
.ff-jobs-signup .mc4wp-form-fields p:nth-of-type(1) { order: 2; }
.ff-jobs-signup .mc4wp-form-fields p:nth-of-type(2) { order: 3; }
.ff-jobs-signup .mc4wp-form-fields fieldset {
order: 1; flex-basis: 100%;
border: 0 !important; padding: 0 !important; margin: 0 0 2px !important;
min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
}
.ff-jobs-signup .mc4wp-form-fields legend {
padding: 0 !important; margin: 0 !important; float: left;
font-size: 15px; color: #444; margin-right: 12px !important;
}
.ff-jobs-signup .mc4wp-form-fields fieldset label { margin: 0 !important; }
.ff-jobs-signup input[type="email"] {
box-sizing: border-box; height: 44px; padding: 0 14px !important;
border: 1px solid #ccc !important; border-radius: 8px;
min-width: 280px !important; width: auto !important; max-width: none !important;
margin: 0 !important; background: #fff;
}
.ff-jobs-signup input[type="submit"], .ff-jobs-signup button[type="submit"] {
box-sizing: border-box; height: 44px;
background-color: #0366d6 !important; color: #fff !important;
border: 0; border-radius: 6px; padding: 0 24px !important;
font-weight: 600; cursor: pointer;
width: auto !important; margin: 0 !important;
}
.ff-jobs-signup input[type="submit"]:hover { background-color: #024ea2 !important; }
.ff-jobs-signup label { color: #444; margin: 0 14px 0 0; font-weight: normal; }
.ff-jobs-signup input[type="checkbox"] { margin-right: 6px; vertical-align: -2px; }
.ff-jobs-signup .mc4wp-response { font-size: 15px; margin-top: 8px; }
@media (max-width: 600px) {
.ff-jobs-signup input[type="email"] { min-width: 0; width: 100%; }
}
.ff-jobs-board__pagination { margin: 28px 0; }
.ff-jobs-board__none { font-style: italic; color: #555; }
@media (max-width: 600px) {
.ff-job-card { padding: 14px 16px; }
}