/**
 * =========================================================
 * AOGM PRELOADER
 * =========================================================
 */


/**
 * =========================================================
 * PRELOADER CONTAINER
 * =========================================================
 */

#aogm-preloader {

	position: fixed;

	inset: 0;

	width: 100%;
	height: 100vh;

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--aogm-preloader-background);

	z-index: 999999;

}


/**
 * =========================================================
 * LOADING TEXT TYPE
 * =========================================================
 */

.aogm-preloader-text {

	position: relative;

	display: inline-block;

	font-family: inherit;

	font-size: clamp(28px, 7vw, 48px);

	font-weight: 700;

	letter-spacing: clamp(3px, 1vw, 8px);

	line-height: 1;

	text-transform: uppercase;

	white-space: nowrap;

	text-align: center;

}


.aogm-preloader-base {

	display: block;

	color: #d8d8d8;

}


.aogm-preloader-fill {

	position: absolute;

	inset: 0;

	color: var(--aogm-primary-colour);

	animation:
		aogm-preloader-pulse
		1s
		ease-in-out
		infinite;

}


/**
 * =========================================================
 * LOADING TEXT PULSE ANIMATION
 * =========================================================
 */

@keyframes aogm-preloader-pulse {

	0% {

		color: var(--aogm-primary-colour);

		opacity: .35;

		transform: scale(.98);

	}


	50% {

		color: var(--aogm-secondary-colour);

		opacity: 1;

		transform: scale(1);

	}


	100% {

		color: var(--aogm-primary-colour);

		opacity: .35;

		transform: scale(.98);

	}

}


/**
 * =========================================================
 * LOGO ANIMATION TYPE
 * =========================================================
 */


/**
 * Logo Wrapper
 */

.aogm-preloader-logo {

	position: relative;

	display: inline-block;

	width: 250px;

	animation:
		aogm-logo-breathe
		1.2s
		ease-in-out
		infinite;

}


/**
 * Base Logo
 */

.aogm-preloader-logo-base {

	display: block;

	width: 100%;

	height: auto;

}


/**
 * =========================================================
 * Overlay Logo
 * =========================================================
 */

.aogm-preloader-logo-overlay {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	object-fit: contain;


	/**
	 * Organic Wave Mask
	 */

	-webkit-mask-image:
		
		radial-gradient(
			ellipse 35% 100% at 20% 50%,
			#000 0%,
			transparent 70%
		),

		radial-gradient(
			ellipse 35% 100% at 60% 50%,
			#000 0%,
			transparent 70%
		),

		radial-gradient(
			ellipse 35% 100% at 100% 50%,
			#000 0%,
			transparent 70%
		);


	mask-image:

		radial-gradient(
			ellipse 35% 100% at 20% 50%,
			#000 0%,
			transparent 70%
		),

		radial-gradient(
			ellipse 35% 100% at 60% 50%,
			#000 0%,
			transparent 70%
		),

		radial-gradient(
			ellipse 35% 100% at 100% 50%,
			#000 0%,
			transparent 70%
		);


	-webkit-mask-repeat: no-repeat;

	mask-repeat: no-repeat;


	-webkit-mask-size: 300% 100%;

	mask-size: 300% 100%;


	-webkit-mask-position: 0% 50%;

	mask-position: 0% 50%;


	animation:

		aogm-logo-organic-wave
		1.5s
		ease-in-out
		infinite;

}

/**
 * =========================================================
 * LOGO BREATHING EFFECT
 * =========================================================
 *
 * Very subtle scale movement.
 * Keeps logo alive without moving position.
 *
 */

@keyframes aogm-logo-breathe {


	0%,
	100% {

		transform:

			scale(1);

	}


	50% {

		transform:

			scale(1.03);

	}

}


/**
 * =========================================================
 * PRELOADER EXIT
 * =========================================================
 */

#aogm-preloader.aogm-hide {

	opacity: 0;

	transition:

		opacity .4s .1s ease;

}


/**
 * =========================================================
 * RESPONSIVE
 * =========================================================
 */

@media (max-width: 1024px) {

	#aogm-preloader {

		height: 100vh;

		height: 100dvh;

	}

}



