/** ===========================================================================
 * global
 * ============================================================================
 * Surviving The Gap: Theme
 *
 * 1. header
 * 2. main
 * 3. footer
 */

/** ---------------------------------------------------------------------------
 * 1. header
 * --------------------------------------------------------------------------*/

#skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	}

#skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	}

	#header-inner {
		height: 100%;
		margin-top: var(--wp--preset--spacing--60);
		margin-bottom: var(--wp--preset--spacing--60);

		/* required only for 'burger' menu positioning */
		position: relative;
		}

a#header_site-title {
	background-image: url("../images/logo_header.png");
	background-position: center left;
	background-repeat: no-repeat;
	background-size: var(--wp--preset--spacing--100);
	box-sizing: border-box;
	display: inline-block;
	font-family: var(--wp--preset--font-family--navigation-lato) !important;
	font-size: var(--wp--preset--font-size--fs-large);
	font-weight: var(--wp--custom--fw-bold);
	line-height: var(--wp--preset--spacing--100);
	min-height:  var(--wp--preset--spacing--100);
	padding-left: var(--wp--preset--spacing--110);
	}

	a#header_site-title:link, a#header_site-title:visited {
		color: var(--wp--preset--color--purple-black-off);
		text-decoration: none;
		}

	a#header_site-title:hover {
		color: var(--wp--preset--color--brand-purple);
		text-decoration: underline;
		}

	.header-page #hero-content { margin-top: var(--wp--preset--spacing--70); }

	.header-page .row-reverse .flex-row-child { margin-left: var(--wp--preset--spacing--50); }


/** header menu */

#header-menu-inner .menu ul {
	font-weight: var(--wp--custom--fw-bold);
	list-style: none;
	margin: 0;
	}

	#header-menu-inner .menu ul a:link, #header-menu-inner .menu ul a:visited {
		color: var(--wp--preset--color--purple-black-off);
		text-decoration: none;
		}

	#header-menu-inner .menu ul a:hover {
		color: var(--wp--preset--color--brand-purple);
		text-decoration: underline;
		}

@media screen and (max-width: 1000px) {

	/* the main navigation breakpoint is 1000 and 1001 px */

	#header-menu-inner .menu ul { font-size: var(--wp--preset--font-size--fs-large); }

	}

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

	#header-menu-inner .menu ul {
		display: flex;
		font-size: var(--wp--preset--font-size--fs-normal);
		justify-content: flex-end;
		list-style: none;
		padding-left: 0;
		}

		#header-menu-inner .menu ul li {
			display: flex;
			align-items: center;
			margin-left: var(--wp--preset--spacing--50);
			}
	
	}


/** ---------------------------------------------------------------------------
 * 2. main
 * ----------------------------------------------------------------------------
 * main#content-container-main: main wrapper
 *	article.container-content-outer: article and anything equivelent (hence a class)
 *
 *		.container-breakout-parent: children of <article> that breakout to full screen width
 *			.container-breakout-child: creates margin equivelent to that of main#content-container-main. typically paired with .flex-row-parent
 *				.container-content-outer . typically paired with .flex-row-child
 *
 *
 * .container-padding
 * - mimicks the effect of .content outer but using PADDING in place of MARGIN
 * - typically paired with .container-padding
 * - not intended for use with .container-content-outer
 */

.container-breakout-parent {

	/* a container that breaks out to fill the viewport width */

	left: 50%;
	margin-left: -50vw;

	/* needed for correct horizontal alignment ! */
	position: relative;

	/* ensure that the container extends to contain the margin-bottom of child elements */
	overflow: visible;

	width: 100vw;
	}

	.container-breakout-child { max-width: 100%;}

		.container-content-outer {

			/* main content column
			*
			* - this is where the page width is set
			* - the header block does not use this as it uses .container-padding
			* - the footer blocks do not use this as it uses .container-breakout-parent .container-padding
			*/

			margin: 0 auto;
			max-width: 1400px;
			text-align: left;
			}


	/* .content-inset { */

		/** 
		* inset first child of .container-breakout-parent by allocating it left and right margins
		* pair with: .flex-row-parent
		*/

	/* } */

