/*!
Theme Name: Boldt
Theme URI: http://underscores.me/
Author: Jon Whipple
Author URI: http://jonwhipple.com
Description: Basis theme for Boldt Communications
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: boldt
Tags: custom-background, custom-logo, custom-, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Boldt is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

/*--------------------------------------------------------------
# BOLDT theme overrides and tailoring
--------------------------------------------------------------*/

/* Boldt Colours
--------------------------------------------- */
/* 
- lime = "#98C352";
- navy = "#1B3577";
- lipstick = "#C31D6F";
- pumpkin = "#C34827";
- turquoise = "#008EB0";
*/

/* Crossfade animation
--------------------------------------------- */
/*
- Each colour get 18% of the total time.
- Transitions are 2% of the total time.
- Over an 80s duration (which feels about right) each colour gets 14.4s before transition occurs.
*/
@keyframes crossfade-background {
	0% {
		background-color: #98C352;
		fill:#98C352; /* Fill is here to fill SVG elements such as in logo */
	}
	18% {
		background-color: #98C352;
		fill:#98C352; /* Fill is here to fill SVG elements such as in logo */
	}
	20% {
		background-color: #1B3577;
		fill:#1B3577; /* Fill is here to fill SVG elements such as in logo */
	}
	38% {
		background-color: #1B3577;
		fill:#1B3577; /* Fill is here to fill SVG elements such as in logo */
	}
	40% {
		background-color: #C31D6F;
		fill:#C31D6F; /* Fill is here to fill SVG elements such as in logo */
	}
	58% {
		background-color: #C31D6F;
		fill:#C31D6F; /* Fill is here to fill SVG elements such as in logo */
	}
	60% {
		background-color: #C34827;
		fill:#C34827; /* Fill is here to fill SVG elements such as in logo */
	}
	78% {
		background-color: #C34827;
		fill:#C34827; /* Fill is here to fill SVG elements such as in logo */
	}
	80% {
		background-color: #008EB0;
		fill:#008EB0; /* Fill is here to fill SVG elements such as in logo */
	}
	98% {
		background-color: #008EB0;
		fill:#008EB0; /* Fill is here to fill SVG elements such as in logo */
	}
	100% {
		background-color: #98C352;
		fill:#98C352; /* Fill is here to fill SVG elements such as in logo */
	}
}

@keyframes crossfade-foreground {
	0% {
		color: #98C352;
	}
	18% {
		color: #98C352;
	}
	20% {
		color: #1B3577;
	}
	38% {
		color: #1B3577;
	}
	40% {
		color: #C31D6F;
	}
	58% {
		color: #C31D6F;
	}
	60% {
		color: #C34827;
	}
	78% {
		color: #C34827;
	}
	80% {
		color: #008EB0;
	}
	98% {
		color: #008EB0;
	}
	100% {
		color: #98C352;
	}
}

@keyframes crossfade-outline {
	0% {
		border-color: #98C352;
	}
	18% {
		border-color: #98C352;
	}
	20% {
		border-color: #1B3577;
	}
	38% {
		border-color: #1B3577;
	}
	40% {
		border-color: #C31D6F;
	}
	58% {
		border-color: #C31D6F;
	}
	60% {
		border-color: #C34827;
	}
	78% {
		border-color: #C34827;
	}
	80% {
		border-color: #008EB0;
	}
	98% {
		border-color: #008EB0;
	}
	100% {
		border-color: #98C352;
	}
}

@keyframes crossfade-foreground-outline {
	0% {
		color: #98C352;
		border-color: #98C352;
	}
	18% {
		color: #98C352;
		border-color: #98C352;
	}
	20% {
		color: #1B3577;
		border-color: #1B3577;
	}
	38% {
		color: #1B3577;
		border-color: #1B3577;
	}
	40% {
		color: #C31D6F;
		border-color: #C31D6F;
	}
	58% {
		color: #C31D6F;
		border-color: #C31D6F;
	}
	60% {
		color: #C34827;
		border-color: #C34827;
	}
	78% {
		color: #C34827;
		border-color: #C34827;
	}
	80% {
		color: #008EB0;
		border-color: #008EB0;
	}
	98% {
		color: #008EB0;
		border-color: #008EB0;
	}
	100% {
		color: #98C352;
		border-color: #98C352;
	}
}


