@import '../../lib/bootstrap-5.3.8/css/bootstrap.min.css';

/* Keyframes */

/* WordPress Overrides */

/* Google Maps Overrides */

.gm-style .gm-style-iw-c {

	padding: 0;

}

.gm-style-iw-ch {

	display: none;

}

.gm-style-iw-chr {

	button {

		position: absolute !important;
		top: 5px;
		right: 5px;
		z-index: 10;
		background-color: white !important;
		border-radius: 100%;
		width: 40px !important;
		height: 40px !important;

		span {

			width: 20px !important;
			height: 20px !important;
			margin: 10px !important;

		}

	}

}

.gm-style-iw-d {

	overflow: auto !important;

}

/* Bootstrap Overrides */

:root {

	--yct-ivory: #F4F1ED;
	--yct-teal: #0082A9;
	--yct-deep-teal: #005568;
	--yct-deep-teal-rgb: 0,85,104;
	--yct-very-deep-teal: #002F3A;
	--yct-ruby: #D70057;
	--yct-deep-ruby: #a30041;
	--yct-ochre: #E0AE49;
	--yct-deep-ochre: #d19723;
	--yct-green: #81AD3F;
	--yct-light-gray: #DDDCDC;

	--bs-font-sans-serif: "Poppins", sans-serif;
	--bs-body-color: var(--yct-deep-teal);
	--bs-body-color-rgb: var(--yct-deep-teal-rgb);
	--bs-link-color: var(--yct-deep-teal);
	--bs-link-color-rgb: var(--yct-deep-teal-rgb);
	--bs-link-hover-color: #000;
	--bs-link-hover-color-rgb: 0,0,0;

	font-optical-sizing: auto;

}

[data-bs-theme=dark] {

	--bs-body-bg: var(--yct-deep-teal);
	--bs-border-color: white;

	.form-check-input:checked {

		background-color: var(--bs-body-bg);
		border-color: white;

	}

}

.btn-primary {

	--bs-btn-bg: var(--yct-teal);
	--bs-btn-border-color: var(--yct-teal);
	--bs-btn-hover-bg: var(--yct-deep-teal);
	--bs-btn-hover-border-color: var(--yct-deep-teal);
	--bs-btn-active-bg: var(--yct-deep-teal);
	--bs-btn-active-border-color: var(--yct-deep-teal);

}

.btn-secondary {

	--bs-btn-bg: var(--yct-ruby);
	--bs-btn-border-color: var(--yct-ruby);
	--bs-btn-hover-bg: var(--yct-deep-ruby);
	--bs-btn-hover-border-color: var(--yct-deep-ruby);
	--bs-btn-active-bg: var(--yct-deep-ruby);
	--bs-btn-active-border-color: var(--yct-deep-ruby);

}

.btn-light {

	--bs-btn-bg: var(--yct-light-gray);
	--bs-btn-border-color: var(--yct-light-gray);
	--bs-btn-hover-bg: var(--bs-gray-800);
	--bs-btn-hover-color: white;
	--bs-btn-hover-border-color: var(--bs-gray-800);
	--bs-btn-active-bg: var(--bs-gray-800);
	--bs-btn-active-border-color: var(--bs-gray-800);

}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {

	margin-bottom: 1rem;

}

.pagination {

	--bs-pagination-active-bg: var(--yct-teal);

}

.display-2 {

	@media screen and (min-width: 992px) {

		font-size: 3.75rem;

	}

}

.carousel-control-next, .carousel-control-prev {

	top: 25%;
	bottom: 25%;
	min-width: 4rem;

}

.carousel-control-next-icon, .carousel-control-prev-icon {

	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 100%;
	width: 4rem;
	height: 4rem;
	background-size: 2rem;

}

.accordion {

	--bs-accordion-border-radius: 0;
	--bs-accordion-inner-border-radius: 0;
	--bs-accordion-active-bg: transparent;
	--bs-accordion-btn-padding-x: 0;
	--bs-accordion-active-color: var(--yct-deep-teal);
	--bs-accordion-body-padding-x: 0;

}

.accordion-item {

	border-left: none;
	border-right: none;
	border-bottom: none;

	&:not(:first-of-type) {

		border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);

	}

}

.accordion-button {

	font-size: 1.5rem;

	&:not(.collapsed) {

		box-shadow: none;

	}

}

/* Bootstrap Extensions */

.bg-ivory {

	background-color: var(--yct-ivory);

}

.bg-teal {

	background-color: var(--yct-teal);

}

.bg-deep-teal {

	background-color: var(--yct-deep-teal);

}

