/** ===========================================================================
 * General styles for Company Theme
 * ============================================================================
 *
 * 1 - global
 * 2 - pre header
 * 3 - header
 * 4 - main
 * 5 - 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
 *
 * .content-inset
 *  - combines characteristics of .container-margin and .container-padding
 *  - insets child content further than the basic content
 *
 */

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

body { background-color: var(--theme_background); }

img#wpstats { display: none; }

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: center;
	}

.content-outer {

	/* main content column
	 * this is where the page width is set
	 */

	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(--spacing-edge-handheld);
	margin-left: var(--spacing-edge-handheld); */

/** 	} */

/** ---------------------------------------------------------------------------
 * 2 - preheader
 * ----------------------------------------------------------------------------
 */

#header-page-preheader {
	background-color: var(--theme_dark);
	padding: var(--space_nano) 0;
	}

#header-page-preheader:not(.home #header-page-preheader) { margin-bottom: var(--space_extra_large); }

	#header-page-preheader-inner span:not(a span) {
		margin-right: var(--space_nano);
		padding-right: var(--space_small);
		}

	#header-page-preheader-inner p {
		color: var(--theme_white_off);
		text-align: center;
		}

	#header-page-preheader-inner a { margin:var(--space_nano) 0 var(--space_nano) var(--space_small); }

/** ---------------------------------------------------------------------------
* 3 - header
* -----------------------------------------------------------------------------
*/

header.header-page:not(.single-stand_alone_pages header.header-page) { margin-top: var(--space_extra_large); }

div#header-inner {
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;

	/**
	* Prevents everything being pushed down the screen.
	* Don't know why it suddenly became necessary, or why this works. Random find.
	*
	* see navigation.css for responsive properties.
	*/

	border-top: 1px rgba(0, 0, 0, 0) solid;

	}

	div#header-inner a#header-logo { display: flex; }

		div#header-inner a picture { display: block; height: 100%; }

			div#header-inner a picture img {

				/* removes the unwanted space between bottom of image and closing of picture tag */
				display: block;
				}


/** ---------------------------------------------------------------------------
* 4 - <main> / .main (content area)
* ----------------------------------------------------------------------------
* main has no attributes, but is referenced in some text styles to limit
* their effect specifically to the main content area.
*/

/** bonkers but it works */

.text-transform-sentence-case { text-transform: lowercase; }
.text-transform-sentence-case::first-letter { text-transform: uppercase; }


/** ---------------------------------------------------------------------------
* 5 - footer
* ----------------------------------------------------------------------------
*/

#footer-page {
	background-color: var(--black_off);
	box-sizing: border-box;
	}

	#footer-page h2, #footer-page-social h3, #footer-page p { color: var(--theme_white_off); }

	#footer-page-social h3 { margin-bottom: var(--space_small) !important }

	#footer-about { margin-bottom: var(--space_large); }

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

	#cb_footer-menu { text-align: right;}
	
	#footer-page p { line-height: var(--lh_normal); }

	#footer-page-social { margin-top: var(--space_large); }

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

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

		#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(--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-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-legal */

	#footer-legal div.listing { justify-content: space-between !important }

		#footer-credit {
			display: flex;
			margin-bottom: var(--space_normal);
			}

		#footer-privacy { display: flex; }

			#footer-privacy a {
				width: 100%;
				text-align: right;
				}