/* Main Page parts
--------------------------------------------- */

body {
	/* Apply the crossfade-background animation to the body */
	background-color: #98C352;
	animation: crossfade-background 80s infinite;
	
	/* Default font */
	font-family: "Avenir Next LT W01 Light", Helvetica, Arial, sans-serif; 
}

/* Headings, links
--------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	/* Apply crossfades */
	animation: crossfade-foreground 80s infinite;
	/* Set font-family / font-weight */
	font-weight: normal;
	font-style: normal;
	font-family: "Avenir Next LT W01 Bold";
}


h1 {
	font-size: 2rem;
	margin-block-start: 1rem;
	margin-block-end: 1rem;
}

h2 {
	font-size: 1.77rem;
	margin-block-start: 1rem;
	margin-block-end: 1rem;
}

h3 {
	font-size: 1.6rem;
	margin-block-start: 1rem;
	margin-block-end: 1rem;
}

h4 {
	font-size: 1.47rem;
	margin-block-start: 1rem;
	margin-block-end: 1rem;
}

h5 {
	font-size: 1.37rem;
	margin-block-start: 1rem;
	margin-block-end: 1rem;
}


b {
	font-weight: normal;
	font-style: normal;
	font-family: "Avenir Next LT W01 Bold";
}

strong {
	font-weight: normal;
	font-style: normal;
	font-family: "Avenir Next LT W01 Bold";
}

i {
	font-weight: normal;
	font-style: normal;
	font-family: "Avenir Next LT W01 Light Itali";
}

em {
	font-weight: normal;
	font-style: normal;
	font-family: "Avenir Next LT W01 Light Itali";
}

b i {
	font-weight: normal;
	font-style: normal;
	font-family:"Avenir Next LT W02 Bold Italic";
}

b em {
	font-weight: normal;
	font-style: normal;
	font-family:"Avenir Next LT W02 Bold Italic";
}

strong i {
	font-weight: normal;
	font-style: normal;
	font-family:"Avenir Next LT W02 Bold Italic";
}

strong em {
	font-weight: normal;
	font-style: normal;
	font-family:"Avenir Next LT W02 Bold Italic";
}

i b {
	font-weight: normal;
	font-style: normal;
	font-family:"Avenir Next LT W02 Bold Italic";
}

i strong {
	font-weight: normal;
	font-style: normal;
	font-family:"Avenir Next LT W02 Bold Italic";
}

em b {
	font-weight: normal;
	font-style: normal;
	font-family:"Avenir Next LT W02 Bold Italic";
}

em strong {
	font-weight: normal;
	font-style: normal;
	font-family:"Avenir Next LT W02 Bold Italic";
}

.wp-block-button__link {
	font-family: "Avenir Next LT W01 Demi";
}

div#page a {
	/* Apply crossfades */
	animation: crossfade-foreground 80s infinite;
	font-weight: normal;
}

/* The is the main layout and content area */
div#page {
	background-color: rgba(255,255,255,1);
	width: 90%;
	max-width: 1200px;
	margin: 50px auto 0 auto;
	padding: 25px 5%;
	box-shadow: 0px 0px 18px 6px rgba(0,0,0,0.25);
}

/* Unlike the <header>, our layout places the footer OUTSIDE of the #page.site element. This is because we want to fill it from edge to edge with a different colour and not have to override the margins and paddings of the#page.site box to do it */
footer#colophon {
	background-color: rgba(51, 51, 51, 1);
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 3% 5%;
	box-shadow: 0px 12px 18px 6px rgba(0,0,0,0.25);
}

/* Layout the elements
--------------------------------------------- */

/* …for those that need it; we get a lot of things for free from new WordPress Gutenberg scheme */

/* SVG LOGO Style the group of the letters in the SVG */
#logotype {
	animation: crossfade-background 80s infinite;
}

