/**
 * Theme Name: Codan Theme
 * Version: 1.0
 */


/*NOTES 
palette
- light grey: #d9d9d6
- saphhire: #1d23aa
- night: #041c2c
*/


/* ## Wordpress Settings
------------------------------------------- */
	:root{
		--wp--preset--spacing--20: 3px;
		--wp--preset--spacing--30: 10px;
		--wp--preset--spacing--40: 16px;
		--wp--preset--spacing--50: clamp(16px, 13.091px + 0.909vw, 24px);
		--wp--preset--spacing--60: clamp(16px, 8.727px + 2.273vw, 36px);
		--wp--preset--spacing--70: clamp(40px, calc(34px + 1.667vw), 54px);;
		--wp--preset--spacing--80: clamp(36px, calc(-9.091px + 14.091vw), 160px);

		--wp--preset--font-size--x-large: clamp(40px, calc(28px + 3.333vw), 68px);
	}


/* ## Color
------------------------------------------- */
	.color2{
		color: var(--wp--preset--color--secondary);
	}

/* ## Typography
------------------------------------------- */
	body{
		font-size: 16px;
		line-height: 1.5;
	}
	h1,h2,h3,h4,h5,h6{
		color: var(--wp--preset--color--secondary);
	}
	h1{
		font-size: clamp(30px, calc(10px + 6.25vw), 85px);
		line-height: 1;
		letter-spacing: -6%;
	}
	h2,.like-h2{
		font-size: clamp(40px, calc(34px + 1.667vw), 54px);
		line-height: 1.2;
	}
	h3,.like-h3{
		font-size: clamp(20px, calc(12.286px + 2.143vw), 38px);
		line-height: 1.2;
	}
	h4{
		font-size: clamp(18px, calc(15.429px + 0.714vw), 24px);
		line-height: 1.2;
	}
	h6, .like-h6{
		text-transform: uppercase !important;
		font-weight: 500;
		letter-spacing: 2px;
		font-size: 14px;
	}
	a{
		text-decoration: none;
	}
	.has-x-large-font-size{
		letter-spacing: -6%;
	}
	.has-wp-block-list ul,
	ul.wp-block-list{
		list-style-type: none;
		padding-left: 25px;
		li{
			text-indent: -25px;
			&::before{
				content: '—';
				padding-right: 10px;
			}
		}
	}

/* ## HTML Elements
------------------------------------------- */
	body{
		overflow-x: clip;
		min-height: 100vh;
		background-color: var(--wp--preset--color--tertiary);
	}
	main#page > .inner > * {
		padding-inline: var(--siteInset);
	}
	hr.wp-block-separator{
		border-top: 1px solid currentColor;
		margin-inline: 0 !important;
		.aos-animate &{
			animation: lineDrawRight 1s ease-out 1s both;
		}
	}
	
	


/* ## Images
------------------------------------------- */
	.asp-landscape,
	.asp-portrait,
	.asp-square,
	.asp-wide,
	.asp-tall{
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}
	.has-frame-anim{
		.swiper-slide{
			padding: 16px;
			transition: all 0.4s ease 0s;
			opacity: 0;
			figure{
				&:before, &:after{
					content: '';
					display: block;
					position: absolute;
					width: 90px;
					height: 90px;
					background-image: url(assets/images/target.svg);
					background-size: contain;
					background-repeat: no-repeat;
					opacity: 0;
					transition: all 0.4s ease 1s;
				}
				&:before{
					top: 16px;
					left: 16px;
				}
				&:after{
					bottom: 16px;
					right: 16px;
					rotate: 180deg;
				}
			}
		}
		.swiper-slide-active{
			opacity: 1;
			figure{
				&:before{
					top: 0;
					left: 0;
					opacity: 1;
				}
				&:after{
					bottom: 0;
					right: 0;
					opacity: 1;
				}
			}
		}
	}
	figure.has-frame-anim{
		padding: 16px;
		transition: all 0.4s ease 0s;
		position: relative;
		&::before, &::after{
			content: '';
			display: block;
			position: absolute;
			width: 90px;
			height: 90px;
			background-image: url(assets/images/target.svg);
			background-size: contain;
			background-repeat: no-repeat;
			transition: all 0.4s ease 1s;
			z-index: -1;
		}
		&::before{
			top: 0;
			left: 0;
			@starting-style{
				top: 16px;
				left: 16px;
			}
		}
		&::after{
			bottom: 0;
			right: 0;
			rotate: 180deg;
			@starting-style{
				bottom: 16px;
				right: 16px;
			}
		}
	}
	@media(max-width: 600px){
		.wp-block-cover__image-background.has-parallax{
			background-attachment: scroll !important;
		}

	}
	.icon-download{
		display: inline-block;
		width: 20px;
		height: 20px;
		background-image: url(assets/images/sprite-download.webp);
		background-size: 18px auto;
		background-repeat: no-repeat;
		background-position: bottom;
		transition: all 0.4s ease;
	}
	:hover:has(> .icon-download),
	.trigger-download-sprite:hover + :has(> .icon-download){
		.icon-download{
			background-position: top;
		}
	}

