/* ==========================================================================
   Site footer (footer.php) — brand column, link columns, social icons
   and the bottom copyright bar.
   ========================================================================== */
.site-footer {
	background: linear-gradient(165deg, var(--color-primary-dark) 0%, #23473d 55%, var(--color-primary-dark) 100%);
	color: #d9d3c2;
	position: relative;
	overflow: hidden;
	border-top: 3px solid var(--color-secondary);
}
.site-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 12% 0%, rgba(217, 138, 61, 0.14), transparent 45%);
	pointer-events: none;
}
/* Kept low on purpose — see the tighter headings, lists and social icons below. */
.footer-top { padding: 46px 0 30px; position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1.1fr 1fr 1fr; gap: 26px 36px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.footer-brand .brand-mark { background: rgba(255, 255, 255, 0.12); color: #f4d9a8; border: 1px solid rgba(244, 217, 168, 0.35); }
.footer-brand .site-title { color: #fff; }
.footer-brand img.custom-logo { max-height: 50px; }
.footer-col h4 { position: relative; color: #fff; font-size: 0.98rem; margin-bottom: 12px; padding-bottom: 8px; letter-spacing: 0.02em; }
.footer-col h4::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 30px; height: 2px;
	background: var(--color-secondary);
}
/* Second heading inside a column: "Retreats" (Yoga Course column) and
   "Contact Us" (under the school name in the first column). */
.footer-col h4.footer-heading--spaced { margin-top: 14px; }
.footer-col h4.footer-heading--contact { margin-top: 16px; }
.footer-col p { color: #c4bdaa; font-size: 0.9rem; line-height: 1.55; margin-bottom: 0; }
.footer-col ul li { margin-bottom: 6px; }

/* Quick Links: two short columns instead of one long list. */
.footer-links-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.footer-col ul li a { color: #c4bdaa; font-size: 0.92rem; transition: color var(--transition), padding-left var(--transition); }
.footer-col ul li a:hover { color: #f0d9a4; padding-left: 4px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; line-height: 1.5; }
.footer-contact svg { width: 18px; height: 18px; color: var(--color-secondary); flex-shrink: 0; margin-top: 3px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center;
	color: #fff; transition: background var(--transition), transform var(--transition);
}
.footer-social a svg { width: 17px; height: 17px; }
.footer-social a:hover { transform: translateY(-3px); }
/* Each icon lifts into its own platform's brand color on hover, rather
   than one shared accent color for every network. */
.footer-social-facebook:hover { background: #1877f2; }
.footer-social-instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.footer-social-youtube:hover { background: #ff0000; }
.footer-social-whatsapp:hover { background: #25d366; }
.footer-social-tiktok:hover { background: #000; box-shadow: -2px 2px 0 #25f4ee, 2px -2px 0 #fe2c55; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 16px 0; position: relative; z-index: 1; }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.84rem; color: #a89f8a; }
.footer-bottom a { color: #c4bdaa; }
.footer-bottom a:hover { color: #f0d9a4; }
.footer-credit-sep { color: rgba(255, 255, 255, 0.25); margin: 0 2px; }
.footer-credit-link {
	color: var(--color-secondary);
	font-weight: 600;
	padding-bottom: 1px;
	background-image: linear-gradient(var(--color-secondary), var(--color-secondary));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: left bottom;
	transition: color var(--transition), background-size var(--transition);
}
.footer-credit-link:hover { color: #f0d9a4; background-size: 100% 1px; }
.footer-om { position: absolute; right: -40px; top: -40px; font-size: 220px; color: rgba(255, 255, 255, 0.03); font-family: var(--font-heading); pointer-events: none; line-height: 1; z-index: 0; }

/* Touch screens: a taller tap area on the footer links (the design does not
   change — only the space a finger can hit). */
@media (hover: none) {
	.footer-col ul li a { display: inline-flex; align-items: center; min-height: 30px; }
	.footer-contact li { min-height: 30px; }
}

/* Phones: the two link columns stay (the names are short), which keeps the
   stacked footer from getting very long. Only tiny phones go to one. */
@media (max-width: 640px) {
	.footer-top { padding: 34px 0 22px; }
	.footer-links-2 { gap: 0 14px; }
}
@media (max-width: 340px) {
	.footer-links-2 { grid-template-columns: 1fr; }
}