/*
 Theme Name: Twenty Twenty-One Child – Dhamma Teacher v5
 Template: twentytwentyone
 Version: 5.0.1
*/
:root {
  --global--color-primary: #2E5077;
  --global--color-secondary: #4DA1A9;
  --global--color-accent: #7BAA7F;
  --global--color-foreground: #2F2F2F;
  --global--color-background: #F9F9F9;

  /* Map to Twenty Twenty-One Semantic Variables */
  --button--color-background: var(--global--color-primary);
  --button--color-text: #ffffff;
  --button--color-text-hover: #ffffff;
  --button--color-background-active: var(--global--color-secondary);
}

/* Hide "Proudly powered by WordPress" footer text */
.powered-by {
	display: none;
}

/* =========================================
   Footer Customization
   ========================================= */

.site-footer {
	background-color: var(--global--color-primary);
	color: #ffffff !important;
	padding: 2rem 0;
	font-size: 0.85rem; /* Small letter */
	width: 100%;
	max-width: 100% !important;
	margin: 0 !important;
}

.site-footer a {
	color: #ffffff !important;
	text-decoration: none;
}

.site-info {
	max-width: 100%;
	padding: 0 2rem;
	color: #ffffff !important;
}

.site-info-inner {
	display: flex;
	justify-content: flex-start; /* Ensure left alignment */
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	flex-direction: row;
}

.site-info-left, .site-info-right {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	justify-content: flex-start; /* Ensure left alignment */
}

/* Animated Underline Effect */
.footer-animated-link {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.footer-animated-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
}

.footer-animated-link:hover::after {
	visibility: visible;
	width: 100%;
}

/* Footer Social Icons */
.footer-social-icons {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 1.5rem 0;
	width: 100%;
}
.footer-social-icon {
	color: #ffffff;
	width: 24px;
	height: 24px;
	transition: color 0.3s ease, transform 0.2s ease;
}
.footer-social-icon:hover {
	color: var(--global--color-secondary);
	transform: translateY(-3px);
}