@media (max-width: 767px) {

	.aogm-preloader-text {

		font-size: 32px;

		letter-spacing: 4px;

	}


	.aogm-preloader-logo {

		width: 180px;

	}

}

/**
 * =========================================================
 * SEARCH RESULTS
 * =========================================================
 */

.aogm-search-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 40px 60px;
}

/* Search Form */

.aogm-global-search-form {
	margin-bottom: 20px;
}

.aogm-global-search-form-title {
	margin: 0 0 15px;
}

.aogm-global-search-form .aogm-search-form {
	position: relative;

	display: flex;
	align-items: center;

	width: 100%;
	max-width: 100%;
}

.aogm-global-search-form .aogm-search-field {
	width: 100%;
	height: 56px;

	padding: 0 70px 0 20px;
	
	font-size: 18px;

	border: 1px solid var(--aogm-border-colour);
	border-radius: 6px;

	background: var(--aogm-light-colour);

	outline: none;

	transition:
		border-color .3s ease,
		box-shadow .3s ease;
}

.aogm-global-search-form .aogm-search-field:focus {
	border-color: var(--aogm-primary-colour);
}

.aogm-global-search-form .aogm-search-submit {
	position: absolute;

	top: 50%;
	right: 8px;

	transform: translateY(-50%);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	padding: 0;
	margin: 0;

	border: none;
	border-radius: 50%;

	background: var(--aogm-secondary-colour);

	color: var(--aogm-primary-colour);

	cursor: pointer;

	transition:
		background .3s ease,
		color .3s ease;
}

.aogm-global-search-form .aogm-search-submit:hover {
	background: var(--aogm-primary-colour);
	color: var(--aogm-light-colour);
}

.aogm-global-search-form .aogm-search-icon {
	width: 18px;
	height: 18px;

	flex-shrink: 0;
}

/* Search Results */

.aogm-search-results {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.aogm-search-result {
	padding: 0 0 20px;

	border-bottom: 1px solid var(--aogm-border-colour);
}

.aogm-search-result:last-child {
	padding-bottom: 0;

	border-bottom: 0;
}

.aogm-search-result-inner {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* Highlight */

.aogm-search-result mark {
	display: inline-block;

	padding: 0 .12em;
	margin: 0;

	line-height: 1;

	background: var(--aogm-secondary-light-colour);
	color: var(--aogm-primary-colour);

	border-radius: 3px;

	vertical-align: baseline;
}

/* Thumbnail */

.aogm-search-result-thumbnail {
	order: 2;

	flex: 0 0 100px;

	display: flex;
	align-items: center;
}

.aogm-search-result-thumbnail img {
	display: block;

	width: 100px;
	height: 75px;

	object-fit: cover;

	border-radius: 4px;
}

/* Content */

.aogm-search-result-content {
	order: 1;

	flex: 1;
	min-width: 0;
}

.aogm-search-result-type {
	margin-bottom: 3px;
}

.aogm-search-result-title {
	margin: 0 0 5px;

	line-height: 1.3;
}

.aogm-search-result-title a {
	color: var(--aogm-primary-colour);

	text-decoration: none;

	transition: color .3s ease;
}

.aogm-search-result-title a:hover {
	color: var(--aogm-secondary-colour);

	text-decoration: none;
}

.aogm-search-result-excerpt {
	margin: 0;

	line-height: 1.5;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	overflow: hidden;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

	.aogm-search-container {
		padding: 35px 30px 50px;
	}

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.aogm-search-container {
		padding: 30px 20px 40px;
	}

	.aogm-global-search-form-title {
		margin-bottom: 12px;
	}

	.aogm-global-search-form .aogm-search-field {
		height: 50px;

		padding: 0 60px 0 16px;

		font-size: 16px;
	}

	.aogm-global-search-form .aogm-search-submit {
		width: 36px;
		height: 36px;
	}

	.aogm-search-result-inner {
		gap: 14px;
	}

	.aogm-search-result-thumbnail {
		flex: 0 0 80px;
	}

	.aogm-search-result-thumbnail img {
		width: 80px;
		height: 60px;
	}

	.aogm-search-result-title {
		line-height: 1.35;
	}

}