/*
 * One Team theme styles.
 *
 * Layout values were measured from the original Divi site so pages line up
 * at every breakpoint: phone < 768px, tablet 768–980px, desktop ≥ 981px.
 * Loaded on the front end and in the block editor.
 */

:root {
	--ot-navy: #161f39;
	--ot-brand: #006b5c;
	--ot-brand-dark: #00574b;
	--ot-brand-deep: #0f5c4c;
	--ot-login-green: #0d6b56;
	--ot-mint: #e7f0ee;
	--ot-login-mint: #e6f3ef;
	--ot-card: #f9f9f9;
	--ot-card-border: #e8e8e8;
	--ot-surface: #f7f7f7;
	--ot-serif: Ledger, Georgia, "Times New Roman", serif;
	--ot-sans: Lato, Helvetica, Arial, sans-serif;
	--ot-ui: Montserrat, sans-serif;
	--ot-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.9 439.4 7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.7 432.1 72.6c10-10 26.2-10 36.2 0l36.2 36.2c10 10 10 26.2 0 36.2L210.1 439.4c-10 10-26.2 10-36.2 0Z'/%3E%3C/svg%3E");
}

body {
	margin: 0;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > * {
	margin-block: 0;
}

.ot-main {
	flex: 1;
}

/* Every block inside the theme's sections controls its own spacing. */
.ot-main :where(h1, h2, h3, h4, p, ul, figure) {
	margin: 0;
}

/* ---------------------------------------------------------------- Layout */

.ot-section {
	padding: 50px 0;
}

.ot-row {
	box-sizing: border-box;
	width: 80%;
	max-width: 1340px;
	margin-inline: auto !important;
	padding: 30px 0;
}

.ot-row--flush-bottom {
	padding-bottom: 0;
}

.ot-row--narrow {
	max-width: 1024px;
}

.ot-center {
	text-align: center;
}

/* Two half-width columns; stacked below desktop. */
.ot-cols {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.ot-cols > * {
	margin: 0 !important;
}

/* Vertical rhythm between modules (Divi module margins). */
.ot-stack > * + *,
.ot-stack-half > * + * {
	margin-top: 30px !important;
}

.ot-text p:not(:last-child) {
	padding-bottom: 1em;
}

.ot-grid {
	display: grid;
	gap: 30px;
}

.ot-grid > * {
	margin: 0 !important;
}

@media (min-width: 768px) {
	.ot-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ot-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 981px) {
	.ot-section {
		padding: 4% 0;
	}

	.ot-row {
		width: 90%;
		padding: 2% 0;
	}

	.ot-row--flush-bottom {
		padding-bottom: 0;
	}

	.ot-cols {
		display: grid;
		grid-template-columns: 47.25% 47.25%;
		column-gap: 2%;
	}

	.ot-cols--middle {
		align-items: center;
	}

	/* Divi spaces modules by a percentage of the column width. */
	.ot-stack > * + * {
		margin-top: 2.75% !important;
	}

	.ot-stack-half > * + * {
		margin-top: 5.82% !important;
	}
}

/* ------------------------------------------------------------ Typography */

.ot-h2 {
	padding-bottom: 10px;
	text-align: center;
	font-family: var(--ot-serif);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ot-brand);
}

.ot-h2--fixed {
	font-size: 40px;
}

@media (min-width: 768px) {
	.ot-h2 {
		font-size: 40px;
	}
}

.ot-tagline {
	text-align: center;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--ot-brand);
}

@media (min-width: 768px) {
	.ot-tagline {
		font-size: 24px;
	}
}

/* --------------------------------------------------------------- Buttons */

.ot-button,
.ot-button-block .wp-block-button__link {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 12px 20px;
	border: 2px solid var(--ot-brand);
	border-radius: 5px;
	background: var(--ot-brand);
	color: #fff;
	font-family: var(--ot-sans);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.7;
	letter-spacing: 1px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.3s, color 0.3s;
}

.ot-button:hover,
.ot-button:focus-visible,
.ot-button-block .wp-block-button__link:hover,
.ot-button-block .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--ot-brand);
}

/* The header button shrinks on phones, like the original site. */
.ot-button--header {
	font-size: 12px;
}

@media (min-width: 768px) {
	.ot-button--header {
		font-size: 16px;
	}
}

.ot-buttons {
	gap: 0;
}

.ot-center .ot-buttons {
	justify-content: center;
}

/* ---------------------------------------------------------------- Header */

.ot-header {
	background: var(--ot-navy);
}

.ot-header__row {
	display: flex;
	align-items: center;
}

.ot-header__row > * {
	width: 50%;
	margin: 0 !important;
}

.ot-header__logo img {
	width: 125px !important;
	height: auto !important;
	filter: brightness(0) invert(1);
}

.ot-header__action {
	text-align: right;
}

