/*!
Theme Name: codea
Theme URI: https://campaignedge.com.au
Author: Campaign Edge
Author URI: https://campaignedge.com.au
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 8.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: codea
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
>>> codea:
---------------------------------------------------------------- */


/* General
--------------------------------------------- */
body .dashicons {
	width: 1em;
	height: 1em;
	font-size: inherit;
}

.first-no-margin> :first-child,
.fcnm> :first-child {
	margin-top: 0px;
}

.lcnm> :last-child {
	margin-bottom: 0px;
}

.mt0 {
	margin-top: 0;
}

.mb0 {
	margin-bottom: 0;
}

.pt0 {
	padding-top: 0;
}

.pb0 {
	padding-bottom: 0;
}


/* Colours
--------------------------------------------- */
.pc-color {
	color: var(--wp--preset--color--primary);
}

.sc-color {
	color: var(--wp--preset--color--secondary);
}

.tc-color {
	color: var(--wp--preset--color--tertiary);
}

.white-color {
	color: var(--wp--preset--color--white);
}

.black-color {
	color: var(--wp--preset--color--black);
}

.pc-bg {
	background-color: var(--wp--preset--color--primary);
}

.sc-bg {
	background-color: var(--wp--preset--color--secondary);
}

.tc-bg {
	background-color: var(--wp--preset--color--tertiary);
}

.white-bg {
	background-color: var(--wp--preset--color--white);
}

.black-bg {
	background-color: var(--wp--preset--color--black);
}

.pc-fill {
	fill: var(--wp--preset--color--primary);
}

.sc-fill {
	fill: var(--wp--preset--color--secondary);
}

.tc-fill {
	fill: var(--wp--preset--color--tertiary);
}

.white-fill {
	fill: var(--wp--preset--color--white);
}

.black-fill {
	fill: var(--wp--preset--color--black);
}

.pc-border {
	border-color: var(--wp--preset--color--primary);
}

.sc-border {
	border-color: var(--wp--preset--color--secondary);
}

.tc-border {
	border-color: var(--wp--preset--color--tertiary);
}

.white-border {
	border-color: var(--wp--preset--color--white);
}

.black-border {
	border-color: var(--wp--preset--color--black);
}

/* Full BG's
- To give an element a full sized background in code give it the class .full-bg along with the 
class wp color class eg .has-primary-background-color
--------------------------------------------- */
.full-bg,
.wp-block-group.has-background {
	position: relative;
	overflow: visible;

	&>* {
		position: relative;
		z-index: 2;
	}

	&:before {
		content: "";
		width: 100vw;
		height: 100%;
		position: absolute;
		top: 0;
		left: calc(100% / 2);
		transform: translateX(-50%);
		z-index: 0;
		background-position: 50% 50%;
		background-size: cover;
		background: inherit;
	}
}

/* Disable full BG's on nested groups */
.wp-block-group .wp-block-group.has-background:before,
.wp-block-group .wp-block-group.has-background:after,
.wp-block-group .wp-block-group.has-background[style*=".webp')"]:before,
.wp-block-group .wp-block-group.has-background[style*=".webp')"]:after,
.wp-block-group .wp-block-group.has-background[style*=".png')"]:before,
.wp-block-group .wp-block-group.has-background[style*=".png')"]:after,
.wp-block-group .wp-block-group.has-background[style*=".jpg')"]:before,
.wp-block-group .wp-block-group.has-background[style*=".jpg')"]:after {
	width: 100%;
	transform: none;
	left: 0;
}

/* If the group has both a colour and image selected then the colour is moved to the :after placed ontop of the image*/
.wp-block-group.has-background[style*=".webp')"]:before,
.wp-block-group.has-background[style*=".jpg')"]:before,
.wp-block-group.has-background[style*=".png')"]:before {
	background-color: unset;
}

.wp-block-group.has-background[style*=".webp')"]:after,
.wp-block-group.has-background[style*=".jpg')"]:after,
.wp-block-group.has-background[style*=".png')"]:after {
	content: "";
	width: 100vw;
	height: 100%;
	position: absolute;
	top: 0;
	left: calc(100% / 2);
	transform: translateX(-50%);
	z-index: 1;
	background-position: 50% 50%;
	background-size: cover;
	background-color: inherit;
}



