/*
Theme Name: JJ Custom
Theme URI: https://example.com
Description: Child theme of Kadence with a header account/avatar icon that links to the Paid Member Subscriptions account page.
Author: Your Name
Author URI: https://example.com
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* ==========================================================================
   Header: Account / Avatar Icon
   Added via the "HTML" Header Item (Customizer > Header) and the
   kadence_header_html hook in functions.php.
   ========================================================================== */

.kc-child-header-account {
	display: flex;
	align-items: center;
	height: 100%;
}

.kc-child-header-account a {
	display: flex;
	align-items: center;
	line-height: 0;
}

.kc-child-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.kc-child-avatar-placeholder {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.08);
	color: var(--global-palette3, #2d2d2d);
}

.kc-child-avatar-placeholder svg {
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   Scroll Animations (free alternative to Kadence's paid Animate on Scroll)
   Add one of these classes to a block's Advanced > Additional CSS Class(es)
   field. JS (scroll-animations.js) adds .jj-in-view when it scrolls into view.
   ========================================================================== */

[class*="jj-fade"],
[class*="jj-slide"],
[class*="jj-zoom"] {
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}

/* Fade up */
.jj-fade-up {
	opacity: 0;
	transform: translateY(30px);
}
.jj-fade-up.jj-in-view {
	opacity: 1;
	transform: translateY(0);
}

/* Fade in (no movement) */
.jj-fade-in {
	opacity: 0;
}
.jj-fade-in.jj-in-view {
	opacity: 1;
}

/* Slide in from left */
.jj-slide-left {
	opacity: 0;
	transform: translateX(-40px);
}
.jj-slide-left.jj-in-view {
	opacity: 1;
	transform: translateX(0);
}

/* Slide in from right */
.jj-slide-right {
	opacity: 0;
	transform: translateX(40px);
}
.jj-slide-right.jj-in-view {
	opacity: 1;
	transform: translateX(0);
}

/* Zoom in */
.jj-zoom-in {
	opacity: 0;
	transform: scale(0.9);
}
.jj-zoom-in.jj-in-view {
	opacity: 1;
	transform: scale(1);
}

/* Optional: stagger children slightly by adding jj-delay-1 / jj-delay-2 / jj-delay-3 */
.jj-delay-1.jj-in-view { transition-delay: 0.15s; }
.jj-delay-2.jj-in-view { transition-delay: 0.3s; }
.jj-delay-3.jj-in-view { transition-delay: 0.45s; }