@media (min-width: 768px) {
	.ot-header__logo img {
		width: 200px !important;
	}
}

@media (min-width: 981px) {
	.ot-header__row > * {
		width: 47.25%;
	}
}

/* ---------------------------------------------------------------- Footer */

.ot-footer {
	background: var(--ot-brand);
}

.ot-footer__text {
	margin: 0;
	text-align: center;
	font-size: 14px;
	font-weight: 300;
	line-height: 30.6px;
	color: #fff;
}

/* ------------------------------------------------------------------ Hero */

.ot-hero {
	border-bottom: 10px solid var(--ot-brand);
	background: var(--ot-mint);
}

.ot-hero__text {
	text-align: center;
}

.ot-hero__title {
	padding-bottom: 10px;
	font-family: var(--ot-serif);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ot-brand);
}

.ot-hero__tagline {
	max-width: 200px;
	margin-inline: auto !important;
	font-size: 20px;
	line-height: 30.6px;
	color: var(--ot-navy);
}

@media (min-width: 768px) {
	.ot-hero__title {
		font-size: 50px;
	}

	.ot-hero__tagline {
		max-width: none;
		font-size: 24px;
	}
}

@media (min-width: 981px) {
	.ot-hero__text {
		text-align: left;
	}

	.ot-hero__tagline {
		margin-inline: 0 !important;
	}
}

/* ---------------------------------------------------------------- Videos */

.ot-video {
	overflow: hidden;
	background: #23392b;
}

.ot-video .wp-block-embed__wrapper {
	position: relative;
}

.ot-video .wp-block-embed__wrapper::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

.ot-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ot-video--4x3 {
	border-radius: 10px;
}

.ot-video--4x3 .wp-block-embed__wrapper::before {
	padding-top: 75%;
}

/* The Products training video is wider than 16:9 (426×190). */
.ot-video--wide .wp-block-embed__wrapper::before {
	padding-top: 44.6%;
}

/* ----------------------------------------------------------------- Cards */

.ot-card {
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid var(--ot-card-border);
	border-radius: 10px;
	background: var(--ot-card);
}

@media (min-width: 768px) {
	.ot-card {
		padding: 50px;
	}
}

.ot-card__title {
	padding-bottom: 10px;
	text-align: center;
	font-family: var(--ot-serif);
	font-size: 29px;
	font-weight: 700;
	line-height: 1.3;
	color: #000;
}

.ot-card__lead {
	text-align: center;
}

/* Divi blurb list: a Font Awesome check beside each line. */
.ot-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ot-checklist li {
	position: relative;
	padding-left: 32px;
}

.ot-checklist li + li {
	margin-top: 5px;
}

.ot-checklist li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	width: 17px;
	height: 17px;
	background: var(--ot-brand);
	-webkit-mask: var(--ot-check) center / contain no-repeat;
	mask: var(--ot-check) center / contain no-repeat;
}

.ot-checklist--on-dark li::before {
	background: #007538;
}

/* -------------------------------------------------------- Why One Team */

.ot-oneteam {
	display: flex;
	flex-direction: column;
	background: var(--ot-navy);
	color: #fff;
}

.ot-oneteam .ot-h2 {
	color: #fff;
}

.ot-oneteam__text {
	box-sizing: border-box;
	padding: 75px 10%;
}

.ot-oneteam__partner {
	max-width: 600px;
	margin-inline: auto !important;
	text-align: center;
	line-height: 1.4;
}

.ot-oneteam__photo {
	position: relative;
	padding-bottom: 56.75%;
}

.ot-oneteam__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.ot-oneteam__text {
		padding: 75px;
	}

	.ot-oneteam__partner {
		font-size: 22px;
	}
}

@media (min-width: 981px) {
	.ot-oneteam {
		flex-direction: row;
	}

	/* Two 47.25% columns, leaving navy on the right like the original. */
	.ot-oneteam > * {
		width: 47.25%;
	}

	.ot-oneteam__photo {
		padding-bottom: 0;
	}
}

/* ----------------------------------------------------------- Opportunity */

.ot-opportunity__intro {
	margin-inline: -5%;
}

@media (min-width: 768px) {
	.ot-opportunity__intro {
		margin-inline: 0;
	}
}

/* --------------------------------------------------------------- Mission */

.ot-mission {
	background: linear-gradient(180deg, var(--ot-brand) 0%, var(--ot-navy) 100%);
	color: #fff;
}

.ot-mission .ot-h2 {
	color: #fff;
}

.ot-mission__text p:first-child {
	padding-bottom: 18px;
}

.ot-mission__welcome {
	color: var(--ot-mint);
}

/* ----------------------------------------------------------------- Login */

.ot-login {
	box-sizing: border-box;
	padding: 60px 20px;
	background: var(--ot-login-mint);
	text-align: center;
}

.ot-login__title {
	margin-bottom: 12px !important;
	font-family: var(--ot-serif);
	font-size: 42px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--ot-brand-deep);
}