@media screen and (max-width: 940px) {

	#content-container-main, .container-breakout-child, .content-inset {
		margin-right: var(--wp--custom--spacing-edge-handheld);
		margin-left: var(--wp--custom--spacing-edge-handheld);
		}

	.container-padding {
		padding-right: var(--wp--custom--spacing-edge-handheld);
		padding-left: var(--wp--custom--spacing-edge-handheld);
		}

	}

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

	#content-container-main, .container-breakout-child, .content-inset {
		margin-right: var(--wp--custom--spacing-edge-desktop);
		margin-left: var(--wp--custom--spacing-edge-desktop);
		}
 
	.container-padding {
		padding-right: var(--wp--custom--spacing-edge-desktop);
		padding-left: var(--wp--custom--spacing-edge-desktop);
		}

	}

/** other */

figure {

	/* a reset to remove margins which seemingly have no source */

	margin: 0;
	}


/** ---------------------------------------------------------------------------
 * 3. footer
 * --------------------------------------------------------------------------*/

#footer-partners { margin-top: var(--wp--preset--spacing--70); }

#stg_footer-page {

	/* https://cssgradient.io/ */
	
	background: var(--wp--preset--color--brand-purple);
	background: radial-gradient(circle,rgba(96, 63, 225, 1) 11%, rgba(59, 56, 186, 1) 100%);
	box-sizing: border-box;
	border-top: 1px var(--wp--preset--color--purple-dark) solid;
	border-bottom: 1px var(--wp--preset--color--purple-dark) solid;
	margin-top: var(--wp--preset--spacing--60);
	}

	#footer-about p { margin: 0 0 var(--wp--preset--spacing--70) 0; }

	#menu-social {
		align-content: flex-start;
		display: flex;
		/* make full width of row: flex-grow, flex-shrink, flex-basis */
		flex: 0 0 100%;
		flex-direction: row;
		padding-left: 0;
		}

	#stg_footer-menu { text-align: right;}
	
	#stg_footer-page p { line-height: var(--wp--custom--lh-normal); }

	#stg_footer-page a.button-solid { box-shadow: 4px 4px 6px 1px rgba( 25, 24, 66, 0.66); }

	#footer-page-social { margin-top: var(--wp--preset--spacing--70); }

		#menu-social li {
			list-style: none;
			background-position: 0 0;
			background-repeat: no-repeat;
			}

		#menu-social li:not(:last-child) { margin-right: var(--wp--preset--spacing--40) }

		#menu-social a {

			/* structure */
			background-position: 0 0;
			background-repeat: no-repeat;
			background-size: cover;

			/* text */
			color: var(--theme_white_off);
			font-family: var(--font_body);
			font-size: var(--fs_small);
			text-decoration: none;	

			/* vertical align text */
			align-self: stretch;
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			}

		#menu-social a:hover {  color: var(--link_hover) }

		#menu-social li a span { 
			/* using the conventional method of hiding causes alignment issues with the visible text */
			position: absolute;
			left: -999em;
			}

			#menu-social-facebook a { background-image: url("../images/icon_facebook.svg"); }

			#menu-social-instagram a { background-image: url("../images/icon_instagram.svg"); }

			#menu-social-linkedin a { background-image: url("../images/icon_linkedin.svg"); }	

		#menu-social-facebook a:hover, #menu-social-instagram a:hover, #menu-social-linkedin a:hover { background-position: 0 100%; }


/** footer menu */

#menu-footer-menu {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin: 0;
	}

body ul#menu-footer-menu li a { font-family: var(--wp--preset--font-family--navigation-lato)!important; }

#stg_footer-page .menu ul {
	font-size: var(--wp--preset--font-size--fs-large);
	font-weight: var(--wp--custom--fw-bold);
	line-height: var(--wp--custom--lh-large);
	list-style: none;
	}

	#stg_footer-page .menu ul a:link, #stg_footer-page .menu ul a:visited {
		color: var(--wp--preset--color--purple-white-off);
		text-decoration: none;
		}

	#stg_footer-page .menu ul a:hover {
		color: var(--wp--preset--color--brand-orange);
		text-decoration: underline;
		}
 
/** #stg_footer-legal */

#stg_footer-legal {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--60);
	}

	#footer-legal-privacy a {
		text-align: right;
		}


