/* 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.1; margin:0; color: var(--brand-3); font-weight: 400; }
.has-bg h1, .has-bg .h1 { color: #fff; }

h1, .h1{ font-size: clamp(1.5rem, 7vw, 5rem); color: var(--brand-1) !important; font-weight: 400; }
h1 strong, h3 strong { font-weight: 600; }
h2, .h2{ font-size: clamp(1.5rem, 6vw, 5rem); font-weight: 400; }
h3, .h3{ font-size: clamp(1.5rem, 4.5vw, 4.25rem); font-weight: 400; color: var(--brand-1); }
h4, .h4{ font-size: clamp(1.5rem, 3.75vw, 3.25rem); }
h5, .h5{ font-size: clamp(1.5rem, 3vw, 3rem); font-weight: 400; }
h6, .h6{ font-size: clamp(1.5rem, 2vw, 2.5rem); }

/* 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.narrow-para { width: 75%; margin-left: auto; margin-right: auto; }

/* SPACING Headings */

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



/* 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 */
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) / 2 );}
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) / 2 );}
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);}
p a:hover { color: var(--brand-2);}

/* 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;
	}
}