/**
 * Perfamix Premium Glass Footer
 *
 * Scoped CSS for the Elementor widget.
 * Uses custom properties for Elementor controls.
 *
 * @package PerfamixChild
 */

/* ── Custom Properties Defaults ───────────────────────────────── */

.pfmx-glass-footer {
	--pfmx-gf-min-height: 100vh;
	--pfmx-gf-padding: 0;
	--pfmx-gf-align: center;
	--pfmx-gf-bg-fit: cover;
	--pfmx-gf-bg-pos: center center;
	--pfmx-gf-overlay: transparent;
	--pfmx-gf-bg-scale: 1;
	
	/* Glass Panel */
	--pfmx-gf-panel-w: 78%;
	--pfmx-gf-panel-max-w: 1500px;
	--pfmx-gf-panel-min-h: 80vh;
	--pfmx-gf-panel-p: clamp(36px, 5vw, 64px);
	--pfmx-gf-panel-radius: 24px;
	--pfmx-gf-panel-align-h: center;
	--pfmx-gf-panel-align-v: center;
	--pfmx-gf-panel-bg: rgba(20, 20, 20, 0.4);
	--pfmx-gf-panel-fallback: rgba(20, 20, 20, 0.85);
	--pfmx-gf-panel-blur: 20px;
	--pfmx-gf-panel-saturate: 1.2;
	
	/* Grid */
	--pfmx-gf-cols: 4;
	--pfmx-gf-gap-row: 40px;
	--pfmx-gf-gap-col: 32px;
	--pfmx-gf-grid-align: start;

	/* Navigation Titles */
	--pfmx-gf-title-color: #ffffff;
	--pfmx-gf-title-space: 16px;

	/* Navigation Links */
	--pfmx-gf-link-color: rgba(255, 255, 255, 0.7);
	--pfmx-gf-link-hover: #ffffff;
	--pfmx-gf-link-gap: 12px;
	--pfmx-gf-link-trans: 4px;
	--pfmx-gf-link-line: rgba(255, 255, 255, 0.5);
	--pfmx-gf-link-line-w: 1px;
	--pfmx-gf-trans-dur: 360ms;

	/* Brand Info */
	--pfmx-gf-brand-title-color: #ffffff;
	--pfmx-gf-brand-text-color: rgba(255, 255, 255, 0.7);
	--pfmx-gf-brand-max-w: 400px;
	
	/* Logo */
	--pfmx-gf-logo-w: 90%;
	--pfmx-gf-logo-max-w: 1000px;
	--pfmx-gf-logo-max-h: none;
	--pfmx-gf-logo-space-top: 60px;
	--pfmx-gf-logo-space-bottom: 40px;
	--pfmx-gf-logo-opacity: 1;

	/* Socials */
	--pfmx-gf-social-size: 20px;
	--pfmx-gf-social-gap: 16px;
	--pfmx-gf-social-color: rgba(255, 255, 255, 0.7);
	--pfmx-gf-social-hover: #ffffff;
	--pfmx-gf-social-hit: 44px;
	--pfmx-gf-social-radius: 50%;
	--pfmx-gf-social-bg: transparent;
	--pfmx-gf-social-bg-hover: rgba(255, 255, 255, 0.1);
	--pfmx-gf-social-border: transparent;
	--pfmx-gf-social-border-hover: transparent;

	/* Copyright */
	--pfmx-gf-copy-color: rgba(255, 255, 255, 0.5);
	--pfmx-gf-copy-space: 24px;

	/* Outer Canvas Setup */
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--pfmx-gf-min-height);
	/* Support for dynamic viewport heights */
	min-height: calc(var(--pfmx-gf-min-height, 100vh) * 1);
	padding: var(--pfmx-gf-padding);
	overflow: hidden;
	justify-content: var(--pfmx-gf-align);
	align-items: center;
}

@supports (min-height: 100svh) {
	.pfmx-glass-footer {
		min-height: var(--pfmx-gf-min-height, 100svh);
	}
}

/* ── Background Image & Overlay ───────────────────────────────── */

.pfmx-glass-footer__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.pfmx-glass-footer__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--pfmx-gf-bg-fit);
	object-position: var(--pfmx-gf-bg-pos);
	transform: scale(var(--pfmx-gf-bg-scale));
}

.pfmx-glass-footer__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-color: var(--pfmx-gf-overlay);
}

/* ── Glass Panel ──────────────────────────────────────────────── */

.pfmx-glass-footer__panel {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: var(--pfmx-gf-panel-w);
	max-width: var(--pfmx-gf-panel-max-w);
	min-height: var(--pfmx-gf-panel-min-h);
	padding: var(--pfmx-gf-panel-p);
	border-radius: var(--pfmx-gf-panel-radius);
	justify-content: var(--pfmx-gf-panel-align-v);
	align-items: var(--pfmx-gf-panel-align-h);
	
	/* Fallback background */
	background-color: var(--pfmx-gf-panel-fallback);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
	.pfmx-glass-footer__panel {
		background-color: var(--pfmx-gf-panel-bg);
		-webkit-backdrop-filter: blur(var(--pfmx-gf-panel-blur)) saturate(var(--pfmx-gf-panel-saturate));
		backdrop-filter: blur(var(--pfmx-gf-panel-blur)) saturate(var(--pfmx-gf-panel-saturate));
	}
}