/* ## Buttons & Links
------------------------------------------- */
	.overlay-link{
		position:absolute;
		z-index:1;
		inset:0;
	}
	#page button#gform_submit_button_1:hover{
		background-color: var(--wp--preset--color--tertiary);
	}
	#page button#gform_submit_button_2:hover{
		background-color: var(--wp--preset--color--secondary);
	}
	.has-arrow, .wp-block-button__link,
	#page button:is(.gform-button,.gform_button){
		transition: all 0.5s ease;
		letter-spacing: 2px;
		text-transform: uppercase;
		font-family: inherit;
		font-size: 14px;
		display: flex;
		align-items: center;
		gap: 10px;
		padding-block: 20px;
		border-radius: 0;
		box-shadow: none;
		width: 100%;
		&::after{
			content: "\f344";
			color: currentColor;
			font-family: dashicons !important;
		}
		&:hover{
			gap: 40px;
		}
	}
	.has-arrow.inherit-styles{
		letter-spacing: inherit;
		text-transform: inherit;
		font-family: inherit;
		font-size: inherit;
	}
	#siteFooter a,
	#menu-main.level-1 > .menu-item > a,
	#page a:not(.has-arrow, .wp-block-button__link){
		position: relative;
		&::before{
			content: '';
			height: 1px;
			width: 0;
			background-color: currentColor;
			bottom: -3px;
			transition: all 0.4s ease;
			position: absolute;
		}
		&:hover::before{
			width: 100%;
		}
	}
	.wp-block-button{
		transition: all 0.8s ease;
		position: relative;
		display: flex;
		column-gap: 10px;

		&.is-style-text .wp-block-button__link{
			background-color: transparent;
			color: var(--wp--preset--color--secondary);
			padding: 0;
			font-size: 14px;
		}

		&.is-style-codan{
			.wp-block-button__link{
				width: 100%;
				justify-content: center;
				background-color: var(--wp--preset--color--secondary);
				align-items: center;
				line-height: 1;
			}
			&:before,&::after{
				content: '';
				width: 20px;
				height: 20px;
				background-image: url(assets/images/target-white.svg);
				background-repeat: no-repeat;
				position: absolute;
				transition: all 0.4s ease;
				opacity: 0;
			}
			&:before{
				top: 10px;
				left: 10px;
			}
			&:after{
				bottom: 10px;
				right: 10px;
				rotate: 180deg;
			}
			&:hover{
				&:before{
					top: -3px;
					left: -3px;
					opacity: 1;
				}
				&:after{
					right: -3px;
					bottom: -3px;
					opacity: 1;
				}
			}
		}
	}
	#gform_submit_button_2{
		background-color: var(--wp--preset--color--secondary);
	}

/* ## Forms
------------------------------------------- */
	:is(body,.gform_wrapper) form{
		.gform_fields{
			/* row-gap: 0; */
		}
		input[type="text"],
		input[type="email"],
		select,
		textarea,
		::placeholder{
			font-size: clamp(28px, calc(22.182px + 1.818vw), 44px) !important;
			font-weight: 700;
			line-height: 1.2;
			box-shadow: none;
		}
		select#results-finyear{
			font-size: 20px !important;
		}
		input[type="email"],
		input[type="text"],
		textarea,
		select{
			padding: 8px 0 8px;
			background-color: transparent;
			border: none;
			border-bottom: 1px solid var(--wp--preset--color--tertiary);
			border-radius: 0;
			height: unset;
		}
		select{
			background-image: url(assets/images/plus.svg);
			background-size: 40px;
		}
		&.bg-light{
			input[type="email"],
			input[type="text"],
			textarea,
			select{
				border-bottom: 1px solid var(--wp--preset--color--secondary);
				color: var(--wp--preset--color--secondary);
			}
		}
		&.bg-dark{
			input[type="email"],
			input[type="text"],
			textarea,
			select{
				border-bottom: 1px solid var(--wp--preset--color--tertiary);
			}
			select:has(.gf_placeholder[selected="selected"]){
				opacity: 0.7;
			}
		}
	}
	body .gform-theme--framework{
		.gform_validation_errors,
		.gfield_validation_message{
			--gform-theme-form-validation-heading-color: white;
			--gform-theme-form-validation-border-color: white;
			--gform-theme-local-color: white;
		}
		#gform_fields_2{
			display: flex;
			align-items: stretch;
			.gfield--type-email, .gfield--type-text{
				flex-grow: 1;
			}
			@media(max-width: 600px){
				flex-direction: column;
			}
		}
	}

