@charset "UTF-8";

/* ========================================
   PAGE-STRUCTURE.CSS - Grid Layout Only
   Essential structural properties only
   ======================================== */

:root {
	--grid-gap: 2px;
	--max-page-width: 1400px;
}

/* ========================================
   BODY & PAGE LAYOUT
   ======================================== */

body {
	min-height: 100vh;
	padding: 1em;
}

#page {
	max-width: 1300px;
	margin: 0 auto;
	padding: 1em;
}

/* ================================================================
   MOBILE FIRST - Base Layout (< 768px)
   ================================================================ */

#page {
	max-width: var(--max-page-width);
	margin: 0 auto;
}

/* Header Elements */
#logo_cell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

#logo_cell > a {
	display: block;
	flex-shrink: 1;
	width: 100%;
	max-width: 200px;
	height: 60px;
}

#site_logo {
	height: 100%;
	width: 100%;
	display: block;
}

#mobile_menu_button {
	display: block;
	flex-shrink: 0;
}

#slogan_cell {
	display: block;
}

#join_login_cell {
	display: none;  /* Hidden on mobile, shown on larger screens */
}

/* Main Content - Mobile */
#main_section {
	display: block;
}

#pre_content {
	display: none;  /* Hidden on mobile by default */
}

/* Mobile navigation styling */
#pre_content.show-mobile-nav {
	display: block;
	max-width: 90%;
	margin: 1em auto;
}

/* Footer - Mobile */
#footer_divider {
	display: none;  /* Hidden on mobile */
}

/* Social Icons */
#social_icons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
}

/* ================================================================
   TABLET - Medium Screens (768px - 1023px)
   ================================================================ */

@media screen and (min-width: 768px) {

	#mobile_menu_button {
		display: none;
	}

	#page {
		display: grid;
		gap: var(--grid-gap);
		grid-template-columns: 1fr;
		grid-template-areas: 
			'header_section'
			'main_section'
			'footer_section';
	}
	
	.grid_cell {
		overflow: hidden;
		max-width: 100%;
	}
	
	/* ================== Header - 2 Column Layout ====================== */
	
	#header_section {
		grid-area: header_section;
		display: grid;
		gap: var(--grid-gap);
		grid-template-columns: minmax(200px, 1fr) minmax(250px, 2fr);
		grid-template-areas: 'logo_cell slogan_cell';
		padding: 0;
	}
	
	#logo_cell {
		grid-area: logo_cell;
		justify-content: flex-start;
	}
	
	#logo_cell > a {
		height: 75px;
		max-width: 220px;
	}
	
	#site_logo {
		height: 100%;
		width: 100%;
	}
	
	#slogan_cell {
		grid-area: slogan_cell;
	}
	
	#join_login_cell {
		grid-area: join_login_cell;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 1em;
	}

	/* ================== Main Content - 1 Column (content only) ====================== */

	#main_section {
		grid-area: main_section;
		display: grid;
		gap: var(--grid-gap);
		grid-template-columns: 1fr;
		grid-template-areas: 
			'featured_content'
			'additional_content';
		padding: 0;
	}

	#pre_content {
		display: none;  /* Hide left sidebar on tablets */
	}
	
	/* Reset mobile nav styling at tablet size and up */
	#pre_content.show-mobile-nav {
		display: none;
		max-width: none;
		margin: 0;
	}
	
	#featured_content {
		grid-area: featured_content;
	}
	
	#additional_content {
		grid-area: additional_content;
		display: block;  /* Show below main content on tablets */
	}
	
	/* ================== Footer - 3 Column Layout ====================== */
	
	#footer_section {
		grid-area: footer_section;
		display: grid;
		gap: var(--grid-gap);
		grid-template-columns: minmax(150px, 1fr) minmax(200px, 2fr) minmax(150px, 1fr);
		grid-template-areas: 
			'footer_divider		footer_divider		footer_divider'
			'bottom_nav_cell	bottom_slogan		social_cell';
		padding: 0;
	}
	
	#footer_divider {
		grid-area: footer_divider;
	}
	
	#bottom_nav_cell {
		grid-area: bottom_nav_cell;
	}
	
	#bottom_slogan {
		grid-area: bottom_slogan;
	}
	
	#social_cell {
		grid-area: social_cell;
	}
	
	#social_icons {
		justify-content: flex-end;
	}

}

