/*
	CAREERS.CSS
	enqueued in header.php at the top
	styles specific to the new career page
*/

/*--------------------------------------------------------------
Hero Banner
--------------------------------------------------------------*/
.page-careers-page .hero-image {
	background-image: url('/wp-content/uploads/hero-squiggle-blue.svg');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 90%;
    max-height: 700px;
}

.page-careers-page .hero-image::after {
	content:url('/wp-content/uploads/Hero-Circle-B_1x.webp');
	position:relative;
	z-index:998;
	right: -64%;
    top: -210px;
}

/*--------------------------------------------------------------
Join our team row
--------------------------------------------------------------*/
.page-careers-page .join-our-team-shape-bg {
	background: url('/wp-content/uploads/rectangle_5171_4x-scaled.webp') no-repeat center center; /* Light blue solid color */
	background-size: contain;
}

.page-careers-page .join-our-team-row .wp-block-image img {
    padding-left: 40px;
}

.page-careers-page .join-our-team-row p {
	vertical-align: middle;
	padding: 0 100px 0 40px;
}

.page-careers-page .join-our-team p > span,
.page-careers-page .join-our-team-row p > span {
	color: #3063df;
	font-weight: bold;
}

/*--------------------------------------------------------------
Tan row
--------------------------------------------------------------*/
.page-careers-page .tan-color-row {
	background-image: url('/wp-content/uploads/values-yellow-squiggle.svg');
	background-repeat: no-repeat;
	background-position: center top 30%;
    background-size: contain;
}

/*--------------------------------------------------------------
Our values in action
--------------------------------------------------------------*/
.page-careers-page #h-our-values-in-action {
	margin-top: 40px !important;
}

/*--------------------------------------------------------------
Our values cards
--------------------------------------------------------------*/
:root :where(.our-values-cards .is-layout-flex) {
    gap: 50px;
}

.page-careers-page .our-values-cards {
	margin: 0 auto;
    max-width: 1200px;
}

.page-careers-page .our-values-cards .card {
	min-height: 465px;
	padding: 20px 45px;
}

.page-careers-page .our-values-cards .card p {
	min-height: 110px;
}

.page-careers-page .our-values-cards .card h4 {
	min-height: 135px;
	word-break: normal;
	overflow-wrap: normal;
}

/*--------------------------------------------------------------
Carousel
--------------------------------------------------------------*/
.page-careers-page .our-values-carousel #career_cards {
	max-width: 370px;
    margin: 0 auto;
	text-align: center;
}

.page-careers-page .our-values-carousel #career_cards.owl-carousel .owl-item {
	max-width: 370px;
	padding: 0 !important;
}

.page-careers-page .our-values-carousel #career_cards.owl-carousel .owl-item .card {
	width: 100%;
	max-width: 300px;
	padding: 30px;
	margin: 0 auto;
	color: #fff;
	background-color: #3d66d9;
}

.page-careers-page .our-values-carousel #career_cards.owl-carousel .owl-item .card .card-title {
	color: #fff;
}

/*--------------------------------------------------------------
Benefits That Support Your Success
--------------------------------------------------------------*/
/* Content Block */
.page-careers-page .benefits-content-block {
	padding: 30px !important;
}

/* Content Block Column */
:root :where(.benefits-content-block .is-layout-flex) {
    gap: 40px;
}

/* Remove default marker */
.page-careers-page .benefits-details-arrow summary::-webkit-details-marker {
	display: none;
}
.page-careers-page .benefits-details-arrow summary::marker {
	display: none;
}

/* Summary styling */
.page-careers-page .benefits-details-arrow summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-weight: bold;
	padding: 0;
	margin-bottom: 0;
}

/* Arrow styling: caret added*/
.page-careers-page .benefits-details-arrow summary::after {
	content: " ";
	display: inline-block;
	background-image: url('/wp-content/uploads/dropdown-arrow.svg');
	background-repeat: no-repeat;
	background-size: contain;
	height: 30px;
	width: 30px;
	transition: transform 0.3s ease;
	font-size: 1.2em;
	margin-left: 0.5em;
}

/* Rotate arrow when open */
.page-careers-page .benefits-details-arrow[open] summary::after {
	transform: rotate(180deg);
}

/* Dropdown content */
.page-careers-page .benefits-details-arrow p {
	margin: 0.5rem 0 0 0;
	color: #444;
	padding-right: 45px;
}

/* Separator */
.page-careers-page .benefits-content-block .wp-block-separator{
	border: none;
	border-top:1px solid #000;
}  
  
/*--------------------------------------------------------------
Interviewing at Reprise
--------------------------------------------------------------*/
:root :where(.interviewing-row .is-layout-flex) {
    gap: 40px;
}

.page-careers-page .interviewing-row .wp-block-image img {
	min-height: 125px;
	min-width: 115px;
	
}

