@charset "UTF-8";

/*
Theme Name: OSR Physical Therapy
Theme URI: https://wordpress.org/themes/twentytwentyone/
Description: HeroStencil2k22 is a TwentyTwentyOne child theme.
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: osrpt
*/

/* Variables */
:root {
	/* Font Size */
	--global--font-size-base: 1rem;
	--global--font-size-xs:   0.75rem;
	--global--font-size-sm:   0.9rem;
	--global--font-size-md:   1rem;
	--global--font-size-lg:   1.5rem;
	--global--font-size-xl:   2rem;
	--global--font-size-xxl:  3rem;
	--global--font-size-xxxl: 4rem;

	/* Colors */
	--global--colors-primary:         #829090;
	--global--colors-primary-light:   #ECF1F1;
	--global--colors-secondary:       #D47A54;
	--global--colors-secondary-light: #F7EBE5;
}

@media only screen and (min-width: 652px) {
	:root {
		--global--font-size-xl: 3rem;
		--global--font-size-xxl: 4rem;
		--global--font-size-xxxl: 5rem;
	}
}

:root .has-extra-small-font-size {
	font-size: var(--global--font-size-xs);
}

:root .has-small-font-size {
	font-size: var(--global--font-size-sm);
}

:root .has-regular-font-size,
:root .has-normal-font-size,
:root .has-medium-font-size {
	font-size: var(--global--font-size-md);
}

:root .has-large-font-size {
	font-size: var(--global--font-size-lg);
}

:root .has-extra-large-font-size {
	font-size: var(--global--font-size-xl);
}

:root .has-huge-font-size {
	font-size: var(--global--font-size-xxl);
}

:root .has-gigantic-font-size {
	font-size: var(--global--font-size-xxxl);
}

.has-primary-to-secondary-gradient-background {
	background: linear-gradient(160deg, var(--global--colors-primary), var(--global--colors-secondary));
}

.has-secondary-to-primary-gradient-background {
	background: linear-gradient(160deg, var(--global--colors-secondary), var(--global--colors-primary));
}

.has-primary-light-to-secondary-light-gradient-background {
	background: linear-gradient(160deg, var(--global--colors-primary-light), var(--global--colors-secondary-light));
}

.has-secondary-light-to-primary-light-gradient-background {
	background: linear-gradient(160deg, var(--global--colors-secondary-light), var(--global--colors-primary-light));
}

/* Custom changes for the new Careers page */

/*

Layout:

Small:
Medium: 721px
Large: 782px

Colors:

Orange: #d47a54;
Dark Green: #21494f;

*/

.careers__overview {

	.wp-block-heading {
		font-size: 1.793rem;
	}

	.wp-block-columns {
		/* Make sure spacing between columns stays at smaller screen sizes. */
		gap: 2em;
	}

}

