/* ============================================================================
 * global
 * ============================================================================
 * Sketch Club Theme
 *
 * 1 - body
 * 2 - header
 * 3 - breadcrumb
 * 4 - footer
 * 5 - main menu
 */

/* ----------------------------------------------------------------------------
 * 1 - body
 * ----------------------------------------------------------------------------
 * body backgtound colour set in: theme.json > styles > color > background
*/

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


header.header-outer {
	margin: 0 auto;
	position: relative;
	}

	#masthead-inner-menu-sub {
		align-items: center;
		display:flex;
		/* expand to fill width: flex-grow, flex-shrink, flex-basis */
		flex: 0 0 100%;
		padding-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--50);
		}

		#masthead-inner-menu-sub ul.menu li {
			display:flex;
			align-items: center;
			}
		
		#masthead-club-name {
			color: var(--wp--preset--color--green-sketch-club);
			font-family: var(--wp--preset--font-family--font-heading);
			font-weight: var(--wp--custom--fw-bold);
			text-transform: uppercase;
			}

			@media screen and (max-width: 60opx) {

				#masthead-club-name { font-size: var(--wp--preset--font-size--fs-large); }

				}

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

				#masthead-club-name { font-size: var(--wp--preset--font-size--fs-extra-large); }

				}

			#masthead-club-name a {
				background-image: url("../images/header-logo.png");
				background-position: center left;
				background-repeat: no-repeat;
				box-sizing: border-box;
				display: inline-block;
				letter-spacing: 0.05vw;
				}

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


/* ----------------------------------------------------------------------------
 * 3 - breadcrumb
 * ----------------------------------------------------------------------------
 * @since 0.1
 */

#breadcrumb {
	color: var(--wp--preset--color--grey-dark);
	font-family: var(--wp--preset--font-family--font-body);
	margin: 0 auto var(--wp--preset--spacing--100) auto;
	text-align: left;
	}

/* ----------------------------------------------------------------------------
 * 4 - footer
 * ----------------------------------------------------------------------------
 * where .site-footer is a bbPress specifc class
 */

footer.footer-page, footer.site-footer {
	background-color: var(--wp--preset--color--green-sketch-club);
	background-size: clamp(8rem, 20rem + 45vw, 45rem);
	box-sizing: border-box;
	padding-bottom: var(--wp--preset--spacing--50);
	}

	#footer-page-content {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		text-align: center;
		}

		#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%;
			margin-top: var(--wp--preset--spacing--70);
			padding-left: 0;
			}

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

			#menu-social li, #menu-social li a {
				height: var(--wp--preset--spacing--70);
				width: var(--wp--preset--spacing--70);
				}


			#menu-social li:not(:last-child) { margin-right: 2vmin; }

			#menu-social a {
				background-position: 100% 0;
				background-repeat: no-repeat;
				background-size: cover;
				display: block;
				}

			#menu-social li a span { margin-left: -999em; }

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

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


/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * #footer-legal
 *  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#footer-legal { 
	margin-top: var(--wp--preset--spacing--90);
	width: 100%;
	}

	#footer-credit {
		color: var(--wp--preset--color--white-warm-light);
		display: flex;
		font-family: var(--wp--preset--font-family--font-body);
		text-align: left;
		margin-bottom: var(--wp--preset--spacing--50);
		}

/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * footer columns
 *  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * specfically, the footer
 * basic, but works sufficiently well
 */

#footer-page-content #sb_footer-page-content-inner {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-top: var(--wp--preset--spacing--90);
	width: 100%;
	}

.column-one-third {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-basis: 50%;					/* otherise set to 33.33% */
	}

.column-two-thirds {
	display: flex;
	flex-basis: 50%;					/* otherise set to 66.66% */
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	}



/* ----------------------------------------------------------------------------
 * 6 - responsive
 * ----------------------------------------------------------------------------
 */


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

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

	header.header-outer div#header-menu-outer { align-items: center; }
	 
	header.header-outer div#header-menu-outer img { height: calc(3rem + 0.5vmin); }

	main { margin-top: var(--wp--preset--spacing--50); }

	div#footer-page-content {
		margin: 0 auto var(--wp--preset--spacing--50) auto;
		padding-right: 1rem;
		}

	}


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

	/**
	 * 'tablet'
	 * body { background-color: Red; }
	 */
	
	header.header-outer div#header-menu-outer { align-items: center; }
	
	header.header-outer div#header-menu-outer img { height: calc(4rem + 0.5vmin); }

	main { margin-top: var(--wp--preset--spacing--50); }

	}


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

	/**
	 * 'desktop'
	 * body { background-color: Green; }
	 */
	
	header.header-outer div#header-menu-outer img { height: calc(5rem + 0.5vmin); }

	main { margin-top: var(--wp--preset--spacing--50); }

	}


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

	header.header-outer div#header-menu-outer img { height: calc(5rem + 0.5vmin); }

	main:not(.main-member_home):not(.main-public_home):not(.main-news_home) { margin-top: var(--wp--preset--spacing--60); }

	}


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

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

	#masthead-club-name a {
		background-size: auto 90%;
		background-position: top left;
		padding: 0.3rem 0 0.3rem var(--wp--preset--spacing--80);
		}
	
	}

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

	#masthead-club-name a {
		background-size: auto 100%;
		padding: 0.3rem 0 0.3rem var(--wp--preset--spacing--90);
		}

	}



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

	.container-margin {

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

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

		}

	.container-padding, .wp-block-latest-posts__post-excerpt {

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

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

		}

	}


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

	.container-margin {

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

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

		}

	.container-padding, .wp-block-latest-posts__post-excerpt {

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

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

		}

	}


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

	.container-margin {

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

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

		}

	.container-padding, .wp-block-latest-posts__post-excerpt {

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

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

		}

	}


