/* Questrial is their nav/side-menu face. It only ships in weight 400, so it
   can't go through the typography options (that loader asks Google for
   400–700 and a single missing weight fails the whole request). */
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");

/**
 * Bespoke Recruitment skin — mirrors bespoke.co.im (Andrew 2026-10-07).
 *
 * Lifted from their 2020 stylesheets: black header band with a 10px teal
 * #006f62 rule and the big "B" mark watermark, teal banner with a title
 * box over a 10px near-black rule, grey #e9e9e9 breadcrumb strip,
 * grey-gradient job tiles, bulleted side menu, near-black footer.
 * Type: Signika Negative headings (Google, as theirs); body is Myriad Pro
 * on their site via their own Typekit kit, which we can't reuse, so the
 * install's body font is Source Sans 3 (Adobe's open sibling of Myriad).
 *
 * Images in this folder (header mark, side bullet) are Bespoke's
 * own site assets. Scoped to body.th-skin-bespoke-recruitment and only
 * enqueued on the public site.
 */

.th-skin-bespoke-recruitment {
	--bs-teal: #006f62;
	--bs-teal-dark: #00463d;
	--bs-black: #000;
	--bs-ink: #0c0c0c;
	--bs-bar: #1a1a1a;
	--bs-crumb: #e9e9e9;
	--bs-rule: #dadada;
	--bs-tile-border: #d7d7d7;
	--bs-field: #f2f2f2;
	--bs-grey: #8a8a8a;
	--bs-row: 80rem; /* their 1280px layout width */
	--bs-nav-font: "Questrial", sans-serif;
	color: #000;
}

/* ===== Header: black band, grey logo, teal rule, "B" watermark ===== */
.th-skin-bespoke-recruitment .site-header {
	background: var(--bs-black);
	border-bottom: 10px solid var(--bs-teal);
	box-shadow: none;
}
.th-skin-bespoke-recruitment .header-container {
	max-width: var(--bs-row);
	min-height: 128px;
	background: url("header-mark.png") no-repeat right center;
	background-size: auto 100%;
}
/* Logo is uploaded charcoal (so it reads on white login pages and emails);
   on the black band it goes back to the light grey of their own header. */
.th-skin-bespoke-recruitment .header-logo .custom-logo,
.th-skin-bespoke-recruitment .footer-logo .custom-logo {
	filter: brightness(0) invert(0.72);
}
.th-skin-bespoke-recruitment .header-logo .custom-logo {
	max-height: 87px;
	width: auto;
}
.th-skin-bespoke-recruitment .site-title a {
	color: #fff;
}
.th-skin-bespoke-recruitment .primary-menu > li > a {
	color: #fff;
	font-family: var(--bs-nav-font);
	font-size: 16px;
	font-weight: 700;
	border-bottom: 3px solid transparent;
}
.th-skin-bespoke-recruitment .primary-menu > li > a:hover,
.th-skin-bespoke-recruitment .primary-menu > li > a:focus,
.th-skin-bespoke-recruitment .primary-menu > li.current-menu-item > a,
.th-skin-bespoke-recruitment .primary-menu > li.current_page_item > a {
	color: #fff;
	border-bottom-color: var(--bs-teal);
}
.th-skin-bespoke-recruitment .header-action-link {
	color: #fff;
	font-family: var(--bs-nav-font);
	font-weight: 700;
}
.th-skin-bespoke-recruitment .header-action-link:hover,
.th-skin-bespoke-recruitment .header-action-link:focus {
	color: #fff;
}
.th-skin-bespoke-recruitment .header-action-secondary {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	border-radius: 10px;
}
.th-skin-bespoke-recruitment .header-action-secondary:hover,
.th-skin-bespoke-recruitment .header-action-secondary:focus {
	background: #fff;
	border-color: #fff;
	color: #000;
}
.th-skin-bespoke-recruitment .header-action-primary {
	background: var(--bs-teal);
	border-color: var(--bs-teal);
	color: #fff;
	border-radius: 10px;
	box-shadow: none;
}
.th-skin-bespoke-recruitment .header-action-primary:hover,
.th-skin-bespoke-recruitment .header-action-primary:focus {
	background: var(--bs-teal-dark);
	border-color: var(--bs-teal-dark);
	color: #fff;
}
.th-skin-bespoke-recruitment .menu-icon-bar {
	background-color: #fff;
}

/* ===== Page body ===== */
.th-skin-bespoke-recruitment #container {
	background: #fff;
}
.th-skin-bespoke-recruitment h1,
.th-skin-bespoke-recruitment h2,
.th-skin-bespoke-recruitment h3,
.th-skin-bespoke-recruitment h4 {
	color: var(--bs-teal);
	font-weight: 400;
}
/* :where() keeps this at element-level specificity so it only colours plain
   links, never link-styled buttons (kb: brand contrast vars). */
