/*
Theme Name: Yoko Co JobsFirst Main
Theme URI: 
Author: Yoko Co
Author URI: 
Description: A custom theme for JobsFirst by Yoko Co.
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yoko-jobsfirst-main
Tags: 

/*****************************/
/********** GENERAL **********/
/*****************************/

.max-50 {
	max-width: 50px;
}
.max-100 {
	max-width: 100px;
}

/*****************************/
/*********** BANNER **********/
/*****************************/
@media screen and (min-width: 992px) {
	.banner-main-image {
		position: relative;
	}
	.banner-main-image::after {
		content: '';
		display: block;
		position: absolute;
		background-image: url(/wp-content/uploads/sites/2/2026/04/ripple-banner-1.png);
		background-repeat: no-repeat;
		background-size: cover;
		height: 300px;
		width: 250px;
		bottom: 0px;
		right: 0px;
		z-index: 1;
	}
}

/*****************************/
/*********** BLOCKS **********/
/*****************************/

/* LOGO GRID */
@media screen and (max-width: 767px) {
	.logo-grid figure {
		text-align: center;
	}
}

/* PROCESS OVERVIEW */
@media screen and (max-width: 767px) {
	.process-overview .wp-block-group.is-layout-grid {
		max-width: 250px;
	}
}

/* CARD FLIPS */
.wp-block-yoko-card-flip .wp-block-yoko-card-flip-back,
.wp-block-yoko-card-flip .wp-block-yoko-card-flip-front {
	border: none;
}

/* CARD GRIDS */
.is-style-alt-background .wp-block-post .card-group.is-style-alt-background {
	background-color: var(--wp--preset--color--core-background);
}

/* ICON BUTTONS */
.icon-buttons a.wp-element-button span {
	display: none;
}
.icon-buttons a.wp-element-button:hover::before {
	background-color: var(--wp--preset--color--paragraph);
}
.wp-block-button[class*=has-icon__] .wp-block-button__link {
	display: block;
}
.solution-nav .wp-block-button.is-style-underline .wp-block-button__link span::before,
.wp-block-button.is-style-underline[class*=has-icon__] .wp-block-button__link span::before {
	display: none;
}
.wp-block-button[class*=has-icon__] .wp-block-button__link .wp-block-button__link-icon {
	margin-right: 10px;
}

/* READ MORE BUTTONS */
a.wp-block-read-more:hover {
	background-color: var(--wp--preset--color--heading);
}

/* AQL CAROUSEL */
.js-carousel-layout .swiper-button-next.has-custom-icon:hover svg path,
.js-carousel-layout .swiper-button-prev.has-custom-icon:hover svg path {
	stroke: var(--wp--preset--color--heading);
}

/* LISTS */
/* ul {
	list-style: none;
}
ul li:not(.has-children) {
	display: flex;
	align-items: center;
}
ul li::before {
	content: '';
	display: block;
	height: 100%;
	width: 2px;
	background-color: var(--wp--preset--color--heading);
	margin-right: 10px;
} */
ul li::marker,
ol li::marker {
	color: var(--wp--preset--color--feature);
	font-size: 1em;
	font-weight: 700;
}

/*** LOCAL DRIVER LOCATION COLORS ***/
/* NEPA */
.wp-block-post.location-jobsfirst-nepa .wp-block-group.has-feature-background-color {
	background-color: var(--wp--preset--color--data-3) !important;
	color: var(--wp--preset--color--paragraph) !important;
}
.wp-block-post.location-jobsfirst-nepa hr {
	border-color: var(--wp--preset--color--data-3) !important;
}
/* SNV */
.wp-block-post.location-jobsfirst-snv .wp-block-group.has-feature-background-color {
	background-color: var(--wp--preset--color--data-5) !important;
	color: var(--wp--preset--color--paragraph) !important;
}
.wp-block-post.location-jobsfirst-snv hr {
	border-color: var(--wp--preset--color--data-5) !important;
}
/* NYC */
.wp-block-post.location-jobsfirst-nyc .wp-block-group.has-feature-background-color {
	background-color: var(--wp--preset--color--data-1) !important;
	color: var(--wp--preset--color--paragraph) !important;
}
.wp-block-post.location-jobsfirst-nyc hr {
	border-color: var(--wp--preset--color--data-1) !important;
}