/* ── Information Grid ─────────────────────────────────────────── */

.pfmx-glass-footer__grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(var(--pfmx-gf-cols), 1fr);
	column-gap: var(--pfmx-gf-gap-col);
	row-gap: var(--pfmx-gf-gap-row);
	align-items: var(--pfmx-gf-grid-align);
}

/* ── Navigation Columns ───────────────────────────────────────── */

.pfmx-glass-footer__nav,
.pfmx-glass-footer__brand {
	display: flex;
	flex-direction: column;
	min-width: 0; /* Prevent flex blowout */
}

.pfmx-gf-title {
	margin: 0 0 var(--pfmx-gf-title-space);
	color: var(--pfmx-gf-title-color);
}

.pfmx-glass-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pfmx-gf-link-gap);
}

.pfmx-glass-footer__nav a {
	position: relative;
	display: inline-flex;
	color: var(--pfmx-gf-link-color);
	text-decoration: none;
	transition: color var(--pfmx-gf-trans-dur) ease, transform var(--pfmx-gf-trans-dur) ease;
	outline: none;
	max-width: 100%;
}

.pfmx-glass-footer__nav-text {
	position: relative;
	display: inline-block;
}

/* Underline effect */
.pfmx-glass-footer__nav-text::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: var(--pfmx-gf-link-line-w);
	background-color: var(--pfmx-gf-link-line);
	transition: width var(--pfmx-gf-trans-dur) ease;
}

[dir="rtl"] .pfmx-glass-footer__nav-text::after {
	left: auto;
	right: 0;
}

/* Hover / Focus States */
.pfmx-glass-footer__nav a:hover,
.pfmx-glass-footer__nav a:focus-visible,
.pfmx-glass-footer__nav li.current-menu-item > a {
	color: var(--pfmx-gf-link-hover);
	transform: translateX(var(--pfmx-gf-link-trans));
}

[dir="rtl"] .pfmx-glass-footer__nav a:hover,
[dir="rtl"] .pfmx-glass-footer__nav a:focus-visible,
[dir="rtl"] .pfmx-glass-footer__nav li.current-menu-item > a {
	transform: translateX(calc(var(--pfmx-gf-link-trans) * -1));
}

.pfmx-glass-footer__nav a:hover .pfmx-glass-footer__nav-text::after,
.pfmx-glass-footer__nav a:focus-visible .pfmx-glass-footer__nav-text::after,
.pfmx-glass-footer__nav li.current-menu-item > a .pfmx-glass-footer__nav-text::after {
	width: 100%;
}

.pfmx-glass-footer__nav a:focus-visible {
	/* Accessible focus over changing backgrounds */
	outline: 2px solid var(--pfmx-gf-link-hover);
	outline-offset: 4px;
	border-radius: 2px;
}

/* ── Brand Info ───────────────────────────────────────────────── */

.pfmx-glass-footer__brand-desc {
	margin: 0;
	color: var(--pfmx-gf-brand-text-color);
	max-width: var(--pfmx-gf-brand-max-w);
}

.pfmx-glass-footer__brand-desc p {
	margin-top: 0;
	margin-bottom: 0.8em;
}

.pfmx-glass-footer__brand-desc p:last-child {
	margin-bottom: 0;
}

.pfmx-glass-footer__brand-desc a {
	color: var(--pfmx-gf-link-color);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--pfmx-gf-trans-dur) ease;
}

.pfmx-glass-footer__brand-desc a:hover,
.pfmx-glass-footer__brand-desc a:focus-visible {
	color: var(--pfmx-gf-link-hover);
}

.pfmx-glass-footer__brand-link {
	display: inline-block;
	margin-top: 12px;
	color: var(--pfmx-gf-link-color);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--pfmx-gf-trans-dur) ease;
}

.pfmx-glass-footer__brand-link:hover,
.pfmx-glass-footer__brand-link:focus-visible {
	color: var(--pfmx-gf-link-hover);
}

.pfmx-glass-footer__brand-desc a:focus-visible,
.pfmx-glass-footer__brand-link:focus-visible {
	outline: 2px solid var(--pfmx-gf-link-hover);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Logo ─────────────────────────────────────────────────────── */

.pfmx-glass-footer__logo {
	display: block;
	width: var(--pfmx-gf-logo-w);
	max-width: var(--pfmx-gf-logo-max-w);
	margin-top: var(--pfmx-gf-logo-space-top);
	margin-bottom: var(--pfmx-gf-logo-space-bottom);
	opacity: var(--pfmx-gf-logo-opacity);
	outline: none;
	transition: opacity var(--pfmx-gf-trans-dur) ease;
}

.pfmx-glass-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--pfmx-gf-logo-max-h);
	object-fit: contain;
}