.bg-very-deep-teal {

	background-color: var(--yct-very-deep-teal);

}

.bg-ochre {

	background-color: var(--yct-ochre);

}

.bg-ruby {

	background-color: var(--yct-ruby);

}

.bg-green {

	background-color: var(--yct-green);

}

.bg-monogram {

	background-repeat: no-repeat;
	background-position: 0 -5rem;

	@media screen and (min-width: 992px) {

		background-image: url(../images/yct-monogram-bg.svg);

	}

}

.text-deep-teal {

	color: var(--yct-deep-teal);

}

.links-light {

	a:not(.btn) {

		color: var(--bs-light);

	}

}

.links-text-decoration-none {

	a {

		text-decoration: none;

	}

}

.ff-sans {

	font-family: var(--bs-font-sans-serif);

}

.inner-9-col-9 {

	width: 100%;

}

.inner-9-col-md-5 {

	@media screen and (min-width: 768px) {

		width: calc(100% / 9 * 5);

	}

}

.inner-9-col-lg-5 {

	@media screen and (min-width: 992px) {

		width: calc(100% / 9 * 5);

	}

}

.inner-9-col-lg-4 {

	@media screen and (min-width: 992px) {

		width: calc(100% / 9 * 4);

	}

}

/* Custom Styles */

html {

	min-height: 100%;
	background: linear-gradient(0deg,rgba(0, 45, 55, 1) 0%, rgba(0, 85, 104, 1) 100%);

}

body {

	background: transparent;

}

a {

	transition-duration: 0.2s;
	transition-property: color;

}

.desktop-menu {

	display: none;
	justify-content: end;
	align-items: baseline;
	padding: 0;
	margin: 0;
	list-style: none;

	@media screen and (min-width: 992px) {

		display: flex;

	}

	a {

		text-decoration: none;

	}

	> li {

		position: relative;
		z-index: 10;

		> a {

			padding: 1.6rem;
			display: flex;
			align-items: center;
			gap: 1rem;
			background-color: red;
			font-size: 24px;
			font-weight: 500;
			line-height: 1;
			width: min-content;
			color: white;

		}

		&:nth-child(3n-2) {

			> a {

				background-color: var(--yct-teal);

			}

			&:hover {

				> a {

					background-color: var(--yct-deep-teal);

				}

			}

			.sub-menu {

				a {

					&:hover {

						background-color: var(--yct-deep-teal);

					}

				}

			}

		}

		&:nth-child(3n-1) {

			> a {

				background-color: var(--yct-ruby);

			}

			&:hover {

				> a {

					background-color: var(--yct-deep-ruby);

				}

			}

			.sub-menu {

				a {

					&:hover {

						background-color: var(--yct-deep-ruby);

					}

				}

			}

		}

		&:nth-child(3n) {

			> a {

				background-color: var(--yct-ochre);
				color: var(--yct-very-deep-teal);

			}

			&:hover {

				> a {

					background-color: var(--yct-deep-ochre);
					color: white;

				}

			}

			&.menu-item-has-children {

				> a {

					&::after {

						font: var(--fa-font-light);
						display: inline-block;
						text-rendering: auto;
						-webkit-font-smoothing: antialiased;
						content: '\f107';
						color: var(--yct-very-deep-teal);
						margin-left: 0.5rem;

					}

				}

				&:hover {

					> a {

						&::after {

							color: white;

						}

					}

				}

			}

			.sub-menu {

				a {

					&:hover {

						background-color: var(--yct-deep-ochre);

					}

				}

			}

		}

		&.menu-item-has-children {

			> a {

				&::after {

					font: var(--fa-font-light);
					display: inline-block;
					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
					content: '\f107';
					color: white;
					margin-left: 0.5rem;
					transition-duration: 0.2s;
					transition-property: transform;

				}

			}

			&:hover {

				> a {

					&::after {

						transform: rotate(90deg);

					}

				}

				> .sub-menu {

					transform: translate(50%, 0);
					opacity: 1;
					pointer-events: all;

				}

			}

		}

		.sub-menu {

			list-style: none;
			padding: 0;

			a {

				transition-property: all;
				transition-duration: 0.2s;

				&:hover {

					color: white;

				}

			}

		}

		> .sub-menu {

			position: absolute;
			top: 100%;
			right: 50%;
			width: 100%;
			background-color: white;
			transform: translate(50%, 5rem);
			transition-duration: 0.2s;
			transition-property: all;
			opacity: 0;
			pointer-events: none;
			overflow: hidden;

			a {

				display: block;
				padding: 0.5rem 1.5rem;
				line-height: 1.2;

			}

			> li {

				> a {

					background-color: var(--yct-ivory);

				}

			}

		}

	}

}