/*****************************/
/************ CTAS ***********/
/*****************************/
@media screen and (min-width: 992px) {
	.cta-single,
	.cta-triple,
	.cta-single .wp-block-columns,
	.cta-triple .wp-block-columns {
		position: relative;
	}
	.cta-single::after {
		content: '';
		display: block;
		position: absolute;
		background-image: url(/wp-content/uploads/2026/04/ripple-cta-single.png);
		background-repeat: no-repeat;
		background-size: cover;
		height: 100%;
		width: 600px;
		bottom: 0px;
		right: 0px;
		z-index: 1;
	}
	.cta-triple::after {
		content: '';
		display: block;
		position: absolute;
		background-image: url(/wp-content/uploads/2026/04/ripple-cta-triple.png);
		background-repeat: no-repeat;
		background-size: cover;
		height: 100%;
		width: 600px;
		bottom: 0px;
		right: 0px;
		z-index: 1;
	}
	.cta-single .wp-block-columns,
	.cta-triple .wp-block-columns {
		z-index: 2;
	}
}

/*****************************/
/********* FSE FIXES *********/
/*****************************/

/* Fixes default gaps between blocks when stacking groups or rows at the highest level */
:where(.wp-site-blocks) > * {margin-block-start: 0; margin-block-end: 0;}


/*****************************/
/******** RESPONSIVE *********/
/*****************************/

/* Handles responsive left-right padding by default by target top level groups. Can be undone by using .esc-pad class on a top level group */
@media screen and (max-width: 1240px) {
	.wp-site-blocks > .wp-block-group:not(.esc-pad), 
	.wp-site-blocks > .wp-block-template-part > .wp-block-group:not(.esc-pad), 
	.wp-block-template-part > .wp-block-template-part > .wp-block-group:not(.esc-pad), 
	.wp-block-template-part > .wp-block-template-part > .wp-block-template-part > .wp-block-group:not(.esc-pad),
	.wp-site-blocks > .entry-content > .wp-block-group:not(.esc-pad),
	.wp-site-blocks > .entry-content > .wp-block-columns:not(.esc-pad)  {
		padding-left: 20px; 
		padding-right: 20px;
	}
}
 
/* utility classes for responsive layouts on medium devices */
@media screen and (max-width: 1024px) {
    body .is-layout-flex.md-reverse {flex-direction: row-reverse; justify-content: flex-end;} 
    body .is-layout-flex.md-stack {flex-direction: column;}  
    body .is-layout-flex.md-stack.md-reverse {flex-direction: column-reverse; justify-content: flex-end;} 
    body .is-layout-flex.md-stack  > :is(*, div) {display: block; width: 100%; margin-left: 0; margin-right: 0;} 
    body .wp-block-columns.is-layout-flex.md-reverse {flex-direction: column-reverse; justify-content: flex-end;}
}

/* utility classes for responsive layouts on small devices */
@media screen and (max-width: 781px) {
    body .is-layout-flex.mobile-reverse, body .is-layout-flex.sm-reverse {flex-direction: row-reverse; justify-content: flex-end;} 
    body .is-layout-flex.mobile-stack, body .is-layout-flex.sm-stack {flex-direction: column;} 
    body .is-layout-flex.mobile-stack.mobile-reverse, body .is-layout-flex.sm-stack.sm-reverse {flex-direction: column-reverse; justify-content: flex-end;} 
    body .is-layout-flex.mobile-stack  > :is(*, div), body .is-layout-flex.sm-stack  > :is(*, div) {display: block; width: 100%; margin-left: 0; margin-right: 0;} 
    body .wp-block-columns.is-layout-flex.mobile-reverse, body .wp-block-columns.is-layout-flex.sm-reverse {flex-direction: column-reverse; justify-content: flex-end;}
}

/*****************************/
/******* DESKTOP NAV *********/
/*****************************/