:where(.th-skin-bespoke-recruitment) a {
	color: var(--bs-teal);
}
.th-skin-bespoke-recruitment .btn-primary,
.th-skin-bespoke-recruitment .button-primary,
.th-skin-bespoke-recruitment button[type="submit"],
.th-skin-bespoke-recruitment input[type="submit"] {
	background-color: var(--bs-teal);
	border-color: var(--bs-teal);
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
}
.th-skin-bespoke-recruitment .btn-primary:hover,
.th-skin-bespoke-recruitment .btn-primary:focus,
.th-skin-bespoke-recruitment button[type="submit"]:hover,
.th-skin-bespoke-recruitment input[type="submit"]:hover {
	background-color: var(--bs-teal-dark);
	border-color: var(--bs-teal-dark);
	color: #fff;
}
.th-skin-bespoke-recruitment .talent-community-banner {
	--color-talent-community: var(--bs-teal);
	--color-talent-community-contrast: #fff;
}

/* ===== Careers homepage (skins/bespoke-recruitment/front-page.php) ===== */
.bs-row {
	max-width: var(--bs-row);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
/* Their own banner photo is only 1500px wide (no larger original exists on
   bespoke.co.im), so it stretched soft on wide and retina screens and the
   phone screen in it was unreadable (Andrew 2026-10-07). Our own version
   instead: teal gradient + an outline of their "B" mark (banner-mark.svg),
   all vector so it's sharp at any size; title box kept from their design. */
.bs-banner {
	display: flex;
	align-items: center;
	height: 160px;
	background:
		url("banner-mark.svg") right center / auto 100% no-repeat,
		linear-gradient(90deg, var(--bs-teal-dark) 0%, var(--bs-teal) 60%, #00806f 100%);
	border-bottom: 10px solid var(--bs-ink);
	/* Their JS lines the title box up with the 1280px content edge. */
	padding-left: max(20px, calc((100% - var(--bs-row)) / 2 + 20px));
}
.bs-careers .bs-banner h1 {
	display: inline-block;
	margin: 0;
	padding: 10px 20px;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font-size: 36px;
	line-height: 1.2;
}
.bs-breadcrumb {
	background: var(--bs-crumb);
	padding: 10px 0;
	font-size: 14px;
	color: #666;
}
.bs-breadcrumb a {
	color: #333;
	text-decoration: none;
}
.bs-breadcrumb a:hover {
	text-decoration: underline;
}
.bs-body {
	padding: 15px 0 40px;
	background: url("header-mark.png") no-repeat right bottom;
	background-size: 300px auto;
}
.bs-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 0;
	align-items: start;
}
.bs-main {
	padding: 15px 15px 0 0;
}
.bs-careers h2 {
	font-size: 26px;
	margin: 0 0 10px;
	padding-top: 10px;
}
.bs-careers h3 {
	font-size: 18px;
}
.bs-intro {
	margin-bottom: 20px;
}
.bs-intro p,
.bs-intro li {
	font-size: 16px;
	line-height: 1.5;
}
/* The theme's reset strips paragraph gaps, list indents and bold/italic
   from editor content; put them back for the recruiter-editable intro. */
.bs-intro p,
.bs-intro ul,
.bs-intro ol {
	margin: 0 0 10px;
}
.bs-intro ul,
.bs-intro ol {
	padding-left: 1.25em;
}
.bs-intro strong,
.bs-intro b {
	font-weight: 700;
}
.bs-intro em,
.bs-intro i {
	font-style: italic;
}

/* Filter bar — their #refine_results */
.bs-refine {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 15px;
	scroll-margin-top: 20px;
}
.bs-refine select {
	flex: 1 1 200px;
	min-width: 0;
	padding: 10px;
	border: 0;
	border-radius: 0;
	background-color: var(--bs-field);
	font-size: 14px;
	color: #000;
}
.th-skin-bespoke-recruitment .bs-refine button[type="submit"] {
	padding: 10px 20px;
	border: 0;
	cursor: pointer;
}
.bs-clear {
	font-size: 14px;
}
.bs-key {
	margin-bottom: 20px;
	color: #000;
}
.bs-sort a {
	display: inline-block;
	padding: 0 10px;
	border-right: 1px solid #a6a6a6;
	text-decoration: none;
}
.bs-sort a:last-child {
	border-right: 0;
}
.bs-sort a.active {
	font-weight: 700;
}
.bs-empty {
	padding: 20px;
	border: 1px solid var(--bs-tile-border);
	background: linear-gradient(180deg, #fafafa 0%, #ececec 100%);
}

/* Job tiles — their #job_index */
.bs-jobs {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1% 30px;
	padding: 0;
	list-style: none;
}
.bs-jobs li {
	width: 31.33%;
	margin: 1%;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid var(--bs-tile-border);
	background: linear-gradient(180deg, #fafafa 0%, #ececec 100%);
}
.bs-jobs li a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	color: #000;
	text-decoration: none;
}
.bs-jobs li a:hover,
.bs-jobs li a:focus {
	background: rgba(0, 111, 98, 0.06);
}
.bs-job-type {
	display: block;
	min-height: 1.2em;
	color: var(--bs-teal);
	text-align: right;
	font-size: 14px;
	font-weight: 700;
}
.bs-careers .bs-jobs h3 {
	margin: 0;
	padding: 5px 0;
	color: #000;
	font-size: 18px;
	line-height: 1.3;
}
.bs-job-meta,
.bs-job-close {
	display: block;
	color: var(--bs-grey);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}
.bs-job-more {
	margin-top: auto;
	padding-top: 10px;
	color: var(--bs-teal);
	font-size: 14px;
	font-weight: 700;
	text-align: right;
}

/* Right-hand column — their #page_col_left (sits right of the main column) */
.bs-side {
	padding: 5px 5px 5px 20px;
	margin-left: 10px;
	border-left: 1px solid var(--bs-rule);
}
.bs-side-menu {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}
.bs-side-menu li {
	margin: 0;
	padding: 0;
	border-bottom: 2px solid #999;
}
.bs-side-menu a,
.bs-careers .bs-side-box h5 {
	display: block;
	padding: 10px 10px 10px 40px;
	background: url("side-bullet.png") no-repeat left center;
	color: #000;
	font-family: var(--bs-nav-font);
	font-size: 24px;
	font-weight: 400;
	text-decoration: none;
}
.bs-side-menu a:hover,
.bs-side-menu a:focus {
	color: var(--bs-teal);
}
.bs-side-box {
	margin-bottom: 30px;
}
.bs-careers .bs-side-box h5 {
	margin: 0 0 5px;
}
.bs-side-box p {
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 10px;
}
.bs-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 10px 15px;
	background: var(--bs-teal);
	color: #fff !important;
	font-weight: 700;
	border-radius: 10px;
	text-decoration: none;
}
.bs-btn:hover,
.bs-btn:focus {
	background: var(--bs-teal-dark);
}
.bs-call a {
	display: block;
	font-family: var(--bs-nav-font);
	font-size: 26px;
	letter-spacing: 2px;
	color: #000;
	text-decoration: none;
}

/* ===== Footer: near-black band, white legal strip ===== */
.th-skin-bespoke-recruitment .site-footer {
	background: #fff;
	border-top: 0;
}
.th-skin-bespoke-recruitment .footer-main {
	background: var(--bs-ink);
}
.th-skin-bespoke-recruitment .site-footer .container {
	max-width: var(--bs-row);
}
.th-skin-bespoke-recruitment .footer-main,
.th-skin-bespoke-recruitment .footer-main p,
.th-skin-bespoke-recruitment .footer-main li,
.th-skin-bespoke-recruitment .footer-main a,
.th-skin-bespoke-recruitment .footer-heading {
	color: #fff;
}
.th-skin-bespoke-recruitment .footer-heading {
	font-family: var(--bs-nav-font);
	font-weight: 400;
	letter-spacing: 1px;
}
.th-skin-bespoke-recruitment .footer-main a:hover,
.th-skin-bespoke-recruitment .footer-main a:focus {
	color: #fff;
	text-decoration: underline;
}
.th-skin-bespoke-recruitment .footer-tagline {
	color: #fff;
	opacity: 0.85;
}
.th-skin-bespoke-recruitment .footer-logo .custom-logo {
	width: 200px;
	max-width: 100%;
	height: auto;
}
.th-skin-bespoke-recruitment .social-link {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}
.th-skin-bespoke-recruitment .social-link:hover,
.th-skin-bespoke-recruitment .social-link:focus {
	background: var(--bs-teal);
	border-color: var(--bs-teal);
	color: #fff;
}
.th-skin-bespoke-recruitment .footer-copyright {
	background: #fff;
	border-top: 0;
}
.th-skin-bespoke-recruitment .copyright-text,
.th-skin-bespoke-recruitment .footer-legal-links a {
	color: #333;
	font-size: 13px;
}

/* ===== Smaller screens — breakpoints follow theirs (980 / 850 / 480) ===== */
@media (max-width: 980px) {
	.bs-banner { height: 140px; }
	.bs-jobs li { width: 48%; }
}
@media (max-width: 850px) {
	.th-skin-bespoke-recruitment .header-container { min-height: 96px; }
	.th-skin-bespoke-recruitment .header-logo .custom-logo { max-height: 64px; }
	.bs-cols { grid-template-columns: 1fr; }
	.bs-main { padding-right: 0; }
	/* Their site hides the side column on tablets; ours keeps Register and
	   the phone number, dropped below the vacancies. */
	.bs-side {
		margin: 20px 0 0;
		padding: 20px 0 0;
		border-left: 0;
		border-top: 1px solid var(--bs-rule);
	}
	.bs-side-menu { display: none; }
}
@media (max-width: 480px) {
	.bs-banner { height: 110px; }
	.bs-careers .bs-banner h1 { font-size: 28px; }
	.bs-jobs { margin: 0 0 30px; }
	.bs-jobs li { width: 100%; margin: 0 0 10px; }
	.bs-refine select,
	.bs-refine button { flex-basis: 100%; }
}