/* Add Byrd font */
@font-face {
	font-family: Byrd-Bold;
	src: url(https://dillati.me/wp-content/uploads/custom_fonts/Byrd-Bold.woff);
	font-weight: bold;
}

/* Add Lato font */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');

:root {
	--wp--preset--font-family--body-font: "Lato", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;
	--wp--preset--font-family--heading-font: "Byrd-Bold", "Lato", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;
}
 
body,
.wp-block {
	--wp--preset--font-family--body-font: "Lato", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important; 
    --wp--preset--font-family--heading-font: "Byrd-Bold", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;
}

/* Use Byrd Bold on Headings */
.wp-site-blocks {
	--wp--preset--font-family--heading-font: "Byrd-Bold", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important; 
	padding-bottom: 0 !important;
}

/* Set Heading Fonts */
h1, h2, h3, h4, h5, h6,
.has-header-font,
.has-byrd-font,
.wp-block-button__link,
.buy-book .wp-block-image > figcaption {
	--wp--preset--font-family--heading-font: "Byrd-Bold", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important; 
	font-family: var(--wp--preset--font-family--heading-font) !important;
}

.entry-content a { 
	text-decoration: none;
	font-weight: 800;
}

.entry-content a:hover {
	color: var(--wp--preset--color--tertiary);
}

/* Outer Wrapper */
.wp-site-blocks {
    padding: var(--wp--custom--gap--horizontal);
}

/* MPC Header */
@media screen and (max-width: 799px) and (orientation: portrait) {
	.wp-site-blocks .site-header.mpc-header {
		background: #000;
		padding: 1em;
		height: auto;
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
		gap: 1em 1em;
		grid-auto-flow: row;
		justify-content: stretch;
		align-content: stretch;
		justify-items: center;
		align-items: center;
		grid-template-areas:
			"branding grid"
			"swing detroit"
			"book dilla"
			"author guide"
			"tagline tagline"
			"quotes quotes"
			"buy-book buy-book";
	}
}

@media screen and (min-width: 800px),
		screen and (orientation: landscape) {
.wp-site-blocks .site-header.mpc-header {
		background: #000;
		padding: 1em;
		height: auto;
		width: calc(100vw - 60px);
		max-width: 772px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		gap: 1em 1em;
		grid-auto-flow: row;
		justify-content: stretch;
		align-content: stretch;
		justify-items: center;
		align-items: center;
		grid-template-areas:
			"branding grid swing detroit"
			"book dilla author guide"
			"tagline tagline buy-book buy-book"
			"quotes quotes buy-book buy-book";
	}
}

/* MPC Header Small */
.wp-site-blocks .site-header.mpc-header.mpc-header-small {
    grid-template-rows: 1fr 1fr;
		grid-template-areas:
			"branding grid swing detroit"
			"book dilla author guide" !important;
}

@media screen and (max-width: 799px) and (orientation: portrait) {
	.wp-site-blocks .site-header.mpc-header.mpc-header-small {
		grid-template-areas:
			"branding grid"
			"swing detroit"
			"book dilla"
			"author guide" !important;
	}
}

/* MPC Footer */
.wp-site-blocks .site-header.mpc-header.mpc-footer {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "branding credit credit credit" !important;
    gap: inherit;
}

@media screen and (max-width: 799px) and (orientation: portrait) {
.wp-site-blocks .site-header.mpc-header.mpc-footer {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "branding"
			"credit" !important;
	}
}

.site-footer-container p {
    margin-top: 0.5em;
		line-height: 1.2;
}

/* MPC Header Grid */

.branding { grid-area: branding; }
.grid { grid-area: grid; }
.swing { grid-area: swing; }
.detroit { grid-area: detroit; }
.book { grid-area: book; }
.dilla { grid-area: dilla; }
.author { grid-area: author; }
.guide { grid-area: guide; }
.tagline { grid-area: tagline; }
.quotes { 
    grid-area: quotes;
	flex-direction: column; 
}
.buy-book { grid-area: buy-book; }

.wp-site-blocks .site-header.mpc-header > .wp-block-group,
.wp-site-blocks .site-header.mpc-header > .wp-block-group > .has-header-font,
.wp-site-blocks .site-header.mpc-header > .wp-block-group > .has-header-font a,
.wp-site-blocks .site-header.mpc-header > .wp-block-group.tagline p, .wp-site-blocks .site-header.mpc-header > .wp-block-group.tagline > p > a {
  align-items: center;
	justify-content: center;
	background: #424242;
	display: flex;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 2;
}

@media screen and (max-width: 799px) and (orientation: portrait) {
	.wp-site-blocks .site-header.mpc-header > .wp-block-group:not(.buy-book),
	.wp-site-blocks .site-header.mpc-header > .wp-block-group > .has-header-font,
	.wp-site-blocks .site-header.mpc-header > .wp-block-group > .has-header-font a,
	.wp-site-blocks .site-header.mpc-header > .wp-block-group.tagline p, 
	.wp-site-blocks .site-header.mpc-header > .wp-block-group.tagline > p > a {
		height: calc(50vw - 3rem);
	}
}

/* Header font */ 
.wp-site-blocks .site-header.mpc-header > .wp-block-group > .has-header-font {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.125;
	text-transform: uppercase;
	aspect-ratio: 1;
}

@media screen and (min-width: 800px),
		screen and (orientation: landscape) {
	.wp-site-blocks .site-header.mpc-header > .wp-block-group > .has-header-font {
		font-size: 20px;
	}
}

.wp-site-blocks .site-header.mpc-header > .wp-block-group > .has-header-font a {
	padding: 1.25em;
}

.wp-site-blocks .site-header.mpc-header > .wp-block-group > .has-header-font a:hover,
.wp-site-blocks .site-header.mpc-header > .wp-block-group.tagline p > a:hover,
.wp-site-blocks .site-header.mpc-header > .wp-block-group.quotes:hover {
	background: #929292;
	color: #000000;
	text-decoration: none;
}

/* Site Header */
.wp-site-blocks .site-header.mpc-header > .wp-block-group > .wp-block-site-title  > a,
.wp-site-blocks .site-header.mpc-header > .wp-block-group > .wp-block-site-title > a:hover {
	color: #ffffff;
	background: #000000;
}

.wp-site-blocks .site-header.mpc-header > .wp-block-group.tagline p {
	font-family: var(--wp--preset--font-family--heading-font);
	color: #ffffff;
}

/* Tagline */
.wp-site-blocks .site-header.mpc-header > .wp-block-group.tagline p > a {
	padding: 1.75em;
}

.wp-block-group.tagline:after {
    content: "";
    height: 6.25%;
    width: 1em;
    background: #000;
    position: absolute;
    z-index: 1;
    -webkit-animation: 2.5s ease 0s normal forwards 1 fadeOut;
    animation: 2.5s ease 0s normal forwards 1 fadeOut;
}

@media screen and (min-width: 800px),
	screen and (orientation: landscape) {
		.wp-block-group.tagline:after {
			height: 25%;
		}
}

.wp-site-blocks .site-header.mpc-header > .wp-block-group.tagline  {
	aspect-ratio: 2.25 / 1;
}

/* Quotes */
.wp-block-group.quotes:after {
	content: "";
	height: 6.25%;
	width: 1em;
	background: #000;
	position: absolute;
	z-index: 1;
	-webkit-animation: 3s ease 0s normal forwards 1 fadeOut;
	animation: 3s ease 0s normal forwards 1 fadeOut;
}

@media screen and (min-width: 800px),
	screen and (orientation: landscape) {
		.wp-block-group.quotes:after {
			height: 25%;
		}
}

.wp-block-group.quotes .wp-block-quote {
	border: none;
	padding-left: 0;
}

.wp-site-blocks .site-header.mpc-header > .wp-block-group.quotes {
	aspect-ratio: 2.25 / 1;
}

.wp-site-blocks .site-header.mpc-header > .wp-block-group.quotes:hover a,
.wp-site-blocks .site-header.mpc-header > .wp-block-group.quotes:hover p,
.wp-site-blocks .site-header.mpc-header > .wp-block-group.quotes:hover cite {
	color: #000;
	text-decoration: none;
}

.wp-site-blocks .site-header.mpc-header > .wp-block-group.quotes p {
	font-family: var(--wp--preset--font-family--heading-font);
	line-height: 1.2 !important;
	text-transform: none;
	margin-top: 0;
	margin-bottom: 0;
}

.wp-site-blocks .site-header.mpc-header > .wp-block-group.quotes .swiper-slide-duplicate .wp-block-quote {
	opacity: 1 !important;
	visibility: visible !important;
	transform: scaleX(1) scaleY(1) rotateZ(0deg) rotateX(0deg) rotateY(0deg) skewX(0deg) skewY(0deg) translateX(0px) translateY(0px) !important;
}

/* Gutenslider customization */
:root {
	--slide-min-width: 200%;
}

.wp-site-blocks .site-header.mpc-header .wp-block-quote p,
.wp-site-blocks .site-header.mpc-header .wp-block-quote {
	margin: 0;
	color: #ffffff;
}

/* About The Book Styles */
@media screen and (max-width: 599px) and (orientation: portrait) {
	.the-book.wp-block-media-text .wp-block-media-text__media,
	.the-book.wp-block-media-text .wp-block-media-text__content {
		padding: 0;
	}
}

/* Praise Styles */
@media screen and (max-width: 599px) and (orientation: portrait) {
	.praise .wp-block-media-text .wp-block-media-text__media,
	.praise .wp-block-media-text .wp-block-media-text__content {
		padding: 0 8%;
	}
}

/* Author Styles */
@media screen and (max-width: 599px) and (orientation: portrait) {
	.author.wp-block-media-text .wp-block-media-text__media,
	.author.wp-block-media-text .wp-block-media-text__content {
		padding: 0;
	}
}

/* Buy Book */

.buy-book:before {
    content: "";
    height: 1em;
    width: 100%;
    background: #000;
    position: absolute;
    z-index: 1;
    -webkit-animation: 3.5s ease 0s normal forwards 1 fadeOut;
    animation: 3.5s ease 0s normal forwards 1 fadeOut;
}

.buy-book:after {
    content: "";
    height: 25%;
    width: 1em;
    background: #000;
    position: absolute;
    z-index: 1;
    -webkit-animation: 3.5s ease 0s normal forwards 1 fadeOut;
    animation: 3.5s ease 0s normal forwards 1 fadeOut;
}

@media screen and (min-width: 800px),
	screen and (orientation: landscape) {
		.buy-book:before {
			width: 50%;
		}
		.buy-book:after {
			height: 50%;
		}
}

.buy-book .wp-block-image {
	z-index: 10;
}

.buy-book .wp-block-image > a {
	padding: 2rem;
	display: flex;
	background: #ffffff;
}

.buy-book .wp-block-image {
	position: relative;
}

.buy-book .wp-block-image > figcaption {
	position: absolute;
	left: 1rem;
	top: 1rem;
	display: block;
	line-height: 1;
	width: calc(100% - 2rem);
	height: calc(100% - 2rem);
	margin: 0;
    text-align: left;
}

.buy-book .wp-block-image > figcaption > a {
	color: #000000;
	text-transform: uppercase;
}

.buy-book .wp-block-image > figcaption > a[href*="linktr.ee"] {
	position: absolute;
	right: 0;
	bottom: 0;
}

.buy-book .wp-block-image > figcaption > a:hover {
	color: #424242;
	text-decoration: none;
}

/* Back to Top link */

.back-to-top {
    position: fixed;
    right: 1em;
    bottom: 1em;
    margin: 0;
		z-index: 999;
}

.back-to-top a {
	display: block;
}

.back-to-top a:focus {
	outline: none !important;
}

/* Button Block Styles */
.wp-block-button__link {
	line-height: 1;
}

/* FigCaption */
figcaption {
	font-size: 16px;
}

/* Mailchimp form */
#mc4wp-form-1 {
	padding: 0 8%;
}

#mc4wp-form-1 .mc4wp-form-input {
    background-color: #ffffff;
    width: 100%;
}

#mc4wp-form-1 .mc4wp-form-label {
	visibility: hidden;
  position: absolute;
}

/* Reading Guide */

.c-accordion__title:after {
	color: var(--wp--preset--color--tertiary);
}

.c-accordion__content {
	padding-left: 1rem;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html{
    scroll-behavior: auto;
  }
}

/* offset of 100 pixels for any element with an ID attribute */

*[id] {
    scroll-margin-top: 100px
}

@keyframes fadeOut {
    0% { opacity:1; }
    66% { opacity:.66; }
    100% { opacity:0; }
}

@-webkit-keyframes fadeOut {
    0% { opacity:1; }
    66% { opacity:.66; }
    100% { opacity:0; }
}