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

/* Mixins */

/* Keyframes */

/* FontAwesome Overrides */

/* Bootstrap Overrides */

:root {

	--r-maroon: #943042;
	--r-maroon-dark: #771F2F;
	--r-maroon-light: #F44D61;
	--r-yellow: #FFCE07;
	--r-yellow-rgb: 255,206,7;
	--r-beige: #E0C4AA;
	--r-salmon: #F44D61;
	--r-blue: #416DB5;

	--bs-body-bg: var(--r-maroon-dark);
	--bs-body-color: var(--bs-light);
	--bs-font-sans-serif: "Nunito Sans", sans-serif;
	--bs-font-serif: "Libre Baskerville", serif;
	--bs-body-line-height: 1.8;
	--bs-body-font-family: var(--bs-font-serif);
	--bs-link-color-rgb: var(--r-yellow-rgb);
	--bs-link-hover-color-rgb: var(--bs-white-rgb);

}

.btn {

	--bs-btn-font-family: var(--bs-font-sans-serif);
	text-transform: uppercase;
  --bs-btn-border-radius: 2rem;
  --bs-btn-padding-x: 1rem;

}

.btn-group-sm>.btn, .btn-sm {

	--bs-btn-border-radius: 1rem;
	--bs-btn-padding-x: 1.5rem;

}

.btn-primary {

  --bs-btn-bg: var(--r-maroon);
  --bs-btn-border-color: var(--r-maroon);
  --bs-btn-hover-bg: var(--r-maroon-dark);
  --bs-btn-hover-border-color: var(--r-maroon-dark);
  --bs-btn-active-bg: var(--r-maroon-dark);
  --bs-btn-active-border-color: var(--r-maroon-dark);
  --bs-btn-disabled-bg: var(--bs-dark);
  --bs-btn-disabled-border-color: var(--bs-dark);

}

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

	font-family: var(--bs-font-sans-serif);
	margin-bottom: 1rem;

}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {

	--bs-offcanvas-border-width: 0;
	--bs-offcanvas-height: fit-content;

}

.form-select {

  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

}

.carousel-indicators [data-bs-target] {

  width: 10px;
  height: 10px;
  border-radius: 100%;

}

/* Bootstrap Extensions */

.links-light {

	a:not(.btn) {

		--bs-link-color-rgb: var(--bs-light-rgb);
		--bs-link-hover-color-rgb: var(--bs-white-rgb);

	}

}

.links-dark {

	a:not(.btn) {

		--bs-link-color-rgb: var(--bs-dark-rgb);
		--bs-link-hover-color-rgb: var(--bs-dark-rgb);

	}

}

.bg-maroon {

	background-color: var(--r-maroon);

}

.bg-maroon-dark {

	background-color: var(--r-maroon-dark);

}

.bg-brush-stroke-maroon {

	background-image: url("../images/brush-stroke-maroon.png");
	background-repeat: no-repeat;
	background-size: 350px auto;
	background-position: 105% 0;

}

.bg-brush-stroke-beige {

	background-image: url("../images/brush-stroke-beige.png");
	background-repeat: no-repeat;
	background-size: 350px auto;
	background-position: 105% 0;

}

.bg-beige {

	background-color: var(--r-beige);

}

.bg-salmon {

	background-color: var(--r-salmon);

}

.text-maroon {

	color: var(--r-maroon) !important;

}

.text-beige {

	color: var(--r-beige) !important;

}

.text-dark {

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

		color: var(--bs-dark);

	}

}

.ff-sans {

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

}

.ff-serif {

	font-family: var(--bs-font-serif);
	line-height: 140%;

}

.headings-ff-serif {

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

		font-family: var(--bs-font-serif);
		line-height: 1.5;

	}

}

.headings-maroon {

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

		color: var(--r-maroon);

	}

}

/* Custom Styles */

a {

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

}

.snoeotfofdhi {

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

}