.careers__grow-your-skills {

	@media screen and (max-width: 720px) {
		padding-bottom: 40px !important;
	}

	.wp-block-heading {
		font-size: 1.793rem;
	}

	.wp-block-group__inner-container {

		@media screen and (max-width: 720px) {
			/* Remove padding from sides at medium screen sizes and smaller. */
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

	}

	.wp-block-columns {
		/* Make sure spacing between columns stays at smaller screen sizes. */
		gap: 2em;
	}

		.wp-block-column {

			@media screen and (max-width: 781px) {
				/* Remove padding from sides at medium screen sizes and smaller. */
				padding-left: 0 !important;
				padding-right: 0 !important;
			}

		}

		h3 {
			font-size: 1.794rem;
		}

		ol {}

			li {

				&:before {}

			}

}

.careers__meet-the-team {

	.wp-block-heading {

		font-size: 1.956rem;

		@media screen and (max-width: 720px) {
			font-size: 1.5rem;
		}

	}

	.wp-block-group__inner-container {

		@media screen and (max-width: 720px) {
			/* Remove padding from sides at medium screen sizes and smaller. */
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

	}

	.wp-block-columns {
			/* Make sure spacing between columns stays at smaller screen sizes. */
			gap: 2em;
		}

		.wp-block-column {

			@media screen and (max-width: 781px) {
				/* Remove padding from sides at medium screen sizes and smaller. */
				padding-left: 0 !important;
				padding-right: 0 !important;
			}

		}

}

.careers__explore {}

.careers__values {

	h2.wp-block-heading {
		font-size: 1.793rem;
	}

	h3.wp-block-heading {

		font-size: 1.518rem;

		@media screen and (max-width: 720px) {
			font-size: 1.25rem;
		}

	}

	.wp-block-group__inner-container {

		@media screen and (max-width: 720px) {
			/* Remove padding from sides at medium screen sizes and smaller. */
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

	}

	.wp-block-columns {
		/* Make sure spacing between columns stays at smaller screen sizes. */
		gap: 2em;
	}

}

.careers__testimonial {

	.wp-block-group__inner-container {

		@media screen and (max-width: 720px) {
			/* Remove padding from sides at medium screen sizes and smaller. */
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

	}

}

.careers__purpose {

	.wp-block-group__inner-container {

		@media screen and (max-width: 720px) {
			/* Remove padding from sides at medium screen sizes and smaller. */
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

	}

	.wp-block-columns {
		/* Make sure spacing between columns stays at smaller screen sizes. */
		gap: 2em;
	}

		.wp-block-column {

			@media screen and (max-width: 781px) {
				/* Remove padding from sides at medium screen sizes and smaller. */
				padding: 0 !important;
			}

		}

}

.careers__instagram {

	.wp-block-group__inner-container {

		@media screen and (max-width: 720px) {
			/* Remove padding from sides at medium screen sizes and smaller. */
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

	}

	.wp-block-columns {

		@media screen and (max-width: 1099px) {
			flex-wrap: wrap !important;
			gap: 0;
		}

	}

		.wp-block-column {

			@media screen and (max-width: 1099px) {
				width: 25%;
				flex-basis: unset !important;
			}

			figure {

				@media screen and (max-width: 1099px) {
					margin: 0;
				}

			}

				img {

					@media screen and (max-width: 1099px) {
						width: 100% !important;
						height: auto !important;
						aspect-ratio: 1/1;
					}

				}

		}

		.wp-block-column:nth-child(3) {

			@media screen and (max-width: 1099px) {
				width: 100%;
				margin-top: 2rem;
				order: 5;
			}

		}

}

.careers__chat {

	.wp-block-columns {
		/* Make sure spacing between columns stays at smaller screen sizes. */
		gap: 2em;
	}

	h2.wp-block-heading {
		font-size: 1.793rem;
	}

	.wp-block-group__inner-container {

		@media screen and (max-width: 720px) {
			/* Remove padding from sides at medium screen sizes and smaller. */
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

	}

}

.careers__why {

	h2.wp-block-heading {
		font-size: 1.793rem;
	}

	h4.wp-block-heading {
		font-size: 1.32rem;
	}

	.why__items {

		position: relative;

		&:before {

			@media screen and (min-width: 782px) {
				content: "";
				position: absolute;
				left: 50%;
				top: 0;
				width: 100vw;
				height: 120px;
				background-color: #4b6d73;
				transform: translateX(-50%);
				z-index: -1;
			}

		}

	}

		.why__item {

			position: relative;

			.wp-block-image {
				margin-bottom: 0;
			}

			&:before {

				@media screen and (max-width: 781px) {
					content: "";
					position: absolute;
					left: 50%;
					top: 0;
					width: 100vw;
					height: 120px;
					background-color: #4b6d73;
					transform: translateX(-50%);
					z-index: -1;
				}

				@media screen and (min-width: 782px) {
					content: "";
					position: absolute;
					right: 0;
					top: calc(120px + 2rem);
					bottom: 1rem;
					width: 3px;
					background-color: #d47a54;
					z-index: 1;
				}

			}

			&:nth-child(3n) {

				&:before {

					@media screen and (min-width: 782px) {
						content: none;
					}

				}

			}

		}

}

.careers__photo {}

.overview__image {}

	.overview__image img {
		border-left: 5px solid #d47a54;
	}
.heading__label {
	position: relative;
	margin-bottom: -1.5rem;
	padding: 0 !important;
	background-color: transparent !important;
	z-index: 2;

	a,
	strong {
		padding: 1rem 2rem;
		background-color: #d47a54;
		border-radius: 1rem;
	}

	a {
		font-size: 2.5rem;
	}

	a:focus,
	a:hover,
	a:visited {
		color: #ffffff;
		text-decoration: underline;
	}
}

.heading__label--alternate {
	padding: 0 !important;
	background-color: transparent !important;

	a,
	strong {
		padding: 1rem 2rem;
		background-color: #d47a54;
		border-radius: 1rem;
	}

	a {
		font-size: 2.5rem;
	}

	a:focus,
	a:hover,
	a:visited {
		color: #ffffff;
		text-decoration: underline;
	}
}

.heading__label--small {
	padding: 0 !important;
	background-color: transparent !important;

	strong {
		padding: 1rem 2rem;
		font-weight: 400;
		background-color: #d47a54;
		border-radius: 1rem;
	}
}

.values__items {}

	.values__item {
		/* background-color: pink !important; */
		border-radius: 2rem;
		box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.20);
	}

.skills__items {

	ol {
		margin-bottom: 0 !important;
	}

		li {

			margin-bottom: 2rem;
			padding-left: 65px !important;
			color: #21494f;

			@media screen and (min-width: 721px) {
				padding-left: 120px !important;
			}

			&::before {

				width: 50px !important;
				height: 50px !important;
				font-size: 3rem;
				padding-top: 7px;
				font-family: "Charmonman", cursive;
				font-weight: 400;
				font-style: normal;
				background-color: #21494f !important;

				@media screen and (min-width: 721px) {
					width: 100px !important;
					height: 100px !important;
					padding-top: 10px;
					font-size: 4rem;
				}

			}

			&:nth-child(even) {

				&::before {
					background-color: #d47a54 !important;
				}

			}

			&:last-of-type {
				margin-bottom: 0;
			}

			h3 {
				color: #d47a54
			}

		}

}

.purpose__items {}

	.purpose__item {

		img {
			border-radius: 2rem;
		}

}

.lets-chat__image {

	img {
		border-radius: 2rem;
	}

}