.site-footer-formatter #logotype {
	animation: none;
	fill: #fff; /* We're filling SVG so we use 'fill' not 'background-color' */
}

.site-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 15px;
	
	border-bottom: 1px solid #eee;
}

.site-footer-formatter {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 15px;
}

.site-footer-formatter .shiftnav-toggle.shiftnav-toggle-button {
	animation: none;
	color: white;
}

.site-branding {
	width: 300px;
}

.main-navigation {
	margin-top: -6px;
}

/* Styles to support Testimonial blocks */
.block--testimonial {
	padding: 0 1em;
	margin-bottom: 1em;
	border: 1px solid transparent;
	animation: crossfade-outline 80s infinite;
}

/* Style Client entries in Who we do stuff for */
#post-30 .entry-content > h5 {
	animation: none !important;
	color: #ccc;
	font-size: .8rem;
	font-family: "Avenir Next LT W01 Light";
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 1px solid #eee;
	margin-bottom: 0;
}

#filter-panel {
	border-bottom: 1px solid #eee;
}

#filter-panel p {
	margin-bottom: 1rem;
}

a.filter {
	display: block;
	animation: crossfade-foreground-outline 80s infinite !important;
	border: 1px solid;
	border-radius: 1.25rem;
	color: white;
	text-align: center;
	text-decoration: none;
}

div.featured {
	/* display: grid;
	grid-template-columns: repeat(auto-fit,minmax(200px, calc(25% - 1rem)));
	gap: 1rem; */
	display: flex;
	gap: 1rem;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
}

.client.featured {
	background-color: aliceblue;
	padding: 0 1rem;
	min-height: 10rem;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: 33%;
	text-decoration: none;
}

.client.featured h3 {
	animation: none !important;
	color: #404040 !important;
	line-height: 1.25;
	text-decoration: none;
}

.featured p a {
	animation: none !important;
	color: #404040 !important;
	text-decoration: underline;
}

div.clients {
	columns: 3 auto;
	column-rule: 1px solid #eeeeee;
}

div.client-normal {
	margin-bottom: 1rem;
}

.client-normal a {
	animation: none !important;
	color: #404040 !important;
	text-decoration: none;
}

/* Footer display styling */
.footer-post-display p {
	color: #666;
}

.footer-post-display .wp-block-columns {
	margin: 1em 0;
}

.footer-post-display .wp-block-column {
	display: flex;
	flex-direction: row;
}

/* Style the logo inserted as regular image and linked. It comes out in HTML inside a 'figure' element */
.footer-post-display .wp-block-column figure {
	margin: 0 1em;
}

/* Style social media links in footer */
/* Make the icons be white */
.wp-block-getwid-social-links__link {
	animation: none;
	color: white !important;
}

.has-icons-framed .wp-block-getwid-social-links__wrapper {
	border: 2px solid;
	border-radius: 50%;
	padding: .5em;
}

/* Menu elements */
/* Override some Menu styles from the ShiftNav plugin. Doing here so I don't have to maintain in another plugin dependent stylesheet */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item.current-menu-item > .shiftnav-target, .shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item ul.sub-menu .current-menu-item .shiftnav-target {
	color: rgba(255,255,255,1);
	background-color: rgba(255,255,255,1);
	font-weight: normal !important;
	border-top: none !important;
	border-left: 10px solid white;
	animation: crossfade-foreground-outline 80s infinite;
}

.shiftnav-panel-close {
	align-items: center;
	justify-content: center;
}

.fa-times:before {
	font-family: "Avenir Next LT W01 Bold" !important;
	content: "×" !important;
}

.shiftnav-tagline {
	text-decoration: none;
	border-left: 10px solid transparent;
}

.email.shiftnav-tagline {
	padding-bottom: 0 !important;
}

.telephone.shiftnav-tagline {
	padding: 0 !important 25px 15px 25px;
}

