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

:root {
	--brand-color: #ffcb30;
	--sky-gradient: linear-gradient(180deg, #4f86b7 0%, #6ba3c9 55%, #8db6d2 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;
}

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

.logo {
	height: 64px;
	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%;
}

h1 {
	font-weight: bold;
	font-size: 20px;
	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: 14px;
	color: var(--heading-color);
	margin-bottom: 2px;
}

.card.homepage-card h1 {
	font-size: 28px;
}

.card.homepage-card h2 {
	font-size: 20px;
}

/* Socials */
.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-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); }

.wordmark {
	height: 42px;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	transition: all 200ms ease;
	width: auto; /* width set by intrinsic attribute to reserve space */
}

@media (max-width: 1023px) {
	.wordmark {
		display: none;
	}
}

.homepage-hero-image {
	/* Keep natural aspect ratio and avoid flex stretching */
	display: block;
	height: auto;
	width: auto;

	max-height: clamp(160px, 33vw, 325px);
	max-width: min(50vw, 488px);
	object-fit: contain;
	flex-shrink: 0;
	align-self: center;
	filter: drop-shadow(0 6px 10px rgba(0,0,0,0.12));
}

.pixel-art {
	image-rendering: pixelated;            /* modern browsers */
	image-rendering: crisp-edges;          /* Safari/older fallback */
}

/* Fine-tune sizes by breakpoint */
@media (max-width: 639px) {
	.homepage-hero-image {
		/* Smaller on mobile with generous width but capped height */
		max-height: clamp(148px, 42vw, 165px);
		max-width: min(88vw, 380px);
	}
}

@media (min-width: 1024px) {
	.homepage-hero-image {
		/* Comfortable size on desktop but a bit smaller than before */
		max-height: clamp(200px, 28vw, 325px);
		max-width: min(42vw, 488px);
	}
}

/* Allow Font Awesome icons to be used as the hero "image" with matching sizing */
.homepage-hero-image.fa-solid,
.homepage-hero-image.fa-regular,
.homepage-hero-image.fa-brands,
.homepage-hero-image.svg-inline--fa {
	/* Make icon ~10% smaller than the previous setting */
	font-size: clamp(64px, 13.4vw, 131px);
	line-height: 1;
}

/* Ensure inline SVG icons sized via font-size render correctly as hero images */
svg.homepage-hero-image,
.homepage-hero-image.svg-inline--fa {
	height: 1em; /* scale with font-size */
	width: auto;
}

@media (max-width: 639px) {
	.homepage-hero-image.fa-solid,
	.homepage-hero-image.fa-regular,
	.homepage-hero-image.fa-brands,
	.homepage-hero-image.svg-inline--fa {
		font-size: clamp(59px, 17.0vw, 67px);
	}
}

@media (min-width: 1024px) {
	.homepage-hero-image.fa-solid,
	.homepage-hero-image.fa-regular,
	.homepage-hero-image.fa-brands,
	.homepage-hero-image.svg-inline--fa {
		font-size: clamp(81px, 11.3vw, 131px);
	}
}

.team-member img {
	border-radius: 50%;
	box-shadow: var(--shading);
	width: 96px;
	height: 96px;
}

.team-member div {
	margin-left: 22px;
}

button, input[type="submit"] {
	background: var(--brand-color);
	box-shadow: var(--shading);
	border-radius: 99999px;
	padding: 10px 20px;
	font-weight: bold;
	width: fit-content;
	transition: all 200ms ease;
	border: none;
	cursor: pointer;
}

button:hover, input[type="submit"]:hover {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.25);
}

/* Link styled as button for valid semantics */
.btn {
	background: var(--brand-color);
	box-shadow: var(--shading);
	border-radius: 99999px;
	padding: 10px 20px;
	font-weight: bold;
	width: fit-content;
	transition: all 200ms ease;
	color: #000; /* ensure contrast on brand background */
	text-decoration: none;
	display: inline-block;
}

.btn:hover {
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.25);
}

.team-member button {
	margin-top: 10px;
}

.team .team-member:not(:last-child) {
	margin-bottom: 20px;
}

/* Homepage team grid overrides (cards should be centered and evenly spaced) */
.team.grid {
	align-items: stretch; /* ensure equal-height rows */
}

.team.grid .team-member {
	margin-bottom: 0; /* grid gap handles spacing; avoid uneven margins */
}

.team.grid .team-member div {
	margin-left: 0; /* remove legacy horizontal offset to keep content centered */
}

/* Team Page */
.team-page-member img {
	border-radius: 50%;
	box-shadow: var(--shading);
	width: 96px;
	height: 96px;
}

.team-page-member div {
	margin-left: 24px;
}

.team-page-member h1 {
	color: var(--text-color);
}

/* Cloud Navigation */
.cloud-nav {
	/* Layout */
	padding: 8px 12px; /* base padding; Tailwind gap controls spacing between items */
	border-radius: 9999px; /* fully rounded pill */
	position: relative;
	isolation: isolate; /* contain pseudo-elements */

	/* Responsive width behavior */
	max-width: min(92vw, 720px);
	align-self: center;
}

