/*
Theme Name: MOTOBLOT
Theme URI: https://motoblot.com
Author: Don Schnitzius
Author URI: https://donschnitzius.com
Description: Custom block theme for MOTOBLOT. Based on Shindig Progression and customized by Mariano Orell.
Version: 0.9.0
Requires at least: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: motoblot
*/

/* **** */
/* ROOT */
/* **** */

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

img,
picture {
	max-width: 100%;
}

img {
	height: auto;
}

picture img {
	display: block;
	width: 100%;
}

.wp-block-image img.wp-image-8760,
.wp-block-image img.wp-image-1797 {
	vertical-align: unset;
}

.wp-site-blocks>*+* {
	margin-block-start: 0;
}

html {
	--mb-site-header-height: 3.75rem;

	scroll-padding-top: calc(var(--mb-site-header-height) + var(--wp--admin--admin-bar--height, 0px));
}

@media (max-width: 47.999rem) {
	html {
		--mb-site-header-height: 4rem;
	}
}

/* ****** */
/* HEADER */
/* ****** */

.site-header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	background-color: var(--wp--preset--color--mb-black);
	box-shadow: 1px 1px 1px rgb(255 255 255 / 10%);
}

body.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (min-width: 48rem) {

	.site-header,
	.site-header .wp-block-navigation {
		min-height: var(--mb-site-header-height);
	}

	.site-header .wp-block-navigation__container {
		gap: 0;
	}

	.site-header .wp-block-navigation .wp-block-navigation__container>.wp-block-navigation-item {
		background-color: transparent;
	}

	.site-header .wp-block-navigation .wp-block-navigation__container>.wp-block-navigation-item:hover,
	.site-header .wp-block-navigation .wp-block-navigation__container>.wp-block-navigation-item:focus-within {
		background-color: var(--wp--preset--color--mb-red);
	}

	.site-header .wp-block-navigation .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content {
		box-sizing: border-box;
		padding: 1.4375rem 0.625rem;
		color: var(--wp--preset--color--mb-white);
		font-family: var(--wp--preset--font-family--roboto-condensed);
		font-size: 0.875rem;
		font-weight: 400;
		letter-spacing: 0.0625rem;
		line-height: 1;
		text-decoration: none;
		text-transform: uppercase;
	}

	.site-header .wp-block-navigation .wp-block-navigation__container>.current-menu-item>.wp-block-navigation-item__content {
		box-shadow: inset 0 2px var(--wp--preset--color--mb-red);
	}

	.site-header .wp-block-navigation__submenu-icon {
		margin-inline: -0.375rem 0.5rem;
		color: var(--wp--preset--color--mb-white);
	}

	.site-header .wp-block-navigation-item__content:focus-visible,
	.site-header .wp-block-navigation__submenu-icon:focus-visible {
		outline: 2px solid var(--wp--preset--color--mb-white);
		outline-offset: -4px;
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
		inset-inline-start: 0;
		min-width: 12rem;
		padding: 0.875rem 0.75rem;
		border: 0;
		background-color: var(--wp--preset--color--mb-red);
		text-align: start;
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		margin-block: 0.1875rem;
		padding: 0.375rem 0.9375rem;
		color: var(--wp--preset--color--mb-white);
		font-family: var(--wp--preset--font-family--roboto-condensed);
		font-size: 0.8125rem;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1;
		text-decoration: none;
		text-transform: none;
		white-space: nowrap;
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}
}

@media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
	.site-header .wp-block-navigation .wp-block-navigation__container>.wp-block-navigation-item {
		transition: background-color 0.1s linear;
	}
}

@media (min-width: 60rem) {
	.site-header .wp-block-navigation .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content {
		padding-inline: 1rem;
	}

	.site-header .wp-block-navigation__submenu-icon {
		margin-inline: -0.625rem 0.8125rem;
	}
}

@media (min-width: 75rem) {
	.site-header .wp-block-navigation .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content {
		padding-inline: 1.25rem;
	}

	.site-header .wp-block-navigation__submenu-icon {
		margin-inline: -0.875rem 1rem;
	}
}