/* Content Areas
--------------------------------------------- */

.main-content {
	max-width: var(--wp--style--global--wide-size);
	width: 100%;
	margin: 0 auto;
}

.main-content .main-content-inner {
	padding: 0 4%;
}



/* Header - Logo and Menu container
--------------------------------------------- */

.header-spacer {
	position: relative;
	display: block;
	background-color: var(--wp--preset--color--white);
}

.site-header {

	position: relative;
	width: 100%;
	z-index: 3;
	background-color: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--quaternary);

	.main-content-inner {
		position: relative;

		.header-main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1em 0;
			column-gap: 10%;


			.header-logo {
				flex: 0 1 200px;
				position: relative;

				a {
					display: flex;
					width: 100%;
					line-height: 0;
					padding-bottom: 80%;

					img {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						object-fit: contain;
						object-position: left center;
					}
				}
			}

			.header-nav-container {
				flex: 1 1 auto;

				.header-nav-container-search {
					display: flex;
					align-items: center;
					column-gap: 2em;

					.header-nav-container-search-form {
						position: relative;
						flex: 1 0 auto;

						label {
							position: absolute;
							top: 50%;
							left: 1em;
							width: 1.25em;
							height: 1.25em;
							pointer-events: none;
							transform: translateY(-50%);
						}

						input {
							padding: 1em 2em 1em 3em;
							border: 1px solid var(--wp--preset--color--quaternary);
							width: 100%;
							font-size: 1em;

							&::placeholder {
								color: #627a83;
							}
						}

						button {
							display: none;
						}
					}

					.header-nav-container-phone {
						flex: 0 1 auto;

						a {
							text-decoration: none;
							font-weight: 500;

							span {
								color: var(--wp--preset--color--primary);
								vertical-align: bottom;
								display: inline-block;
								margin-right: 0.25em;
								font-size: 1.25em;
							}
						}
					}

				}

			}

			.header-nav {
				display: flex;
				align-items: center;
				justify-content: right;
				column-gap: 2em;
				margin-top: 1em;

				.header-nav-container-ctas {
					display: flex;
					column-gap: 0.75em;

					.button-p {
						margin: 0;
					}
				}
			}
		}
	}

	&.site-header-scrolled {

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

		.main-content-inner .header-main {
			padding: 0.5em 0 0.5em 0;

			.header-logo {
				flex: 0 1 150px;
			}
		}
	}

	/* Lets the script read the expanded height mid-scroll without animating */
	&.site-header-measuring,
	&.site-header-measuring * {
		transition: none !important;
	}
}

.site-header-transitions {
	transition: background-color 0.25s ease, padding-top 0.25s ease;

	.header-main {
		transition: padding-top 0.25s ease, padding-bottom 0.25s ease;
	}

	.header-logo {
		transition: flex 0.25s ease;
	}
}



/* Header - Menu
--------------------------------------------- */
.menu-container {
	flex: 1 1 auto;

	.menu {
		margin: 0px;
		list-style: none;
		padding: 0px;
		display: flex;
		justify-content: right;

		.menu-item {
			margin-left: 1.25em;
			padding: 0.2em;

			a {
				color: var(--wp--preset--color--text);
				font-weight: 500;
				text-decoration: none;
				transition: color 0.2s ease, background 0.2s ease, border-color ease 0.2s;
				font-size: 17px;
				padding: 0.25em 0.5em;
				display: block;
				border-bottom: 1px solid transparent;
			}

			&:hover>a {
				border-bottom: 1px solid white;
			}

			&.current-menu-item>a {
				border-bottom: 1px solid white;
			}

			&:last-child a {
				padding-right: 0px;
			}

			/* Header - Sub Menu
			--------------------------------------------- */
			&.menu-item-has-children {
				position: relative;

				>a {
					padding-right: 1.25em;
				}

				&::before {
					width: 0.5em;
					height: 0.5em;
					background-color: white;
					clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
					position: absolute;
					top: calc(50% - 0.25em);
					right: 0em;
					content: "";
					transition: 0.2s ease;
					transform: rotate(-90deg);
				}

				&:hover::before {
					color: white;
					transform: rotate(0deg);
				}

				&.current-menu-item::before {
					border-bottom: 1px solid white;
				}

				&:hover>.sub-menu {
					opacity: 1;
					pointer-events: all;
				}

				.sub-menu .menu-item.menu-item-has-children>a {
					padding-right: 0.75em;
				}
			}

			.sub-menu {
				opacity: 0;
				transition: opacity 0.2s ease;
				pointer-events: none;
				padding: 0px 0.5em;
				margin: 0px;
				position: absolute;
				top: 100%;
				left: 0px;
				z-index: 2;
				list-style: none;
				width: max-content;
				max-width: 200px;
				background: var(--wp--preset--color--primary);
				display: block;

				.menu-item {
					margin-left: 0px;
					padding-left: 0px;

					a {
						font-weight: 400;
						line-height: 1.2em;
					}

					.sub-menu {
						left: 100%;
						top: 0%;
						width: max-content;
					}
				}
			}
		}
	}

	.site-header-scrolled &,
	.site-header-bg & {
		.menu .menu-item .sub-menu {
			background-color: var(--wp--preset--color--tertiary);
		}
	}
}


