@import '../assets/fonts/HelveticaNeue/stylesheet.css';
@import '_mixins';
@import '_reset';

$cWhite: #ffffff;
$cGold: #d9ba5c;
$cGolder: #ba962b;
$cGray: #8b8b8b;
$cGray2: #9e9e9e;
$cBlack: #232323;
$cLightGray: #d9d9d9;

$fHelveticaNeue: 'Helvetica Neue', sans-serif;

$header-height: 77px;

@mixin h2($color) {
	color: $color;
	font-weight: 500;
	font-size: 64px;
	line-height: 120%;
	letter-spacing: -1.4px;
}

@mixin box_title_line($color, $bgColor) {
	position: relative;

	&::before {
		content: attr(box-title);
		color: $color;
		font-weight: 700;
		font-size: 16px;
		line-height: 1;
		letter-spacing: -0.34px;

		transform: rotate(180deg);
		position: absolute;
		left: 0;
		top: 0;
		writing-mode: vertical-rl;
		padding-top: 24px;
		background: $bgColor;
		z-index: 1;
	}

	&::after {
		content: '';
		position: absolute;
		left: 7px;
		top: 10px;
		bottom: 0;
		width: 1px;
		background: $color;
	}
}

@mixin box_top_shadow($color) {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 105px;
		background: linear-gradient(0deg, $color 0%, rgba(255, 255, 255, 0) 100%);
		transform: translateY(-100%);
		z-index: -1;
	}
}

//* Global
* {
	font-family: $fHelveticaNeue;
}

.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;

	@each $breakpoint, $max in $container-max-widths {
		@if $breakpoint == sm {
			@media (min-width: 576px) {
				max-width: $max;
			}
		} @else if $breakpoint == md {
			@media (min-width: 768px) {
				max-width: $max;
			}
		} @else if $breakpoint == lg {
			@media (min-width: 992px) {
				max-width: $max;
			}
		} @else if $breakpoint == xl {
			@media (min-width: 1200px) {
				max-width: $max;
			}
		} @else if $breakpoint == xxl {
			@media (min-width: 1370px) {
				max-width: $max;
			}
		}
	}
}

.btn_1 {
	color: $cBlack !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;

	display: inline-block;
	padding: 15px 24px 13px;
	border-radius: 100px;
	background: rgba($cGray, 0.1);
	text-wrap-mode: nowrap;
	transition: all 250ms ease-in-out;

	&:hover {
		color: $cWhite !important;
		background: $cBlack;
	}
}

.btn_2 {
	color: $cWhite !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;

	display: inline-block;
	padding: 15px 24px 13px;
	border-radius: 100px;
	background: $cGold;
	text-wrap-mode: nowrap;
	transition: all 250ms ease-in-out;

	&:hover {
		background: $cGolder;
	}
}

.btn_3 {
	color: $cGold !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;

	display: inline-block;
	padding: 15px 24px 13px;
	border-radius: 100px;
	background: rgba($cGold, 0.1);
	text-wrap-mode: nowrap;
	transition: all 250ms ease-in-out;

	&:hover {
		color: $cWhite !important;
		background: $cGold;
	}
}

.btn_4 {
	color: $cGold !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;

	display: inline-block;
	padding: 15px 24px 13px;
	border-radius: 100px;
	background: $cWhite;
	text-wrap-mode: nowrap;
	transition: all 250ms ease-in-out;

	&:hover {
		color: $cWhite !important;
		background: $cGold;
	}
}

.btn_5 {
	color: $cGold !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-wrap-mode: nowrap;
	transition: all 250ms ease-in-out;

	&:hover {
		text-decoration: underline;
	}
}

header#masthead {
	height: $header-height;

	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		column-gap: 40px;

		height: $header-height;

		.site-branding {
			img {
				width: 246px;
				min-width: 246px;
			}
		}

		nav#site-navigation {
			ul#primary-menu {
				gap: 50px;
				justify-content: center;

				li {
					position: relative;

					&.current-menu-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 7px;

						&::before {
							content: '';
							position: relative;
							display: inline-block;
							width: 5px;
							height: 5px;
							border-radius: 100%;
							background: $cGold;
							margin-bottom: 2px;
						}

						a {
							color: $cGold;
						}
					}

					a {
						color: $cBlack;
						font-size: 16px;
						font-weight: 500;
						line-height: 1;
					}
				}
			}
		}

		.main-navigation-secondary {
			padding: 0;
			margin: 0;
			list-style: none;

			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 16px;

			li {
				&:nth-child(1) {
					a {
						@extend .btn_1;
					}
				}

				&:nth-child(2) {
					a {
						@extend .btn_2;
					}
				}
			}
		}
	}
}

