/* Typograhy 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 */
h3 + ul.contents, h2 + ul.contents, h4 + ul.contents { margin-top: 4rem;}
img + h3, img + h4 { margin-top: 6rem; }
.what-we-do-block h3 { font-size: calc( var(--base-heading-size) / 1.5 );  color: var(--brand-1); }
.what-we-do-block h4 { font-size: calc( var(--base-heading-size) / 3 ); margin-bottom: 2rem; font-weight: 500; line-height: 1.4; }

h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.2; margin:0; color: var(--brand-2); font-weight: 600; }
.has-bg h1, .has-bg .h1 { color: #fff; }

h1, .h1{ font-size: 8rem; /* Fallback for IE11 */ font-size: clamp(4.5rem, 5vw, 10vw); line-height: 1.15; }
h2, .h2{ font-size: 6rem; font-size: clamp(3.5rem, 3vw, 8vw); color: var(--brand-1);  }
h3, .h3{ font-size: calc( var(--base-heading-size) / 2.5 );  color: var(--brand-1); }
h4, .h4{ font-size: calc( var(--base-heading-size) / 3 ); margin-bottom: 2rem; font-weight: 500; }
h4 > a { color: var(--brand-1); display: block; }
h4 >  a:hover { color: var(--brand-2); }
.single main .col p a { text-decoration: underline; }
.single main .col p a.toast-primary-button { text-decoration: none; }
.single main .col p a.toast-primary-button:hover { color: #fff; }
h3 + h4 { margin-top: 4rem; }
/*h4.post-listing-title a:hover { color: var(--brand-1);}*/
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; }

h3 a { text-decoration: underline;}
h3 a:hover { text-decoration: none; color: var(--brand-2); }

/* Paragraphs*/
p { margin:0;margin-bottom: calc( var(--base-type-spacing) / 3 ); }
p.small { font-size: 1.75rem; margin-bottom: 1rem; }
p:last-of-type { margin-bottom: 0; }
/* Fine-tune typography */
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: 2rem; }
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 ); }
p.contents-intro + ul { margin-top: 0; }
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; }
h1 + h2{ margin-top: 3rem; }
p + h3 { margin-top: 6rem; }
p + h4, ul + h3, ul + h4 { margin-top: 6rem; }
h2 + p { margin-top: 8rem; }
h1 + img, h2 + img, h3 + img, h4 + image, p + img, img + p, img + h3, img + h4, h2 + h3 { margin-top: 6rem; }

blockquote { 

    margin: 5vw 0 5vw;
    padding: 0 0 0 3rem;
    font-size: 174%;
    border-left: 2rem solid var(--brand-1);
    line-height: 1.4;
	font-style: italic;
}

.breads { font-size: 80%; }


/* Typewriter specific styles - prevents word breaking */
.word {
    display: inline-block;
    white-space: nowrap;
}

.letter,
.letter-space {
    display: inline-block;
}

.typewriter-cursor {
    display: inline-block;
    color: currentColor;
}

/* Hide elements initially */
.fade-in-up,
.fade-in-left, 
.fade-in-right,
.fade-in-down,
.fade-in,
.fade-in-up-blog,
.scale-in,
.fade-in-immediate,
.fade-in-stagger > *,
.slide-in-scroll,
.letters-bounce .letter,
.letters-slide-left .letter,
.letters-scale-in .letter,
.letters-rotate .letter,
.letters-wave .letter,
.letters-typewriter .letter,
.letters-typewriter .letter-space,
.letters-typewriter-cursor .letter,
.letters-typewriter-cursor .letter-space,
.letters-typewriter-immediate .letter,
.letters-typewriter-immediate .letter-space {
    opacity: 0;
}

ol li:before, ol li a:before { display: none !important; padding-left: 1rem !important; }
ol li { padding-left: 1rem !important; }

main .column-content ul.contents li {
  transition: all .5s;
}

main .column-content ul.contents li a {
  display: block;
  color: var(--brand-1);
  transition: color .5s; /* restrict to colour for better performance */
  padding: .5rem;
}

main .column-content ul.contents li a:hover {
  color: var(--brand-2);
}

main .column-content ul.contents li:before {
  transition: transform .5s; /* set transition on the base element */
	    top: 1.3rem;
}

main .column-content ul.contents li:hover:before {
  transform: rotate(221deg);
}

main .column-content ul.contents {
    background-color: #fff;
    padding: 3rem 4rem 3rem 4rem;
    border-radius: 0rem 1rem 1rem 0;
	border: 1px solid var(--brand-2);
	/*display: grid;
    grid-template-columns: 1fr 1fr;*/
}

.contents-intro {
    color: #fff;
    background: var(--brand-2);
    display: inline-block;
    margin: 4rem 0 0 0 ;
    padding: 1rem 1rem 1rem;
    border-radius: 1rem 1rem 0rem 0;
}

div.wp-caption.alignnone { margin: 6rem 0; }