/**
 * Right Fit Recruitment skin — mirrors rightfitrecruitment.co.im (Andrew 2026-10-22).
 *
 * Palette from their theme's own CSS variables: orange #e88c42 (secondary /
 * links), charcoal #404041 (global colour, CTA buttons), ink #0c121d
 * (footer, menu text), light #f9fafc (alt sections). Their site font is
 * Montserrat (free), set through the install's typography options.
 *
 * Text on brand fills uses the contrast variables from
 * talenthub_brand_contrast_css — never hard-coded white. Orange is too
 * light for small text on white (2.4:1), so small orange text uses
 * --rf-orange-text instead. Scoped to body.th-skin-rightfit; only
 * enqueued on the public site.
 */

.th-skin-rightfit {
	--rf-orange: var(--color-primary, #e88c42);
	--rf-on-orange: var(--color-primary-contrast, #0f172a);
	--rf-orange-text: #a65a1d;
	--rf-charcoal: var(--color-secondary, #404041);
	--rf-on-charcoal: var(--color-secondary-contrast, #fff);
	--rf-ink: #0c121d;
	--rf-light: #f9fafc;
	--rf-rule: #e6e8ec;
	--rf-contain: 1200px;
	color: var(--rf-charcoal);
}

/* ===== Header: white bar, full-colour logo, ink menu, orange underline ===== */
.th-skin-rightfit .site-header {
	background: #fff;
	border-bottom: 1px solid var(--rf-rule);
}
.th-skin-rightfit .header-container {
	max-width: var(--rf-contain);
	height: 96px;
}
.th-skin-rightfit .header-logo .custom-logo {
	max-height: 64px;
	width: auto;
}
.th-skin-rightfit .primary-menu > li > a {
	color: var(--rf-ink);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	border-bottom: 2px solid transparent;
}
.th-skin-rightfit .primary-menu > li > a:hover,
.th-skin-rightfit .primary-menu > li > a:focus,
.th-skin-rightfit .primary-menu > li.current-menu-item > a,
.th-skin-rightfit .primary-menu > li.current_page_item > a {
	color: var(--rf-ink);
	border-bottom-color: var(--rf-orange);
}
.th-skin-rightfit .header-action-link {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.5px;
}
.th-skin-rightfit .header-action-secondary {
	color: var(--rf-charcoal);
	border: 2px solid var(--rf-charcoal);
	background: transparent;
}
.th-skin-rightfit .header-action-secondary:hover,
.th-skin-rightfit .header-action-secondary:focus {
	background: var(--rf-charcoal);
	border-color: var(--rf-charcoal);
	color: var(--rf-on-charcoal);
}
/* Their CTA buttons: charcoal, turning orange on hover. */
.th-skin-rightfit .header-action-primary {
	background: var(--rf-charcoal);
	border: 2px solid var(--rf-charcoal);
	color: var(--rf-on-charcoal);
	box-shadow: none;
}
.th-skin-rightfit .header-action-primary:hover,
.th-skin-rightfit .header-action-primary:focus {
	background: var(--rf-orange);
	border-color: var(--rf-orange);
	color: var(--rf-on-orange);
}
.th-skin-rightfit .menu-icon-bar {
	background-color: var(--rf-charcoal);
}

/* ===== Page body ===== */
.th-skin-rightfit h1,
.th-skin-rightfit h2,
.th-skin-rightfit h3 {
	color: var(--rf-charcoal);
}
/* :where() keeps plain-link colouring at element specificity so it never
   outranks a link-styled button's own text colour (kb: brand contrast). */
:where(.th-skin-rightfit) a {
	color: var(--rf-orange-text);
}

/* ===== Homepage (skins/rightfit/front-page.php) ===== */
.rf-contain {
	max-width: var(--rf-contain);
	margin: 0 auto;
	padding: 0 20px;
}
.rf-eyebrow {
	color: var(--rf-orange-text);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.rf-home .rf-title {
	font-size: 35px;
	font-weight: 500;
	line-height: 45px;
	margin: 0 0 20px;
}
.rf-title span {
	display: block;
}
.rf-lead {
	font-size: 18px;
	line-height: 1.8;
	max-width: 40em;
	margin: 0 auto 40px;
}

/* Buttons — sizes from their vc_btn3 / cta_btn, charcoal → orange on hover. */
.th-skin-rightfit .rf-btn {
	display: inline-block;
	padding: 12px 22px;
	border: 2px solid var(--rf-charcoal);
	border-radius: 4px;
	background: var(--rf-charcoal);
	color: var(--rf-on-charcoal);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.th-skin-rightfit .rf-btn:hover,
.th-skin-rightfit .rf-btn:focus {
	background: var(--rf-orange);
	border-color: var(--rf-orange);
	color: var(--rf-on-orange);
}
.th-skin-rightfit .rf-btn-orange {
	background: var(--rf-orange);
	border-color: var(--rf-orange);
	color: var(--rf-on-orange);
}
.th-skin-rightfit .rf-btn-orange:hover,
.th-skin-rightfit .rf-btn-orange:focus {
	background: var(--rf-charcoal);
	border-color: var(--rf-charcoal);
	color: var(--rf-on-charcoal);
}
.th-skin-rightfit .rf-btn-outline {
	background: transparent;
	color: var(--rf-charcoal);
}
.th-skin-rightfit .rf-btn-outline:hover,
.th-skin-rightfit .rf-btn-outline:focus {
	background: var(--rf-charcoal);
	border-color: var(--rf-charcoal);
	color: var(--rf-on-charcoal);
}
.th-skin-rightfit .rf-btn-on-dark {
	background: var(--rf-orange);
	border-color: var(--rf-orange);
	color: var(--rf-on-orange);
	flex-shrink: 0;
}
.th-skin-rightfit .rf-btn-on-dark:hover,
.th-skin-rightfit .rf-btn-on-dark:focus {
	background: transparent;
	border-color: var(--rf-on-charcoal);
	color: var(--rf-on-charcoal);
}

/* Hero — text left, their isometric "shapes into the wall" art right. */
.rf-hero {
	background: linear-gradient(180deg, #fff 0%, var(--rf-light) 100%);
	border-bottom: 1px solid var(--rf-rule);
	overflow: hidden;
}
.rf-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	padding-top: 70px;
	padding-bottom: 70px;
}
/* Orange headline as on their homepage (Andrew 2026-10-22). Sizes are
   their .cspt-ihbox-style-hsbox h2 (35/45, weight 500), as are .rf-title. */
.rf-home .rf-hero-title {
	color: var(--rf-orange);
	font-size: 35px;
	font-weight: 500;
	line-height: 45px;
	margin: 0 0 16px;
}
.rf-hero-text {
	font-size: 18px;
	line-height: 1.8;
	max-width: 30em;
	margin: 0 0 28px;
}
.rf-hero-art img {
	display: block;
	width: 100%;
	height: auto;
}
.rf-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}
/* Shared search row, restyled for a light hero. */
.rf-hero .hero-search-form {
	max-width: 620px;
	margin: 0;
	animation: none;
}
.rf-hero .search-fields {
	border: 1px solid var(--rf-rule);
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(12, 18, 29, 0.08);
}
.rf-hero .search-fields .search-input:focus,
.rf-hero .search-fields .search-select:focus {
	background: rgba(232, 140, 66, 0.06);
}
.th-skin-rightfit .search-button {
	background: var(--rf-charcoal);
	color: var(--rf-on-charcoal);
	border-radius: 4px;
}
.th-skin-rightfit .search-button:hover,
.th-skin-rightfit .search-button:focus {
	background: var(--rf-orange);
	color: var(--rf-on-orange);
	outline-color: var(--rf-orange);
}

/* Opportunities — the shared Featured Jobs section, in Right Fit colours. */
.rf-jobs .featured-jobs-section {
	background: #fff;
	padding: 80px 0;
}
.rf-jobs .section-title {
	color: var(--rf-charcoal);
	font-size: 35px;
	font-weight: 500;
	line-height: 45px;
}
.rf-jobs .job-card {
	border-top: 4px solid var(--rf-orange);
}

/* Who we are — three columns with an orange rule. */
.rf-about {
	background: var(--rf-light);
	padding: 80px 0;
	text-align: center;
}
.rf-about-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 20px 0 30px;
	text-align: left;
}
.rf-about-col {
	position: relative;
	background: #fff;
	padding: 34px 30px;
	border-top: 4px solid var(--rf-orange);
	box-shadow: 0 6px 24px rgba(12, 18, 29, 0.06);
}
.rf-about-icon {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 56px;
	height: 56px;
}
.rf-home .rf-about-col h3 {
	font-size: 22px;
	font-weight: 500;
	margin: 0 0 12px;
}
.rf-about-col p {
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
}
.th-skin-rightfit .rf-link {
	font-weight: 700;
	text-decoration: none;
}
.th-skin-rightfit .rf-link:hover,
.th-skin-rightfit .rf-link:focus {
	text-decoration: underline;
}

/* "Connect with us and submit your C.V. today…" — their charcoal CTA row. */
.rf-band {
	background: var(--rf-charcoal);
	color: var(--rf-on-charcoal);
	padding: 36px 0;
}
.rf-band-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.rf-home .rf-band-title {
	color: var(--rf-on-charcoal);
	font-size: 20px;
	font-weight: 600;
	margin: 0;
}

/* Our values — four icons. */
.rf-values {
	padding: 90px 0;
	text-align: center;
}
.rf-values-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}
.rf-value img {
	width: 96px;
	height: 96px;
	margin: 0 auto 18px;
	display: block;
}
.rf-home .rf-value h3 {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 10px;
}
.rf-value p {
	font-size: 15px;
	line-height: 1.7;
	margin: 0;
}

/* Testimonials. */
.rf-testimonials {
	background: var(--rf-light);
	padding: 80px 0 90px;
	text-align: center;
}
.rf-quotes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	margin-top: 20px;
}
.rf-quote {
	position: relative;
	margin: 0;
	padding: 44px 34px 30px;
	background: #fff;
	text-align: left;
	box-shadow: 0 6px 24px rgba(12, 18, 29, 0.06);
}
.rf-quote::before {
	content: "\201C";
	position: absolute;
	top: 6px;
	left: 26px;
	font-size: 72px;
	line-height: 1;
	color: var(--rf-orange);
	font-family: Georgia, serif;
}
.rf-quote blockquote {
	margin: 0;
}
.rf-quote blockquote p {
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 18px;
}
.rf-quote figcaption {
	font-weight: 600;
	color: var(--rf-charcoal);
}

/* ===== Footer: their near-black band with the white logo ===== */
.th-skin-rightfit .site-footer {
	background: var(--rf-ink);
	border-top: 4px solid var(--rf-orange);
}
.th-skin-rightfit .footer-main,
.th-skin-rightfit .footer-copyright {
	background: transparent;
}
.th-skin-rightfit .footer-copyright {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Fixed skin colour (not a brand option), so white text is safe here. */
.th-skin-rightfit .site-footer,
.th-skin-rightfit .site-footer p,
.th-skin-rightfit .site-footer li,
.th-skin-rightfit .site-footer a,
.th-skin-rightfit .footer-heading,
.th-skin-rightfit .copyright-text {
	color: #fff;
}
.th-skin-rightfit .site-footer a:hover,
.th-skin-rightfit .site-footer a:focus {
	color: var(--rf-orange);
}
.th-skin-rightfit .footer-heading {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 15px;
}
/* Their footer uses the all-white version of the logo. */
.th-skin-rightfit .footer-logo .custom-logo {
	filter: brightness(0) invert(1);
	width: 220px;
	max-width: 100%;
	height: auto;
}
.th-skin-rightfit .social-link {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}
.th-skin-rightfit .social-link:hover,
.th-skin-rightfit .social-link:focus {
	background: var(--rf-orange);
	border-color: var(--rf-orange);
	color: var(--rf-on-orange);
}

/* ===== Smaller screens ===== */
@media (max-width: 1024px) {
	.rf-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rf-about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.th-skin-rightfit .header-container { height: 76px; }
	.th-skin-rightfit .header-logo .custom-logo { max-height: 46px; }
	.rf-hero-inner {
		grid-template-columns: 1fr;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.rf-hero-art { order: -1; max-width: 420px; margin: 0 auto; }
	.rf-home .rf-hero-title { font-size: 30px; line-height: 38px; }
	.rf-hero-text { font-size: 17px; }
	.rf-home .rf-title,
	.rf-jobs .section-title { font-size: 28px; line-height: 38px; }
	.rf-about, .rf-values, .rf-testimonials, .rf-jobs .featured-jobs-section { padding: 56px 0; }
	.rf-band-inner { flex-direction: column; text-align: center; }
	.rf-home .rf-band-title { font-size: 20px; }
	.rf-values-grid, .rf-quotes { grid-template-columns: 1fr; }
}