/** ===========================================================================
 * styles for <main> for Tommy Flowers Foundation - Theme
 * ============================================================================
 */


main { 
	margin: 0 auto;
	max-width: 1200px;
	}


/* ----------------------------------------------------------------------------
 * home page hero
 * --------------------------------------------------------------------------*/

#home-hero {
	background-color: #EDEDE4;
	margin: 0 0 var(--wp--preset--spacing--100) 0;
	}

	/* #home-hero .container-clamped { */

		#home-hero .content-outer {
			margin-top: var(--wp--preset--spacing--80);
			max-width: 1200px;
			}

			#home-hero .content-outer .flex-row-child { 

				/* specificity prevents collapse of header width */
				max-width: 654px;
				}

			.image-credit p { text-align: center; }

			#home-hero video {
				max-width: 100%;
				height: auto;
				}

			#home-hero .flex-row-picture picture {
				/* mask image */

				clip-path: circle(50%);

				/* to prevent distortion of the image */
				object-fit: cover;

				/*
				* horrible hack
				* positioning inside pseudo element
				*/

				width: auto;
				height: 100%;
				}

			#home-hero #container-button {
				display: flex;
				flex-direction: row-reverse;
				padding-bottom: var(--wp--preset--spacing--80);
				}

				a.hero-button {
					align-self: flex-end;
					display: inline-block;
					height: var(--wp--preset--spacing--80);
					line-height: var(--wp--preset--spacing--80);
					padding-right: var(--wp--preset--spacing--100);
					}

					a.hero-button:link, a.hero-buttont:visited {
						background: url("../images/icon_arrow-right-on-light.svg") right 0 center no-repeat;
						background-size: var(--wp--preset--spacing--80);
						text-decoration: none;
						}

					a.hero-button:hover {
						background: url("../images/icon_arrow-right-hover-on-light.svg") right 0 center no-repeat;
						background-size: var(--wp--preset--spacing--80);
						text-decoration: underline;
						}


/* ----------------------------------------------------------------------------
 * home page body
 * --------------------------------------------------------------------------*/

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

p.is-style-paragraph-home {
	font-family: var(--wp--preset--font-family--jost-body);
	font-size: var(--wp--preset--font-size--fs-huge);
	font-weight: var(--wp--custom--fw-regular);
	line-height: var(--wp--custom--lh-extra-large);
	}

	p.is-style-paragraph-home:not(.tff_block-standout p.is-style-paragraph-home):not(.tff_block_standout-with-background-image p.is-style-paragraph-home) { margin: 0 0 var(--wp--preset--spacing--80) 0; }

	.tff_block-standout p.is-style-paragraph-home { margin: 0; }

	.tff_block_standout-with-background-image p.is-style-paragraph-home { margin: 0; }


/* ----------------------------------------------------------------------------
 * glide
 * ----------------------------------------------------------------------------
 * .glide is the class that triggers the glide js. all glide carousels must
 * have this class
 * 
 * where: .cards-glide mimicks closely .cards
 * difference: .cards-glide allows glide.js the control it needs of the layout
 * to do: there is scope to tidy up
 */

.tff_slider {
	overflow: hidden;

	/* the same value as for a standout block but applied only vertically */
	padding: var(--wp--preset--spacing--80) 0;
	}

.tff_slider .glide__track {
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	}

ul.cards-glide {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	height: 100%;
	}

	.cards-glide li.glide__slide {

		/** <ul class="cards"> > <li> */

		flex: 0 0 auto;

		/* display content as rows within a column */
		flex-flow: column nowrap;
		
		border-radius: var(--wp--preset--spacing--40);

		/* place border inside */
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;

		margin: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--60) var(--wp--preset--spacing--30) !important;
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--110) var(--wp--preset--spacing--40);
		max-width: 21rem !important;
		}

	ul.cards-glide .glide__slide {

		/* this to counteract declarations in glide.core.min.js that prevent equal height children */

		display: flex;		  /* allow inner flex children to stretch */
		align-items: stretch;
		height: auto;			/* let flex control the height instead of Glide’s 100% */
		}



	ul.cards-glide .glide__slide > div {

		/* this to counteract declarations in glide.core.min.js that prevent equal height children */

		flex: 1;
		align-self: stretch;
		}

	ul.cards-glide li figure img, ul.cards-glide li picture img {
		border-radius: var(--wp--preset--spacing--10);
		max-width: 100%;
		height: auto;

		/* removes the unwanted space between bottom of image and closing of picture tag (prevent remove stop) */
		display: block;
		}

		ul.cards-glide li div.description, ul.cards-glide figure figcaption {

			display: flex;
			flex-flow: column wrap;

			/* expand to fill remaining height of parent */
			flex-grow: 1;

			/* children */

			/* display content as rows within a column */
			margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30);
			}

		ul.cards-glide li figure img, ul.cards-glide li picture img {
			border-radius: var(--wp--preset--spacing--10);
			max-width: 100%;
			height: auto;
			}


