/** ===========================================================================
 * main
 * ============================================================================
 * Surviving The Gap - Theme
 */

/** ---------------------------------------------------------------------------
 * home
 * --------------------------------------------------------------------------*/

.flex-row-child h1 { margin-bottom: 0;}

/* ----------------------------------------------------------------------------
 * block colour variations
 * --------------------------------------------------------------------------*/

.block-cw-01 {

	/* 01. White
	 * pair with: .on_light
	 */

	background-color: var(--wp--preset--color--white);
	}

.block-cw-12 {

	/* 12. Black, off
	 * pair with: .on_dark
	 */

	background-color: var(--wp--preset--color--orange-black-off);
	}

.block-cw-20 {

	/* 20: brand, orange
	 * pair with: .on_light
	 */

	background-color: var(--wp--preset--color--brand-orange);
	}

.block-cw-21 {

	/* 21. orange, black off
	 * pair with: .on_dark
	 */

	background-color: var(--wp--preset--color--orange-black-off);
	}


.block-cw-23 {

	/* 23. orange, pale
	 * pair with: .on_light
	 */

	background-color: var(--wp--preset--color--orange-pale);
	}

.block-cw-24 {

	/* 24. orange, white off
	 * pair with: .on_light
	 */

	background-color: var(--wp--preset--color--orange-white-off);
	}

.block-cw-30 {

	/* 30. brand, purple
	 * pair with: .on_dark
	 */

	background-color: var(--wp--preset--color--brand-purple);
	}

.block-cw-34 {

	/* 34. purple, white  off
	 * pair with: .on_light
	 */

	background-color: var(--wp--preset--color--purple-white-off);
	}



/** ---------------------------------------------------------------------------
 * block structure
 * --------------------------------------------------------------------------*/

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

.header-margin-below header { margin-bottom: var(--wp--preset--spacing--40); }


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

#home-hero, #page-hero {
	background: var(--wp--preset--color--brand-orange);
	background: radial-gradient(circle,rgba(255, 197, 36, 1) 11%, rgba(255, 174, 0, 1) 100%);
	border-top: 1px var(--wp--preset--color--orange-dark) solid;
	border-bottom: 1px var(--wp--preset--color--orange-dark) solid;
	}

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


@media screen and (max-width: 890px) {
 
	.block-hero {
		padding-top: var(--wp--preset--spacing--40);
		padding-bottom: var(--wp--preset--spacing--40);
		}

	}


@media screen and (min-width: 891px) {
 
	.block-hero {
		width: 100vw;
		padding-top: var(--wp--preset--spacing--80);
		padding-bottom: var(--wp--preset--spacing--80);
		}

	}


#home-hero h1 { margin-top: 0; }

.block-hero .flex-row-child p { 
    font-size: var(--wp--preset--font-size--fs-large);
    font-weight: var(--wp--custom--fw-normal);
	line-height: var(--wp--custom--lh-large);
	margin: 0;
	}


/** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * standout block
 * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.block-standout {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
	}

.block-standout:not(.block-standout.content-breakout) {
	padding-right: var(--wp--preset--spacing--70);
	padding-left: var(--wp--preset--spacing--70);
	}

	.block-corner-radius { border-radius: var(--wp--custom--border-radius-block); }


/** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * mini callout
 * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.on_light p.callout-mini, .callout-mini.on_light {
	background-color: var(--wp--preset--color--orange-white-off);
	border: 1px var(--wp--preset--color--brand-orange) solid;
	border-radius: var(--wp--custom--border-radius-button);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--70);
	text-align: center;
	
	}


/** ---------------------------------------------------------------------------
 * flex rows
 * --------------------------------------------------------------------------*/

.flex-row-second-child { text-align: right; }