footer#site-footer {
	background: $cBlack;

	.footer-1 {
		padding-top: 140px;
		padding-bottom: 90px;
		border-bottom: 1px solid $cGray2;

		.row {
			display: flex;
			flex-direction: row;
			column-gap: 60px;

			.col {
				&-1 {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					width: 100%;
					max-width: 636px;

					img {
						width: 239px;
						margin-bottom: 24px;
					}

					h2 {
						color: $cWhite;
						font-weight: 400;
						font-size: 64px;
						line-height: 1.2;
						letter-spacing: -0.96px;
						margin-bottom: 24px;
					}
					p {
						color: $cGray2;
						font-weight: 400;
						font-size: 20px;
						line-height: 1;
						letter-spacing: -0.38px;
						margin-bottom: 40px;
					}
				}
				&-2 {
					img {
						width: 100%;
						max-width: fit-content;
						margin-top: -190px;
					}
				}
			}
		}
	}
	.footer-2 {
		padding-top: 32px;
		padding-bottom: 32px;

		.row {
			display: flex;
			flex-direction: row;

			.col {
				&-1 {
					flex-basis: 40%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					row-gap: 20px;

					p {
						color: $cWhite;
						font-weight: 400;
						font-size: 16px;
						line-height: 1;
						letter-spacing: -0.32px;
						margin: 0;
					}

					a {
						color: $cGray2;
						font-weight: 400;
						font-size: 16px;
						line-height: 1;
						letter-spacing: -0.32px;
					}
				}
				&-2 {
					flex-basis: 60%;

					ol {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						column-gap: 30px;
						margin: 0;
						padding: 0;

						li {
							p {
								color: $cGray2;
								margin: 0;
								font-weight: 400;
								font-size: 16px;
								line-height: 1.5;
								letter-spacing: -0.32px;
							}
						}
					}
				}
			}
		}
	}
}

article.article-card {
	.article-card--wrapper {
		.article-card--image {
			margin-bottom: 24px;

			a {
				img {
					width: 100%;
					height: 286px;
					object-fit: cover;
				}
			}
		}
		.article-card--content {
			.article-card--title {
				margin-bottom: 24px;

				h3 {
					color: $cBlack;
					font-weight: 400;
					font-size: 24px;
					line-height: 1.2;
					letter-spacing: -0.45px;

					a {
						color: inherit;
						font-size: inherit;
						font-weight: inherit;
						line-height: inherit;
						letter-spacing: inherit;
						text-decoration: inherit;
					}
				}
			}
			> a {
			}
		}
	}
}

