/* ============================================================================
 * typography
 * ============================================================================
 * Sketch Club Theme
 *
 * 1 - headings
 * 2 - body copy
 * 3 - lists
 * 4 - general declarations
 * 5 - debug
 */

/* ----------------------------------------------------------------------------
 * 1 - headings
 * ----------------------------------------------------------------------------
 * fonts loaded via theme.json
 *
 * Oswald
 *	500
 */


h1:not(#sb_article-header h1):not( #sb_hero-home-wrapper-inner header h1 ) {
	
	/* regular h1s require a margin below but those inside headers do not */
	margin: 0 0 var(--wp--preset--spacing--50) 0;
	}


h2 {
	clear: both;
	margin: 0;
	}
	
	h2:not(.description h2):not(.flex-row-child h2):not(.content-outer h2) { margin-top: var(--wp--preset--spacing--30); }


h3 {
	clear: both;
	margin: 0;
	}

	h3:not(li h3):not(.sb_exhibition-details h3) {
		margin-top: var(--wp--preset--spacing--30);
		}

h4 {
	clear: both;
	margin: 0;
	}

.on_dark h2, .on_dark h3, .on_dark h4 { color: var(--wp--preset--color--white-warm-light); }


p.subheading, span.subheading-listing, p.date-time {
	color: var(--wp--preset--color--green-sketch-club);
	font-family: var(--wp--preset--font-family--font-heading);
	font-weight: var(--wp--custom--fw-heading);
	letter-spacing: var(--wp--custom--ls-heading);
	line-height: var(--wp--custom--lh-normal);
	}

	p.subheading:not(.on_dark p.subheading) { color: var(--wp--preset--color--green-sketch-club); }

p.event-type, .sb_standout_block ul p.event-type, p.taxonomy-category {
	clear: both;
	color: var(--wp--preset--color--grey-mid);
	font-family: var(--wp--preset--font-family--font-heading);
	font-size: var(--wp--preset--font-size--fs-normal);
	font-weight: var(--wp--custom--fw-heading);
	letter-spacing: var(--wp--custom--ls-heading);
	margin: 0 0 var(--wp--preset--spacing--40) 0;
	text-transform: uppercase;
	}

	.on_dark p.subheading { color: var(); }

.sb_block-list-sketches p.subheading { margin-bottom: var(--wp--preset--spacing--70); }

	.sb_block-list-sketches .sb_element-description p:not(:last-of-type) { margin-bottom: var(--wp--preset--spacing--50); }


/* ----------------------------------------------------------------------------
 * 2 - body copy
 * ----------------------------------------------------------------------------
 * fonts loaded via theme.json
 * font colour set in: theme.json > styles > color > text
 */

li strong, strong { font-weight: var(--wp--custom--fw-paragraph-bold); }

p, figcaption, .main li:not(.wp-block-latest-posts__post-title) {
	font-family: var(--wp--preset--font-family--font-body);
	letter-spacing: var(--letter_spacing_body);
	}

.on_dark p:not(.on_dark ul.cards p) { color: var(--wp--preset--color--white-warm-light); }

p, figcaption, .main li, img { font-weight: var(--wp--custom--fw-paragraph-regular); }

p, ul { margin: 0; }

p.text-medium, .main p:not(#sketch_pad_masthead p):not(p.subheading):not(p.is-style-intro-block):not(p.taxonomy-category):not(.description p.list-row-time):not(p.note-reservation):not(p.artwork-credit):not(#sb_content_with_aside aside.flex-row-aside p):not(p.text-large), .main ul:not(li .wp-block-latest-posts__post-title), .main ol, .contact-form textarea, .contact-form input, .card-footer p {
	font-size: var(--wp--preset--font-size--fs-normal);
	line-height: var(--wp--custom--lh-normal);
	}


	.main p.text-large, .is-style-intro-block, .main p.is-style-intro-block {
	font-size: var(--wp--preset--font-size--fs-large-part-step);
	line-height: var(--wp--custom--lh-large-part-step);
	}

.main p.text-large:not(.description p) { margin-bottom: var(--wp--preset--spacing--70); }

p.text-medium, .main p:not(.description p):not(.sb_exhibition-details p):not(.list-row-description p):not(div.sb_element-price p):not(#post-meta p):not(p.subheading):not(.sb_block-list-sketches p.subheading):not(#sb_article-header p):not(.sb_block_serpentine-simple p:last-of-type):not(.sb_block_panel p:last-of-type):not(#sb_content_with_aside aside.flex-row-aside p:last-of-type):not(#sb_hero-home-wrapper-inner p):not(p.artwork-credit), aside.sb_standout_panel .description p:not(:last-of-type):not(p.subheading):not(aside.sb_standout_sketch p.organiser):not(li div.event-price-container p), .main ul:not(.main ul ul):not(ul.cards):not(ul#sb_events):not(.sb_standout_panel ul.sb_club_notices):not(ul.list_rows), .main ol { margin-bottom: var(--wp--preset--spacing--50); }

label {
	font-size: var(--wp--preset--font-size--fs-normal);
	line-height: var(--wp--custom--lh-large);
	}

.text-small {
	font-size: var(--wp--preset--font-size--fs-small);
	line-height: var(--wp--custom--lh-small);
	margin-bottom: var(--wp--preset--spacing--50);
	}

.main section p:last-child { margin-bottom: 0 !important }


/* ----------------------------------------------------------------------------
 * 3 - lists
 * ----------------------------------------------------------------------------
 */

.main ul:not(ul.cards):not(ul.list_rows), .main ol { padding-left: 1rem; }

.main li:not(ul.cards li):not(ul.list_rows li), .main ol { margin-left: 0.5rem; }

ul.is-style-list-decorated-document {
	display: inline-block;																/* limit width to that of the widest child */
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	}

	.is-style-list-decorated-document li {
		background: url("../images/icon-document.png") no-repeat 0rem center;
		background-size: 1rem;
		clear:left;																		/* force stacking */
		padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
		}

	.is-style-list-decorated-document li { border-bottom: 1px var(--wp--preset--color--black-off) dotted; }


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

	dl {

		width: 70%;

		/* https://stackoverflow.com/questions/36004926/equal-height-rows-in-a-flex-container
		* https://css-tricks.com/snippets/css/complete-guide-grid/
		*/
		
		} 
	}

dt {
	display: inline-block;
	float: left;
	clear: left;
	width: calc( 100% * 0.7)
	/* max-width: 65%;
	max-width: 18ch; */
 	}

dd {
	display: inline-block;
	float: right;
	margin-left: 0;
	text-align: right;
	width: calc( 100% * 0.28)
	/* min-width: 25%; */
	}


/* ----------------------------------------------------------------------------
 * 4 - general declarations
 * ----------------------------------------------------------------------------
 */

 abbr {
	border-bottom: 1px #dedede dotted;
	cursor: help;
	}

em { font-style: italic; }


/* ----------------------------------------------------------------------------
 * 5 - debug & instructions
 * ----------------------------------------------------------------------------
 */

p.debug, span.debug {
	background-color: rgb(201, 255, 201);
	color: var(--wp--preset--color--grey-dark);
	font-size: var(--wp--preset--font-size--fs-small);
	font-weight: var(--wp-custom--fw-regular);
	}

p.error, p span.error {
	background-color: pink;
	color: darkred;
	font-size: var(--wp--preset--font-size--fs-small);
	font-weight: var(--wp-custom--fw-regular);
	padding: var(--wp--preset--spacing--50)
	}