.shiftnav-tagline i.fa {
	display: block;
	height: 2rem;
	width: 2rem;
	text-align: center;
	line-height: 1.1;
	font-size: 1rem !important;
	padding: 0.25rem;
	border: 2px solid;
	border-radius: 50%;
	margin-left: 0 !important;
}

.shiftnav-tagline i.fa.fa-phone {
	line-height: 1.25;
}

.shiftnav-target {
	font-weight: normal;
	font-style: normal;
	font-family: "Avenir Next LT W01 Bold";
	font-size: 1.3rem;
	line-height: 1 !important;
	border-left: 10px solid transparent;
}

.shiftnav-target .menu-note {
	font-weight: normal;
	font-style: normal;
	font-family: "Avenir Next LT W01 Light";
	font-size: 1rem;
}

/* Make the menu toggle button be one size so it doesn't jump on hover */
.shiftnav-toggle.shiftnav-toggle-button.wp-block-button__link {
	padding: 10px 15px;
}

/* Style the 'Call the Question' cover image title on /podcast */
.post-32 .wp-block-cover__inner-container h2 {
	font-size: 3.5rem !important;
	/* text-shadow: 2px 2px 10px rgba(0,0,0,0.5); */
	text-shadow: 0 0rem 2.25rem black;
	animation: none !important;
	color: white;
}

/* SLIDER */
/* Position and area of text content overlay in the slider */
.wp-block-getwid-media-text-slider-slide__content {
	padding: 4rem 5rem;
}

/* Heading set at H2 */
/* reposition the arrows vertically to centre */
button.slick-prev,
button.slick-next {
	top: calc(50% - 14px);
}

.wp-block-getwid-media-text-slider-slide-content__content-wrapper h2 {
	animation: none;
	color: white;
	font-family: "Avenir Next LT W01 Light" !important;
	font-size: 3rem;
	margin-bottom: 0;
	/* Adjust the left-hand margin because of font size difference the line is always indented a little too much */
	margin-left: -5px;
	/* Adjust the right-hand margin if right-aligned because of font size difference the line is always indented a little too much */
	margin-right: -5px;
	text-shadow: 0 0rem 2.25rem black;
}

/* Subhead/text defaults to a <p> tag here */
.wp-block-getwid-media-text-slider-slide-content__content-wrapper p {
	font-family: "Avenir Next LT W01 Light" !important;
	font-size: 1.75rem;
	margin: -1rem 0 0 0;
	text-shadow: 0 0rem 0.75rem black;
}

/* Who we are */
.post-27 h2 {
	font-size: 28px;
	margin-top: -0.75rem;
	margin-bottom: 0;
}

.post-27 h3 {
	margin-top: 0;
	margin-bottom: 0;
	font-family: "Avenir Next LT W01 Light" !important;
}

.post-27 .wp-block-media-text .wp-block-media-text__content {
	padding: 0 4%;
}

.post-27 .wp-block-media-text {
	margin-bottom: 2rem;
}


.cycle-background {
	background-color: white;
	animation: crossfade-background 80s infinite;
	/* padding: 2px; */
}

.cycle-outline {
	border: 2px solid transparent;
	animation: crossfade-outline 80s infinite;
}

figure {
	/* inherits the line-height and can be too heigh for the <img> inside. Set the line-hight to 0 to prevent unwanted height  */
	line-height: 0;
}

/* Utility classes for refining text styles and other details */
.styling--section-label {
	color: #999;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: .8rem;
	font-family:  "Avenir Next LT W01 Light";
	border-bottom: 1px solid #eee;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

/* Re-scale paragraph font sizing from Gutenberg Editor */
.has-huge-font-size {
	font-size: 2.25rem;
}

.has-large-font-size {
	font-size: 2rem;
}

.has-medium-font-size {
	font-size: 1.75rem;
	margin-bottom: 0;
}

.has-medium-font-size + .wp-block-buttons {
	margin-bottom: 1.5rem;
}

/* Matches unclassed P tags and both Normal and Default classed p tags in Gutenberg editor */
p,
.has-normal-font-size {
	font-size: 1.25rem;
}

.has-small-font-size {
	font-size: 1rem;
}