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

:root {
	--base-type-spacing: 6rem;  /* 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-family: 'Newsreader'; color: #fff; font-weight: 300; font-size: clamp(5vw, 8rem, 10vw); line-height: clamp(1, 1.1, 3);}
h2, .h2{ font-size: calc( var(--base-heading-size) / 2.5 ); }
h3, .h3{ font-size: calc( var(--base-heading-size) / 2.75 ); }
.card-content h3 { font-weight: 400; font-size: calc( var(--base-heading-size) / 3 ); }
.section-title.h3 { font-family: 'Newsreader'; font-weight: 300; font-size: clamp(1.5rem, 12vw, 6rem); }
h4, .h4{ font-size: calc( var(--base-heading-size) / 3.5 ); }
h5, .h5{ font-size: calc( var(--base-heading-size) / 3.75 ); }
h6, .h6{ font-size: calc( var(--base-heading-size) / 4 ); }
.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; }

/* Paragraphs*/
p { margin:0;margin-bottom: calc( var(--base-type-spacing) / 3 ); }

/* Fine-tune typography */
h2 + img { margin-top: 4rem; }
h1 + p, h1 + div { margin-top: calc( var(--base-type-spacing) / 2 ); }
h2 + p, h2 + div { margin-top: calc( var(--base-type-spacing) / 2 ); }
h3 + p, h3 + div { margin-top: calc( var(--base-type-spacing) / 5 ); }
h4 + p, h4 + div { margin-top: calc( var(--base-type-spacing) / 5 ); }
h5 + p, h5 + div { margin-top: calc( var(--base-type-spacing) / 3.5 ); }
h6 + p, h6 + div { margin-top: calc( var(--base-type-spacing) / 4 ); }
p + ul, p + ol { margin-top: calc( var(--base-type-spacing) / 2 ); }
ul + p, ol + p { margin-top: calc( var(--base-type-spacing) / 1.75 ); }
h1 + table, h2 + table, h3 + table, h4 + table, h5 + table, h6 + table { margin-top: calc( var(--base-type-spacing) / 2 ); }
table + p { margin-top: calc( var(--base-type-spacing) / 1.75 ); }
h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul { margin-top: calc( var(--base-type-spacing) / 2 ); }
h1 + ol, h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol { margin-top: calc( var(--base-type-spacing) / 2 ); }
ul + h1, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6 { margin-top: calc( var(--base-type-spacing) / 1.75 ); }
ol + h1, ol + h2, ol + h3, ol + h4, ol + h5, ol + h6 { margin-top: calc( var(--base-type-spacing) / 1.75 ); }
img + p, p + image, picture + p, p + picture { margin-top: calc( var(--base-type-spacing) / 2 ); }
picture { display: block; }
h3 + .button-block { margin-top: 4rem; }

blockquote {     border-left: 14px solid var(--brand-1);
    border-radius: 2rem 0 0 2rem;
    padding: 0 5rem 0 5rem;
    margin: 7rem 0;
    font-size: 120%;
    font-style: italic; 
}

/* Post listings */

h3.post-listing-title { font-size: 2.25rem; padding-right: 10rem; position: relative; }
h3.post-listing-title:after { content:""; position: absolute; top: 0; right: 0; height: 4rem; width: 6rem; background: #fff url(/wp-content/uploads/circle-arrow.webp) center center no-repeat; background-size: contain; display: block;  z-index: 10;   }

.post-details { font-weight: 300; font-size: 90%; }


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

	.post-details span { display: block; }



}