/*--------------------------------------------------------------
View more testimonials row
--------------------------------------------------------------*/
.page-careers-page .view-more-testimonials-row {
	background-image: url('/wp-content/uploads/quote-squiggle-blue.svg');
	background-repeat: no-repeat;
	background-position: left top 60%;
    background-size: 40%;
    height: 600px;
}

.page-careers-page .view-more-testimonials-row a.button.cta-bttn.theme-dark, 
.page-careers-page .view-more-testimonials-row a.button.cta_bttn.theme-dark {
    width: 280px !important;
}

@media (max-width: 2070px) {
	/*--------------------------------------------------------------
	Join our team row
	--------------------------------------------------------------*/	
	.page-careers-page .join-our-team-row .join-our-team-text p.h1 {
		font-size: 2rem;
	}
	
	/*--------------------------------------------------------------
	Offset fix for relative image
	--------------------------------------------------------------*/
	.page-careers-page .our-values-cards,
	.page-careers-page .our-values-in-action,
	.page-careers-page .our-values-carousel-row,
	.page-careers-page .remaining-content-after-offset {
		top: 0;
	}
}


@media (max-width: 1600px) {
	/*--------------------------------------------------------------
	Hero Banner
	--------------------------------------------------------------*/
	.page-careers-page .hero-image .outer-columns .wp-block-column:nth-child(1),
	.page-careers-page .hero-image .outer-columns .wp-block-column:nth-child(3) {
		width: 0 !important;
		flex-basis: 0 !important;
	}
	
	.page-careers-page .hero-image .outer-columns .wp-block-column:nth-child(2) {
		width: 100% !important;
		flex-basis: 100% !important;
	}
	
	.page-careers-page .hero-image .outer-columns .inner-columns .wp-block-column:nth-child(1),
	.page-careers-page .hero-image .outer-columns .inner-columns .wp-block-column:nth-child(2)	{
		width: 50% !important;
		flex-basis: 50% !important;
	}
	
	.page-careers-page .hero-image .outer-columns .inner-columns .wp-block-column:nth-child(1) .wp-block-column:nth-child(1) {
		width: 70% !important;
		flex-basis: 70% !important;
		max-width:382px;
	}
	
	.page-careers-page .hero-image .outer-columns .inner-columns .wp-block-column:nth-child(1) .wp-block-column:nth-child(2) {
		width: 30% !important;
		flex-basis: 30% !important;
	}
	
	/*--------------------------------------------------------------
	Join our team row
	--------------------------------------------------------------*/	
	.page-careers-page .join-our-team-row .join-our-team-text p.h1 {
		padding-top:20px;
	}
	
	/*--------------------------------------------------------------
	Tan row
	--------------------------------------------------------------*/
	.page-careers-page .tan-color-row {
		background-image: none;
	}

	/*--------------------------------------------------------------
	Carousel
	--------------------------------------------------------------*/
	.page-careers-page .our-values-carousel-row {
		display: none;
	}
	
	
	/*--------------------------------------------------------------
	View more testimonials row
	--------------------------------------------------------------*/
	.page-careers-page .view-more-testimonials-row {
		background-position: left bottom 40%;
		background-size: 60%;
	}
	
	.page-careers-page .view-more-testimonials-row .wp-block-column:nth-child(1),
	.page-careers-page .view-more-testimonials-row .wp-block-column:nth-child(3) {
		width: 0 !important;
		flex-basis: 0 !important;
	}
	
	.page-careers-page .view-more-testimonials-row .wp-block-column:nth-child(2) {
		width: 100% !important;
		flex-basis: 100% !important;
	}
	
	.page-careers-page .entry-content > .wp-block-group.view-more-testimonials-row {
		padding: 0 20px;
	}
}

@media (max-width: 1400px) {
	/*--------------------------------------------------------------
	Hero Banner
	--------------------------------------------------------------*/
	.page-careers-page .hero-image::after {
		content: unset;
	}
	
	/*--------------------------------------------------------------
	Join our team row
	--------------------------------------------------------------*/		
	.page-careers-page .join-our-team-row p.h1 {
		font-size: 1.5rem !important;
	}
}

@media(max-width:1264px) {
	/*--------------------------------------------------------------
	Hero Banner
	--------------------------------------------------------------*/
	.page-careers-page .hero-image {
		background-position: right bottom 10%;
	}
	
	.page-careers-page .hero-image .outer-columns .inner-columns .wp-block-column:nth-child(1) {
		width: 100% !important;
		flex-basis: 100% !important;
	}	
	
	.page-careers-page .hero-image .outer-columns .inner-columns .wp-block-image.career-circle img {
		display: none;
	}
}

@media (max-width: 1200px){
	/*--------------------------------------------------------------
	Our values cards
	--------------------------------------------------------------*/
	.page-careers-page .our-values-cards .card {
		min-height: 535px;
		padding: 20px 45px;
	}

	.page-careers-page .our-values-cards .card p {
		min-height: 110px;
	}

	.page-careers-page .our-values-cards .card h3 {
		font-size: 1.8rem !important;
		line-height: 2rem !important;
		min-height: 115px;
	}
	

	/*--------------------------------------------------------------
	Join our team row
	--------------------------------------------------------------*/		
	.page-careers-page .join-our-team-row p.h1 {
		font-size: 1.25rem !important;
		padding-top: 30px !important;
        padding-right: 40px;
	}	
}