.wp-block-navigation .wp-block-navigation-item:hover {
	color: var(--wp--preset--color--feature);
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	border-top: 3px solid var(--wp--preset--color--heading);
	text-transform: none;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover {
	background-color: var(--wp--preset--color--paragraph);
	color: var(--wp--preset--color--core-background);
}

/* SEARCH BLOCK */
header .wp-block-search__button {
	background-color: transparent;
}
header .wp-block-search__button svg {
	height: 32px;
	min-height: 32px;
	min-width: 32px;
	width: 32px;
	fill: var(--wp--preset--color--heading);
}
@media screen and (min-width: 768px) {
	header .wp-block-search .wp-block-search__inside-wrapper {
		flex-direction: row-reverse;
		align-items: center;
		gap: 8px;
		position: relative;
	}
	header .wp-block-search .wp-block-search__input {
		border-radius: 0px;
		border: 1px solid var(--wp--preset--color--paragraph);
		background-color: var(--wp--preset--color--core-background);
		color: var(--wp--preset--color--paragraph);
		position: absolute;
		right: 0px;
		top: 35px;
		z-index: 1;
	}
	header .wp-block-search.wp-block-search__button-only .wp-block-search__button {
		padding: 0px;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}
	header .wp-block-search:active .wp-block-search__input,
	header .wp-block-search:focus .wp-block-search__input {
		border: 1px solid var(--wp--preset--color--paragraph);
	}
	.wp-block-search .wp-block-search__inside-wrapper,
	.wp-block-search .wp-block-search__inside-wrapper input,
	.wp-block-search__button {
		border-radius: var(--wp--preset--border-radius--small);
	}
	.wp-block-search .wp-block-search__inside-wrapper {
		border-color: var(--wp--preset--color--paragraph);
	}
}

/*****************************/
/******** MOBILE NAV *********/
/*****************************/

/* The following rules address numerous spacing and positioning issues with the mobile navigation */
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
    max-width: 100vw; 
    overflow: hidden; 
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    padding: 0px 10px; 
    background-color: var(--wp--preset--color--alt-background) !important;
    border-radius: 3px; 
    width: calc(100% - 20px);
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
    padding: 10px 24px; 
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
    padding: 10px;   
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
    gap: 0px; 
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 24px!important; 
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
    width: 100%; 
}

/*****************************/
/*********** MISC ************/
/*****************************/
 
/* Fixes default gaps when using prefixes on MFBPro */
.wp-block-mfb-meta-field-block.is-display-inline-block .prefix {
    margin-inline-end: var(--mfb--gap, 0);
}

/*****************************/
/********* FACETWP ***********/
/*****************************/

.facetwp-type-fselect .fs-label-wrap .fs-label {
	text-wrap: wrap;
}
.facetwp-type-fselect .fs-label-wrap {
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--paragraph);
}
.facetwp-type-fselect .fs-label-wrap:hover {
	border-color: var(--wp--preset--color--heading);
}
.facetwp-type-fselect .fs-label-wrap .fs-label {
	padding: var(--wp--preset--spacing--minimal) 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--paragraph-xsmall);
	text-transform: uppercase;
	letter-spacing: 10%;
	font-weight: 600;
}

.facetwp-type-fselect .fs-label-wrap .fs-arrow {
	content: '';
	display: inline-block;
	width: 15px;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.376221 0.329315L7.37622 8.32724L14.3762 0.329315' stroke='%23262626'/%3E%3C/svg%3E%0A");
	border: 0;
}

.fs-dropdown {
	background-color: var(--wp--preset--color--paragraph) !important;
	color: var(--wp--preset--color--core-background);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--paragraph-xsmall);
	font-weight: 600;
	border-color: var(--wp--preset--color--paragraph) !important;
}
.fs-dropdown .fs-option {
	padding: var(--wp--preset--spacing--minimal);
}
.fs-dropdown .fs-option:hover,
.fs-wrap.single .fs-option.selected {
	background-color: var(--wp--preset--color--heading) !important;
}

.facetwp-type-radio {
	display: flex;
	gap: var(--wp--preset--spacing--small);
}
.facetwp-type-radio .facetwp-radio,
.facetwp-type-radio .facetwp-radio:first-of-type,
.facetwp-type-radio .facetwp-radio.checked {
	background-image: none;
	background: none;
	padding: 0;
	margin-bottom: 0;
	height: fit-content;
	line-height: 1rem;
}
.facetwp-type-radio .facetwp-radio:first-of-type {
	margin-top: 3px;
}
.facetwp-type-radio .facetwp-radio .facetwp-display-value,
.facetwp-type-radio .facetwp-radio:first-of-type {
	position: relative;
	padding: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--paragraph-xsmall);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 10%;
}
.facetwp-type-radio .facetwp-radio .facetwp-display-value::after,
.facetwp-type-radio .facetwp-radio:first-of-type::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 100%;
	height: 2px;
	background-color: var(--wp--preset--color--paragraph);
}
.facetwp-type-radio .facetwp-radio:hover .facetwp-display-value::after,
.facetwp-type-radio .facetwp-radio.checked .facetwp-display-value::after,
.facetwp-type-radio .facetwp-radio.checked:first-of-type::after {
	background-color: var(--wp--preset--color--feature);
}
.facetwp-type-radio .facetwp-radio .facetwp-counter {
	display: none;
}

.facetwp-type-sort select {
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--paragraph);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--paragraph-xsmall);
	text-transform: uppercase;
	letter-spacing: 10%;
	font-weight: 600;
	padding: var(--wp--preset--spacing--minimal) 0;
}