/* Header - Menu Hamburger
--------------------------------------------- */
.menu-center {
	display: none;
}

.show-on-mobile-menu {
	display: none;
}



/* Footer
--------------------------------------------- */

.site-footer {
	padding: 1.5em 0;
	background-color: var(--wp--preset--color--secondary);
	background: linear-gradient(45deg, var(--wp--preset--color--primary), var(--wp--preset--color--secondary));
	color: white;
	overflow: hidden;

	.footer-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		column-gap: 2em;
		margin-bottom: 2em;

		.footer-logo {
			flex: 0 1 250px;
		}

		.footer-back-to-top {
			p {
				a {
					color: white;
					background-color: transparent;
					border: 1px solid #ffffff;

					&::after {
						border-color: white;
						transform: rotate(-45deg);
					}
				}
			}
		}
	}

	.footer-menus {
		display: flex;
		justify-content: space-between;
		column-gap: 2em;

		h6 {
			margin-top: 0;
		}

		.footer-menu-1 {
			flex: 0 1 50%;
		}

		.footer-menu-2 {
			flex: 0 1 25%;
			border-left: 1px solid var(--wp--preset--color--quaternary);
		}

		.footer-menu {
			padding-left: 1em;


			.footer-menu-container {

				.menu {
					list-style: none;
					padding: 0;
					margin: 0;

					.menu-item {
						margin-left: 0;
						padding-left: 0;
						margin-bottom: 0.5em;

						a {
							color: white;
							text-decoration: none;
							font-weight: 400;
							font-size: 1em;
							padding: 0.25em 0.5em;
							display: block;
						}
					}
				}
			}
		}

		.footer-contact {
			flex: 0 1 25%;
			padding-left: 1em;
			border-left: 1px solid var(--wp--preset--color--quaternary);
		}
	}


	.footer-bottom {
		border-top: 1px solid var(--wp--preset--color--quaternary);
		margin-top: 2em;
		padding-top: 2em;
		font-size: 0.9em;
	}

}



/* WP Blocks
--------------------------------------------- */

.column-align-bottom {
	display: flex;
	align-items: flex-end;
}

.wp-block-cover a {
	text-decoration: none;
	transition: all 0.3s ease;
}

.wp-block-column {
	position: relative;
}



/* Youtube */
.is-provider-youtube .wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%;
	width: 100%;
}

.is-provider-youtube .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* image fixing */

.wp-block-group.is-nowrap.is-layout-flex.wp-block-group-is-layout-flex img {
	max-width: unset;
	vertical-align: unset;
}

.wp-block-image.size-full.is-resized img {
	max-width: unset;
}

/* Buttons */

.button-p,
.wp-block-button {
	margin-top: 0;
	font-size: 1em;

	a,
	.wp-block-button__link {
		color: white;
		background-color: var(--wp--preset--color--primary);
		text-decoration: none;
		font-weight: 500;
		padding: 0.75em 1.3em;
		border-radius: 0.25em;
		font-size: 1.15em;
		display: inline-block;
		border: 1px solid transparent;
		transition: background-color 0.25s ease;

		&:hover {
			color: white;
			background-color: var(--wp--preset--color--secondary) !important;
		}

		&.has-white-background-color {
			border-color: var(--wp--preset--color--primary);
			color: var(--wp--preset--color--primary);
			background-color: white;

			&:hover {
				color: white;
				background-color: var(--wp--preset--color--secondary) !important;
			}
		}
	}


}