@media only screen and (min-width: 783px) and (max-width: 1109px) {
	
	/*--------------------------------------------------------------
	Join our team row
	--------------------------------------------------------------*/		
	.page-careers-page .join-our-team-row.wp-block-columns > .wp-block-column[style*=flex-basis] {
		flex-basis: 0 !important;
	}
	
	.page-careers-page .join-our-team-row.wp-block-columns > .wp-block-column:nth-of-type(2)[style*=flex-basis] {
		flex-basis: 100% !important;
	}
	
	/*--------------------------------------------------------------
	View more testimonials row
	--------------------------------------------------------------*/
	.page-careers-page .view-more-testimonials-row {
		background-position: left bottom 0;
	}
}

@media (max-width: 782px){
	/*--------------------------------------------------------------
	Join our team row
	--------------------------------------------------------------*/
	.page-careers-page .join-our-team-row {
		padding: 0 !important;
		margin: 0 !important;
	}
	
	:root :where(.join-our-team-row.is-layout-flex) {
		gap: 0;
	}
	
	.page-careers-page .join-our-team-row .wp-block-image img {
		padding-left: 0 !important;
	}
	
	.page-careers-page .join-our-team-shape-bg {
		background: none !important;
	}
	
	.page-careers-page .join-our-team-text {
		background-color: white !important;
		border-radius: 15px !important;
	}
	
	/*--------------------------------------------------------------
	Our values in action
	--------------------------------------------------------------*/
	.page-careers-page #h-our-values-in-action {
		margin-top: 0 !important;
	}
	
	/*--------------------------------------------------------------
	Tan row
	--------------------------------------------------------------*/
	.page-careers-page .tan-color-row {
		max-height: none;
	}
	
	/*--------------------------------------------------------------
	Our values cards
	--------------------------------------------------------------*/
	.page-careers-page .our-values-cards .card,
	.page-careers-page .our-values-cards .card p,
	.page-careers-page .our-values-cards .card h4 {
		min-height: auto;
	}
	
	.page-careers-page .our-values-cards .wp-block-image img {
		height: 80px;
	}
	

/*--------------------------------------------------------------
	Interviewing at Reprise
	--------------------------------------------------------------*/
	
	.page-careers-page .interviewing-row .wp-block-image img{
		height:80px;
		min-height: 80px;
	}
	
}

@media only screen and (min-width: 424px) and (max-width: 576px) {
	/*--------------------------------------------------------------
	Hero Banner
	--------------------------------------------------------------*/
	.page-careers-page .hero-image {
		max-height: 400px;
	}
}

@media (max-width: 576px){
	/*--------------------------------------------------------------
	Hero Banner
	--------------------------------------------------------------*/
	.page-careers-page .hero-image {
		background-image: none;
		max-height: 530px;
		height: auto;
	}
	
	.page-careers-page .hero-image .gutenberg.hero-banner {
		min-height: auto !important;
	}
	
	.page-careers-page .hero-image .is-layout-flow > .alignleft,
	.page-careers-page .hero-image .outer-columns .inner-columns .wp-block-column:nth-child(1) .wp-block-column:nth-child(2) .wp-block-image {
		float: right;
		margin-top: 30px !important;
	}
	
	.page-careers-page .hero-image .outer-columns .inner-columns .wp-block-column:nth-child(1) .wp-block-column:nth-child(1),
	.page-careers-page .hero-image .outer-columns .inner-columns .wp-block-column:nth-child(1) .wp-block-column:nth-child(2)	{
		width: 100% !important;
		flex-basis: 100% !important;
	}
	
	.page-careers-page .hero-image .wp-block-column {
		overflow-wrap: normal;
		word-break: normal;
	}
	
	h1.wp-block-heading, 
	.h1.wp-block-heading, 
	h1.wp-block-heading a, 
	.h1.wp-block-heading a, 
	h1.has-x-large-font-size.wp-block-heading.wp-block-heading, 
	.h1.has-x-large-font-size.wp-block-heading {
		font-size: 40px !important;
		line-height: 52px !important;
	}
	
	/*--------------------------------------------------------------
	Empowering your success row
	--------------------------------------------------------------*/
	.page-careers-page .entry-content > .wp-block-group.empowering-your-success {
		padding: 0 20px;
	}
	
	.page-careers-page .empowering-your-success p.h3{
		margin-bottom: 0 !important;
	}	
}

@media (max-width: 400px){	

	/*--------------------------------------------------------------
	View more testimonials row
	--------------------------------------------------------------*/
	.page-careers-page .view-more-testimonials-row a.button.cta-bttn.theme-dark {
		white-space: normal;
	}
}