/* ## Header
------------------------------------------- */
	header.wp-block-template-part{
		position: absolute;
		z-index: var(--z-top);
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		#masthead, #topBar{
			padding-inline: var(--siteInset);
		}
		#masthead{
			padding-block: 30px;
		}
		#topBar{
			color: white;
			padding-block: var(--unit-xs);
			.bn-stockdio-current-price-full::before{
				content: 'ASX : CDA';
			}
			.bn-stockdio-current-price-full, .bn-stockdio-price-row{
				display: flex;
				gap: 12px;
				align-items: center;
				@media(max-width: 600px){
					flex-wrap: wrap;
				}
			}
			.bn-stockdio-current-price-full, .bn-stockdio-value, .bn-stockdio-fetch-time, .bn-stockdio-annex{
				font-size: 14px;
				line-height: 1;
				margin: 0;
			}
			.bn-stockdio-delay-notice{
				display: none;
			}
		}
	}
/* If scrolled */
	body.scrolled{
		header.wp-block-template-part{
			position: fixed;
			background-color: var(--wp--preset--color--primary);
			animation: menuAnim 1s ease-in-out;
			padding-block: 22px;
			#masthead{
				padding-block: 0;
			}
			#topBar{
				display: none;
			}
		}
	}
	@keyframes menuAnim {
		0% {top: -100px;}
		100% {top: 0;}
	}
/* If admin-bar  */
	body.admin-bar{
		header.wp-block-template-part{
			margin-top: 32px;
		}
	}



/* ## Navigation
------------------------------------------- */
	#masthead{
		.menu-item a{
			color: white;
		}
	}

/* ## Footer
------------------------------------------- */
	#siteFooter{
		padding-inline: var(--siteInset);
		padding-bottom: var(--unit-xl);
		#footerMask{
			position: absolute;
			top: 0;
    		left: calc(50% - 20px);
			margin: 0;
			fill: var(--wp--preset--color--tertiary);
			.path{
				height: 84px;
				width: 1644px;
			}
		}

	}
	body.page-contact #siteFooter{
		background-image: none;
	}
	body.page-about #siteFooter #footerMask{
		fill: var(--wp--preset--color--primary);
	}
	.footer-logos img{
		height: 40px;
		width: auto !important;
	}
	@media(max-width: 600px){
		#siteFooter{
			.wp-block-spacer.has-line-left.first{
				height: 170px !important;
			}
			.footer-logos{
				flex-wrap: nowrap;
				gap: 20px !important;
				img{
					height: unset;
				}
			}
		}
	}