div.glide__arrows {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	}

	div.glide__arrows button { position: static; }

	button.glide__arrow {
		
		/* glide arrow basics */

		border: none;
		height: var(--wp--preset--spacing--80);
		width: var(--wp--preset--spacing--80);
		}

		.on_dark button.glide__arrow--right {

			/* right */

			justify-content: flex-end;
			margin-left: var(--wp--preset--spacing--30);

			/* right - default */

			background: url("../images/icon_arrow-right-on-dark.svg") right 0 center no-repeat;
			background-size: var(--wp--preset--spacing--80);

			}

				.on_dark button.glide__arrow--right:hover {

					/* right - hover */

					background: url("../images/icon_arrow-right-hover-on-dark.svg") right 0 center no-repeat;
					background-size: var(--wp--preset--spacing--80);
					}

		.on_light button.glide__arrow--right {

			/* right */

			justify-content: flex-end;
			margin-left: var(--wp--preset--spacing--30);

			/* right - default */

			background: url("../images/icon_arrow-right-on-light.svg") right 0 center no-repeat;
			background-size: var(--wp--preset--spacing--80);

			}

				.on_light button.glide__arrow--right:hover {

					/* right - hover */

					background: url("../images/icon_arrow-right-hover-on-light.svg") right 0 center no-repeat;
					background-size: var(--wp--preset--spacing--80);
					}

		
		.on_dark button.glide__arrow--left {

			/* right - default */

			background: url("../images/icon_arrow-left-on-dark.svg") left 0 center no-repeat;
			background-size: var(--wp--preset--spacing--80);
			}

			.on_dark button.glide__arrow--left:hover {

					/* left - hover */

					background: url("../images/icon_arrow-left-hover-on-dark.svg") left 0 center no-repeat;
					background-size: var(--wp--preset--spacing--80);
					}

		.on_light button.glide__arrow--left {

			/* right - default */

			background: url("../images/icon_arrow-left-on-light.svg") left 0 center no-repeat;
			background-size: var(--wp--preset--spacing--80);
			}

			.on_light button.glide__arrow--left:hover {

					/* left - hover */

					background: url("../images/icon_arrow-left-hover-on-light.svg") left 0 center no-repeat;
					background-size: var(--wp--preset--spacing--80);
					}

		.block-cw-04 #glide_controls button.glide__arrow--left {

			/* left - on dark override */

			background: url("../images/icon_arrow-left-on-dark.svg") 0 55% no-repeat;
			background-size: var(--wp--preset--spacing--80);
			}

			.block-cw-04 #glide_controls button.glide__arrow--left:hover {

				/* left - hover */

				background: url("../images/icon_arrow-left-hover-on-dark.svg") left 0 center no-repeat;
				background-size: var(--wp--preset--spacing--80);
				}

		.block-cw-04 #glide_controls button.glide__arrow--right {

			/* left - on dark override */

			background: url("../images/icon_arrow-right-on-dark.svg") 0 55% no-repeat;
			background-size: var(--wp--preset--spacing--80);
			}

			.block-cw-04 #glide_controls button.glide__arrow--right:hover {

				/* left - hover */

				background: url("../images/icon_arrow-right-hover-on-dark.svg") left 0 center no-repeat;
				background-size: var(--wp--preset--spacing--80);
				}
					
	

		button.glide__arrow span {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		width: 1px;
		word-wrap: normal !important;
		}


		button.glide__arrow span:focus {
			background-color: #eee;
			clip-path: none;
			color: #444;
			display: block;
			font-size: 1em;
			height: auto;
			left: 5px;
			line-height: normal;
			padding: 15px 23px 14px;
			text-decoration: none;
			top: 5px;
			width: auto;
			z-index: 100000;
		}