/* Columns with cover block */
.wp-block-columns.are-vertically-aligned-center.is-layout-flex.wp-block-columns-is-layout-flex:has(.wp-block-cover) {

	>.wp-block-column:nth-child(1),
	>.wp-block-column:nth-child(2) {
		position: relative;
		align-self: stretch;

		.wp-block-cover {
			object-fit: cover;
			width: 50vw;
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			max-height: unset;
			margin: 0;
			margin-block-start: 0;
			padding: 0;
			line-height: 0;
			display: block;
			min-height: unset;
		}

		&.has-background:before {
			content: "";
			width: 50vw;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			z-index: -1;
			background: inherit;
		}
	}

	>.wp-block-column:nth-child(2) {

		.wp-block-cover {
			left: 0;
			right: unset;
		}

		&.has-background:before {
			left: 0;
			right: unset;
		}
	}
}

/* Groups */
:root :where(.is-layout-constrained)> :first-child,
:root :where(.is-layout-flow)> :first-child {
	margin-block-start: 0;
}

:root :where(.is-layout-constrained)> :last-child,
:root :where(.is-layout-flow)> :last-child {
	margin-block-end: 0;
}



/* Forms
--------------------------------------------- */

#page .gform_wrapper,
.gform_wrapper {

	form {

		.gform-body {

			.gform_fields {
				row-gap: 1em;

				.gfield {
					label {}

					.ginput_container {

						input {
							border-color: var(--wp--preset--color--primary);
							background-color: white;
							border-radius: 0em;
							border-width: 1px;
							border-style: solid;
							padding: 1.35em 1.2em;
							font-weight: 500;
							text-align: left;

							&.gfield-choice-input {
								padding: 0.5em;
							}
						}
					}

				}

				.gfield--type-submit {
					align-items: flex-start;
				}
			}

		}

		.gform-footer {}



		.gfield--type-submit input,
		.gform-footer .gform_button,
		.gform-page-footer .gform-theme-button {
			background-color: var(--wp--preset--color--secondary);
			color: white;
			border-radius: 0em;
			border-width: 0;
			padding: 0.5em 1em;
			font-weight: 600;
			font-size: 1em;
			text-transform: uppercase;
		}
	}

}


.gform_required_legend {
	display: none;
}


/* Flourish
--------------------------------------------- */

.link-arrow-a {
	position: relative;

	&::after {
		content: '';
		display: inline-block;
		margin-left: 0.75em;
		vertical-align: middle;
		width: 0.5em;
		height: 0.5em;
		border-right: 2px solid var(--wp--preset--color--secondary);
		border-top: 2px solid var(--wp--preset--color--secondary);
		transform: rotate(45deg);
	}
}




/* Archive
--------------------------------------------- */




/* Pagination
--------------------------------------------- */

.news-pagination {
	text-align: center;
	font-weight: 700;
	margin: 1em 0;
}

.page-numbers {
	padding: 0;
	text-align: right;
	list-style: none;
	margin: 0px;
	display: inline-block;

	a {
		color: var(--wp--preset--color--text);
	}

	li {
		display: inline-block;
		width: 1.2em;
		height: 1.25em;
		line-height: 1.25em;
		font-weight: 600;
		margin: 0;
		text-align: center;

		a,
		span {
			text-decoration: none;
		}

		.next,
		.prev {
			display: block;
			position: relative;
			color: transparent;
			margin: 0px;

			&:after {
				content: "";
				border-right: 0.2em solid black;
				border-bottom: 0.2em solid black;
				display: block;
				line-height: 1;
				font-weight: 400;
				font-style: normal;
				speak: never;
				text-decoration: inherit;
				text-transform: none;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				width: 0.6em;
				height: 0.6em;
				font-size: 0.9em;
				vertical-align: top;
				text-align: center;
				transition: color .1s ease-in;
				position: absolute;
				top: 50%;
				left: 40%;
				transform: translate(-50%, -50%) rotate(-45deg);
				z-index: 2;
				pointer-events: none;
				cursor: pointer;
			}
		}

		.prev:after {
			transform: translate(-50%, -50%) rotate(135deg);
			left: 60%;
		}
	}

	&.current {
		text-decoration: underline;
		color: var(--wp--preset--color--primary);
	}
}



