/**
 * =========================================================
 * Budania IAS - Compact Professional Footer
 * =========================================================
 *
 * File:
 * assets/css/footer.css
 *
 * Designed for:
 * footer.php
 *
 * Features:
 * - Compact height
 * - Reduced horizontal spacing
 * - Professional academic theme
 * - Responsive 3-column layout
 * - WordPress Footer Menu support
 * - Social menu support
 * - Hover animations
 * - Mobile responsive
 * - Accessibility
 */


/* =========================================================
   1. FOOTER VARIABLES
========================================================= */

:root {

	--budania-footer-bg: #0b1220;

	--budania-footer-bg-soft: #101a2d;

	--budania-footer-panel: rgba(255, 255, 255, 0.045);

	--budania-footer-border: rgba(255, 255, 255, 0.10);

	--budania-footer-title: #ffffff;

	--budania-footer-text: #aebbd0;

	--budania-footer-muted: #7f8da3;

	--budania-footer-accent: #d6a84f;

	--budania-footer-accent-light: #f0ca75;

	--budania-footer-accent-soft: rgba(214, 168, 79, 0.14);

	--budania-footer-radius: 10px;

	--budania-footer-transition:
		0.25s ease;

}


/* =========================================================
   2. MAIN FOOTER
========================================================= */

.site-footer {

	position: relative;

	width: 100%;

	margin-top: 50px;

	background:
		linear-gradient(
			135deg,
			#08111f 0%,
			#0d1a2d 50%,
			#091321 100%
		);

	color: var(--budania-footer-text);

	overflow: hidden;

}


/* =========================================================
   3. TOP GOLD ACCENT
========================================================= */

.site-footer::before {

	content: "";

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 2px;

	background:
		linear-gradient(
			90deg,
			transparent,
			var(--budania-footer-accent),
			var(--budania-footer-accent-light),
			var(--budania-footer-accent),
			transparent
		);

}


/* =========================================================
   4. SUBTLE BACKGROUND EFFECT
========================================================= */

.site-footer::after {

	content: "";

	position: absolute;

	width: 260px;

	height: 260px;

	right: -130px;

	top: -130px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 168, 79, 0.07),
			transparent 70%
		);

	pointer-events: none;

}


/* =========================================================
   5. MAIN FOOTER AREA
========================================================= */

.site-footer-main {

	padding: 42px 20px 35px;

}


/* =========================================================
   6. FOOTER CONTAINER
========================================================= */

.site-footer-container {

	width: min(
		100%,
		1080px
	);

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		1.4fr
		0.75fr
		1fr;

	gap: 55px;

	align-items: start;

}


/* =========================================================
   7. FOOTER COLUMN
========================================================= */

.footer-column {

	min-width: 0;

}


/* =========================================================
   8. BRAND COLUMN
========================================================= */

.footer-brand-column {

	padding-right: 10px;

}


/* =========================================================
   9. LOGO
========================================================= */

.footer-logo {

	margin-bottom: 13px;

}


.footer-logo a {

	display: inline-flex;

	align-items: center;

	text-decoration: none;

}


.footer-logo img {

	display: block;

	width: auto;

	max-width: 115px;

	max-height: 58px;

	object-fit: contain;

	transition:
		transform var(--budania-footer-transition);

}


/* =========================================================
   10. LOGO HOVER
========================================================= */

.footer-logo a:hover img {

	transform:
		translateY(-2px)
		scale(1.025);

}


/* =========================================================
   11. SITE NAME
========================================================= */

.footer-site-name {

	margin: 0 0 8px;

	font-size: 24px;

	font-weight: 700;

	line-height: 1.2;

	letter-spacing: -0.02em;

}


.footer-site-name a {

	color: var(--budania-footer-title);

	text-decoration: none;

	transition:
		color var(--budania-footer-transition);

}


.footer-site-name a:hover {

	color:
		var(--budania-footer-accent-light);

}


/* =========================================================
   12. DESCRIPTION
========================================================= */

.footer-site-description {

	max-width: 390px;

	margin: 0;

	color: var(--budania-footer-muted);

	font-size: 13px;

	line-height: 1.65;

}


/* =========================================================
   13. COLUMN TITLE
========================================================= */

.footer-column-title {

	position: relative;

	margin: 0 0 17px;

	padding: 0 0 8px;

	color: var(--budania-footer-title);

	font-size: 14px;

	font-weight: 700;

	line-height: 1.3;

}


/* =========================================================
   14. TITLE UNDERLINE
========================================================= */

.footer-column-title::after {

	content: "";

	position: absolute;

	left: 0;

	bottom: 0;

	width: 28px;

	height: 2px;

	border-radius: 5px;

	background:
		var(--budania-footer-accent);

	transition:
		width var(--budania-footer-transition);

}


