/*
Theme Name:     INKFISH Neve Child
Theme URI:      https://themeisle.com/themes/neve/
Template: neve
Author:         Stefan le Roux
Author URI:     https://inkfish.co.za
Description:    Custom CSS styling to change and/or enhance the styling of the Neve theme.
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    neve
Tags: blog, custom-logo, e-commerce, rtl-language-support, post-formats, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready, wide-blocks, block-styles
*/

:root {
	--primary-color: #4f3b78;
	--primary-dark: color-mix(in srgb, var(--primary-color) 50%, #000000);
	--primary-darker: color-mix(in srgb, var(--primary-color) 70%, #000000);
	--primary-light: color-mix(in srgb, var(--primary-color) 50%, #ffffff);
	--primary-foo: color-mix(in srgb, var(--primary-color) 40%, #000000);
	--fs-100: clamp(0.8rem, 0.165vw + 0.759rem, 0.891rem);
	--fs-200: clamp(1rem, 0.341vw + 0.915rem, 1.188rem);
	--fs-300: clamp(1.25rem, 0.605vw + 1.099rem, 1.583rem);
	--fs-400: clamp(1.563rem, 0.996vw + 1.314rem, 2.11rem);
	--fs-500: clamp(1.953rem, 1.563vw + 1.562rem, 2.813rem);
	--fs-600: clamp(2.441rem, 2.378vw + 1.847rem, 3.749rem);
	--fs-700: clamp(3.052rem, 3.538vw + 2.167rem, 4.998rem);
}

html {
	scroll-behavior: smooth;
	scroll-padding: 90px;
}

.e-con>.elementor-widget>.elementor-widget-container:has(.eael-fancy-text-container) {
	height: unset;
}

.elementor-widget-text-editor {
	--listpad: 20px;
}

a:focus, a:hover {
	color: var(--nv-c-1);
}

body {
	font: normal normal normal var(--fs-200)/1.5 Nunito, system-ui;
	scroll-padding: 90px;
	
	&.admin-bar {
		
		.wrapper > header {
			inset: 32px auto auto auto;
		}
		
	}
	
	.wrapper > header {
		position: fixed;
		inset: 0 auto auto auto;
		z-index: 5;
		width: 100%;
	}
	
	main :is(h1, h2, h3, h4, h5, h6, p, .lead, ul, li, ol) {margin: 0 0 1rem 0;}
	main :is(p, ul, ol):has(+ :is(h1, h2, h3, h4, h5, h6)) {margin: 0 0 2rem 0 !important;}
	main :is(h1, h2, h3, h4, h5, h6, p, .lead, ul, li, ol, .button:not(.icon)):not(:has(+ :is(h1, h2, h3, h4, h5, h6, p, ul, ol, .button:not(.icon)))) {margin: 0 !important;}
	main :is(li:has(> ol, > ul, #workdamn)) {margin: 0 0 1rem 0 !important; }
	
	h1 {font-size: var(--fs-500);}
	h2 {font-size: var(--fs-400);}
	h3 {font-size: var(--fs-300);}
	h4 {font-size: var(--fs-200);}
	h5 {font-size: var(--fs-200);}
	h6 {font-size: var(--fs-100);}
	
	.fs-100 :is(h1, h2, h3, h4, h5, h6, p, ul) {font-size: var(--fs-100);}
	.fs-200 :is(h1, h2, h3, h4, h5, h6, p, ul) {font-size: var(--fs-200);}
	.fs-300 :is(h1, h2, h3, h4, h5, h6, p, ul) {font-size: var(--fs-300);}
	.fs-400 :is(h1, h2, h3, h4, h5, h6, p, ul) {font-size: var(--fs-400);}
	.fs-500 :is(h1, h2, h3, h4, h5, h6, p, ul) {font-size: var(--fs-500);}
	.fs-600 :is(h1, h2, h3, h4, h5, h6, p, ul) {font-size: var(--fs-600);}
	.fs-700 :is(h1, h2, h3, h4, h5, h6, p, ul) {font-size: var(--fs-700);}
	
}

.paoc-popup-inr-wrap {
	
	:is(h1, h2, h3, h4, h5, h6, p, .lead, ul, li, ol) {margin: 0 0 1rem 0;}
	:is(p, ul, ol):has(+ :is(h1, h2, h3, h4, h5, h6)) {margin: 0 0 2rem 0 !important;}
	:is(h1, h2, h3, h4, h5, h6, p, .lead, ul, li, ol, .button:not(.icon)):not(:has(+ :is(h1, h2, h3, h4, h5, h6, p, ul, .button:not(.icon)))) {margin: 0 !important;}
	:is(li:has(> ol, > ul)) {margin: 0 0 1rem 0 !important; }
	
}

.eael-data-table thead tr th, 
.eael-data-table tbody tr td {
	font-family: Nunito, system-ui !important;
}

.nv-single-post-wrap>div:not(:last-child) {
	margin-bottom: 20px;
}

.nv-thumb-wrap > img {
	display: block;
}

.title.entry-title {
	font-size: var(--fs-500);
}

.eael-fancy-text-prefix {
	line-height: unset !important;
}

.single-post-container {
	padding-top: 80px !important;
}

#content:has(> .container.single-post-container) {
	background: #fff;
}

.nv-sidebar-wrap #secondary {
	position: sticky;
	top: 130px;
}

.line {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: stretch;
	gap: 10px;
	height: 45px;
	
	&::before {
		content: '';
		display: block;
		width: 80px;
		height: 10px;
		background: var(--e-global-color-nvprimaryaccent);
		border-radius: 99px;
	}
	
	@media (width < 767px) {
		& {
			flex-flow: column;
		}
	}
	
}

.lines {
	
	&.elementor-widget-n-tabs {
		
		.e-n-tabs-heading {
			display: flex;
			align-items: center;
			gap: 20px;
			margin: 0 0 20px 0;
			
			.e-n-tab-title-text {
				font-size: 18px; 
			}
			
		}
		
		
		button {
			margin: 0;
			padding: 0;
			margin-block: unset !important;
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			
			&::before {
				content: '';
				display: block;
				width: 0px;
				height: 8px;
				background: var(--e-global-color-nvprimaryaccent);
				border-radius: 99px;
				transition: 0.2s;
			}
			
			&[tabindex="0"] {
			
				&::before {
					content: '';
					display: block;
					width: 60px;
					height: 8px;
					background: var(--e-global-color-nvprimaryaccent);
					border-radius: 99px;
				}

			}
			
		}
		
	}
	
	&.elementor-widget-heading.left {
		
		.elementor-heading-title {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20px;

			&::before {
				content: '';
				display: block;
				width: 80px;
				height: 8px;
				background: var(--e-global-color-nvprimaryaccent);
				border-radius: 99px;
			}

		}
		
	}
	
	&.elementor-widget-heading.right {
		
		.elementor-heading-title {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20px;

			&::after {
				content: '';
				display: block;
				width: 80px;
				height: 8px;
				background: var(--e-global-color-nvprimaryaccent);
				border-radius: 99px;
			}

		}
		
	}
	
	&.elementor-widget-eael-adv-tabs {
		
		ul[role="tablist"] {
			gap: 20px;
		
			@media (width < 767px) {
				& {
					flex-flow: column;
				}
			}
		
		}
		
		.eael-tab-item-trigger {
			display: flex;
			align-items: center;
			justify-content: flex-start !important;
			flex: unset !important;
			padding: 0;

			&::before {
				content: '';
				display: block;
				width: 0px;
				height: 8px;
				background: var(--e-global-color-nvprimaryaccent);
				border-radius: 99px;
				transition: width 0.3s ease-in-out;
				margin: auto 10px auto auto;
			}

			&.active::before {
				width: 80px;
			}

		}
		
	}
	
	&.center .eael-tabs-nav>ul {
		justify-content: center;
	}
	
}

[tabindex="-1"]:focus, input:read-write:focus, select:focus, textarea:focus {
	outline: unset;
	box-shadow: unset;
}

[tabindex="-1"]:focus-visible, input:read-write:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 1px solid #000000;
}

.shadow {
	
	.eael-team-item {
		overflow: visible;
	}
	
	img {
		translate: 30px 30px;
		filter: drop-shadow(-30px -30px 0 #000000);
		aspect-ratio: 1 / 1.3;
		object-fit: cover;
		width: 80% !important;
	}
	
	&.c-1 img {filter: drop-shadow(-30px -30px 0 #058d6e);}
	&.c-2 img {filter: drop-shadow(-30px -30px 0 #094133);}
	&.c-3 img {filter: drop-shadow(-30px -30px 0 #14691d);}
	&.c-4 img {filter: drop-shadow(-30px -30px 0 #71b856);}
	
}

.elementor-element.sticky {
	position: sticky;
	top: 120px;
}

.rings {
	display: grid;
	grid: "stacked" 100% / 100%;
	place-items: center;
	place-content: center;
	width: 100%;
	aspect-ratio: 1 / 1.3;
	
	& > div {
		grid-area: stacked;
		width: 100%;
		height: 100%;
		outline: 3px solid #ffffff;
		border-radius: 50% 0 0 0;
		animation: morhp 5s ease-in-out 1;
		
		&:nth-of-type(5) {
			translate: -10% -10%;
			opacity: 0.8;
			animation-delay: 0.0s
		}
		&:nth-of-type(4) {
			translate: -5% -5%;
			opacity: 0.8;
			animation-delay: -0.3s
		}
		&:nth-of-type(3) {
			translate: 0% 0%;
			opacity: 0.6;
			animation-delay: -0.6s
		}
		&:nth-of-type(2) {
			translate: 5% 5%;
			opacity: 0.4;
			animation-delay: -0.9s
		}
		&:nth-of-type(1) {
			translate: 10% 10%;
			opacity: 0.2;
			animation-delay: -1.2s
		}
		
	}
	
	@media (width < 767px) {
		& {
			opacity: 0.3;
		}
	}
	
}

.members {
	--corner: 6em;
	--spacing: 25px;
	
	&.link > div {
		cursor: pointer;
	}
	
	img {
		aspect-ratio: 4 / 5;
		object-fit: cover;
		filter: grayscale(100%);
		transition: filter 0.4s;
	}
	
	figure {
		background: linear-gradient(to bottom, var(--custom-1), var(--nv-c-2));
		translate: calc(var(--spacing) / 2) calc(var(--spacing) / 2);
		border-radius: calc(var(--corner) - (var(--spacing) / 2)) 0 0 0 !important;
	}
	
	.eael-team-image::before {
		content: '';
		position: absolute;
		inset: calc(var(--spacing) / 2 * -1) calc(var(--spacing) / 2) calc(var(--spacing) / 2) calc(var(--spacing) / 2 * -1);
		background: var(--nv-primary-accent);
		border-radius: var(--corner) 0 0 0;
	}

	.eael-team-item {
		overflow: visible;
	}
	
	.elementor-widget-eael-team-member:hover img {
		filter: grayscale(0%);
	}
	
}

@keyframes morhp {
	0% {
		border-radius: 50% 0% 0% 0%;
	}
	50% {
		border-radius: 0% 50% 50% 50%;
	}
	100% {
		border-radius: 50% 0% 0% 0%;
    	rotate: 360deg;
	}
}

.custombox-lock {
	overflow: visible !important;
}

.paoc-cb-popup-complete.custombox-content {
	padding: 20px;
}

.custombox-content {
	
	.paoc-credit-wrp {
		display: none;
	}
	
}

.custombox-overlay {
	backdrop-filter: blur(3px)
}

.paoc-popup-btn.c-pop {
	font-weight: bold;
	border-radius: 99px;
	background: var(--e-global-color-nvdarkbg);
	text-transform: uppercase;
	color: var(--e-global-color-nvprimaryaccent);
	transition: 0.2s;
	outline: 1px solid var(--e-global-color-nvdarkbg);
	
	&:hover {
		background: var(--e-global-color-nvsecondaryaccent);
		color: var(--e-global-color-nvdarkbg);
	}
	
}

.paoc-padding-20.paoc-popup-con-bg {
	padding: 0;
}

:is(.paoc-popup-content, .paoc-secondary-con, .paoc-popup-content p, .paoc-secondary-con p) {
	color: inherit !important;
}

.paoc-cb-popup-body {
	background: unset !important;
	box-shadow: unset !important;
}

.paoc-close-popup {
	border-color: var(--e-global-color-nvprimaryaccent) !important;
	
	path {
		fill: var(--e-global-color-nvprimaryaccent) !important;
	}
	
}

a.paoc-popup-click {
	display: none;
}

.gform-theme--foundation {
	--gf-color-primary: var(--nv-c-1) !important;
	--gf-form-gap-y: 30px !important;
	--gf-color-primary-darker: var(--nv-primary-accent) !important;
	
	input[type=text], input[type=email], textarea {
		background: transparent !important;
		border: unset !important;
		box-shadow: unset !important;
		border-bottom: 4px solid var(--e-global-color-nvsecondaryaccent) !important;
		padding: unset !important;
		
		&:focus-visible {
			border-color: var(--nv-primary-accent) !important;
			outline: unset !important;
		}
		
	}
	
	.gform-button--width-full {
		width: 100% !important;
	}
	
	.gform_heading {
		display: none;
	}
	
	::placeholder {
		color: var(--e-global-color-nvsecondaryaccent) !important;
		opacity: 1 !important;
	}
	
}

.custom.elementor-widget-image-gallery {
	
	.gallery {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 !important;
		gap: 30px;
		
		.gallery-item {
			padding: 0 !important;
			flex: 0 1 1;
			max-width: 200px;
			
			img {
				aspect-ratio: 21 / 9;
				object-fit: contain;
				filter: drop-shadow(0px 0px 1px #00000030);
			}
			
		}
		
	}
	
}

.values {
	display: grid;
	grid-template: "center" 1fr / 1fr;
	place-items: center;
	isolation: isolate;
	width: 100%;
	aspect-ratio: 1 / 1;

	> img {
		grid-area: center;
		display: block;
		background: var(--custom-1);
		aspect-ratio: 1 / 1;
		width: 22%;
		z-index: 3;
		border-radius: 50%;
		padding: 2%;
		filter: drop-shadow(0px 0px 10px #00000080);
	}

	.inner {
		grid-area: center;
		display: grid;
		grid-template: "inner" 1fr / 1fr;
		place-items: center;
		width: 100%;
		height: 100%;
		z-index: 1;

		> div {
			--items: 7;
			--angle: calc(((360deg / var(--items)) * var(--item)) - (360deg / var(--items)));
			--radius: 40%;
			width: 25%;
			grid-area: inner;
			background: red;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			translate: calc(sin(var(--angle)) * var(--radius)) calc(cos(var(--angle)) * var(--radius) * -1);
			background: 
				conic-gradient( 
					color-mix(in srgb, var(--nv-primary-accent), transparent 30%) 5%,
					color-mix(in srgb, var(--nv-c-2), transparent 30%) 50%,
					color-mix(in srgb, var(--nv-primary-accent), transparent 30%) 95%);
			outline: 2px solid #fff;
			text-align: center;
			place-content: center;
			animation: pulse 6s ease-in-out infinite;

			&:nth-of-type(1) {
				--item: 1; 
				z-index: 7;
				animation-delay: 0s;
			}
			&:nth-of-type(2) {
				--item: 2; 
				z-index: 6;
				animation-delay: -0.8s;
			}
			&:nth-of-type(3) {
				--item: 3; 
				z-index: 5;
				animation-delay: -1.6s;
			}
			&:nth-of-type(4) {
				--item: 4; 
				z-index: 4;
				animation-delay: -2.4s;
			}
			&:nth-of-type(5) {
				--item: 5; 
				z-index: 3;
				animation-delay: -3.2s;
			}
			&:nth-of-type(6) {
				--item: 6; 
				z-index: 2;
				animation-delay: -4.0s;
			}
			&:nth-of-type(7) {
				--item: 7; 
				z-index: 1;
				animation-delay: -4.8s;
			}

		}

	}

	.outer {
		grid-area: center;
		display: grid;
		grid-template: "outer" 1fr / 1fr;
		place-items: center;
		width: 100%;
		height: 100%;
		z-index: 2;
		animation: spin var(--time) linear infinite;
		--time: 150s;

		> div {
			--items: 7;
			--angle: calc(((360deg / var(--items)) * var(--item)) - (360deg / var(--items)));
			--radius: 150%;
			width: 25%;
			grid-area: outer;
			aspect-ratio: 1 / 1;
			translate: calc(sin(var(--angle)) * var(--radius)) calc(cos(var(--angle)) * var(--radius) * -1);
			animation: spin var(--time) linear reverse infinite;		

			&:nth-of-type(1) {--item: 1; z-index: 7;}
			&:nth-of-type(2) {--item: 2; z-index: 6;}
			&:nth-of-type(3) {--item: 3; z-index: 5;}
			&:nth-of-type(4) {--item: 4; z-index: 4;}
			&:nth-of-type(5) {--item: 5; z-index: 3;}
			&:nth-of-type(6) {--item: 6; z-index: 2;}
			&:nth-of-type(7) {--item: 7; z-index: 1;}
			
			svg {
				width: 35%;
				aspect-ratio: 1 / 1;
				transition: 0.2s ease-in-out;
				fill: var(--nv-primary-accent);
			}
			
			a {
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
				gap: 10%;
				padding: 10%;
				width: 100%;
				height: 100%;
				text-align: center;
				overflow: clip;
				border-radius: 50%;
				box-shadow: inset 0 0 40px 0px #00000020;
				outline: 2px solid var(--nv-primary-accent);
				transition: 0.2s;
				
				span {
					color: #000;
					font-size: var(--fs-100);
					transition: 0.2s;
					
					@media (width < 600px) {
						& {
							display: none;
					  	}
					}

				}
				
				&:hover {
					background: var(--nv-c-1);
					outline-color: #ffffff;
					scale: 1.15;
					
					svg {
						fill: #fff;
					}
					
					span {
						color: #fff;
					}
					
				}
				
				
			}

		}

	}

}

@keyframes spin {
	
	100% {
		rotate: 360deg;
	}
	
}

@keyframes pulse {
	
	0% {
		scale: 1;
	}
	50% {
		scale: 0.95;
	}
	100% {
		scale: 1;
		rotate: 360deg;
	}
	
}