.ot-login__intro {
	max-width: 672px;
	margin: 0 auto 36px !important;
	font-size: 19px;
	line-height: 1.6;
	color: #2f3334;
}

.ot-login__card {
	box-sizing: border-box;
	max-width: 460px;
	margin-inline: auto !important;
	padding: 40px 34px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 20px 55px rgba(15, 92, 76, 0.12);
	text-align: left;
	font-family: var(--ot-ui);
}

.ot-login__card-title {
	margin-bottom: 25px !important;
	text-align: center;
	font-family: var(--ot-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: #222;
}

.ot-login-form__field {
	display: block;
	margin-bottom: 18px;
	font-size: 15px;
	font-weight: 600;
	color: #333;
}

.ot-login-form__field:last-of-type {
	margin-bottom: 24px;
}

.ot-login-form__field input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 14px 16px;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	background: #fff;
	font-family: var(--ot-sans);
	font-size: 16px;
	color: #4e4e4e;
}

.ot-login-form__field input:focus {
	border-color: var(--ot-brand);
	outline: 2px solid rgba(0, 107, 92, 0.2);
}

.ot-login-form__submit {
	width: 100%;
	padding: 16px;
	border: none;
	border-radius: 12px;
	background: var(--ot-login-green);
	color: #fff;
	cursor: pointer;
	font-family: var(--ot-ui);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
	transition: background-color 0.3s;
}

.ot-login-form__submit:hover {
	background: var(--ot-brand-dark);
}

.ot-login-form__error {
	margin: 0 0 18px !important;
	padding: 12px 16px;
	border: 1px solid #fecaca;
	border-radius: 10px;
	background: #fef2f2;
	font-size: 14px;
	color: #b91c1c;
}

/* --------------------------------------------------------------- Library */

.ot-playbook__image img {
	display: block;
	width: 100%;
	height: auto;
}

.ot-playbook__text {
	text-align: center;
}

.ot-playbook__title {
	color: #000;
}

@media (min-width: 768px) {
	.ot-playbook__text,
	.ot-playbook__text .ot-playbook__title {
		text-align: left;
	}
}

.ot-trainings {
	background: var(--ot-surface);
}

.ot-training {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 24px 24px 0;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	text-align: center;
}

.ot-training__category {
	font-family: var(--ot-serif);
	font-size: 29px;
	font-weight: 700;
	color: #000;
}

.ot-training__title {
	margin: 8px 0 32px !important;
	font-family: var(--ot-serif);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.375;
	color: var(--ot-brand);
}

/* Videos run edge to edge along the bottom of the card. */
.ot-training__video {
	margin: auto -24px 0 !important;
}

@media (min-width: 640px) {
	.ot-training {
		padding: 40px 40px 0;
	}

	.ot-training__video {
		margin: auto -40px 0 !important;
	}
}

.ot-resources {
	background: var(--ot-brand);
}

.ot-resources .ot-h2 {
	color: #fff;
}

.ot-guide a {
	display: block;
	transition: transform 0.15s;
}

.ot-guide a:hover {
	transform: scale(1.02);
}

.ot-guide img {
	display: block;
	width: 100%;
	height: auto;
}

/* Whole card is the link (the paragraph's link stretches over it). */
.ot-community-card {
	position: relative;
	box-sizing: border-box;
	padding: 32px;
	border: 1px solid var(--ot-card-border);
	border-radius: 10px;
	background: var(--ot-card);
	text-align: center;
	transition: box-shadow 0.15s;
}

.ot-community-card:hover {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ot-community-card::before {
	content: "";
	display: block;
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: var(--ot-brand) center / 36px no-repeat;
}

.ot-community-card--facebook::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14 8h3V4h-3c-2.8 0-4.5 1.8-4.5 4.6V11H7v4h2.5v9h4v-9H17l.5-4h-4V8.9c0-.6.3-.9.5-.9Z'/%3E%3C/svg%3E");
}

.ot-community-card--telegram::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21.7 3.3 2.6 10.7c-1.3.5-1.3 1.3-.2 1.6l4.9 1.5 1.9 5.8c.2.6.4.9.9.9.4 0 .6-.2.9-.5l2.3-2.2 4.8 3.5c.9.5 1.5.2 1.7-.8l3.2-15c.3-1.3-.5-1.9-1.3-1.5ZM8.7 13.4l9.9-6.3c.5-.3.9-.1.5.2l-8.2 7.4-.3 3.4-1.9-4.7Z'/%3E%3C/svg%3E");
}

.ot-community-card p {
	font-size: 24px;
	font-weight: 900;
	line-height: 1.375;
}

.ot-community-card a {
	color: #000;
	text-decoration: none;
}

.ot-community-card a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (min-width: 640px) {
	.ot-community-card {
		padding: 48px;
	}
}