/**
 * Theme Name: Templafy Rebrand
 * Template:  twentytwentyfour
 */
 
html:has(.has-light-header)  {	
	--text-color:  var(--gray-100-primary, #232323);/* Default background color */
	--bg-color:  var(--off-white-primary, #fafdf6);/* Default text color */
	background-color: var(--bg-color);
}

html:has(.has-dark-header)  {	
	--text-color: var(--off-white-primary, #fafdf6); /* Default background color */
	--bg-color: var(--gray-100-primary, #232323); /* Default text color */
	background-color: var(--bg-color);
}


body.has-dark-header{
	--bg-color: var(--gray-100-primary, #232323);;
	--text-color: var(--off-white-primary, #fafdf6);
}
body.has-light-header{
	--bg-color: var(--off-white-primary, #fafdf6);
	--text-color: var(--gray-100-primary, #232323);
}

.read-more  .arrow {
	transition: transform 0.3s ease;
	transform-origin: center; 
}

.read-more:hover .arrow {
	animation: arrow-move 1s ease-in-out forwards; 
}						

@keyframes arrow-move {
	0% {
		transform: translateX(0); 
		opacity: 1; 
	}

	49% {
		transform: translateX(30px); 
		opacity: 1; 
	}

	50% {
		transform: translateX(30px); 
		opacity: 0; 
	}

	51% {
		transform: translateX(-30px); 
		opacity: 0; 
	}

	100% {
		transform: translateX(0); 
		opacity: 1; 
	}
}