/** ===========================================================================
 * global
 * ============================================================================
 * Be More P.U.N.K. - Theme
 *
 * 1 - global
 * 2 - header
 * 3 - footer
 *
 * .container
 *  - containers butt up against the edge of the viewport
 *
 * .container-margin and .container-padding
 *  - give containers the gap between them and the edge of the viewport
 *
 * .content-outer
 *  - constrains content
 *
 * .content-breakout
 *  - expnds to full viewport width
 *  - typically paird with .container-padding
 *
 * .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 .content-outer
 *
 * .content-inset
 *  - combines characteristics of .container-margin and .container-padding
 *  - insets child content further than the basic content
 *
 */

/** ---------------------------------------------------------------------------
 * 1 - global
 * ----------------------------------------------------------------------------
 */
  

figure {

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

	margin: 0;
	}

#wrapper {

	/* wrapper does nothing apart from centre children */

	text-align: center;

	}

.container {

	/**
	* containers butt up against the edge of the viewport
	* separate classes give them either margin or padding
	*/

	overflow: visible;
	text-align: left;
	}

.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 .content-breakout .container-padding
	 *
	 * everything else should use...
	 */

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

.content-breakout {

	/* a child of a .content-outer that breaks out to fill the viewport width */

		width: 100vw;
		position: relative;
		left: 50%;
		margin-left: -50vw;

		/* ensure that the container extends to contain the margin-bottom of child elements */

		overflow: auto;
		}

/** .content-inset { */

	/** 
	* content narrower than the standard content-outer width
	* not currently used
	* .inset-children trialling for cards
	*
	* 'mobile'
	*
	* 'tablet'
	* - content other than #section-featured
	*
	* 'desktop' - nothing inset
	*
	*/

	/* margin-right: var(--wp--custom--spacing-edge-handheld);
	margin-left: var(--wp--custom--spacing-edge-handheld); */

/** 	} */


/** ---------------------------------------------------------------------------
* 2 - header
* -----------------------------------------------------------------------------
*/

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

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

.home .header-page {
	background: url("../images/bg_hero-home.png") 0 0 no-repeat;
	background-size: cover;
	}

	#header-inner {
		height: 100%;
		padding-top: 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--70);
	box-sizing: border-box;
	display: inline-block;
	font-size: var(--wp--preset--font-size--fs-large);
	font-weight: var(--wp--custom--fw-extra-bold);
	line-height: var(--wp--custom--lh-extra-large);
	min-height:  var(--wp--preset--spacing--70);
	padding-left: var(--wp--preset--spacing--80);
	}

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

	a#header_site-title:hover {
		color: var(--wp--preset--color--theme-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-size: var(--wp--preset--font-size--fs-large);
	font-weight: var(--wp--custom--fw-semi-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--theme-black-off);
		text-decoration: none;
		}

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

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

	#header-menu-inner .menu ul {
		display: flex;
		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);
			}

			
	}


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

#bmp_footer-page {
	box-sizing: border-box;
	background: url("../images/bg_footer.png") 0 0 no-repeat;
	background-size: cover;
	}

	#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;
		}

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

	#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;
	}

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

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

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

#bmp_footer-legal .content-outer {
	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; }
	
	main:not(.home #main-content) { margin-top: var(--wp--preset--spacing--80); }

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

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

	#bmp_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);
		}
	
	#bmp_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; }
	*/
	

	main:not(.home #main-content) { margin-top: var(--wp--preset--spacing--100); }

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

	#bmp_footer-page-content p {
		/* margin-top: 0rem;  adjusts alignment with monogram */
		padding-right: 3rem;
		}
	
		#bmp_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) {

	/* delete if not required */

	}

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

	/* delete if not required */
	
	}
	

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

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

	main:not(.home #main-content) { margin-top: var(--wp--preset--spacing--100); }

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

	#bmp_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) {

	#bmp_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);
		}

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

	}
 
 
/**
* exceptions
* background and size declarations must remain here
*/

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

	.container-margin, .content-inset {

		/* a margin for containers whose content does not meet the viewport */

		margin-right: var(--wp--custom--spacing-edge-handheld);
		margin-left: var(--wp--custom--spacing-edge-handheld);

		}

	.container-padding, .content-inset {

		/* padding for to align children of containers that reach the viewport */

		padding-right: var(--wp--custom--spacing-edge-handheld);
		padding-left: var(--wp--custom--spacing-edge-handheld);

		}

		#bmp_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) {
 
	.container-margin, .content-inset {

		/* a margin for containers whose content does not meet the viewport */

		margin-right: var(--wp--custom--spacing-edge-desktop);
		margin-left: var(--wp--custom--spacing-edge-desktop);;

		}

	.container-padding, .content-inset {

		/* padding for to align children of containers that reach the viewport */

		padding-right: var(--wp--custom--spacing-edge-desktop);
		padding-left: var(--wp--custom--spacing-edge-desktop);

		}

		#bmp_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_small); }


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

	.container-margin, .content-inset {

		/* a margin for containers whose content does not meet the viewport */

		margin-right: var(--wp--custom--spacing-edge-desktop);
		margin-left: var(--wp--custom--spacing-edge-desktop);

		}
 
	.container-padding, .content-inset {

		/* padding for to align children of containers that reach the viewport */

		padding-right: var(--wp--custom--spacing-edge-desktop);
		padding-left: var(--wp--custom--spacing-edge-desktop);

		}

	#bmp_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); }


	}