/* Variable declaration */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--brand-color: #FFC304;
	--sky-gradient: linear-gradient(180deg, #94C5F8 0%, #A6E6FF 55%, #B1B5EA 100%) fixed;
	--text-color: #303030;
	--heading-color: #222;
	--shading: 0 8px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);

	/* Socials */
	--bluesky: #208bfe;
	--linkedin: #0a66c2;
	--instagram: #E1306C;
	--youtube: red;
	--twitch: #9146ff;
	--itchio: #fa5c5c;
	--tiktok: #FE2C55;
	--discord: #5865f2;
	--x: #000000;
}

body {
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	line-height: 1.25;
	/* Reduce text jank on webfont swap by matching x-height metrics */
	font-size-adjust: 0.52; /* Inter approx x-height ratio; keeps fallback similar */
}

footer {
	color: var(--text-color);
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 1rem;
}

.logo {
	width: 130px;
	height: 130px;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	transition: all 200ms ease;
}

.logo:hover {
	filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.25));
}

.card {
	/* Glassy backdrop similar to cloud-nav (no bubbles, same rounding as before) */
	background: radial-gradient(120% 180% at 10% 20%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.70) 40%, rgba(255,255,255,0.55) 100%),
				linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.4));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	/* Slightly richer ambient shadow to float over sky */
	box-shadow: 0 8px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
	border-radius: 20px;
	padding: 24px;

	margin-bottom: 24px;
	width: 100%;
}

.card-dark {
	background: radial-gradient(120% 180% at 10% 20%, rgba(20,20,20,0.85) 0%, rgba(20,20,20,0.70) 40%, rgba(20,20,20,0.55) 100%),
				linear-gradient(180deg, rgba(20,20,20,0.65), rgba(20,20,20,0.4));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15);
	border-radius: 20px;
	padding: 24px;

	margin-bottom: 24px;
	width: 100%;
	color: rgb(196, 196, 196);
}

h1 {
	font-weight: bold;
	font-size: 24px;
	color: var(--heading-color);
	margin-bottom: 2px;
}

h2 {
	font-weight: bold;
	font-size: 20px;
	color: var(--heading-color);
	margin-bottom: 2px;
}

h3 {
	font-weight: bold;
	font-size: 16px;
	color: var(--heading-color);
	margin-bottom: 2px;
}

.footer-logo {
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	transition: all 200ms ease;
}

.footer-link-row a:hover {
	text-decoration: none;
}

.socials {
	font-size: 32px;
	margin-top: 16px;
}

.socials-home {
	font-size: 36px;
}

/* Support both legacy <i> icons and new Font Awesome SVG-with-JS */
.socials i,
.socials .svg-inline--fa {
	margin-right: 14px;
}

/* Slightly larger glyphs for these specific brand icons */
.socials i.fa-x-twitter, .socials i.fa-instagram,
.socials .svg-inline--fa.fa-x-twitter, .socials .svg-inline--fa.fa-instagram {
	font-size: 36px;
}

.socials-home i.fa-x-twitter, .socials-home i.fa-instagram,
.socials-home .svg-inline--fa.fa-x-twitter, .socials-home .svg-inline--fa.fa-instagram {
	font-size: 40px;
}

.socials a i,
.socials a .svg-inline--fa {
	transition: all 200ms ease;
}

.socials-generic:hover,
.socials-generic:hover i,
.socials-generic:hover .svg-inline--fa {
	color: var(--brand-color);
}

.socials-bluesky:hover,
.socials-bluesky:hover i,
.socials-bluesky:hover .svg-inline--fa { color: var(--bluesky); }

.socials-x:hover,
.socials-x:hover i,
.socials-x:hover .svg-inline--fa { color: var(--x); }

.socials-linkedin:hover,
.socials-linkedin:hover i,
.socials-linkedin:hover .svg-inline--fa { color: var(--linkedin); }

.socials-instagram:hover,
.socials-instagram:hover i,
.socials-instagram:hover .svg-inline--fa { color: var(--instagram); }

.socials-youtube:hover,
.socials-youtube:hover i,
.socials-youtube:hover .svg-inline--fa { color: var(--youtube); }

.socials-twitch:hover,
.socials-twitch:hover i,
.socials-twitch:hover .svg-inline--fa { color: var(--twitch); }

.socials-itchio:hover,
.socials-itchio:hover i,
.socials-itchio:hover .svg-inline--fa { color: var(--itchio); }

.socials-tiktok:hover,
.socials-tiktok:hover i,
.socials-tiktok:hover .svg-inline--fa { color: var(--tiktok); }

.socials-discord:hover,
.socials-discord:hover i,
.socials-discord:hover .svg-inline--fa { color: var(--discord); }

/* Skip link styles (visible when focused) */
.skip-link {
	position: absolute;
	top: -40px;
	left: 8px;
	background: #000;
	color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	z-index: 2000;
}
.skip-link:focus {
	top: 8px;
}

.fa-sr-only, .fa-sr-only-focusable:not(:focus), .sr-only, .sr-only-focusable:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border-width: 0;
}

/* Minimal base rules for Font Awesome SVG-with-JS (since CSS file was removed) */
.svg-inline--fa {
	display: inline-block;
	height: 1em;
	width: 1em; /* ensures predictable spacing like font glyphs */
	overflow: visible;
	vertical-align: -0.125em; /* align with text baseline */
}
.svg-inline--fa path { fill: currentColor; }