/* ----------------------------------------------------------------------------
 * blocks
 * ----------------------------------------------------------------------------
 *
 * -01 on-dark (white)
 * -02 on-dark (manilla)
 * -03 on-dark (red)
 * -11 on-dark (black)
 *
 * -21 on-light (outline)
 */

.tff_block-standout { padding: var(--wp--preset--spacing--80); }

.tff_gallery {

	border-top: var(--wp--preset--spacing--10) var(--wp--preset--color--theme-red) solid;
	margin-top: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--80);
}

	.block-margin-above { margin-top: var(--wp--preset--spacing--80); }

	.block-margin-below { margin-bottom: var(--wp--preset--spacing--80); }

	.block-paddding_top_bottom {

		/* currently used exclusively by parent-breakout-bare */
		
		padding-top: var(--wp--preset--spacing--80);
		padding-bottom: var(--wp--preset--spacing--80);
		}

	.block-cw-01 { background-color: var(--wp--preset--color--global-white); }

	.block-cw-02 { background-color: var(--wp--preset--color--theme-manilla); }

	.block-cw-03 { background-color: var(--wp--preset--color--theme-red); }

	.block-cw-04 { background-color: var(--wp--preset--color--theme-black-off); }

	.block-cw-21 { border: 3px var(--wp--preset--color--theme-red) solid; }

.flex-row-second-child:not(.flex-row-second-child ul#menu-footer-menu ul li) { text-align: right; }

#tff_article-header .flex-row-picture {
	margin-right: var(--wp--preset--spacing--80);
	}

#tff_article-header h1 { margin-bottom: 0; }

	#tff_article-header picture img.wp-post-image {
		border-radius: var(--wp--preset--spacing--40);
		display: block;
		height: auto !important;
		margin-bottom: var(--wp--preset--spacing--70);
		width: 100% !important;
		max-width: 100%;	
		}


#tff_block_featured_image { margin-bottom: var(--wp--preset--spacing--90); }

	#tff_block_featured_image p.is-style-intro-block { margin-bottom: 0; }

	#tff_block_featured_image img { border-radius: var(--wp--preset--spacing--40); }


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * block: standout with featured image
 * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.tff_block_standout-with-background-image {
	border-radius: var(--wp--preset--spacing--40);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	}

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

	.tff_block_standout-with-background-image { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50); }

	}

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

	.tff_block_standout-with-background-image { padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--100); }

		.tff_block_standout-with-background-image div { width: 50%; }

	}

	/* .tff_block_standout-with-background-image.clickable-this { } */


	.tff_block_standout-with-background-image.clickable-this.on_dark:hover > div p a {

		/* apply link style to heading on card hover */
		color: var(--wp--preset--color--theme-hover);
		}

	.tff_block_standout-with-background-image.clickable-this.on_light:hover > div p a {

		/* apply link style to heading on card hover */
		color: var(--wp--preset--color--theme-manilla);
		}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * block: tff_child-summary
 * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

div.clickable-this > div h2 a:link, 
div.clickable-this > div h2 a:visited,
li.clickable-this > div h2 a:link, 
li.clickable-this > div h2 a:visited, 
div.clickable-this > div h3 a:link,
div.clickable-this > div h3 a:visited, 
li.clickable-this > div h3 a:link, 
li.clickable-this > div h3 a:visited {
	color: var(--wp--preset--color--theme-black-off);
	text-decoration: none;
	}

.on_dark div.clickable-this > div h2 a:link, 
.on_dark div.clickable-this > div h2 a:visited,
.on_dark li.clickable-this > div h2 a:link, 
.on_dark li.clickable-this > div h2 a:visited, 
.on_dark div.clickable-this > div h3 a:link,
.on_dark div.clickable-this > div h3 a:visited, 
.on_dark li.clickable-this > div h3 a:link, 
.on_dark li.clickable-this > div h3 a:visited {
	color: var(--wp--preset--color--theme-manilla);
	text-decoration: none;
	}

