:root {
	/* === Core Brand Colors === */
	--color-primary: #78B3CE;
	--color-primary-light: #C9E6F0;
	--color-accent: #F96E2A;
	--color-black: #000000;
	--color-white: #ffffff;
	--color-nav-footer: #f2f0ef;
	--color-background: var(--color-white);

	/* === Text Colors === */
		/* Dark gray for readability */
	--color-text-main: #222222;
		/* Slightly muted for secondary info */
	--color-text-subtle: #555555;
		/* Blue-tinted subtle text */
	--color-text-muted: #78B3CE;
		/* Strong, dark for headers */
	--color-text-heading: #111111;

	/* === Border and Shadows === */
	--color-border-soft: rgba(0, 0, 0, 0.1);
	--color-border-glass: rgba(255, 255, 255, 0.2);
	--shadow-text: 0 1px 2px rgba(0, 0, 0, 0.15);
	--shadow-box: 0 4px 20px rgba(0, 0, 0, 0.1);
	--shadow-glow: 0 0 12px rgba(249, 110, 42, 0.3); /* Accent glow */

	/* === Typography === */
	--font-base: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
	--font-size-base: 1rem;
	--font-size-large: 1.25rem;
	--font-size-heading: 2.5rem;

	/* === Spacing === */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2.5rem;
	--spacing-xl: 4rem;

	/* === Border Radius === */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 16px;
}



/* General Styles */
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body, html {
	font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    background-color: var(--color-background);
    color: var(--text);
}

header, footer {
	text-align: center;
	font-family: 'SF Pro Text', sans-serif;
}

/* Header Styles */
.header-container {
	background-color: transparent;
	border-bottom: 1px solid #D3D3D3;
}

nav {
	background-color: var(--color-nav-footer);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 20px;
}

nav ul {
	display: flex;
	list-style: none;
}

nav li {
	margin-right: 20px;
}

nav a {
	font-size: 12px;
	text-decoration: none;
	color: var(--text);
	padding: 5px;
}

nav a:hover {
	color: var(--secondary);
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-right: auto;
}

.site-brand img {
	width: 60px;
	height: auto;
}

.site-brand-text {
	font-size: 12px;
	color: var(--text);
	font-weight: bold;
	text-decoration: none;
}

/* Main Wrapper */
.main-wrapper {
	margin-bottom: 300px;
}

/* Footer Styles */
footer {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: var(--color-nav-footer);
}

.footer-container {
	background-color: transparent;
}

/* Social Media Container */

		/* Not implemented yet */

/* Studio Info Container */

.studio-info-container {
	margin: 0 auto;
	max-width: 80%;
	text-align: center;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
	display: none; /* !!! Hidding Container !!! */
}

.studio-info-header h3 {
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 11px;
}

.studio-info-links {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	list-style: none;
	gap: 0; /* remove extra gap here */
}

.studio-info-links li {
	display: flex;
	align-items: center;
}

.studio-info-links li:not(:last-child)::after {
	content: "|";
	margin: 0 10px; /* space on both sides of the bar */
	color: var(--text);
	font-weight: normal;
}

.studio-info-links a {
	color: var(--text);
	text-decoration: none;
}

.studio-info-links a:hover {
	color: var(--secondary);
}

/* Footer-Legal-Copyright */
.footer-legal-copyright {
	margin-top: 5px;
	margin-bottom: 5px;
	display: flex;
	justify-content: center;
	text-align: left;
}

.footer-copyright {
	margin-right: 90px;
	font-size: 10px;
}

.footer-legal {
	font-size: 10px;
}

.footer-legal li {
	list-style: none;
}

.footer-legal a {
	color: var(--text);
	text-decoration: none;
}

.footer-legal a:hover {
	color: var(--secondary);
}

.separator {
	margin: 0 10px;
	color: var(--text);
}

/* Separator between sections */
/* Add a line separator between header-container(navigation) and main plus main-wrapper and footer */
.header-container::after, .main-wrapper::after {
	content: "";
	display: block;
	height: 1px;
	background-color: #D3D3D3;
	margin: 0px auto;
	max-width: 100%;
	display: none; /* !!! Hidding Container !!! */
}

/* Add a line separator between .studio-info-container and footer-legal-copyright */
.studio-info-container-wrapper::after {
	content: "";
	display: block;
	height: 1px;
	background-color: #D3D3D3;
	margin: 0px auto;
	width: 20%;
	display: none; /* !!! Hidding Container !!! */
}