.cloud-nav a {
	position: relative;
	font-weight: 600;
	color: #ededed;
	padding: 8px 14px;
	border-radius: 9999px;
	text-decoration: none;
	transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cloud-nav a:hover {
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
	color: #000;
}

.cloud-nav a[aria-current="page"] {
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 6px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
	color: #000;
}

.cloud-nav a:active {
	transform: translateY(1px);
}

.cloud-nav a:focus-visible {
	outline: none;
	background: rgba(255,255,255,0.95);
	box-shadow: 0 0 0 3px rgba(255, 195, 4, 0.45), 0 4px 10px rgba(0,0,0,0.10);
}

/* When many items wrap, keep good spacing and a balanced pill shape */
.cloud-nav {
	gap: 8px 10px;
}

@media (min-width: 640px) {
	.cloud-nav {
		padding: 10px 14px;
		gap: 10px 12px;
	}

	.cloud-nav a { padding: 8px 16px; }
}

@media (min-width: 1024px) {
	.cloud-nav {
		padding: 12px 16px;
		gap: 12px 14px;
	}

	.cloud-nav a { padding: 10px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.cloud-nav a {
		transition: none;
		transform: none;
	}
}

/* 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;
}

/* Mobile behavior: replace cloud nav with Menu button and show vertical panel when open */
.menu-button {
	appearance: none;
	background: rgba(255,255,255,0.85);
	color: #2b2b2b;
	font-weight: 700;
	border: none;
	border-radius: 9999px;
	padding: 10px 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
	cursor: pointer;
	transition: background-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
	position: relative;
	z-index: 1100; /* keep button above blurred overlay */

	/* Reserve stable width so icon/text swaps don't shift layout */
	min-width: 106px; /* fits [icon + "Menu"] */
}

.menu-button:hover { background: rgba(255,255,255,0.95); box-shadow: 0 8px 18px rgba(0,0,0,0.14); }
.menu-button:active { transform: translateY(1px); }
.menu-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,195,4,0.45), 0 6px 16px rgba(0,0,0,0.12); }

/* Default: show cloud nav, hide button */
.menu-button { display: none; }

/* sm breakpoint handled by CSS only; below sm treat as mobile */
@media (max-width: 639px) {
	.menu-button { display: inline-flex; }
	/* Anchor around the button and menu so we can position with CSS only */
	.menu-anchor { position: relative; display: inline-block; }
	.cloud-nav {
		/* Position directly under the button, aligned to its right edge */
		position: absolute;
		right: 0;
		top: calc(100% + 8px); /* 8px vertical gap below button */
		z-index: 1000;

		/* Vertical list look */
		flex-direction: column;
		align-items: stretch;
		max-width: 86vw;
		width: max-content;
		gap: 6px;
		padding: 10px 10px;
	border-radius: 0.75rem; /* less rounded on mobile */

		/* Hidden by default, but animatable */
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-6px) scale(0.98);
		transition: opacity 160ms ease, transform 180ms ease, visibility 0s linear 180ms;
	}
	/* When menu is open, show and re-shape as vertical list */
	.cloud-nav[data-open="true"] {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0) scale(1);
		transition: opacity 160ms ease, transform 180ms ease, visibility 0s linear 0s;
	}
	.cloud-nav a {
		text-align: right;
		padding: 10px 14px;
	}
	/* Align puffs to panel corners on mobile for consistent placement */
	.cloud-nav::before {
		top: -14px;
		left: 12px;
		width: 40px;
		height: 40px;
	}
	.cloud-nav::after  {
		bottom: -16px;
		right: 12px;
		width: 46px;
		height: 46px;
	}
	.cloud-nav > ._cluster { z-index: 0; }
}

/* Open/Close label and icon toggling on the button */
.menu-button .icon-open, .menu-button .label-open { display: none; }
.menu-button[aria-expanded="true"] .icon-open, .menu-button[aria-expanded="true"] .label-open { display: inline; }
.menu-button[aria-expanded="true"] .icon-closed, .menu-button[aria-expanded="true"] .label-closed { display: none; }

/* Fix icon/text width jank inside the menu button */
/* Only apply inline-block/width to the icon that should be visible in each state */
.menu-button .icon-closed,
.menu-button[aria-expanded="true"] .icon-open { display: inline-block; width: 18px; text-align: center; }
/* Only make the currently visible label inline-block to preserve width
   without overriding the display:none on the hidden one. */
.menu-button .label-closed { display: inline-block; min-width: 42px; }
.menu-button[aria-expanded="true"] .label-open { display: inline-block; min-width: 42px; }

/* Fullscreen overlay with gentle backdrop blur */
.menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.02);
	-webkit-backdrop-filter: blur(2.5px);
	backdrop-filter: blur(2.5px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 150ms ease, visibility 0s linear 150ms;
	z-index: 900; /* below the cloud-nav which is 1000 on mobile */
}

.menu-overlay[data-open="true"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 150ms ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
	.menu-overlay, .cloud-nav {
		transition: none !important;
		transform: none !important;
	}
}

/* Ensure clusters render above overlay due to stacking contexts */
.cloud-nav { z-index: 1001; }

.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; }

/* --- Minimal CLS helpers --- */
/* Aspect-ratio utilities (used only where applied) */
.ar-1-1 { aspect-ratio: 1 / 1; }
.ar-9-16 { aspect-ratio: 9 / 16; }

/* Conservative min-height reserves for the first two homepage cards.
	 These values mirror current visual sizes to avoid visible changes
	 but give the browser a stable height floor before assets decode. */
/* Removed legacy min-heights as content has changed */


/* Specific minimal reserve for the first hero image (Crimson) to prevent tiny shift
   without inflating the whole card */
/* Job Application Specific CSS */
.position {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--shading);
    border-radius: 20px;
    padding: 24px;
    transition: all 200ms ease;
    cursor: pointer;
}

.position:hover, .position.active {
    background: rgba(255, 195, 4, 0.75);
}

.pos-info {
    display: flex;
    flex-direction: column;
}

.position-screen {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--shading);
    border-radius: 20px;
    padding: 24px;
}

.position-screen h1:not(:first-child), .position-screen h2:not(:first-child){
    margin-top: 1rem;
}

.position-screen ul {
    list-style-type: disc;
    list-style-position: inside;
}

.card hr {
    border-color: #d8d8d8;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

form .card input[type="text"], form .card input[type="email"], form .card textarea {
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    resize: none;
}