/* MOBILE
--------------------------------------------- */

@media only screen and (max-width: 1300px) {

	.site-header .main-content-inner .header-logo {
		flex: 0 1 200px;
	}


}

/* MENU MOBILE TRIGGER - Move last submenus to the left */

@media only screen and (max-width: 1675px) {
	.menu-container .menu .menu-item:last-child>.sub-menu {
		left: unset;
		right: 0;
	}
}

@media only screen and (max-width: 1380px) {

	.menu-container .menu .menu-item:last-child>.sub-menu .menu-item {
		position: relative;

		>.sub-menu {
			top: 0;
			left: 0;
			transform: translateX(-100%);
		}
	}

}


/* MENU MOBILE TRIGGER */
@media only screen and (max-width: 1100px) {


	/* Menu - pullout */

	.menu-pullout-mask {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: var(--wp--preset--color--quaternary);
		z-index: 10;
		display: block;
	}

	.menu-pullout {
		display: block;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		transform: translateX(-101%);
		transition: transform .5s ease;
		z-index: 11;
		padding: 3em;
		box-shadow: 1px 1px 7px 0 #00000045;
		background: var(--wp--preset--color--primary);
		height: 100vh;

		&.menu-pullout-active {
			transform: translateX(0%);
			overflow-y: scroll;
		}

		.menu-container .menu .menu-item a {
			padding: 0.25em 0em;
		}

		.menu-center {
			margin: 0 auto;
			display: block;
			margin-top: 3em;
		}
	}


	/* Hamburger */
	.menu-center {
		position: relative;
		width: 2.3em;
		text-align: center;
		margin: 0 auto;
		display: inline-block;
		vertical-align: middle;
		border: 2px solid white;
		border-radius: 100%;
		height: 2.3em;
		padding: 0.5em;

		&:before,
		&:after,
		div {
			background: white;
			content: "";
			display: block;
			height: 2px;
			border-radius: 0px;
			margin: 3px 0;
			margin-top: 2px;
			transition: 0.5s;
		}

		&:hover {
			background: var(--wp--preset--color--secondary);
		}

		&.menu-center-active {
			&:before {
				transform: translateY(5px) rotate(135deg);
			}

			&:after {
				transform: translateY(-5px) rotate(-135deg);
			}

			div {
				transform: scale(0);
			}
		}

	}




	/* MENU */
	.site-header .main-content .main-content-inner .header-main .header-logo {
		flex: 0 1 200px;
	}

	.menu-container .menu {
		flex-wrap: wrap;
		font-size: 16px;

		.menu-item {
			flex: 1 1 100%;
			padding-right: 0px;
			padding-left: 0px;
			margin-bottom: 0.75em;
			margin-left: 0;

			a {
				display: inline-block;
				border-right: none;
			}

			.sub-menu {
				position: relative;
				top: unset;
				left: unset;
				display: none;
				width: 100%;
				max-width: unset;

				.menu-item {
					margin-bottom: 0px;

					.sub-menu {
						left: unset;
						top: unset;
						width: 100%;
					}
				}
			}

			&.menu-item-has-children {

				&:hover>.sub-menu {
					display: block;
					border: 0px;
					padding-left: 1em;
					border-left: 1px solid white;
				}

				&::before,
				:hover::before {
					top: 0.831em;
				}
			}
		}
	}



}

@media only screen and (max-width: 1024px) {}


@media only screen and (max-width: 810px) {}


@media only screen and (max-width: 500px) {

	/* Flex Styling
	--------------------------------------------- */


	/* Menu
	--------------------------------------------- */
	.menu-pullout {
		padding-left: 5%;
		padding-right: 5%;
	}

	.menu-container .menu .menu-item:hover>a {
		border-bottom: unset;
	}

	.menu-container .menu .menu-item .sub-menu {
		padding-top: 0.5em;
		margin-bottom: 1em;
	}


}