/* Typograhpy styling
 * All type styling now lives here.
 * DO NOT add type styling to the blocks as Gutenberg destroys it.
*/

:root {
	--base-type-spacing: 8rem;  /* You only need to change this value to change ALL of the type margings */
	--base-heading-size: 9rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.2; margin:0; }
.has-bg h1, .has-bg .h1 { color: #fff; }

h1, .h1{ font-size: clamp(3rem, 7vw, 11rem); color: var(--brand-8); line-height: 1.1; text-shadow: 0rem 1rem 2rem rgba(0, 0, 0, .9); }
body.single-post h1, body.single-post .h1 { font-size: clamp(3rem, 7vw, 9rem);  color: var(--brand-8);  }
h2, .h2{ font-size: clamp(2.75rem, 6vw, 4.5rem); color: var(--brand-1); text-shadow: 0rem .5rem 1rem rgba(0, 0, 0, .9);
} 
h3, .h3{ font-size: clamp(2.5rem, 4.5vw, 3.75rem);  color: var(--brand-8); }
h3.post-listing-title { font-size: 3rem; }
h3.post-listing-title a:hover { color: #fff;  }

h4, .h4{ font-size: clamp(2rem, 3.5vw, 3rem);  color: var(--brand-1); }
h5, .h5{ font-size: clamp(2rem, 3vw, 3rem);  color: var(--brand-8); }
h6, .h6{ font-size: clamp(2rem, 2vw, 2.75rem);  color: var(--brand-8); }

:is(.bgw) :is(h1, h2, h3, h4, h5, h6, p, li) { color: var(--brand-2) ; }

/* Heading links */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--brand-1);}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: var(--brand-2);}

/* Paragraphs*/
p { margin:0;margin-bottom: calc( var(--base-type-spacing) / 3 ); }
p:last-of-type {margin-bottom: 0; }
p.narrow-para { width: 75%; margin-left: auto; margin-right: auto; }

/* Shouts */
.shout h3 { font-size: clamp(2.5rem, 4.5vw, 5.75rem);  font-weight: 800; }
.shout h4 {font-size: clamp(2.5rem, 4.5vw, 4rem);  font-weight: 800; }

/* SPACING Headings */

:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-top: clamp(1.5rem, 4vw, 3rem);  }

/* Heading colors */