//* Home
body.page-id-25 {
	main {
		margin-top: 60px;

		.box-1 {
			.row {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				column-gap: 40px;
			}

			.box-head {
				margin-bottom: 24px;

				h2 {
					@include h2($cBlack);
				}
			}

			.box-text {
				margin-bottom: 24px;
				max-width: 400px;

				p {
					color: $cBlack;
					font-weight: 400;
					font-size: 20px;
					line-height: 150%;
					letter-spacing: -0.38px;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}

			.box-quote {
				padding-left: 24px;
				margin-top: 64px;
				border-left: 1px solid $cBlack;
				max-width: 310px;

				p {
					color: $cBlack;
					font-weight: 400;
					font-size: 14px;
					line-height: 150%;
					letter-spacing: -0.27px;
					margin-bottom: 16px;
				}
			}
		}

		.box-2 {
			@include box_top_shadow($cLightGray);
			padding-top: 220px;
			padding-bottom: 180px;
			background: $cBlack;

			.row {
				.col {
					&-1 {
						max-width: 474px;
						padding-left: 64px;
						@include box_title_line($cWhite, $cBlack);

						.box-text {
							margin-bottom: 64px;

							p {
								color: $cWhite;
								font-weight: 400;
								font-size: 28px;
								line-height: 150%;
								letter-spacing: -0.53px;

								&:last-child {
									margin-bottom: 0;
								}
							}
						}
					}
				}
			}
		}

		.box-3 {
			padding-top: 120px;
			padding-bottom: 215px;

			.row {
				@include box_title_line(#d4d4d4, $cWhite);
				padding-left: 64px;
				padding-top: 160px;
				padding-bottom: 90px;

				ul {
					display: grid;
					grid-template-columns: 1fr auto 1fr;
					align-items: center;
					column-gap: 40px;
					row-gap: 50px;

					padding: 0;
					margin: 0;

					li {
						&:not(.last) {
							h2 {
								color: $cBlack;
								font-weight: 400;
								font-size: 36px;
								line-height: 1;
								letter-spacing: -0.68px;
								margin-bottom: 16px;
							}

							p {
								color: $cGold;
								font-weight: 400;
								font-size: 20px;
								line-height: 1.4;
								letter-spacing: 0.38px;
							}
						}
						&.last {
							padding: 32px 40px;
							background: #f7f3e9;
							border-radius: 6px;

							display: flex;
							flex-direction: column;
							align-items: center;

							h2 {
								color: $cBlack;
								font-weight: 400;
								font-size: 20px;
								line-height: 1.4;
								letter-spacing: 0.38px;
								text-align: center;
							}

							p {
								color: $cGold;
								font-weight: 400;
								font-size: 20px;
								line-height: 1.4;
								letter-spacing: 0.38px;
								text-align: center;
								margin-bottom: 16px;
							}
						}
					}
				}
			}
		}

		.box-4 {
			@include box_top_shadow($cLightGray);
			padding-top: 164px;
			padding-bottom: 164px;
			background: $cBlack;

			.row {
				display: flex;
				flex-direction: row;
				column-gap: 110px;

				.col {
					&-1 {
						@include box_title_line($cWhite, $cBlack);
						padding-left: 110px;

						img {
							width: 100%;
							max-width: 627px;
						}
					}
					&-2 {
						ul {
							padding: 0;
							margin: 0;
							display: flex;
							flex-direction: column;
							row-gap: 64px;
							max-width: 345px;

							li {
								h3 {
									color: $cWhite;
									font-weight: 400;
									font-size: 36px;
									line-height: 1.2;
									letter-spacing: -0.68px;

									margin-bottom: 16px;
								}
								p {
									color: $cWhite;
									font-weight: 400;
									font-size: 20px;
									line-height: 1.5;
									letter-spacing: -0.38px;

									&:last-child {
										margin-bottom: 0;
									}
								}
							}
						}
					}
				}
			}
		}

		.box-5 {
			padding-top: 200px;
			padding-bottom: 200px;

			.row {
				.big-quote {
					@include box_title_line(#d4d4d4, $cWhite);
					padding-left: 64px;

					h3 {
						color: $cBlack;
						font-weight: 400;
						font-size: 20px;
						line-height: 1;
						letter-spacing: -0.38px;
						margin-bottom: 32px;
					}
					.big-quote-text {
						margin-bottom: 40px;

						p {
							color: $cBlack;
							font-weight: 400;
							font-size: 28px;
							line-height: 1.5;
							letter-spacing: -0.53px;

							&:last-child {
								margin-bottom: 0;
							}

							strong {
								color: $cGold;
								font-weight: 400;
							}
						}
					}

					ol {
						margin: 40px 0 0 0;
						padding: 0;
						display: flex;
						flex-direction: row;

						li {
							&:not(:first-child) {
								margin-left: -24px;
							}
						}
					}
				}
			}
		}

		.box-6 {
			position: relative;
			background: #fafafa;

			.row {
				display: flex;
				flex-direction: row;
				column-gap: 100px;
				padding: 160px 0 125px;

				.col {
					&-1 {
						@include box_title_line(#d4d4d4, #fafafa);
						padding-left: 64px;
						width: 100%;
						max-width: 588px;

						.box-text {
							margin-bottom: 120px;

							p {
								color: $cBlack;
								font-weight: 400;
								font-size: 28px;
								line-height: 1.5;
								letter-spacing: -0.53px;

								&:last-child {
									margin-bottom: 0;
								}
							}
						}

						ul {
							padding: 0;
							margin: 0;

							display: flex;
							flex-direction: row;
							align-items: center;
							column-gap: 40px;
						}
					}
					&-2 {
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;

						img {
							height: 100%;
							width: 673px;
							object-fit: cover;
							object-position: center;
						}
					}
				}
			}
		}

		.box-7 {
			padding-top: 164px;
			padding-bottom: 200px;

			.row {
				@include box_title_line(#d4d4d4, $cWhite);
				padding-left: 64px;

				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 32px;
			}
		}
	}
}