.footer-column:hover
.footer-column-title::after {

	width: 45px;

}


/* =========================================================
   15. FOOTER MENU
========================================================= */

.footer-navigation {

	margin: 0;

	padding: 0;

}


.footer-menu {

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 1px;

	margin: 0;

	padding: 0;

	list-style: none;

}


.footer-menu li {

	margin: 0;

	padding: 0;

	list-style: none;

}


/* =========================================================
   16. FOOTER MENU LINKS
========================================================= */

.footer-menu a {

	position: relative;

	display: inline-flex;

	align-items: center;

	min-height: 29px;

	padding: 3px 0;

	color: var(--budania-footer-text);

	font-size: 13px;

	font-weight: 500;

	line-height: 1.4;

	text-decoration: none;

	transition:
		color var(--budania-footer-transition),
		transform var(--budania-footer-transition);

}


/* =========================================================
   17. MENU ARROW
========================================================= */

.footer-menu a::before {

	content: "›";

	margin-right: 7px;

	color: var(--budania-footer-accent);

	font-size: 16px;

	line-height: 1;

	opacity: 0;

	transform: translateX(-4px);

	transition:
		opacity var(--budania-footer-transition),
		transform var(--budania-footer-transition);

}


/* =========================================================
   18. MENU HOVER
========================================================= */

.footer-menu a:hover {

	color: var(--budania-footer-accent-light);

	transform: translateX(3px);

}


.footer-menu a:hover::before {

	opacity: 1;

	transform: translateX(0);

}


/* =========================================================
   19. ACTIVE MENU
========================================================= */

.footer-menu
.current-menu-item > a,

.footer-menu
.current_page_item > a {

	color:
		var(--budania-footer-accent-light);

}


/* =========================================================
   20. WORDPRESS FALLBACK PAGE MENU
========================================================= */

.footer-navigation .page_item {

	margin: 0;

	padding: 0;

	list-style: none;

}


.footer-navigation .page_item a {

	position: relative;

	display: inline-flex;

	align-items: center;

	min-height: 29px;

	padding: 3px 0;

	color: var(--budania-footer-text);

	font-size: 13px;

	text-decoration: none;

	transition:
		color var(--budania-footer-transition),
		transform var(--budania-footer-transition);

}


.footer-navigation .page_item a::before {

	content: "›";

	margin-right: 7px;

	color: var(--budania-footer-accent);

	opacity: 0;

	transform: translateX(-4px);

	transition:
		opacity var(--budania-footer-transition),
		transform var(--budania-footer-transition);

}


.footer-navigation .page_item a:hover {

	color: var(--budania-footer-accent-light);

	transform: translateX(3px);

}


.footer-navigation .page_item a:hover::before {

	opacity: 1;

	transform: translateX(0);

}


/* =========================================================
   21. SOCIAL AREA
========================================================= */

.footer-social-section {

	margin-top: 17px;

}


.footer-social-menu {

	display: flex;

	flex-wrap: wrap;

	gap: 7px;

	margin: 0;

	padding: 0;

	list-style: none;

}


.footer-social-menu li {

	margin: 0;

	padding: 0;

	list-style: none;

}


/* =========================================================
   22. SOCIAL BUTTON
========================================================= */

.footer-social-menu a {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-width: 34px;

	height: 34px;

	padding: 0 9px;

	border:
		1px solid
		var(--budania-footer-border);

	border-radius:
		8px;

	background:
		var(--budania-footer-panel);

	color:
		var(--budania-footer-text);

	font-size: 11px;

	font-weight: 600;

	text-decoration: none;

	transition:
		transform var(--budania-footer-transition),
		background var(--budania-footer-transition),
		border-color var(--budania-footer-transition),
		color var(--budania-footer-transition);

}


/* =========================================================
   23. SOCIAL HOVER
========================================================= */

.footer-social-menu a:hover {

	transform:
		translateY(-3px);

	background:
		var(--budania-footer-accent-soft);

	border-color:
		var(--budania-footer-accent);

	color:
		var(--budania-footer-accent-light);

}


/* =========================================================
   24. LEARNING CONTENT
========================================================= */

.footer-widget-default-content p,

.footer-widgets p {

	max-width: 320px;

	margin: 0;

	color: var(--budania-footer-muted);

	font-size: 13px;

	line-height: 1.7;

}


/* =========================================================
   25. WIDGETS
========================================================= */

.footer-widgets .widget {

	margin: 0 0 15px;

	padding: 0;

}


.footer-widgets .widget:last-child {

	margin-bottom: 0;

}


/* =========================================================
   26. WIDGET TITLE
========================================================= */

