/**
 * Tapgrix Child — Premium Site Footer
 *
 * Parent Theme: Blocksy
 * File: assets/css/footer.css
 *
 * Matches the custom Tapgrix footer.php.
 *
 * Responsibilities:
 * - Text-only Tapgrix branding
 * - Four-column desktop footer
 * - Store and information navigation
 * - GPCB Pay demonstration information
 * - Responsive tablet and mobile layouts
 * - Accessible keyboard navigation
 *
 * Presentation only.
 * No WooCommerce checkout or payment logic.
 */

/* =========================================================
   1. FOOTER FOUNDATION
   ========================================================= */

.tgx-site-footer {

	--tgx-footer-navy: #061126;
	--tgx-footer-blue: #2563eb;
	--tgx-footer-cyan: #22d3ee;

	--tgx-footer-text: #334155;
	--tgx-footer-muted: #60758c;
	--tgx-footer-line: #dce8f5;

	position: relative;
	isolation: isolate;

	width: 100%;
	margin: 0;

	color: var(--tgx-footer-navy);

	background:
		radial-gradient(
			ellipse at 90% 4%,
			rgba(37, 99, 235, 0.09),
			transparent 40%
		),
		linear-gradient(
			180deg,
			#f9fcff 0%,
			#eef5fe 100%
		);

	border-top:
		1px solid var(--tgx-footer-line);
}

/* Premium Accent Border */

.tgx-site-footer::before {

	content: "";

	position: absolute;

	top: -1px;
	left: 0;
	right: 0;

	height: 3px;

	background: linear-gradient(
		90deg,
		#061126 0%,
		#2563eb 50%,
		#22d3ee 100%
	);

	pointer-events: none;
}

/* Box Sizing */

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

	box-sizing: border-box;
}

/* Shared Container */

.tgx-site-footer__container {

	width: min(
		1240px,
		calc(100% - 64px)
	);

	margin-inline: auto;
}

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

.tgx-site-footer__main {

	display: grid;

	grid-template-columns:
		minmax(0, 1.45fr)
		minmax(0, 0.85fr)
		minmax(0, 0.95fr)
		minmax(0, 1.15fr);

	align-items: start;

	gap: clamp(
		24px,
		3vw,
		50px
	);

	padding:
		clamp(58px, 6vw, 85px)
		0
		clamp(45px, 5vw, 65px);
}

.tgx-site-footer__main > * {

	min-width: 0;
}

/* =========================================================
   3. TAPGRIX BRAND
   ========================================================= */

.tgx-site-footer__brand {

	display: flex;
	flex-direction: column;

	align-items: flex-start;

	min-width: 0;
}

/* Text Logo */

.tgx-site-footer__logo {

	display: inline-flex;
	align-items: center;

	max-width: 100%;

	margin-bottom: 17px;

	color: var(--tgx-footer-navy);

	font-size: 1.9rem;
	font-weight: 850;
	line-height: 1.1;

	letter-spacing: -0.045em;

	text-decoration: none;

	transition:
		color 160ms ease,
		transform 160ms ease;
}

/* Logo Accent */

.tgx-site-footer__logo span {

	color: var(--tgx-footer-blue);
}

.tgx-site-footer__logo:hover {

	color: var(--tgx-footer-navy);

	transform: translateY(-2px);
}

/* Brand Tagline */