@media (max-width: 47.999rem) {
	.site-header {
		min-height: var(--mb-site-header-height);
		padding-inline: 0;
		box-shadow: inset 0 -1px #444;
	}

	body.admin-bar .site-header {
		top: 46px;
	}

	.site-header .wp-block-navigation {
		justify-content: center;
		width: 100%;
		min-height: var(--mb-site-header-height);
	}

	.site-header .wp-block-navigation .wp-block-navigation__responsive-container-open,
	.site-header .wp-block-navigation .wp-block-navigation__responsive-container-close {
		align-items: center;
		justify-content: center;
		width: 2.625rem;
		height: 2.625rem;
		padding: 0;
		border: 2px solid #666;
		background-color: var(--wp--preset--color--mb-black);
		color: #999;
	}

	.site-header .wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: flex;
	}

	.site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		inset: 0 0 auto;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		min-height: 0;
		padding: 0;
		overflow: hidden;
		background: var(--wp--preset--color--mb-black) !important;
		animation: none;
	}

	body.admin-bar .site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		height: calc(100vh - 46px);
		height: calc(100dvh - 46px);
		max-height: calc(100vh - 46px);
		max-height: calc(100dvh - 46px);
	}

	.site-header .wp-block-navigation__responsive-close,
	.site-header .wp-block-navigation__responsive-dialog {
		width: 100%;
		height: 100%;
	}

	.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		margin-top: 0;
	}

	.site-header .wp-block-navigation .wp-block-navigation__responsive-container-close {
		position: absolute;
		inset-block-start: 0.6875rem;
		inset-inline-start: 50%;
		inset-inline-end: auto;
		transform: translateX(-50%);
		display: flex;
	}

	.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		position: relative;
		display: block;
		height: 100%;
		padding: 0;
		gap: 0;
		overflow: hidden;
	}

	.site-header .wp-block-navigation .wp-block-navigation__responsive-container-content>.wp-block-navigation__container {
		position: absolute;
		inset: var(--mb-site-header-height) 0 0;
		align-items: stretch;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		width: 100%;
		height: auto;
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--wp--preset--color--mb-black);
		box-shadow: inset 0 1px #444;
		touch-action: pan-y pinch-zoom;
	}

	.site-header .wp-block-navigation .wp-block-navigation__container>.wp-block-navigation-item {
		align-items: stretch;
		flex-wrap: wrap;
		width: 100%;
		margin-block: 0;
	}

	.site-header .wp-block-navigation .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex: 1;
		min-height: 3rem;
		padding: 0.5rem 1.5rem;
		border-block-end: 1px solid rgb(255 255 255 / 10%);
		color: var(--wp--preset--color--mb-white);
		font-family: var(--wp--preset--font-family--roboto-condensed);
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.6;
		text-decoration: none;
		text-transform: none;
	}

	.site-header .wp-block-navigation .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content:is(:hover, :focus-visible, :active) {
		background-color: var(--wp--preset--color--mb-red);
		color: var(--wp--preset--color--mb-white);
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
		position: static;
		width: 100%;
		min-width: 0;
		padding: 0 !important;
		border: 0;
		gap: 0 !important;
		background: rgb(255 255 255 / 7%) !important;
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
		margin: 0;
		gap: 0;
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 3rem;
		margin: 0;
		padding: 0.5rem 1.5rem 0.5rem 2.25rem !important;
		border-block-end: 1px solid rgb(255 255 255 / 10%);
		color: var(--wp--preset--color--mb-white);
		font-family: var(--wp--preset--font-family--roboto-condensed);
		font-size: 0.875rem;
		font-weight: 400;
		line-height: 1.4;
		text-decoration: none;
		white-space: normal;
	}

	.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible, :active) {
		background-color: var(--wp--preset--color--mb-red);
		color: var(--wp--preset--color--mb-white);
	}

	.site-header .wp-block-navigation-item__content:focus-visible,
	.site-header .wp-block-navigation button:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -4px;
	}
}

/* *********** */
/* PAGE HEADER */
/* *********** */

.page-header {
	position: relative;
	isolation: isolate;
	min-height: 18rem;
	overflow: hidden;
	background-color: var(--wp--preset--color--mb-black);
}

.page-header .page-header__image {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
}

.page-header .page-header__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.page-header .page-header__title-box {
	position: absolute;
	inset-block-start: calc(50% + var(--mb-site-header-height) / 2);
	inset-inline-start: 50%;
	width: max-content;
	max-width: calc(100% - 3rem);
	margin: 0;
	padding: 0.5rem 1rem;
	transform: translate(-50%, -50%);
	background-color: var(--wp--preset--color--mb-black);
	text-align: center;
}

.page-header .page-header__title-box> :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	color: var(--wp--preset--color--mb-background);
	font-size: 3.125rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
}

