/*############################################################################*/
/*############################################################################*/
/* PAGE CONTENT AREA */

/*
	This is the "middle" of the IEEE Access part of the web page.
	It contains the actual <main> and the (sometimes) page-specific sidebar.

	Pages with a sidebar have	class="with_sidebar",
	those without have			class="no_sidebar"
*/

/*############################################################################*/
/*############################################################################*/

main
	{
	font-size: 16px;
	line-height: 1.6;
	}

/*
	H1	Page title
	H2	Nav header
	H3	seems to be the first level of header used in body copy
	H4	used rarely
*/

main h1,
main h2,
main h3,
main h4
	{
	color: #444;
	line-height: 1.2em;
	}

main h1		/* the page title */
	{
	font-size: 32px;
	margin: 0 0 32px 0;
	}

/* unused in regular page copy */
main h2
	{
	font-size: 24px;
	margin: 24px 0 12px 0;
	}

main h3
	{
	font-size: 21px;
	margin-bottom: 8px;
	margin: 21px 0 10px 0;
	}

main h4
	{
	font-size: 18px;
	margin: 21px 0 10px 0;
	}

main ul,
main ol
	{
	padding-left: 1.2em;
	}

main p,
main ul,
main ol
	{
	margin-bottom: 1em;
	}

main img
	{
	border: 1px solid #eee;
	}




/*----------------------------------------------------------------------------*/
/* OUTER LAYOUT */
/*----------------------------------------------------------------------------*/

#pagecontent
	{
	Xz-index: 1;		/* stay under navbar dropdowns */
	position: relative;
	min-height: 400px;
	width: 100%;
	padding-bottom: 0px;
	}


/* TODO: move this when we have template-specific css files */
/* TODO: move this when we have template-specific css files */
/* TODO: move this when we have template-specific css files */
/* TODO: move this when we have template-specific css files */

.home #pagecontent
	{
	margin-top: 0px;	/* Home page slideshow is flush with Bottom of navbar */
	}




@media (min-width: 301px) and (max-width: 400px)
	{ #pagecontent { margin-top: 20px; } }

/*----------------------------------------------------------------------------*/
@media (min-width: 401px) and (max-width: 800px)
	{ #pagecontent { margin-top: 20px; } }

/*----------------------------------------------------------------------------*/
@media (min-width: 801px) and (max-width: 1920px)
	{ #pagecontent { margin-top: 40px; } }

/*----------------------------------------------------------------------------*/
@media (min-width: 1921px)
	{ #pagecontent { margin-top: 40px; } }





/*----------------------------------------------------------------------------*/
/* INNER LAYOUT */
/*----------------------------------------------------------------------------*/

#sidebar
	{
	margin-top: 67px;
	}


#pagecontent.with_sidebar
	{
	display: grid;
	}

main		{ grid-area: ga-main; }
#sidebar	{ grid-area: ga-sidebar; }


/*----------------------------------------------------------------------------*/
@media (min-width: 301px) and (max-width: 1000px)
	{

	#pagecontent.with_sidebar
		{

		grid-template-columns:
			/*
			Why was 100% commented out?
			*/
			100%

			/*
			1fr
			- this makes entire <main> content, including breadcrumb and title,
			jump if page content changes width (eg toggling a box)
			*/

			;

		grid-template-rows: auto 20px auto ;

		grid-template-areas:
			"ga-main"
			"."
			"ga-sidebar"
			;

		}


	main
		{
		width: 100%;
		}

	#sidebar
		{
		margin-top: 20px;
		}





	/*
	CONSIDER ADJUSTING DEPENDING ON CONTENT TYPE
	*/

	main,
	#sidebar
		{
		Xmax-width: 800px;
		margin-left: auto;
		margin-right: auto;
		}

	}



/*----------------------------------------------------------------------------*/
@media (min-width: 1001px) and (max-width: 1440px)
	{

	#pagecontent.with_sidebar
		{


		grid-template-columns:
			1fr
			calc( (100vw - 1000px) *   50 / 440 +  50px)
			calc( (100vw - 1000px) *  100 / 440 + 300px)
			;




		grid-template-rows: auto ;

		grid-template-areas:
			"ga-main	.	ga-sidebar"
			;

		}

	}



/*----------------------------------------------------------------------------*/
@media (min-width: 1441px)
	{

	#pagecontent.with_sidebar
		{

		grid-template-columns:
			/* calc(100% - 500px) */
			1fr
			100px
			400px
			;

		grid-template-rows: auto ;

		grid-template-areas:
			"ga-main	.	ga-sidebar"
			;

		}



	}




/*----------------------------------------------------------------------------*/
/* NO SIDEBAR */
/* (originally "HOME DOESN'T HAVE THIS LAYOUT") */
/*----------------------------------------------------------------------------*/

/* .home #pagecontent */
#pagecontent.no_sidebar
	{
	display: block;
	}



/*============================================================================*/
/* MAIN CONTENT */
/* #pagecontent > main */
/*============================================================================*/

main
	{
	display: block;
	Xborder: 2px solid pink;
	}

main h1 + a.button
	{
	margin-top: -2px;	/* if first item in page, line up with sidebar h2 */
	}

/*============================================================================*/
/* SIDEBARS */
/* #pagecontent > #sidebar */
/*============================================================================*/

#sidebar
	{
	display: block;
	border: 2px solid purple;
	border: 1px solid #777;
	Xborder: 2px solid purple;
	border-radius: 10px;
	background: #eee;
	background: #f8f8f8;
	padding: 17px 20px 20px 20px;	/* align first sidebar title w/ first H2 */
	height: max-content;
	font-size: 14px;
	line-height: 1.4;
	color: #626262;		/* same as in WFs */
	}

#sidebar > ul
	{
	padding: none;
	list-style-type: none;
	Xborder: 1px solid red;
	}

#sidebar li.widget
	{
	list-style-type: none;
	Xborder: 1px solid blue;
	padding-bottom: 20px;
	}

#sidebar li.widget > h2	/* ignore WP's headers, make our own. */
	{
	display: none;
	}

#sidebar li.widget h3
	{
	font-size: 24px;
	margin: 20px 0 10px 0;
	}

#sidebar li.widget h3:first-child
	{
	margin-top: 8px;
	}

#sidebar li.widget ul
	{
	list-style-type: disc;
	padding-left: 13px;
	}

#sidebar li.widget ul li
	{
	margin-bottom: 12px;
	}

/*----------------------------------------------------------------------------*/
/* TODO: move this when we have template-specific css files */
/* TODO: move this when we have template-specific css files */
/* TODO: move this when we have template-specific css files */
/* TODO: move this when we have template-specific css files */

/* Featured Articles listing page does not need the widget in the sidebar */
/*----------------------------------------------------------------------------*/

.page-template-T-featured #featured_articles_sidebar
	{
	height: 0;
	margin-bottom: -20px;	/* counter the padding-bottom for the li.widget */
							/* (I'm surprised this actually worked.) */
	}

.page-template-T-featured #featured_articles_sidebar > *
	{
	display: none;
	}