.white-text :is(h1, h2, h3, h4, h5, h6) { color: #fff !important; }

/* SPACING Headings & Paragraphs */
h1 + p, h1 + .section-description { margin-top: calc( var(--base-type-spacing) / 2 ); }
h2 + p, h2 + .section-description { margin-top: calc( var(--base-type-spacing) / 2.5 ); }
h3 + p, h3 + .section-description { margin-top: calc( var(--base-type-spacing) / 3 ); }
h4 + p, h4 + .section-description { margin-top: calc( var(--base-type-spacing) / 3.5 ); }
h5 + p, h5 + .section-description { margin-top: calc( var(--base-type-spacing) / 4 ); }
h6 + p, h6 + .section-description { margin-top: calc( var(--base-type-spacing) / 4.5 ); }

p + h1 { margin-top: calc( var(--base-type-spacing) / 1 ); }
p + h2 { margin-top: calc( var(--base-type-spacing) / 1.25 ); }
p + h3 { margin-top: calc( var(--base-type-spacing) / 1.5 ); }
p + h4 { margin-top: calc( var(--base-type-spacing) / 1.75 ); }
p + h5 { margin-top: calc( var(--base-type-spacing) / 2 ); }
p + h6 { margin-top: calc( var(--base-type-spacing) / 2.25 ); }



/* SPACING Images */
img + p, p + img, picture + p, p + picture, figure + p, p + figure {  margin-top: calc( var(--base-type-spacing) / 2 );  }
:is(h1, h2, h3, h4, h5, h6, p) + img { margin-top: calc( var(--base-type-spacing) / 1.5 );}
img + :is(h1, h2, h3, h4, h5, h6, p) { margin-top: calc( var(--base-type-spacing) / 1.5 );}
picture { display: block; }

/* SPACING Lists */
:is(h1, h2, h3, h4, h5, h6, p) + ol, :is(h1, h2, h3, h4, h5, h6, p) + ul  { margin-top: calc( var(--base-type-spacing) / 4 );}
ol + :is(h1, h2, h3, h4, h5, h6, p), ul + :is(h1, h2, h3, h4, h5, h6, p)  { margin-top: calc( var(--base-type-spacing) / 4 );}
ol.toast-boxed-list + :is(h1, h2, h3, h4, h5, h6, p), ul + :is(h1, h2, h3, h4, h5, h6, p)  { margin-top: calc( var(--base-type-spacing) / 1 );}
ul.toast-boxed-list + :is(h1, h2, h3, h4, h5, h6, p), ul + :is(h1, h2, h3, h4, h5, h6, p)  { margin-top: calc( var(--base-type-spacing) / 1 );}

/* Headings on backgrounds */
/*.has-bg h1, .has-bg .h1 { color: #fff; }
.has-bg h2, .has-bg .h2 { color: #fff; }*/
.has-bg h3, .has-bg .h3 { color: #fff; }
.has-bg h4, .has-bg .h4 { color: #fff; }
.has-bg h5, .has-bg .h5 { color: #fff; }
.has-bg h6, .has-bg .h6 { color: #fff; }

/**Lists**/
ul { margin-left:1rem; padding-left: 2rem; list-style: disc outside; }
ol { margin-left: 1rem; padding-left: 2rem;  }
li { margin:0;margin-bottom: calc( var(--base-type-spacing) / 6 ); }
main li a { color: var(--brand-1); }
main li a:hover { color: var(--brand-2); }

/*Links*/
a { text-decoration: none;color:inherit;}
p a {  color: var(--brand-1); text-decoration: none;}
p a:hover { color: var(--brand-1); text-decoration: underline; }
.bgw p a {  color: var(--brand-1); text-decoration: underline;}
.bgw p a:hover { color: var(--brand-2); text-decoration: none; }
.bg1 p a:hover, .bg2 p a:hover, .bg3 p a:hover { color: #fff; text-decoration: none; }
.bg1 p a { color: #fff; text-decoration: underline; }
.bg1 p a:hover { color: #fff; text-decoration: none; }

/* Tables */
p + table, table + p { margin-top: 4rem; }
table { width: 100%; border-collapse: collapse; margin-bottom: calc(var(--base-type-spacing) / 2); text-align: left;  }
thead th { background-color: var(--brand-1); font-weight: 600; text-align: left; padding: 1rem; color: #fff; }
tbody tr:nth-child(even) { background-color: #fff; }
tbody tr:nth-child(odd) { background-color: var(--brand-8); }
tbody td, tbody th { padding: 1rem; }
table { border: none; }
td { border: .1rem solid var(--brand-1);  }
th { border-width: .1rem .1rem .1rem .1rem; border-style: solid; border-color: var(--brand-1); }

blockquote { margin-top: calc(var(--base-type-spacing) / 1); margin-bottom: calc(var(--base-type-spacing) / 1); margin-left: 0; border-radius: var(--border-radius); font-size: 120%; padding: 3rem; background: var(--brand-8); font-weight: 600; border-left: 1rem solid var(--brand-1);  }
blockquote p:last-of-type { margin-bottom: 0; }

@media screen and (max-width: 768px) {
table { overflow-x: auto; width: 100%; }
:root {
	--base-type-spacing: 4.5rem;  /* You only need to change this value to change ALL of the type margings */
	--base-heading-size: 7.5rem;
	}
}


@media screen and (max-width: 576px) {
:root {
	--base-type-spacing: 3rem;  /* You only need to change this value to change ALL of the type margings */
	--base-heading-size: 6rem;
	}
}