.offcanvas-menu {

	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--bs-font-sans-serif);

	.sub-menu {

		list-style: none;
		padding-left: 1rem;

	}

	a {

		display: block;
		padding: 0.5rem 0;
		color: white;
		text-decoration: none;
		border-top: 1px solid rgba(255,255,255,0.3);
		overflow: hidden;
		transition-property: all;
		transition-duration: 0.2s;
		position: relative;

		&:hover {

			border-top: 1px solid rgba(255,255,255,1);

		}

	}

}

.awaken {

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

  &.fade {

    transform: none;
    transition-duration: 0.5s;

  }

  &.in-viewport {

    opacity: 1;
    transform: translateY(0);

  }

}

.wysiwyg-content {

	.wp-caption {

		max-width: 100%;

	}

  img {

    max-width: 100%;
    height: auto;
		box-shadow: var(--scdt-yellow) 10px 10px;
		border-radius: var(--bs-border-radius-xl);

  }

  iframe {

    max-width: 100%;

  }

  .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;

	}

}

.expandable {

	.content {

		position: relative;
		height: 200px;
		overflow: hidden;

		.overlay {

			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(0deg,rgba(148, 48, 66, 1) 0%, rgba(148, 48, 66, 0) 100%);
			pointer-events: none;

		}

	}

	&.active {

		.content {

			height: auto;

		}

		.overlay {

			display: none;

		}

	}

}

section {

	&.text__image_mosaic {

		.mosaic {

			object-fit: cover;
			width: 100%;
			height: auto;

		}

		.images-mobile {

			padding-left: 1.75rem;

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

				padding-left: 4rem;

			}

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

				display: none;

			}

			.image-1 {

				width: 40%;
				height: 83px;

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

					height: 140px;

				}

			}

			.image-2 {

				width: 60%;
				height: 83px;

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

					height: 140px;

				}

			}

			.image-3 {

				aspect-ratio: 1.22;

			}

			.image-4 {

				aspect-ratio: 1.69;

			}

		}

		.images-desktop {

			display: none;

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

				display: block;

			}

			.image-1 {

				position: absolute;
				right: 20%;
				width: 20%;
				height: auto;
				transform: translate(0, -100%);

			}

			.image-2 {

				position: absolute;
				right: 0;
				width: 20%;
				height: auto;
				transform: translate(0, -100%);

			}

			.image-3 {

				width: 75%;
				height: 300px;

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

					height: 430px;

				}

			}

			.image-4 {

				width: 25%;
				height: 300px;

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

					height: 430px;

				}

			}

		}

	}

	&.text__image {

		.wrap {

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

				max-width: 312px;

			}

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

				max-width: 432px;
				padding-right: 3rem;

			}

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

				max-width: 522px;
				padding-right: 5rem;

			}

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

				max-width: 612px;

			}

			&.img-left {

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

					padding-left: 3rem;
					padding-right: 0;

				}

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

					padding-left: 5rem;
					padding-right: 0;

				}

			}

		}

	}

	&.image_slider {

		.gallery {

			.item {

				max-width: 610px;

				&.active {

					max-width: 950px;

				}

			}

		}

	}

  &.projects_grid {

    .fixed-height {

      .project-image {

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

          height: 500px;

        }

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

          height: 600px;

        }

      }

    }

    &.filtering-active {

      .filterable {

        flex: 0 0 auto;
        width: 100%;

        &.fixed-height {

          .project-image {

            height: auto;

          }

        }

      }

    }

  }

  &.banner_image_text_carousel {

    .carousel-item {

      .ratio {

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

          max-height: 100vh;

        }

      }

    }

    .overlay {

      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      background-color: var(--r-maroon-dark);
      padding-bottom: 1rem;

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

        position: absolute;
        align-items: end;
        background-color: transparent;
        padding-bottom: 7rem;

      }

    }

    .links {

      background-color: var(--r-maroon-dark);
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 1;
      padding-bottom: 4rem;

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

        position: absolute;
        background-color: transparent;

      }

    }

  }

}