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

/* Keyframes */

/* Bootstrap Overrides */

:root {

	--bach-navy: #1F386D;
	--bach-navy-dark: #061941;
	--bach-blue: #355fbb;
	--bach-purple: #954091;
	--bach-purple-medium: #81307D;
	--bach-purple-dark: #3C0539;
	--bach-pink: #b654b1;

	--bs-font-sans-serif: "Montserrat", sans-serif;
	--bs-border-radius: 0;
	--bs-border-radius-sm: 0;
	--bs-border-radius-lg: 0;
	--bs-border-radius-xl: 0;
	--bs-border-radius-xxl: 0;
	--bs-border-radius-2xl: 0;
	--bs-border-radius-pill: 0;
	--bs-body-color: var(--bach-navy);

}

.badge {

	text-transform: uppercase;
	--bs-badge-font-weight: 400;

}

.btn-primary {

	--bs-btn-bg: var(--bach-navy);
	--bs-btn-border-color: var(--bach-navy);
	--bs-btn-hover-bg: var(--bach-blue);
	--bs-btn-hover-border-color: var(--bach-blue);
	--bs-btn-active-bg: var(--bach-blue);
	--bs-btn-active-border-color: var(--bach-blue);
	--bs-btn-disabled-bg: var(--bs-gray-700);
	--bs-btn-disabled-border-color: var(--bs-gray-700);

	&::after {

		content: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L6 6L0 12V0Z' fill='white'/%3E%3C/svg%3E%0A");
		padding-left: 0.5rem;

	}

}

.btn-secondary {

	--bs-btn-bg: var(--bach-purple);
	--bs-btn-border-color: var(--bach-purple);
	--bs-btn-hover-bg: var(--bach-pink);
	--bs-btn-hover-border-color: var(--bach-pink);
	--bs-btn-active-bg: var(--bach-pink);
	--bs-btn-active-border-color: var(--bach-pink);
	--bs-btn-disabled-bg: var(--bs-gray-700);
	--bs-btn-disabled-border-color: var(--bs-gray-700);

}

.btn-light {

	--bs-btn-color: var(--bach-navy);
	--bs-btn-hover-color: var(--bach-navy);
	--bs-btn-active-color: var(--bach-navy);
	--bs-btn-disabled-bg: var(--bs-gray-700);
	--bs-btn-disabled-border-color: var(--bs-gray-700);

	&::after {

		content: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L6 6L0 12V0Z' fill='%231F386D'/%3E%3C/svg%3E%0A");
		padding-left: 0.5rem;

	}

}

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

	font-weight: 300;
	margin-bottom: 1rem;

}

.accordion-item {

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

}

/* Bootstrap Extensions */

.links-light {

	a:not(.btn) {

		color: var(--bs-light);

	}

}

.links-text-decoration-none {

	a {

		text-decoration: none;

	}

}

.bg-purple-dark {

	background-color: var(--bach-purple-dark);

}

.bg-purple-saltaire {

	background-color: var(--bach-purple-medium);
	background-image: url('../images/saltaire-white.png');
	background-size: cover;
	background-position: center;

}

.text-bg-purple {

	background-color: var(--bach-purple);
	color: white;

}

.text-bg-purple-dark {

	background-color: var(--bach-purple-dark);
	color: white;

}

.text-bg-navy-dark {

	background-color: var(--bach-navy-dark);
	color: white;

}

.text-navy {

	color: var(--bach-navy);

}

.btn-link-light {

	padding-left: 0;
	padding-right: 0;
	color: white;
	white-space: nowrap;

	&::after {

		content: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L6 6L0 12V0Z' fill='white'/%3E%3C/svg%3E%0A");
		padding-left: 0.5rem;

	}

}

/* Custom Styles */

body {

	background-color: #1e1e1e;

}

a {

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

}

.sjojowdhigigs {

  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;

	}

}

.desktop-menu {

	padding: 0;
  margin: 0;
  list-style: none;
  column-gap: 1.5rem;
  display: none;
	align-items: baseline;

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

    display: flex;

  }

  a {

    text-decoration: none;

  }

  > li {

   	position: relative;

		&.menu-item-has-children {

			> a {

				&::after {

					display: inline-block;
					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
					font: var(--fa-font-regular);
					content: '\f107';
					padding-left: 0.5rem;

				}

			}

		}

		&.button-blue,
		&.button-purple {

			> a {

				display: inline-block;
				padding: 0.375rem 0.75rem;
				color: var(--bs-white);
				background-color: var(--bach-navy);
				border: 1px solid var(--bach-navy);
				transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

				&::after {

					content: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L6 6L0 12V0Z' fill='white'/%3E%3C/svg%3E%0A");
					padding-left: 0.5rem;

				}

				&:hover {

					background-color: var(--bach-blue);
					border: 1px solid var(--bach-blue);

				}

			}

		}

		&.button-purple {

			> a {

				background-color: var(--bach-purple);
				border: 1px solid var(--bach-purple);

				&:hover {

					background-color: var(--bach-pink);
					border: 1px solid var(--bach-pink);

				}

			}

		}

   	a {

     	padding: 1.5rem 0;
			color: var(--bs-dark);

   	}

   	> .sub-menu {

     	&::before {

				content: "";
				display: inline-block;
				width: 1rem;
				height: 1rem;
				background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.19629 0L10.3924 5.25H0.000136852L5.19629 0Z' fill='%23343a40'/></svg>") no-repeat center/contain;
				position: absolute;
				top: -0.65rem;
				right: 50%;
				transform: translate(50%,0);

     	}

			position: absolute;
			top: calc(100% + 1.25rem);
			right: 50%;
			width: 250px;
			background-color: var(--bs-gray-800);
			padding: 0;
			text-align: center;
			transform: translate(50%,5rem);
			transition-duration: 0.2s;
			transition-property: all;
			opacity: 0;
			pointer-events: none;
			list-style: none;

			a {

				color: var(--bs-light);
				display: block;
				padding: 0.375rem 0.75rem;

				&:hover {

					background-color: var(--bs-dark);

				}

			}

			.sub-menu {

				display: none;

			}

   	}

   	&:hover {

     	> .sub-menu {

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

     	}

   	}

 	}

}

.footer-menu {

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

 a {

   color: white;
   text-decoration: none;

 }

 .sub-menu {

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

   .sub-menu {

     display: none;

   }

 }

}

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

	}

}

section {

	&.banner {


	}

}