.mobile-menu {

	list-style: none;
	padding: 0;
	margin: 0;

	a {

		display: block;
		padding: 0.375rem 1.5rem;
		color: white;
		text-decoration: none;

	}

	.sub-menu {

		list-style: none;
		padding: 0 0 0 1.5rem;
		margin: 0;

	}

	> li {

		&:nth-child(3n-2) {

			border-left: 4px solid var(--yct-teal);

		}

		&:nth-child(3n-1) {

			border-left: 4px solid var(--yct-ruby);

		}

		&:nth-child(3n) {

			border-left: 4px solid var(--yct-ochre);

		}

	}

}

.footer-menu {

	padding: 0;
	margin: 0;
	list-style: none;

	a {

		color: white;
		text-decoration: none;

	}

}

.ssowdidhueyubxsojo {

  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;

}


.list-check-icons {

	list-style: none;
	padding: 0;

	> li {

		padding-left: 1.5rem;
		position: relative;
		margin-bottom: 1rem;

		&::before {

			display: inline-block;
			text-rendering: auto;
			-webkit-font-smoothing: antialiased;
			font: var(--fa-font-regular);
			content: '\f00c';
			position: absolute;
			top: 0;
			left: 0;

		}

	}

}

.awaken {

  opacity: 0;
  transform: translateY(5rem);
  transition-property: opacity, transform;
  transition-duration: 1s;

  &.fade {

    transform: none;
    transition-duration: 0.5s;

  }

  &.in-viewport {

    opacity: 1;
    transform: translateY(0);

  }

}

.sticker {

	margin: 0;
	text-align: center;
	border-radius: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 67px;
	height: 67px;
	font-size: 1rem;
	line-height: 1;
	color: white;

	@media screen and (min-width: 992px) {

		width: 105px;
		height: 105px;
		font-size: 1.5rem;

	}

}

.wysiwyg-content {

  iframe {

		max-width: 100%;

		&[src*="youtube-nocookie.com"],
		&[src*="youtube.com"] {

			width: 100vw;
			height: auto;
			aspect-ratio: 1.777;

		}

  }

  .alignleft,
  .alignright {

    max-width: 100%;
		margin-bottom: 1.5rem;
    display: block;

    @media screen and (min-width: 576px) {

      display: inline;
      max-width: calc(50% - 1.5rem);

    }

  }

  .alignleft {

    @media screen and (min-width: 576px) {

      float: left;
      margin: 0 1.5rem 1.5rem 0;

    }

  }

  .alignright {

    @media screen and (min-width: 576px) {

      float: right;
      margin: 0 0 1.5rem 1.5rem;

    }

  }

  .aligncenter {

    margin: auto;
    display: block;

  }

	.alignnone {

		display: block;
		margin-bottom: 1.5rem;

	}

	.wp-caption,
	img {

		height: auto;

	}

	.wp-caption,
	img,
	iframe {

		max-width: 100%;

		@media screen and (min-width: 992px) {

			max-width: 912px;

		}

		@media screen and (min-width: 1200px) {

			max-width: 1092px;

		}

		@media screen and (min-width: 1400px) {

			max-width: 1272px;

		}

	}

	&.inner-9-col-lg-5 {

		.wp-caption,
		img,
		iframe {

			@media screen and (min-width: 992px) {

				max-width: 671px;

			}

			@media screen and (min-width: 1200px) {

				max-width: 808px;

			}

			@media screen and (min-width: 1400px) {

				max-width: 942px;

			}

		}

	}

	.wp-caption-text {

		font-size: 0.8rem;

	}

}

section {

	&.banner_image_video {

		.overlay {

			background-color: var(--yct-deep-teal);
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			@media screen and (min-width: 1200px) {

				position: absolute;
				background-color: transparent;

			}

		}

	}

	&.text_and_image {

		.image-col {

			@media screen and (min-width: 576px) {

				margin-top: -3rem;
				margin-bottom: -5rem;

			}

		}

	}

	&.plaque_place_explorer {

		.filters {

			top: 0;
			left: 0;
			width: 100%;
			z-index: 5;

			@media screen and (min-width: 1400px) {

				position: absolute;

			}

		}

		#map {

			aspect-ratio: 1;
			max-height: 1000px;
			width: 100%;

			@media screen and (min-width: 1200px) {

				aspect-ratio: 1.666;

			}

		}

		#grid {

			@media screen and (min-width: 1200px) {

				padding-top: 7rem;

			}

		}

}