/* ----------------------------------------------------------------------------
 * 5 - main menu
 * ----------------------------------------------------------------------------
 */

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

	#masthead-inner ul { display: none; }

	header.header-outer div#header-menu-outer { margin-top: 0; }


	div#header-menu-outer {

		/* required only for 'burger' menu positioning */

		position: absolute;
		top: 0.6rem;
		right: var(--wp--custom--space-edge-handheld);

		height: calc(3.6rem + 0.5vh);
		}

	/* transitions */

	#header-menu-inner #menu-toggle:checked + #menu-icon > div {
		transform: rotate(135deg);
		}

	#header-menu-inner #menu-toggle:checked + #menu-icon > div:before,
	#header-menu-inner #menu-toggle:checked + #menu-icon > div:after {
		top: 0;
		transform: rotate(90deg);
		}

	#header-menu-inner #menu-toggle:checked + #menu-icon > div:after {
		opacity: 0;
		}

	#header-menu-inner #menu-toggle:checked ~ #menu-container {
		pointer-events: auto;
		visibility: visible;
		}

	#header-menu-inner #menu-toggle:checked ~ #menu-container > div {
		transform: scale(1);
		transition-duration: 0.75s;
		}

	#header-menu-inner #menu-toggle:checked:hover + #menu-icon > div {
		transform: rotate(225deg);
		}


	/* elements */

	#header-menu-inner {
		position: absolute;
		top: 0.4rem;
		right: 0;
		z-index: 5;
		padding: 0;
		}

	#header-menu-inner #menu-toggle {
		border-radius: calc(2.5rem + 0.5vh);
		position: relative;
		top: 0;
		right: 0;
		z-index: 6;
		cursor: pointer;
		width: calc(2.2rem + 0.5vh);
		height: calc(2.2rem + 0.5vh);
		padding: calc(0.7rem + 0.5vh);
		opacity: 0;
		}

	#header-menu-inner #menu-icon {

		/* the 'burger' button */

		box-sizing: border-box;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		width: calc(2.2rem + 0.5vh);
		height: calc(2.2rem + 0.5vh);
		padding: calc(0.35rem + 0.5vh);
		background: var(--wp--preset--color--black-off);
		border-radius: calc(1.5rem + 0.5vh);
		cursor: pointer;
		transition: box-shadow 0.4s ease;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		}

			/* these generate the 'burger' button icon */

			#header-menu-inner #menu-icon > div {

				/* the central horizontal bar */

				position: relative;
				flex: none;
				width: 100%;
				height: 1px;
				background: var(--wp--preset--color--white-warm-light);
				transition: all 0.4s ease;
				display: flex;
				align-items: center;
				justify-content: center;
				}

			#header-menu-inner #menu-icon > div:before, #header-menu-inner #menu-icon > div:after {

				/* the upper and lower horizontal bars */

				content: '';
				position: absolute;
				z-index: 1;
				left: 0;
				width: 100%;
				height: 1px;
				background: inherit;
				transition: all 0.4s ease;
				}

				#header-menu-inner #menu-icon > div:before { top: -7px; }
		
				#header-menu-inner #menu-icon > div:after { top: 7px; }

	#header-menu-inner #menu-container {
		background: var(--wp--preset--color--white-warm-light);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		visibility: hidden;
		overflow: hidden;
		-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		outline: 1px solid transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		}

	#header-menu-inner #menu-container > div {

		/* the menu canvas */
		height: 100%;
		width: 100%;

		/* can use a var but must be rgb not hex */
		/* background-color: rgba(var(--color), 0.8); */
		background: var(--wp--preset--color--global-white);
		transition: all 0.4s ease;
		flex: none;
		transform: scale(0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		}
	
	nav#menu-container { background-color: var(--wp--preset--color--grey-dark); }

	#menu-container ul {
		list-style: none;
		padding: 0 var(--wp--preset--spacing--70);
		}

	#menu-container ul li {
		display: inline-block;
		font-family: var(--wp--preset--font-family--font-heading);
		font-size: var(--wp--preset--font-size--fs-extra-large);
		font-weight: var(--fw_normal);
		letter-spacing: var(--wp--custom--ls-heading);
		line-height: var(--wp--custom--lh-extra-large);
		margin: 0 0 var(--wp--preset--spacing--50)0;
		text-align: left;
		width: 100%;
		}
	
	#menu-container ul.menu li a:link, #menu-container ul.menu li a:visited {
		color: var(--wp--preset--color--black-off);
		text-decoration: none;
		}

		#header-menu-inner #menu-container ul.menu li.current_page_item a {
				color: var(--wp--preset--color--green-sketch-club);
				text-decoration: underline;
			}

	#menu-container ul.menu li a:hover{
		color: var(--wp--preset--color--red-highlight);
		text-decoration: underline;
		}

	}