.tgx-site-footer__tagline {

	max-width: 320px;

	margin: 0 0 15px;

	color: #2563eb;

	font-size: 0.76rem;
	font-weight: 850;
	line-height: 1.6;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Brand Description */

.tgx-site-footer__description {

	max-width: 340px;

	margin: 0;

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

	font-size: 0.93rem;
	font-weight: 450;
	line-height: 1.85;

	overflow-wrap: anywhere;
}

/* =========================================================
   4. FOOTER COLUMNS
   ========================================================= */

.tgx-site-footer__column {

	min-width: 0;
}

/* Column Headings */

.tgx-site-footer__heading {

	margin: 5px 0 23px;

	color: var(--tgx-footer-navy);

	font-size: 1.06rem;
	font-weight: 850;
	line-height: 1.4;

	letter-spacing: -0.02em;
}

/* Navigation Lists */

.tgx-site-footer__links {

	display: flex;
	flex-direction: column;

	align-items: flex-start;

	gap: 13px;

	list-style: none;

	margin: 0;
	padding: 0;
}

.tgx-site-footer__links li {

	margin: 0;
	padding: 0;

	list-style: none;
}

/* Footer Links */

.tgx-site-footer__links a {

	display: inline-block;

	max-width: 100%;

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

	font-size: 0.91rem;
	font-weight: 550;
	line-height: 1.65;

	text-decoration: none;
	text-underline-offset: 4px;

	transition:
		color 160ms ease,
		transform 160ms ease;
}

.tgx-site-footer__links a:hover {

	color: var(--tgx-footer-blue);

	transform: translateX(3px);
}

/* =========================================================
   5. GPCB PAY DEMONSTRATION COLUMN
   ========================================================= */

.tgx-site-footer__demo {

	min-width: 0;
}

/* Demo Description */

.tgx-site-footer__demo-text {

	max-width: 320px;

	margin: 0 0 22px;

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

	font-size: 0.92rem;
	line-height: 1.8;
}

/* GPCB Pay Link */

.tgx-site-footer__gpcb-link {

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 11px;

	min-height: 45px;

	max-width: 100%;

	padding: 11px 17px;

	border: 1px solid
		rgba(37, 99, 235, 0.18);

	border-radius: 10px;

	background: #e7f1ff;

	color: #1d4ed8;

	font-size: 0.84rem;
	font-weight: 800;
	line-height: 1.4;

	text-align: center;
	text-decoration: none;

	box-shadow:
		0 6px 18px
		rgba(37, 99, 235, 0.065);

	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

/* GPCB Pay Link Hover */

.tgx-site-footer__gpcb-link:hover {

	background: #dbeafe;

	border-color: #93c5fd;

	color: #1e40af;

	transform: translateY(-2px);
}

/* Arrow */

.tgx-site-footer__gpcb-link span {

	font-size: 1.1rem;
	line-height: 1;
}

/* =========================================================
   6. DEMONSTRATION DISCLOSURE
   ========================================================= */

.tgx-site-footer__disclosure {

	position: relative;

	margin-bottom: 32px;

	padding: 21px 25px;

	border: 1px solid #d3e4f7;

	border-left: 4px solid #2563eb;

	border-radius: 12px;

	background: rgba(
		255,
		255,
		255,
		0.78
	);

	box-shadow:
		0 6px 20px
		rgba(6, 17, 38, 0.035);
}

/* Disclosure Text */

.tgx-site-footer__disclosure p {

	margin: 0;

	color: #526985;

	font-size: 0.87rem;
	line-height: 1.85;
}

/* Disclosure Heading */

.tgx-site-footer__disclosure strong {

	color: #0a1c3a;

	font-weight: 850;
}

/* =========================================================
   7. COPYRIGHT BOTTOM BAR
   ========================================================= */

.tgx-site-footer__bottom {

	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;

	gap: 12px 24px;

	min-height: 78px;

	margin-bottom: 28px;

	padding: 22px 28px;

	border: 1px solid
		rgba(255, 255, 255, 0.09);

	border-radius: 12px;

	background:
		linear-gradient(
			110deg,
			#061126 0%,
			#0a2348 100%
		);

	box-shadow:
		0 10px 30px
		rgba(6, 17, 38, 0.11);
}

/* Copyright Text */

.tgx-site-footer__copyright {

	margin: 0;

	color: #d1e1f5;

	font-size: 0.81rem;
	font-weight: 550;
	line-height: 1.7;
}

/* Integration Note */

.tgx-site-footer__bottom-note {

	margin: 0;

	color: #a8bdd8;

	font-size: 0.79rem;
	font-weight: 500;
	line-height: 1.7;
}

/* Separator */

.tgx-site-footer__bottom-note span {

	margin: 0 7px;

	color: var(--tgx-footer-cyan);
}

/* =========================================================
   8. ACCESSIBILITY
   ========================================================= */

.tgx-site-footer a:focus-visible {

	outline: 3px solid #2563eb;
	outline-offset: 4px;

	border-radius: 5px;
}

/* =========================================================
   9. TABLET — 1024px
   ========================================================= */

@media (max-width: 1024px) {

	.tgx-site-footer__container {

		width: min(
			1240px,
			calc(100% - 44px)
		);
	}

	.tgx-site-footer__main {

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 44px 38px;
	}

	.tgx-site-footer__brand {

		grid-column: 1 / -1;
	}

	.tgx-site-footer__description {

		max-width: 580px;
	}

	.tgx-site-footer__demo {

		grid-column: 1 / -1;
	}

	.tgx-site-footer__demo-text {

		max-width: 560px;
	}
}

/* =========================================================
   10. MOBILE — 600px
   ========================================================= */

@media (max-width: 600px) {

	.tgx-site-footer__container {

		width: calc(100% - 36px);
	}

	.tgx-site-footer__main {

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 34px 22px;

		padding-top: 48px;
		padding-bottom: 42px;
	}

	/* Brand */

	.tgx-site-footer__brand {

		grid-column: 1 / -1;
	}

	.tgx-site-footer__logo {

		font-size: 1.75rem;
	}

	.tgx-site-footer__description {

		max-width: 420px;
	}

	/* Footer Columns */

	.tgx-site-footer__heading {

		margin-bottom: 17px;

		font-size: 1rem;
	}

	.tgx-site-footer__links {

		gap: 11px;
	}

	.tgx-site-footer__links a {

		font-size: 0.87rem;
	}

	/* Demo Column */

	.tgx-site-footer__demo {

		grid-column: 1 / -1;
	}

	/* Disclosure */

	.tgx-site-footer__disclosure {

		margin-bottom: 23px;

		padding: 18px 19px;
	}

	.tgx-site-footer__disclosure p {

		font-size: 0.83rem;
	}

	/* Bottom */

	.tgx-site-footer__bottom {

		align-items: flex-start;
		flex-direction: column;

		min-height: 0;

		gap: 8px;

		margin-bottom: 22px;

		padding: 22px 20px;
	}

}

/* =========================================================
   11. SMALL MOBILE — 380px
   ========================================================= */

@media (max-width: 380px) {

	.tgx-site-footer__container {

		width: calc(100% - 28px);
	}

	.tgx-site-footer__main {

		grid-template-columns:
			minmax(0, 1fr);

		gap: 31px;
	}

	.tgx-site-footer__brand,
	.tgx-site-footer__demo {

		grid-column: auto;
	}

	.tgx-site-footer__logo {

		font-size: 1.65rem;
	}

	.tgx-site-footer__disclosure {

		padding: 17px 16px;
	}

}

/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

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

	.tgx-site-footer__logo,
	.tgx-site-footer__links a,
	.tgx-site-footer__gpcb-link {

		transition: none;
	}

	.tgx-site-footer__logo:hover,
	.tgx-site-footer__links a:hover,
	.tgx-site-footer__gpcb-link:hover {

		transform: none;
	}

}