/* ================================================================
   DESKTOP - Large Screens (1024px+)
   ================================================================ */

@media screen and (min-width: 1024px) {

	#mobile_menu_button {
		display: none;
	}

	/* Logo full size on desktop */
	#logo_cell {
		justify-content: flex-start;
	}

	#logo_cell > a {
		height: 85px;
		max-width: 250px;
	}

	#site_logo {
		height: 100%;
		width: 100%;
	}

	/* ================== Main Page Grid ====================== */
	
	#page {	
		display: grid;
		gap: var(--grid-gap);
		grid-template-columns: 1fr;
		grid-template-areas: 
			'header_section'
			'main_section'
			'footer_section';
	}
	
	.grid_cell {
		overflow: hidden;
		max-width: 100%;
	}
	
	/* ================== Header - 3 Column Layout ====================== */
	
	#header_section {
		grid-area: header_section;
		display: grid;
		gap: var(--grid-gap);
		grid-template-columns: minmax(180px, 3fr) minmax(300px, 9fr) minmax(210px, 4fr);
		grid-template-areas: 'logo_cell slogan_cell join_login_cell';
		padding: 0;
	}
	
	#logo_cell {
		grid-area: logo_cell;
	}
	
	#slogan_cell {
		grid-area: slogan_cell;
	}
	
	#join_login_cell {
		grid-area: join_login_cell;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 1em;
	}

	/* ================== Main Content - 3 Column Layout (Default) ====================== */

	#main_section {
		grid-area: main_section;
		display: grid;
		gap: var(--grid-gap);
		grid-template-columns: minmax(180px, 3fr) minmax(300px, 9fr) minmax(210px, 4fr);
		grid-template-areas: 'pre_content featured_content additional_content';
		padding: 0;
	}

	#pre_content {
		grid-area: pre_content;
		display: block;
		position: sticky;
		top: var(--space-md);
		align-self: start;
		max-height: calc(100vh - 2 * var(--space-md));
		overflow-y: auto;
	}
	
	/* Reset any mobile nav styling at desktop size */
	#pre_content.show-mobile-nav {
		max-width: none;
		margin: 0;
	}
	
	#featured_content {
		grid-area: featured_content;
	}
	
	#additional_content {
		grid-area: additional_content;
		display: block;
	}
	
	/* ================== Layout Modifiers ====================== */
	
	/* 2 Columns: Main + Right Sidebar */
	.layout-main-right #main_section {
		grid-template-columns: minmax(300px, 2fr) minmax(210px, 1fr);
		grid-template-areas: 'featured_content additional_content';
	}
	
	.layout-main-right #pre_content {
		display: none;
	}
	
	/* 2 Columns: Left Sidebar + Main */
	.layout-main-left #main_section {
		grid-template-columns: minmax(180px, 1fr) minmax(300px, 2fr);
		grid-template-areas: 'pre_content featured_content';
	}
	
	.layout-main-left #additional_content {
		display: none;
	}
	
	/* 1 Column: Main Only (Full Width) */
	.layout-main-only #main_section {
		grid-template-columns: 1fr;
		grid-template-areas: 'featured_content';
	}
	
	.layout-main-only #pre_content,
	.layout-main-only #additional_content {
		display: none;
	}
	
	/* 2 Columns: Main spans 2, Right Sidebar */
	.layout-wide-main #main_section {
		grid-template-columns: minmax(300px, 11fr) minmax(210px, 1fr);
		grid-template-areas: 'featured_content additional_content';
	}
	
	.layout-wide-main #pre_content {
		display: none;
	}
	
	/* ================== Footer - 3 Column Layout ====================== */
	
	#footer_section {
		grid-area: footer_section;
		display: grid;
		gap: var(--grid-gap);
		grid-template-columns: minmax(180px, 3fr) minmax(300px, 9fr) minmax(210px, 4fr);
		grid-template-areas: 
			'footer_divider		footer_divider		footer_divider'
			'bottom_nav_cell	bottom_slogan		social_cell';
		padding: 0;
	}
	
	#footer_divider {
		grid-area: footer_divider;
	}
	
	#bottom_nav_cell {
		grid-area: bottom_nav_cell;
	}
	
	#bottom_slogan {
		grid-area: bottom_slogan;
	}
	
	#social_cell {
		grid-area: social_cell;
	}

	#social_icons {
		justify-content: flex-end;
	}

}