li.mobile-memu-divider {
	border-top: 1px var(--wp--preset--color--green-sketch-club) solid;
	margin-top:  var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
}
	

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

		ul.menu li { font-size: var(--wp--preset--font-size--fs-small-part-step); }

	}

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

	/* display menu from this width upwards
	 * toggling of logo image is set in the picture > source > media value in the header-*.php files
	 */

	div#masthead-inner-menu-sub { padding-left: var(--wp--custom--space-edge-desktop); }

	#header-menu-outer {
		align-items: stretch;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		}

		#header-menu-inner {
			flex-grow: 2;
			margin-top: var(--wp--preset--spacing--40);
			margin-bottom: var(--wp--preset--spacing--40);
			}

		.hide-me {

			/** hide 'home' link on desktop */

			display: none;
			width: 0;
			}
		
		ul.menu {
			display: flex;
			justify-content: flex-start;
			list-style: none;
			padding-left: 0;
			}

			ul.menu li:not(#masthead-inner-menu-sub ul.menu li ) {
				font-family: var(--wp--preset--font-family--font-heading);
				font-weight: var(--wp--custom--fw-heading);
				letter-spacing: var(--wp--custom--ls-navigation);
				margin-right: var(--wp--preset--spacing--50);
				text-transform: uppercase;
				}
			
			#masthead-inner-menu-sub ul.menu li {
				font-family: var(--wp--preset--font-family--font-heading);
				font-size: var(--wp--preset--font-size--fs-small-part-step);
				font-weight: var(--wp--custom--fw-heading);
				letter-spacing: var(--wp--custom--ls-navigation);
				margin-left: var(--wp--preset--spacing--30);
				text-transform: uppercase;
				}
			
			ul.menu li:not(#masthead-inner-menu-sub ul.menu li) { line-height: var(--wp--custom--lh-large); }

			li.sb_is_selected { /*border-bottom: 1px var(--wp--preset--color--green-sketch-club) solid;*/ text-underline-offset: 0.4rem; }

			#masthead-inner-menu-sub ul.menu li {
				line-height: var(--wp--custom--lh-large);
				display: inline;
				}

			#menu-container ul.menu li a:link, #menu-container ul.menu li a:visited {
				color: var(--wp--preset--color--black-off);
				text-decoration: none;
				}
			
			ul.menu li.current_page_item a:not(#masthead-inner-menu-sub ul.menu li.current_page_item), ul.menu li.current-menu-item a, ul.menu li.current-page-ancestor a, ul.menu li.current-menu-parent a, li.current-menu-item a, #menu-container ul.menu li.current-page-ancestor a:visited {
				color: var(--wp--preset--color--green-sketch-club);
				text-decoration: underline;
				text-underline-offset: 0.4rem;
				}

			#menu-container ul.menu li a { text-underline-offset: 0.4rem; }

			#menu-container ul.menu li.current_page_item a:link, #menu-container ul.menu li.current-page-ancestor a:link, #menu-container ul.menu li.current-menu-item a:link #menu-container ul.menu li.current-menu-parent a:link, #menu-container ul.menu li.current_page_item a:visited, #menu-container ul.menu li.current-page-ancestor a:visited, #menu-container ul.menu li.current-menu-item a:link, #menu-container ul.menu li.current-menu-item a:visited, #menu-container ul.menu li.current-menu-parent a:visited, #menu-container ul.menu li.current-post-parent a {
				color: var(--wp--preset--color--green-sketch-club);
				text-decoration: underline !important
				}

			#menu-container ul.menu li a:hover, #menu-container ul.menu li a:hover, #menu-container ul.menu li.current-menu-item a:hover, #menu-container ul.menu li.current-post-parent a:hover {
				color: var(--wp--preset--color--red-highlight);
				text-decoration: underline;
				}

				ul.menu li.current_page_item a:hover, #menu-container ul.menu li.current-page-ancestor a:hover {
					color: var(--wp--preset--color--red-highlight) !important;
					}

		#menu-toggle { display: none; }

		#menu-icon { display: none; }

	}

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

		ul.menu li:not(#masthead-inner-menu-sub ul li) { font-size: var(--wp--preset--font-size--fs-normal); }

		#masthead-inner-menu-sub ul li { font-size: var(--wp--preset--font-size--fs-small-part-step); }

		div#masthead-inner-menu-sub { padding-left: var(--wp--custom--space-edge-desktop); }

	}