.page-breadcrumbs {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	width: calc(100% - 3rem);
	max-width: 71.25rem;
	transform: translateX(-50%);
	color: var(--wp--preset--color--mb-background);
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.0625rem;
	line-height: 1.2;
	text-align: start;
	text-transform: uppercase;
}

.page-breadcrumbs__list {
	display: inline-block;
	margin: 0;
	padding: 1.25rem;
	background-color: rgb(0 0 0 / 20%);
	list-style: none;
}

.page-breadcrumbs__list li {
	display: inline;
	margin: 0;
	padding: 0;
}

.page-breadcrumbs__list li:not(:last-child)::after {
	margin-inline: 0.625rem 0.4375rem;
	color: #bbb;
	content: "/";
}

.page-breadcrumbs__list a {
	color: var(--wp--preset--color--mb-background);
	text-decoration: none;
}

.page-breadcrumbs__list a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--mb-white);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.page-breadcrumbs__home-icon {
	width: 0.875rem;
	height: 0.875rem;
	fill: currentColor;
	vertical-align: -0.125rem;
}

@media (max-width: 47.999rem) {
	.page-header {
		min-height: 16rem;
	}

	.page-header .page-header__title-box> :is(h1, h2, h3, h4, h5, h6) {
		font-size: 1.5rem;
	}
}

/* ****** */
/* FOOTER */
/* ****** */

.site-footer__newsletter p {
	font-size: 1.25rem !important;
	text-wrap: balance;
	text-wrap: pretty;
}

.footer-signup {
	max-width: 34rem;
	margin-inline: auto;
}

.footer-signup__controls {
	display: flex;
	padding-block-end: 1.25rem;
	border-block-end: 1px solid var(--wp--preset--color--mb-red);
}

.footer-signup input,
.footer-signup button {
	box-sizing: border-box;
	min-height: 2.375rem;
	padding: 0.375rem 0.75rem;
	border: 1px solid #ced4da;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-size: 1rem;
	line-height: 1.5;
}

.footer-signup input {
	min-width: 0;
	flex: 1 1 auto;
	border-start-start-radius: 0.25rem;
	border-end-start-radius: 0.25rem;
	color: var(--wp--preset--color--mb-black);
	background-color: var(--wp--preset--color--mb-background);
}

.footer-signup button {
	margin-inline-start: -1px;
	border-color: var(--wp--preset--color--mb-red);
	border-start-end-radius: 0.25rem;
	border-end-end-radius: 0.25rem;
	color: var(--wp--preset--color--mb-white);
	background-color: var(--wp--preset--color--mb-red);
	font-weight: 700;
	cursor: pointer;
}

.footer-signup button:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--mb-black);
	background-color: var(--wp--preset--color--mb-red-on-black);
}

.footer-signup :is(input, button):focus-visible {
	position: relative;
	z-index: 1;
	outline: 2px solid var(--wp--preset--color--mb-white);
	outline-offset: 2px;
}

.site-footer__contact a {
	color: var(--wp--preset--color--mb-red);
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}

.site-footer__contact a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--mb-red-on-black);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ******* */
/* BUTTONS */
/* ******* */

.wp-block-button .wp-block-button__link,
.wpcf7-form input.wpcf7-submit {
	box-sizing: border-box;
	padding-block-start: calc(1.375rem + 0.1em);
	padding-block-end: 1.375rem;
	padding-inline: 1.5rem;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--bebas-neue);
	font-size: 2rem;
	font-weight: 400;
	line-height: 0.8;
	text-align: center;
	text-transform: uppercase;
}

.wp-block-button .wp-block-button__link:not(.has-text-color),
.wpcf7-form input.wpcf7-submit:not(.has-text-color) {
	color: var(--wp--preset--color--mb-white);
}

.wp-block-button .wp-block-button__link:not(.has-background),
.wpcf7-form input.wpcf7-submit:not(.has-background) {
	background-color: var(--wp--preset--color--mb-red);
}

.wp-block-button .wp-block-button__link:is(:hover, :active, :focus-visible),
.wpcf7-form input.wpcf7-submit:is(:hover, :active, :focus-visible) {
	background-color: var(--wp--preset--color--mb-red-on-black);
	color: #000;
	text-decoration: none
}