.footer-widgets .widget-title {

	margin: 0 0 7px;

	color: var(--budania-footer-title);

	font-size: 13px;

	font-weight: 700;

}


/* =========================================================
   27. WIDGET LINKS
========================================================= */

.footer-widgets a {

	color: var(--budania-footer-text);

	text-decoration: none;

	transition:
		color var(--budania-footer-transition);

}


.footer-widgets a:hover {

	color:
		var(--budania-footer-accent-light);

}


/* =========================================================
   28. FOOTER BOTTOM
========================================================= */

.site-footer-bottom {

	border-top:
		1px solid
		rgba(255, 255, 255, 0.07);

	background:
		rgba(3, 8, 18, 0.55);

}


/* =========================================================
   29. BOTTOM CONTAINER
========================================================= */

.site-footer-bottom-container {

	width: min(
		100%,
		1080px
	);

	margin: 0 auto;

	padding: 13px 20px;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 15px;

}


/* =========================================================
   30. COPYRIGHT
========================================================= */

.footer-copyright {

	margin: 0;

	color:
		var(--budania-footer-muted);

	font-size: 11px;

	line-height: 1.5;

}


.footer-copyright p {

	margin: 0;

}


.footer-copyright a {

	color:
		var(--budania-footer-text);

	font-weight: 600;

	text-decoration: none;

	transition:
		color var(--budania-footer-transition);

}


.footer-copyright a:hover {

	color:
		var(--budania-footer-accent-light);

}


.footer-copyright-separator {

	margin:
		0 5px;

	color:
		var(--budania-footer-muted);

}


/* =========================================================
   31. POWERED BY
========================================================= */

.footer-powered-by {

	display: inline-flex;

	align-items: center;

	gap: 5px;

	color:
		var(--budania-footer-muted);

	font-size: 11px;

	line-height: 1.5;

}


.footer-powered-link {

	position: relative;

	color:
		var(--budania-footer-title);

	font-weight: 700;

	text-decoration: none;

	transition:
		color var(--budania-footer-transition);

}


.footer-powered-link:hover {

	color:
		var(--budania-footer-accent-light);

}


/* =========================================================
   32. POWERED BY UNDERLINE
========================================================= */

.footer-powered-link::after {

	content: "";

	position: absolute;

	left: 0;

	bottom: -2px;

	width: 100%;

	height: 1px;

	background:
		var(--budania-footer-accent);

	transform:
		scaleX(0);

	transform-origin: right;

	transition:
		transform var(--budania-footer-transition);

}


.footer-powered-link:hover::after {

	transform:
		scaleX(1);

	transform-origin: left;

}


/* =========================================================
   33. KEYBOARD ACCESSIBILITY
========================================================= */

.site-footer a:focus-visible {

	outline:
		2px solid
		var(--budania-footer-accent-light);

	outline-offset: 3px;

	border-radius: 4px;

}


/* =========================================================
   34. TABLET
========================================================= */

@media (max-width: 900px) {

	.site-footer-main {

		padding:
			38px 20px 32px;

	}


	.site-footer-container {

		grid-template-columns:
			1.2fr
			0.8fr
			1fr;

		gap: 35px;

	}

}


/* =========================================================
   35. MOBILE
========================================================= */

@media (max-width: 700px) {

	.site-footer {

		margin-top: 40px;

	}


	.site-footer-main {

		padding:
			35px 18px 30px;

	}


	.site-footer-container {

		grid-template-columns:
			1fr;

		gap: 28px;

	}


	.footer-brand-column {

		padding-right: 0;

	}


	.footer-logo img {

		max-width: 100px;

		max-height: 52px;

	}


	.footer-site-name {

		font-size: 21px;

	}


	.footer-site-description {

		max-width: 100%;

		font-size: 12px;

	}


	.footer-column-title {

		margin-bottom: 13px;

	}


	.site-footer-bottom-container {

		padding:
			12px 18px;

		flex-direction: column;

		justify-content: center;

		text-align: center;

		gap: 5px;

	}


	.footer-copyright,

	.footer-powered-by {

		font-size: 10px;

	}

}


/* =========================================================
   36. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

	.site-footer-main {

		padding:
			30px 15px 26px;

	}


	.footer-site-name {

		font-size: 20px;

	}


	.footer-menu a,

	.footer-navigation .page_item a {

		font-size: 12px;

	}


	.footer-widget-default-content p,

	.footer-widgets p {

		font-size: 12px;

	}


	.footer-social-menu a {

		min-width: 32px;

		height: 32px;

		padding: 0 8px;

	}

}


/* =========================================================
   37. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.site-footer *,
	.site-footer *::before,
	.site-footer *::after {

		transition: none !important;

		animation: none !important;

	}

}