/** ---------------------------------------------------------------------------
* 6 - 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
	* 1 service per row
	* 1 project per row
	* body { background-color: Yellow; }
	*/

	#header-inner {
		height: 100%;

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

		#header-logo img { align-self: center; }
	
	main:not(.stand_alone_pages-template-default #main-content) { margin-top: var(--space_extra_large); }

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

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

	#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);
		}
	
	#footer-page .column { margin-bottom: var(--space_small); }

	#footer-about {
		background: url("../images/footer-page-tag.svg") left 0.3rem no-repeat;
		background-size: 27vmin;
		padding-left: 28vmin;
		}

	}


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

	/**
	* 'tablet'
	* 2 services per row
	* 2 projects per row
	* body { background-color: Red; }
	*/
	

	main:not(.stand_alone_pages-template-default #main-content) { margin-top: var(--space_gigantic); }

	div#footer-page-content {
		margin: 0 auto calc(0.5rem + 0.5vmin) auto;
		padding-right: 1rem;
		}
	
		#footer-page h2 { background-size: var(--space_extra_large); }

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

		#cb_footer-menu-parent {

			/* required only at this breqk point
			 * aligns menu right on smaller hand held screens
			 */

			display: flex;
			flex-direction: column;
			align-items: flex-end;
			}

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

	#footer-about {
		background: url("../images/footer-page-tag.svg") left 0.3rem no-repeat;
		background-size: 11vmin;
		padding-left: 14vmin;
		}

	}


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

	/** set menu hand-held breakpoint here
		* set also in navigation.css
		*/
	
		#header-inner {
		height: 100%;

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

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

	}


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

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

	#cb_footer-menu {
		margin-top: 0;
		margin-left: 0;
		padding-left: 0;
		}

	}

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

	#footer-about, #cb_footer-menu-parent { width: calc(100% * (1/3) - 1.333%); }

	#footer-about {
		flex-grow: 2;
		}

		#cb_footer-menu {
		margin-top: calc(3.4rem + 0.5vh);
		margin-left: var(--space_gigantic);
		}
	
	}
	

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

	/**
	* 'desktop'
	* 3 services per row
	* 3 projects per row
	* body { background-color: Green; }
	*/

	main:not(.stand_alone_pages-template-default #main-content) { margin-top: var(--space_gigantic); }

	header.header-page div#header-inner a picture img { padding-top: 0.1em; }

	#footer-page h2 { background-size: var(--space_extra_large); }

	#cb_footer-menu {
		margin-top: calc(3.4rem + 0.5vh);
		margin-left: var(--space_gigantic);
		}

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

	#footer-about {
		background: url("../images/footer-page-tag.svg") left 0.3rem no-repeat;
		background-size: 10vmin;
		padding-left: 14vmin;
		}

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

	main:not(.stand_alone_pages-template-default #main-content) { margin-top: var(--space_gigantic); }

	header#header-page div.header-inner a picture img { padding-top: 0.2em; }

	#footer-page h2 { background-size: var(--space_huge); }

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

		#footer-about {
			background: url("../images/footer-page-tag.svg") left 0.3rem no-repeat;
			background-size: 8vmin;
			padding-left: 12vmin;
			}

			#footer-page p { line-height: var(--lh_normal); } /** yes this looks like an error */

	}
 
 
/**
* exceptions
* background and size declarations must remain here
*/
 
 
@media screen and (max-width: 890px) {
 
	/** set menu hand-held breakpoint here
	* set also in navigation.css
	*/
 
	header#header-page, header.header-page:not(.stand_alone_pages-template-default .header-page), #cb_hero-wrapper #header-inner {
		height: var(--tap_target);
		margin: var(--space_small) auto var(--space_large) auto;
		}

	}


@media screen and (min-width: 891px) {
 
	 
 
	 /** set menu hand-held breakpoint here
	 * set also in navigation.css
	 */
 
	header#header-page { margin: 0 auto var(--space_large) auto; }

	}


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

	.container-margin, .content-inset {

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

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

		}

	.container-padding, .content-inset {

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

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

		}

		#footer-page {
			margin-bottom: var(--space_normal);
			padding-top: var(--space_extra_large);
			padding-bottom: var(--space_extra_large);
			}

		#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(--spacing-edge-desktop);
		margin-left: var(--spacing-edge-desktop);

		}

	.container-padding, .content-inset {

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

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

		}

		#footer-page {
			margin-bottom: var(--space_normal);
			padding-top: var(--space_gigantic);
			padding-bottom: var(--space_gigantic);
			}


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


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

	/* header#header-page div#header-inner img { height: calc(3.5rem + 0.5vmin); } */

	.container-margin, .content-inset {

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

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

		}
 
	.container-padding, .content-inset {

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

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

		}

	#footer-page {
		margin-bottom: var(--space_normal);
		padding-top: var(--space_gigantic);
		padding-bottom: var(--space_gigantic);
		}

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


	}