.wp-block-button .wp-block-button__link:focus-visible,
.wpcf7-form input.wpcf7-submit:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.wp-block-button.is-style-large .wp-block-button__link {
	font-size: clamp(2rem, calc(1.23rem + 2.8vw), 3.75rem);
}

.wp-block-button.is-style-slim .wp-block-button__link {
	padding-block-start: calc(0.625rem + 0.1em);
	padding-block-end: 0.625rem;
	padding-inline: 0.75rem;
	font-size: 1.75rem;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	display: block;
	width: 100%;
	padding-block-start: calc(1rem + 0.1em);
	padding-block-end: 1rem;
	padding-inline: 1.5rem;
	border: 3px solid var(--wp--preset--color--mb-red);
	color: var(--wp--preset--color--mb-red);
	background-color: transparent;
	font-size: 1.75rem;
}

.wp-block-button.is-style-outline .wp-block-button__link:is(:hover, :active, :focus-visible),
.wp-block-button .wp-block-button__link.is-style-outline:is(:hover, :active, :focus-visible) {
	color: var(--wp--preset--color--mb-white);
	background-color: var(--wp--preset--color--mb-red);
}

/* ***** */
/* LISTS */
/* ***** */

.wp-block-list.is-style-spaced>li+li {
	margin-block-start: var(--wp--preset--spacing--8);
}

/* ***** */
/* LINKS */
/* ***** */

body a img,
body a {
	text-decoration: none
}

body :is(p, :is(h1, h2, h3, h4, h5, h6):not(li *)) a:is(:hover, :focus-visible) {
	text-decoration: underline
}

a,
.social-ico i {
	transition-duration: .2s;
	transition-property: color, background-color, opacity, border;
	transition-timing-function: ease-in-out
}

/* *************** */
/* CONTACT 7 FORMS */
/* *************** */

span.required {
	color: #da5454
}

.wpcf7 input,
.wpcf7-select,
.wpcf7 textarea,
#respond input,
#respond textarea,
.post-password-form input {
	background-color: #fff;
	border-radius: 0.25rem;
	border: 2px solid #dedede;
	color: var(--wp--preset--color--mb-black);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	margin-top: 0.25rem;
	padding: 0.5rem;
	width: calc(100% - 1rem);
}

.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
	border-color: var(--wp--preset--color--mb-red);
	background: #fbe8e8
}

.wpcf7-not-valid-tip {
	color: var(--wp--preset--color--mb-red);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.25rem 0.5rem;
}

.wpcf7 input:focus,
#respond input:focus,
.wpcf7 textarea:focus,
#respond textarea:focus {
	border-color: var(--wp--preset--color--mb-black);
	outline: none;
}

.wpcf7-form input.wpcf7-submit {
	border: none;
	width: 100%;
}

.wpcf7-spinner {
	margin: 8px auto 0;
}

.wpcf7 form .wpcf7-response-output {
	margin: 0;
}

/* **** */
/* HOME */
/* **** */

.mb-see-you-at-mb .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* ************* */
/* PINUP CONTEST */
/* ************* */

.mb-past-pinup-winners img,
.mb-past-pinup-winners picture {
	width: 100%;
}

/* *************** */
/* ROADSHOW EVENTS */
/* *************** */

.event-sponsors {
	padding: 0;
	list-style: none;
	text-align: center
}

.event-sponsors li {
	display: inline-block;
}

.event-sponsors li:first-of-type a {
	margin-left: 0
}

.event-sponsors li:last-of-type a {
	margin-right: 0
}

.event-sponsors a {
	display: block;
	padding: .2em .5em;
	margin: .25em;
	border: 1px solid #c54035;
	color: #333;
	font-size: 1rem
}

.event-sponsors a:active,
.event-sponsors a:focus,
.event-sponsors a:hover {
	color: #fff;
	background-color: #c54035;
	text-decoration: none
}

/* ******* */
/* UTILITY */
/* ******* */

@media (max-width: 599px) {
	.hidden-mobile {
		display: none;
	}

	.mb-home-photos {
		margin-top: 0;
	}
}

@media (min-width: 600px) {
	.hidden-desktop {
		display: none;
	}
}

.ds-1 {
	filter: drop-shadow(0px 0px 4px #000000) drop-shadow(0px 0px 5px #c5403566) drop-shadow(0px 0px 8px #00000099);
}

.has-mb-black-background-color {
	color: var(--wp--preset--color--mb-white)
}

.wp-block-post-excerpt__more-text {
	margin-block-start: var(--wp--preset--spacing--8);
}