div.clickable-this:hover > div h2 a, div.clickable-this:hover > div h3 a {

	/* apply link style to heading on card hover */
	color: var(--wp--preset--color--theme-hover);
	}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * activities
 * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


#tff_activity_meta_data { margin-bottom: var(--wp--preset--spacing--80); }

	#tff_activity_meta_data ul {
		list-style: none;
		padding-left: 0;
		}

		.activity-venue {
			background: url("../images/icon_location_pin.svg") left 0 top 50% no-repeat;
			background-size: var(--wp--preset--spacing--30);
			color: var(--wp--preset--color--theme-red);
			font-family: var(--wp--preset--font-family--jost-body);
			font-size: var(--wp--preset--font-size--fs-large);
			font-weight: var(--wp--custom--fw-semi-bold);
			padding-left: var(--wp--preset--spacing--50);
			}


			.activity-venue span {
				position: absolute;
				left: -10000px;
				top: auto;
				width: 1px;
				height: 1px;
				overflow: hidden;
				}
			
			.activity-venue span:focus {
				position: static;
				width: auto;
				height: auto;
				}


		.activity-dates {
			margin-left: var(--wp--preset--spacing--50);
			}

		.activity-preview {
			margin-left: var(--wp--preset--spacing--50);
			}


#tff_activity_aside {
	margin-bottom: var(--wp--preset--spacing--80);
	border-left: var(--wp--preset--spacing--60) var(--wp--preset--color--theme-red) solid;
	padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--70);
	}

	#tff_activity_aside p:last-of-type { margin-bottom: 0; }


#tff_sponsors {
	background-color: var(--wp--preset--color--global-black);
	/* margin-top: var(--wp--preset--spacing--100); */
	}

	.test { background-color: blanchedalmond;}

	.test div { background-color: powderblue;}

	#tff_sponsors .flex-row-parent { justify-content: space-between; }

		.sponsor {
			align-items: center;
			display: flex;
			flex-direction: column;
			margin: var(--wp--preset--spacing--80) 0;
			max-width: 30%;
			}

			.sponsor picture {
				display: block;

				max-width: 100%;
				}
				
				.sponsor picture img {
					display: block;
					height: auto;
					width: 100%;
					}


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

		.sponsor { margin: var(--wp--preset--spacing--80) 0; }

		#sponsor_one {
			margin-right: var(--wp--preset--spacing--50);
			}

		#sponsor_two {
			margin-left: var(--wp--preset--spacing--50);
			}

	}

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

		.sponsor { margin: var(--wp--preset--spacing--100) 0; }

		#sponsor_one { margin-right: var(--wp--preset--spacing--60); }

		#sponsor_two { margin-left: var(--wp--preset--spacing--60); }

	}

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

		.sponsor { margin: var(--wp--preset--spacing--110) 0; }

		#sponsor_one { margin-right: var(--wp--preset--spacing--30); }

		#sponsor_two { margin-left: var(--wp--preset--spacing--30); }

	}




/* core/quote ~ what I think of as a pullquote */

.wp-block-quote p, blockquote p {
	font-size: var(--wp--preset--font-size--fs-extra-large);
	line-height: var(--wp--custom--lh-extra-large);
	margin-bottom: 0 !important;
}


aside.aside-highlight {
	margin-bottom: var(--wp--preset--spacing--80);
	border-left: var(--wp--preset--spacing--60) var(--wp--preset--color--theme-red) solid;
	padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--70);
	}

aside.aside-highlight p { margin-bottom: 0 !important; }


aside.aside-highlight p.typewriter {
	font-family: var(--wp--preset--font-family--typewriter-body);
	font-size: var(--wp--preset--font-size--fs-extra-large);
	line-height: var(--wp--custom--lh-extra-large);
	}


/* ----------------------------------------------------------------------------
 * 404
 * --------------------------------------------------------------------------*/
	
#fourofour img {
	max-width: 100%;
	height: auto;
	margin-bottom: var(--wp--preset--spacing--110);
	}