/* ## Page Banner
------------------------------------------- */
	.featured-image-banner:not(:has(img)){
		/* background-image: url("/wp-content/uploads/2026/08/featured-default.webp"); */
		background-size: cover;
	}
	body:not(.home) .featured-image-banner{
		padding-bottom: 180px !important;
	}
	.featured-image-banner{
		padding-inline: var(--siteInset);
		position: relative;
		align-items: end;
		&::before{
			content: '';
			display: grid;
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			place-items: center;
			background-image: url(assets/images/banner-texture.webp);
			background-repeat: no-repeat;
			background-size: auto;
			background-position: bottom center;
			inset: 0;
		}
		.wp-block-cover__inner-container{
			position: relative;
			z-index: 2;
		}
	}
	.featured-image-banner.banner-squeeze,
	body.single-person .featured-image-banner,
	body.single-post .featured-image-banner,
	body.page-template-page-small-header .featured-image-banner{
		min-height: 50vh;
		transition: all 1s ease 0.4s;
		@starting-style{
			min-height: 80vh;
		}
	}
	body.single-post .featured-image-banner{
		position: relative;
		overflow: clip;
		.alt-image{
			position: absolute;
			inset: 0;
			z-index: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

/* ## Animations
------------------------------------------- */
	@keyframes logoAnim {
		0%{
			opacity: 0;
			transform: translateX(-100%);
		}
		10%{
			opacity: 1;
		}
		100%{
			transform: translateX(0);
		}
	}
	@keyframes targetingTop {
		0% {
			opacity: 0;
			transform: translateX(-100px);
		}
		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}
	@keyframes targetingBottom {
		0% {
			opacity: 0;
			transform: translateX(100px) rotate(180deg);
		}
		100% {
			opacity: 1;
			transform: translateX(0) rotate(180deg);
		}
	}
	@keyframes scaleUp{
		0%{
			scale: 0;
			top: 0;
		}
		100%{
			scale: 1;
		}
	}
	@keyframes fuseSlideUp{
		0%{
			top: 80%;
		}
		100%{
			top: 2px;
		}
	}
	@keyframes lineDrawDown{
		0%{
			height:0;
		}
		100%{
			height: 100%;
		}
	}
	@keyframes lineDrawRight{
		0%{
			width:0;
		}
		100%{
			width: 100%;
		}
	}
	@keyframes tagline{
		0%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}
	@keyframes chamferAnim{
		0%{
			min-height: 32px;
		}
		100%{
			min-height: 90px;
		}
	}

/* ## Modifier Classes
------------------------------------------- */	
	.site-inset{
		padding-inline: var(--siteInset);
	}	
	.has-line-left{
		position: relative;
		&::before{
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 1px;
			height: 100%;
			background-color: var(--wp--preset--color--secondary);
		}
	}
	.asp-square.mobile-asp-wide{
		aspect-ratio: 4/2.5;
		.wp-block-image img{
			height: 100px !important;
		}
	}
	.aos-animate .has-line-left{
		&::before{
			animation: lineDrawDown 1s ease-out 1s both;
		}
		&.item2::before{
			animation-delay: 1.2s;
		}
		&.item3::before{
			animation-delay: 1.4s;
		}
		&.item4::before{
			animation-delay: 1.6s;
		}
		&.item5::before{
			animation-delay: 1.8s;
		}
		&.item6::before{
			animation-delay: 2s;
		}
	}
	.dark-bg .has-line-left::before{
		background-color: #d9d9d6;
	}
	:has(> .has-line-left) > *{
		padding-left: 25px;
	}
	/*
	.aos-animate .has-target{
	}
	*/
	.has-chamfer.aos-animate{
		overflow: clip;
		svg{
			position: relative;
		    animation: fuseSlideUp 1s ease-in-out 0.5s both;
		}
	}

/* ## Layouts
------------------------------------------- */
	.fuse-grid-resp{
		@media(max-width: 992px){
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		@media(max-width: 600px){
			grid-template-columns: repeat(1, minmax(0, 1fr));
		}
	}
	.has-subgrid {
		> .item, > .wp-block-group, .wp-block-post{
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 0;
			> *{
				width: 100%;
			}
		}
	}
	.grid-4col{
		grid-template-columns: repeat(4, 1fr);
		column-gap: 24PX;
		row-gap: var(--wp--preset--spacing--70);
	}
	.grid-charters{
		.item{
			display: grid;
			grid-row: span 2;
			row-gap: 5px;
			grid-template-rows: subgrid;
			img{
				aspect-ratio: 3/4;
				object-fit: cover;
			}
		}
	}
	@media(max-width: 600px){
		.wp-block-post-template.fuse-grid-resp figure.asp-wide{
			aspect-ratio: 1;
		}
		.mobile-h-scroll{
			grid-auto-flow: column !important;
			overflow-x: auto !important;
			> .item{
				width: 250px !important;
			}
		}
	}

/* SECTION Components  */
	.wp-block-group:has(.chamfer-edge){
		padding-inline: 0 !important;
		margin-top: -1px;
		.chamfer-edge{
			min-height: 90px;
		}
		&.aos-animate{
			.chamfer-edge{
				animation-name: chamferAnim;
				animation-duration: 1s;
				animation-delay: 1s;
				animation-fill-mode: both;
			}
		}
	}
	

	.logo-anim{
		gap: 3%;
		figure{
			height: 17vw;
			width: fit-content;
			overflow: clip;
			img{
				animation: logoAnim 0.6s ease-in-out both;
				height: 100%;
				width: auto;
			}
		}
		figure:nth-child(2){
			img{
				animation-delay: 0.1s;
			}
		}
		figure:nth-child(3){
			img{
				animation-delay: 0.2s;
			}
		}
		figure:nth-child(4){
			img{
				animation-delay: 0.3s;
			}
		}
		figure:nth-child(5){
			img{
				animation-delay: 0.4s;
			}
		}
	}
	.items-list{
		position: relative;
		.item{
			padding-block: 10px;
			border-bottom: 1px solid var(--wp--preset--color--secondary);
			&:first-child{
				border-top: 1px solid var(--wp--preset--color--secondary);
			}
			h6{
				min-width: 110px;
			}
			.dashicons, .dashicons-before::before {
				width: 24px;
				font-size: 23px;
				color: var(--wp--preset--color--secondary);
			}
		}
		&.has-line-left:before{
			opacity: 0.2;
		}
		@media(max-width: 600px){
			.item{
				flex-direction: column;
				align-items: start;
			}
		}
	}
	.aos-animate .tagline-wrap{
		--distancex: -10%;
		--distancey: -50%;
		@media(max-width: 600px){
			--distancey: -18%;
		}
		.site-tagline{
			animation: tagline 1s ease-out 1.2s;
			animation-fill-mode: both;
			position: relative;
			width: fit-content;
			letter-spacing: 0;
			&:before,&:after{
				content: '';
				position: absolute;
				width: 90px;
				height: 90px;
				background-image: url(assets/images/target.svg);
				background-size: contain;
				background-repeat: no-repeat;
			}
			&:before{
				left: var(--distancex);
				top: var(--distancey);
				animation: targetingTop 0.3s ease-out 2s both;
			}
			&:after{
				right: var(--distancex);
				bottom: var(--distancey);
				transform: rotate(180deg);
				animation: targetingBottom 0.3s ease-out 2s both;
			}
		}
	}
	/* ## Single Person
	------------------------------------------- */
	body.single-person{
		.wp-block-post-featured-image{
			position: relative;
			z-index: 2;
		}
		h3.qualifications{
			display: none;
			&:has(+ .is-acf-field){
				display: block;
			}
		}
	}
	.grid-people{
		.body::before{
			opacity: 0;
		}
		@media(max-width: 810px){
			.body::before{
				opacity: 1;
			}
		}
	}
	.group-logos{
		img{
			height: 40px;
			width: auto !important;
		}
	}
	.filter-categories{
		ul.wp-block-term-template > li{
			margin: 0;
		}
		.wp-block-term{
			opacity: 0.3;
			&:hover, &.active{
				opacity: 1;
			}
		}
		@media(max-width: 600px){
			flex-direction: column;
			align-items: start;
			gap: 5px;
			.wp-block-term-template{
				flex-direction: column;
				gap: 5px;
			}
		}
	}
	.people-slider{
		figure.wp-block-image{
			img{
				aspect-ratio: 16/9;
				width: 100% !important;
				object-fit: cover;
			}
		}
	}
	.image-tiles{
		.wp-block-cover__inner-container,
		.wp-block-cover__inner-container > .wp-block-group{
			height: 100%;
			width: 100% !important;
		}
		.wp-block-cover__inner-container > .wp-block-group{
			justify-content: space-between;
			.hover-text{
				transition: all 1s ease;
				max-height: 0;
				overflow: clip;
				margin-top: 0;
				cursor: default;
			}
		}
		.wp-block-cover__inner-container:hover{
			.hover-text{
				max-height: 500px;
			}
		}
	}

	.listing-filter{
		text-align: right;
	}
	/* read more */
	.wp-block-accordion .wp-block-accordion-heading__toggle-title:before{
		content: 'Read more';
	}
	.wp-block-accordion .is-open .wp-block-accordion-heading__toggle-title:before{
		content: 'Read less';
	}


/* !SECTION */

/* ## Share Prices
------------------------------------------- */
	.bn-stockdio-block{
		color: currentColor;
		.bn-stockdio-value{
			font-size: clamp(25px, calc(16.857px + 2.262vw), 44px);
			color: currentColor !important;
		}
		&.bn-stockdio-current-price-full .bn-stockdio-value{
			font-size:44px;
		}
		.bn-stockdio-group{
			display: flex;
			column-gap: 8px;
			.bn-stockdio-annex{
				font-weight: bold;
			}
		}
		&.has-currency .bn-stockdio-value::before{
			content:'A$';
		}
	}