/** ===========================================================================
 * Global styles for Tommy Flowers Foundation - 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
 * ----------------------------------------------------------------------------
 */

.wp-site-blocks { text-align: center; }

figure {

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

	margin: 0;
	}

.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: 1200px;
	text-align: left;
	}

/*.content-breakout:not(.content-breakout.glide) { !!!--- DEV ---!!! */

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

		/*
.tff_block-standout .tff_slider.content-breakout {
	border-bottom: 30px yellow solid;

	width: 100vw;
		position: relative;
		left: 55%;
		margin-left: -55vw;
}*/


/** .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); */

/** 	} */

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

	.container-margin, .content-inset, .container-clamped {

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

	}


@media screen and (min-width: 941px) and (max-width: 1350px) {
 
	.container-margin, .content-inset, .container-clamped {

		/* 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 {

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

	}


@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);

		}

	}


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

#header_site-title {
	align-items: center;
	display:flex;
	margin-left: 0;
	}

	.wp-block-site-logo, .wp-block-site-logo img {
		max-height: var(--wp--preset--spacing--70);
		max-width: var(--wp--preset--spacing--70);
		}

	.wp-block-site-title { margin-left: var(--wp--preset--spacing--30); }

		.wp-block-site-title  a {

			/* additions to settings in theme.json > "core/site-title" */

			text-transform: uppercase;
			}


			.wp-block-site-title a:link, .wp-block-site-title a:visited {
				color: var(--wp--preset--color--themer-black-off);
				text-decoration: none;
				}

			.wp-block-site-title a:hover {
				color: var(--wp--preset--color--theme-hover);
				text-decoration: underline;		}


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

				.wp-block-site-title a {
					font-size: var(--wp--preset--font-size--fs-small);
					line-height: var(--wp--custom--lh-small);
				}

			}

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

				.wp-block-site-title a {
					font-size: var(--wp--preset--font-size--fs-extra-large);
					line-height: var(--wp--custom--lh-extra-large);
				}

			}

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


/** header menu */

/* responsive:
 * max-width: 414px
 * 415px -> 768px
 * 769px -> 940px
 * min-width: 941px
 */

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

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

	#header-inner {
		height: 100%;

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

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

		ul#menu-header-menu { margin: 0 var(--wp--custom--spacing-edge-handheld); }

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

	}


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

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

		.header-page { 	padding-top: var(--wp--preset--spacing--30); } 
	
		#header-inner {
		height: 100%;

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

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

		ul#menu-header-menu { margin: 0 var(--wp--custom--spacing-edge-handheld); }

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

	}


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

	.header-page { 	padding-top: var(--wp--preset--spacing--30); } 

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

	}


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

#tff_footer-page {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--theme-red);
	}

	#tff_footer-page .flex-row-parent {
		align-items: flex-start;
		}

	#footer-about { text-align: left; }

		#footer-about p { 
			font-size: var(--wp--preset--font-size--fs-large);
			margin: 0;
			}

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

	#menu-footer-menu { text-align: right; }

		#menu-footer-menu li a { line-height: var(--wp--custom--lh-large) }
	
	#tff_footer-page p { line-height: var(--wp--custom--lh-normal); }

	#tff_footer-page-social { margin-top: var(--wp--preset--spacing--70); border: 5px greenyellow solid;}

		#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: 100% 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(--wp--preset-color--theme-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-linkedin a {
			background-image: url("../images/icon_linkedin.svg");
			background-position: 0 0;
			}

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

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


/** footer menu */

#tff_footer-page .menu ul {
	font-size: var(--wp--preset--font-size--fs-large);
	font-weight: var(--wp--custom--fw-semi-bold);
	list-style: none;
	margin: 0;
	white-space: nowrap;
	}

	#tff_footer-page .menu ul li a {
		display: block;
		width: 100%;
		}

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

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


/** #tff_footer-legal */

#tff_footer-legal {
	margin-bottom: var(--wp--preset--spacing--60);
	text-align: left;
	}

	#tff_footer-legal p {
		font-size: var(--wp--preset--font-size--fs-normal);
		margin: 0;
		}

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


/* responsive:
 * max-width: 414px
 * 415px -> 768px
 * 769px -> 940px
 * min-width: 941px
 */

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

	/**
	* 'mobile'
	* body { background-color: Yellow; }
	*/
	
	#tff_footer-page h2 { background-size: calc(3.5vmin + 2vh); }

	
	#menu-social li a {
		background-size: calc(7vw + 2vh);
		height: calc(7vw + 2vh);
		padding-left: calc(7vw + 2vh);
		}
	
	#tff_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; }
	*/
	
	#tff_footer-page h2 { background-size: var(--wp--preset--spacing--80); }

	#tff_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 (max-width: 600px) {

	#tff_footer-page #footer-menu-parent { margin-bottom: var(--wp--preset--spacing--80); }

	ul#menu-footer-menu { padding-left: 0; }

	ul#menu-footer-menu li { text-align: left; }

	#tff_footer-legal #footer-legal-privacy {
		margin-bottom: var(--wp--preset--spacing--30);
		text-align: left;
		}

	}

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

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

	}


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

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

	#tff_footer-page #footer-menu-parent { margin-left: var(--wp--preset--spacing--80); }

	}


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

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

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

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

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

		#tff_footer-page p { line-height: var(--wp--custom--lh-large); }

	}


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

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

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

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

	}