.pfmx-glass-footer__logo:focus-visible {
	outline: 2px solid var(--pfmx-gf-link-hover);
	outline-offset: 8px;
	border-radius: 4px;
}

/* ── Social Icons ─────────────────────────────────────────────── */

.pfmx-glass-footer__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pfmx-gf-social-gap);
	justify-content: center;
}

.pfmx-glass-footer__socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pfmx-gf-social-hit);
	min-height: var(--pfmx-gf-social-hit);
	color: var(--pfmx-gf-social-color);
	background-color: var(--pfmx-gf-social-bg);
	border: 1px solid var(--pfmx-gf-social-border);
	border-radius: var(--pfmx-gf-social-radius);
	text-decoration: none;
	transition: all var(--pfmx-gf-trans-dur) ease;
	outline: none;
}

.pfmx-glass-footer__social-icon {
	display: block;
	width: var(--pfmx-gf-social-size);
	height: var(--pfmx-gf-social-size);
	fill: currentColor;
}

.pfmx-glass-footer__socials a:hover,
.pfmx-glass-footer__socials a:focus-visible {
	color: var(--pfmx-gf-social-hover);
	background-color: var(--pfmx-gf-social-bg-hover);
	border-color: var(--pfmx-gf-social-border-hover);
	transform: translateY(-2px);
}

.pfmx-glass-footer__socials a:focus-visible {
	outline: 2px solid var(--pfmx-gf-social-hover);
	outline-offset: 4px;
}

/* ── Copyright ────────────────────────────────────────────────── */

.pfmx-glass-footer__copyright {
	margin: var(--pfmx-gf-copy-space) 0 0 0;
	color: var(--pfmx-gf-copy-color);
	text-align: center;
}

.pfmx-glass-footer__copyright a {
	color: inherit;
	text-decoration: underline;
}

.pfmx-glass-footer__copyright a:hover,
.pfmx-glass-footer__copyright a:focus-visible {
	color: var(--pfmx-gf-link-hover);
}

.pfmx-glass-footer__copyright a:focus-visible {
	outline: 2px solid var(--pfmx-gf-link-hover);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Editor Notice ────────────────────────────────────────────── */

.pfmx-gf-editor-notice {
	padding: 40px 20px;
	text-align: center;
	color: #666;
	background: #f9f9f9;
	border: 1px dashed #ccc;
	border-radius: 6px;
	width: 100%;
}

.pfmx-gf-editor-notice strong {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	color: #333;
}

/* ── Responsive: Tablet (768px - 1024px) ──────────────────────── */

@media (max-width: 1024px) {
	.pfmx-glass-footer {
		--pfmx-gf-panel-w: 92%;
		--pfmx-gf-panel-blur: 16px;
		--pfmx-gf-cols: 2;
	}
}

/* ── Responsive: Mobile (<= 767px) ────────────────────────────── */

@media (max-width: 767px) {
	.pfmx-glass-footer {
		--pfmx-gf-panel-w: calc(100% - 24px);
		--pfmx-gf-panel-min-h: auto;
		--pfmx-gf-panel-p: 24px 18px;
		--pfmx-gf-panel-radius: 16px;
		--pfmx-gf-panel-blur: 12px;
		--pfmx-gf-cols: 2;
		--pfmx-gf-gap-col: 16px;
		--pfmx-gf-gap-row: 32px;
		--pfmx-gf-logo-space-top: 40px;
		--pfmx-gf-logo-space-bottom: 30px;
	}

	.pfmx-glass-footer__grid[data-mobile-cols="1"] {
		--pfmx-gf-cols: 1;
	}
	
	.pfmx-glass-footer__brand[data-mobile-full="yes"] {
		grid-column: 1 / -1;
	}

	/* Disable translation on touch devices by default */
	.pfmx-glass-footer__nav a:hover,
	.pfmx-glass-footer__nav a:focus-visible,
	.pfmx-glass-footer__nav li.current-menu-item > a {
		transform: none;
	}
	
	.pfmx-glass-footer__socials a:hover,
	.pfmx-glass-footer__socials a:focus-visible {
		transform: none;
	}
}

/* ── Reduced Motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.pfmx-glass-footer__nav a,
	.pfmx-glass-footer__nav-text::after,
	.pfmx-glass-footer__brand-desc a,
	.pfmx-glass-footer__brand-link,
	.pfmx-glass-footer__logo,
	.pfmx-glass-footer__socials a {
		transition-duration: 0.01ms !important;
	}

	.pfmx-glass-footer__nav a:hover,
	.pfmx-glass-footer__nav a:focus-visible,
	.pfmx-glass-footer__nav li.current-menu-item > a,
	.pfmx-glass-footer__socials a:hover,
	.pfmx-glass-footer__socials a:focus-visible {
		transform: none !important;
	}
}