/** ---------------------------------------------------------------------------
* 4. responsive
* ----------------------------------------------------------------------------
* max-width: 414px
* 415px -> 768px
* 769px -> 940px
* min-width: 941px
* 
* exceptions
* 
* max-width: 940px
* 941px -> 1350px
* min-width: 1351px
*/


@media screen and (max-width: 414px) {

	/**
	* 'mobile'
	* no content margin
	* body { background-color: Yellow; }
	*/

	#header-logo img { align-self: center; }

	div#stg_footer-page-content {
		margin: 0 auto calc(0.5rem + 0.5vmin) auto;
		padding-right: 1rem;
		}

		#stg_footer-page h2 { background-size: calc(3.5vmin + 2vh); }

	#stg_footer-page-content p {
		/* margin-top: 0rem;  adjusts alignment with monogram */
		padding-right: 3rem;
		}
	
	#menu-social li a {
		background-size: calc(7vw + 2vh);
		height: calc(7vw + 2vh);
		padding-left: calc(7vw + 2vh);
		}
	
	#stg_footer-page .column { margin-bottom: var(--wp--preset--spacing--50); }

	}


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

	/**
	* 'tablet'
	* body { background-color: Red; }
	*/

	div#stg_footer-page-content {
		margin: 0 auto calc(0.5rem + 0.5vmin) auto;
		padding-right: 1rem;
		}
	
		#stg_footer-page h2 { background-size: var(--wp--preset--spacing--80); }

	#stg_footer-page-content p {
		/* margin-top: 0rem;  adjusts alignment with monogram */
		padding-right: 3rem;
		}
	
		#stg_footer-page .column { margin-bottom: var(--wp--preset--spacing--50);}

		#menu-social li a {
			background-size: calc(3.5vw + 1vh);
			height: calc(3.5vw + 1vh);
			padding-left: calc(3.5vw + 1vh);
			}

	}


@media screen and (min-width: 415px) and (max-width: 890px) {

	/** set menu hand-held breakpoint here
		* set also in navigation.css
		*/

		#header-logo img { align-self: center; }

	}


@media screen and (max-width: 600px) {

		#menu-footer-menu {
		padding-left: 0;
		margin-bottom: var(--wp--preset--spacing--50)
		}

	}
	

@media screen and (min-width: 769px) and (max-width: 940px) {

	/**
	* 'desktop'
	* body { background-color: Green; }
	*/

	#stg_footer-page h2 { background-size: var(--wp--preset--spacing--80); }

	#stg_footer-menu {
		margin-top: calc(3.4rem + 0.5vh);
		margin-left: var(--wp--preset--spacing--100);
		}

	#menu-social-linkedin a {
		padding-left: calc(3vw + 2vh);
		background-size: calc(2.5vw + 1vh);
		}

	#menu-social li a {
		background-size: calc(2.5vw + 1vh);
		height: calc(2.5vw + 1vh);
		padding-left: calc(2.5vw + 1vh);
		}

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

	#stg_footer-page h2 { background-size: var(--wp--preset--spacing--90); }

	#menu-social li a {
		background-size: calc(2vw + 1vh);
		height: calc(2vw + 1vh);
		padding-left: calc(2vw + 1vh);
		}

		#stg_footer-page p { line-height: var(--wp--custom--lh-normal); } /** yes this looks like an error */

	}


@media screen and (max-width: 940px) {

		#stg_footer-page {
			margin-bottom: var(--wp--preset--spacing--60);
			padding-top: var(--wp--preset--spacing--80);
			padding-bottom: var(--wp--preset--spacing--80);
			}

			#menu-social a { font-size: var(--fs_small); }

	}

 
@media screen and (min-width: 941px) and (max-width: 1350px) {

		#stg_footer-page {
			padding-top: var(--wp--preset--spacing--100);
			padding-bottom: var(--wp--preset--spacing--100);
			}

			#menu-social a { font-size: var(--fs_small); }

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

	#stg_footer-page {
		margin-bottom: var(--wp--preset--spacing--60);
		padding-top: var(--wp--preset--spacing--100);
		padding-bottom: var(--wp--preset--spacing--100);
		}

		#menu-social a { font-size: var(--fs_normal); }

	}