/* 
Theme Name: Joyous Rebellion
Theme URI: https://wecodeexist.com/
Description: Custom WordPress theme for Joyous Rebellion.
Author: wecodeexist
Author URI: https://wecodeexist.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: joyous-rebellion
*/

/* Layout */
.small-h1 {
	font-size: clamp(18px, 3vw, 46px);
}
.mt-auto {
	margin-top: auto;
}
.balance { 
	text-wrap: balance;
}
.notransition {
	transition: none !important; 
}
#site-footer {
	display: none;	
}
#Beliefs {
	background-color: transparent;
	background-image: linear-gradient(180deg, #1B0291 0%, #2104AD 10%, #98D8E3 100%);
}
.radial-glow {
	position: relative;
	overflow: visible;
}
.radial-glow.cyan::before {
	content: "";
	position: absolute;
	background: radial-gradient(
		50% 50% at 50% 50%,
		rgba(151, 214, 227, 0.7) 0%,
		rgba(151, 214, 227, 0) 100%
	);
	border-radius: 50%;
	pointer-events: none;
	right: -50%;
	top: -25%;
	width: 120%;
	aspect-ratio: 1 / 1;
	left: auto;
}
.radial-glow.purple::before {
	content: "";
	position: absolute;
	background: radial-gradient(
		50% 50% at 50% 50%,
		rgba(33, 4, 173, 0.4) 0%,
		rgba(33, 4, 173, 0) 100%
	);
	border-radius: 50%;
	pointer-events: none;
	left: 0;
	top: 0;
	width: 100%;
	height: 120%;
}
.radial-glow.pink::before {
	content: "";
	position: absolute;
	background: radial-gradient(
		100% 80% at 100% 80%,
		rgba(247, 210, 243, 1) 0%,
		rgba(247, 210, 243, 0) 100%
	);
	pointer-events: none;
	right: -20px;
	bottom: 0;
	left: auto;
	top: auto;
	height: 220%;
}

.horizontal-cyan::before {
	content: "";
	position: absolute;
	left: auto;
	right: 0;
	top: 0;
	width: 50vw;
	height: 100%;
	z-index: -2;
	background: linear-gradient(270deg, rgba(152, 216, 227, 1) 0%, rgba(151, 215, 227, 0) 100%);
}
.radial-cyan::before {
	content: "";
	position: absolute;
	background: radial-gradient( 45% 120% at 45% 0%, rgb(152, 216, 227) 0%, rgba(152, 216, 227, 0) 100% );
	pointer-events: none;
	left: 0;
	top: 0;
	width: 200%;
	height: 100%;
}
#Experiences::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	background: linear-gradient(180deg, rgba(240, 177, 140, 0.00) 53.87%, #FFA441 100%), #F7D2F3;
}
.many-gradients::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	z-index: -3;
	background: linear-gradient(180deg, #FFA441 0%, #2104AD 46.09%, #98D8E3 100%);
}
@media screen and (max-width: 767px) {
	.radial-glow.purple::before {
		left: -50%;
		width: 200%;
		height: 100%;
	}
	.absolute-m {
		position: absolute;
		left: 45%;
		top: 210px;
	}
}
/* Header */
#site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
 	transition: background 0.3s, padding 0.3s;
	padding: 50px 20px 0 20px;
}
#site-header.is-scrolled {
	padding: 10px 20px 10px 20px;
	background: #00000060;
}
#site-header .site-logo {
	max-width: 465px;
	transition: max-width 0.3s;
}
#site-header.is-scrolled .site-logo {
	max-width: 300px;
}
#site-header.is-scrolled .site-navigation ul.menu li a {
	font-size: clamp(16px, 2vw, 20px);
}
#site-header.is-scrolled nav ul.menu li.menu-item.menu-cta a {
    padding: 7px 25px;
}
#site-header .header-inner {
	max-width: 1380px;
	width: 100%;
	margin: 0 auto;
}
.admin-bar #site-header {
	top: 32px;
}
.site-navigation-toggle-holder .site-navigation-toggle-icon {
	width: 28px;
}
.site-navigation-toggle-holder .site-navigation-toggle-icon::after, 
.site-navigation-toggle-holder .site-navigation-toggle-icon::before {
	border-radius: 0;
}
.site-navigation-toggle-holder .site-navigation-toggle-icon::before {
	box-shadow: 0 9px 0 currentColor;
	margin-block-end: 15px;
}
.site-navigation-toggle-holder .site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle-icon::before {
	transform: translateY(9px) rotate(45deg);
}
.site-navigation-toggle-holder .site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle-icon::after {
	transform: translateY(-9px) rotate(-45deg);
}
@media screen and (max-width: 992px) {
	#site-header {
		position: fixed;
		background: rgba(0, 0, 0, 0.70);
		padding: 20px;
	}
}
@media screen and (max-width: 782px) {
	#wpadminbar {
		position: fixed;
	}
	.admin-bar #site-header {
		top: 46px;
	}
	.site-navigation-toggle-holder {
		padding: 0;
	}
}

/* Menu */ 
@media screen and (min-width: 993px) {
	.menu-item:nth-child(-n+2) a {
		position: relative;
	}
	.menu-item:nth-child(-n+2) a::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 36px;
		background-color: #fff;
	}
	nav ul.menu li.menu-item {
		align-items: center;
	}
	nav ul.menu li.menu-item a {
		padding: 5px 1.82vw 3px;
		line-height: 1em;
		transition: color 0.2s ease-in, font-size 0.3s;
	}
	nav ul.menu li.menu-item a:hover {
		color: #98D8E3;
	}
	nav ul.menu li.menu-item.menu-cta a {
		padding: 10px 25px;
		border-radius: 30px;
		border: 2px solid #FFF;
		transition: color 0.2s ease-in, border-color 0.2s ease-in, padding 0.3s;
	}
	nav ul.menu li.menu-item.menu-cta a:hover {
		border-color: #98D8E3;
	}
}
@media screen and (max-width: 992px) {
	#site-header:has(.site-navigation-toggle[aria-expanded="true"]) {
		background: rgba(0, 0, 0, 0.90);
	}
	.site-navigation-dropdown ul.menu {
		background: rgba(0, 0, 0, 0.90);
		height: 100vh;
	}
	.site-navigation-dropdown ul.menu li a {
		background: none;
		color: #fff;
		font-family: "Tartuffo", serif;
		font-size: 24px;
	}
}
/* Horizontal Scroll */
.fit-content {
	width: fit-content;
}
.h100 {
	height: 100%;
}
#content .horizontal-scroll-section {
	display: flex;
    position: relative;
	width: 100%;
    overflow: hidden;
	will-change: transform;
	transition: none !important; 
}
#content .horizontal-scroll-track {
	display: flex;
    width: max-content;
    height: 100%;
	will-change: transform;
	transition: none !important; 
	justify-content: space-between;
}
#content .horizontal-item {
    flex-shrink: 0;
    height: 100%;
	width: auto;
	max-height: 100vh;
	will-change: transform;
	transition: none !important; 
}
#content .horizontal-item * {
	transition: none !important; 
}
#content .width-fix {
	width: auto;
	flex-shrink: 0;
}