:root
{
	--primary_orange: #ff6600;
	--off_orange: #ff9900;
	--dark_bg: #141414b9;
	--light_text: #f8f8f8;
	--gray_text: #ccc;
	--title-starting-letter-spacing: .2em;
	--title-ending-letter-spacing: .55em;
	--welcome-starting-letter-spacing: .1em;
	--welcome-ending-letter-spacing: .3em;
}

.site_body
{
	background: transparent;
	color: var(--light_text);
	font-family: barlow;
	margin: 0;
	position: relative; /* create stacking context for the background pseudo-element */
	z-index: 0;
	min-height: 100vh;
}

@keyframes move_colors
{
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

/* animated page background behind all content */
.site_body::before
{
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(90deg, #eb7100 0%, #ce4b00 50%, #da6900 100%);
	background-size: 200% 100%;
	animation: move_colors 12s ease-in-out infinite alternate;
}

.site_logo
{
	max-height: 48px;
}

/* Header Layout */
.main_header
{
	position: sticky;
	top: 0;
	border-bottom: 1px solid #8181811c; /* Subtle separation when scrolling */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 40px;
	/* background: linear-gradient(135deg, #c2c2c2e0, #5e5e5e36); */
	background-color: rgba(128,66,0,0.6);
	backdrop-filter: blur(5px);
	z-index: 50;
}

.nav_link
{
	color: var(--gray_text);
	opacity: 75%;
	text-decoration: none;
	margin: 0 35px;
	font-weight: bold;
	font-size: 1.4rem;
	transition: color, opacity 0.5s ease;
}

.nav_link:hover
{
	color: var(--off_orange);
	opacity: 95%;
}

.nav_link.active
{
	opacity: 100%;
	color: var(--primary_orange);
}

/* Hero Section Split */
.hero_section
{
	justify-self: stretch;
	justify-content: center;
	/* grid-template-columns: 1fr 1fr; */
	padding: 100px 50px;
	/* background: linear-gradient(25deg, #80420054 0%, #ff6601 100%); */
}

.hero_top
{
	justify-self: center;
}

.welcome_text
{
	display: flex;
	justify-self: center;
	font-size: 4rem;
	margin: 0;
	letter-spacing: .1em;
	animation: welcome_expand ease 1s forwards;
}

@keyframes welcome_expand
{
	0%
	{
		letter-spacing: var(--welcome-starting-letter-spacing);
	}

	100%
	{
		letter-spacing: var(--welcome-ending-letter-spacing);
	}
}

.devraw_text
{
	font-size: 12rem;
	align-self: center;
	letter-spacing: var(--title-starting-letter-spacing);
	font-weight: 800;
	margin: 0;
	/* spacing reveal animation + moving gradient for text fill */
	animation: devraw_expand 1.5s ease .4s forwards,
		move_colors 12s ease-in-out alternate infinite;
	/* gradient used by both page background and text; larger size for panning */
	background: linear-gradient(135deg, #ff8615 0%, #f58608 40%, #ff6016 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: rgba(230, 170, 120, 0.2);
	color: transparent;
}

@keyframes devraw_expand
{
	0%
	{
		letter-spacing: var(--title-starting-letter-spacing);
	}

	100%
	{
		letter-spacing: var(--title-ending-letter-spacing);
	}
}

.hero_bottom
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.hero_desc
{
	font-size: 3rem;
}

.hero_sub_desc
{
	font-size: 1.5rem;
}

/* Discord Card */
.discord_banner
{
	position: relative;
	height: 20rem;
	background: url('static/discord-bg.png') center/cover;
	background-color: #5e5e5e36;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 95%;
}

.discord_card
{
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(3px);
	border: 3px solid rgba(70, 70, 70, 0.5);
	border-radius: .7rem;
	padding: 10px 20px 20px;
	text-align: center;
	opacity: 100%;
}

.cta_title
{
	padding: none;
}

.discord_logo
{
	max-width: 7rem;
	opacity: 70%;
	transition: max-width .3s ease, opacity .5s ease;
}

.discord_logo:hover
{
	max-width: 8rem;
	opacity: 100%;
}

.join_btn
{
	border: 1px solid var(--light_text);
	color: var(--light_text);
	padding: 10px 30px;
	border-radius: .7rem;
	text-decoration: none;
}

/* --- Refined Map of the Week --- */
.featured_section
{
	background-color: rgba(0, 0, 0, 0.3);
	padding: 60px;
	border-top: 2px solid var(--primary_orange);
}

.featured_wrapper
{
	display: flex;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
}

.featured_image_container
{
	position: relative;
	flex: 1;
}

.featured_img
{
	width: 100%;
	border-radius: 4px;
	border: 1px solid #333;
}

/* Reusing the badge from previous step, positioned absolutely */
.badge_favorite
{
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 2;
	background: var(--primary_orange);
	color: white;
	padding: 15px;
	font-weight: bold;
	/* transform: rotate(15deg); */
	/* Simple starburst approximation */
	/* clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); */
}

.featured_info
{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.featured_title
{
	font-size: 3rem;
	color: var(--primary_orange);
	margin: 0 0 5px 0;
}

.featured_author
{
	color: var(--primary_orange);
	font-size: 1.5rem;
	margin: 0;
	text-transform: uppercase;
}

.featured_stats
{
	color: #ff4444;
	/* Slight red tint as per screenshot */
	font-weight: bold;
	margin: 5px 0 20px 0;
}

.workshop_btn
{
	display: inline-block;
	background-color: var(--primary_orange);
	color: white;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	width: fit-content;
	margin-top: 20px;
}

/* --- Action Cards (Download/Upload/Learn) --- */
.action_section
{
	background: url('static/bg_dark_rubble.jpg') center/cover;
	/* Dark background */
	padding: 80px 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	/* border-top: 50px solid var(--primary_orange); */
	/* The thick orange bar */
	display: flex;
	justify-content: center;
	border-top: 2px solid var(--primary_orange);
}

.action_card
{
	background: rgba(20, 20, 20, 0.7);
	padding: 40px 20px;
	text-align: center;
	border-radius: .7rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75);
	width: 30rem;
	min-height: 15rem;
	backdrop-filter: blur(5px);
}

.action_title
{
	color: white;
	font-size: 2rem;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 3px solid var(--primary_orange);
	display: inline-block;
}

.action_desc
{
	color: #ccc;
	line-height: 1.6;
	font-size: 2.5ex;
}

/* --- News Section (Wireframe BG) --- */
.news_section
{
	/* Simulate the wireframe look with a dark BG if you lack the image */
	background-color: #1a1a1a;
	padding: 80px;
	display: flex;
	justify-content: center;
	gap: 40px;
	border-top: 2px solid var(--primary_orange);
}

.news_card
{
	width: 300px;
	border: 1px solid var(--primary_orange);
	background: rgba(0, 0, 0, 0.6);
	/* See-through */
	padding: 30px;
	position: relative;
	display: flex;
	flex-direction: column;
}

.news_date
{
	font-size: 0.8rem;
	color: #888;
	margin-bottom: 10px;
	display: block;
	text-align: center;
}

.news_title
{
	color: var(--primary_orange);
	text-align: center;
	font-size: 1.2rem;
	margin: 10px 0;
}

.news_text
{
	color: #bbb;
	font-size: 0.9rem;
	text-align: center;
	line-height: 1.5;
	flex-grow: 1;
}

.news_footer
{
	border-top: 1px solid #333;
	margin-top: 20px;
	padding-top: 10px;
	font-size: 0.8rem;
	color: #666;
}

/* --- Team Section (Hazard Stripes) --- */
.team_section
{
	/* The hazard stripe magic */
	background: repeating-linear-gradient(-45deg,
			var(--primary_orange),
			var(--primary_orange) 60px,
			#222 60px,
			#222 120px);
	padding: 100px 0;
	display: flex;
	justify-content: center;
}

.team_container
{
	background: rgba(20, 20, 20, 0.9);
	/* Dark box floating on stripes */
	padding: 40px 80px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(5px);
}

.team_header
{
	font-size: 2.5rem;
	color: white;
	margin-bottom: 40px;
	text-transform: uppercase;
}

.team_grid
{
	display: flex;
	gap: 40px;
	justify-content: center;
}

.team_member
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.team_avatar
{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 4px solid white;
	margin-bottom: 10px;
	background-color: #555;
	/* Fallback */
}

.team_name
{
	font-weight: bold;
	font-size: 1.1rem;
	color: var(--primary_orange);
}


.no_select
{
	-webkit-user-select: none;
	/* Safari */
	-moz-user-select: none;
	/* Old Firefox */
	-ms-user-select: none;
	/* IE10+ */
	user-select: none;
	-webkit-touch-callout: none;
	/* iOS */
	cursor: default;
}

@media (prefers-reduced-motion: reduce)
{
	.site_body::before,
	.devraw_text
	{
		animation: none !important;
		background-position: 50% 50% !important;
	}
}

footer
{
	text-align: center;
	padding: 1.5rem 0;
	background: #222;
	color: #fff;
	font-size: 0.9rem;
	position: static;
	left: 0;
	right: 0;
}