/*
@theme Name: Bradley
@Description: This site was built by Central States Marketing. For more information about the site or this custom WordPress theme, you can contact Central States Marketing at: info@centralstatesmedia.com or call us at: 309-693-2345.
@Author: Central States Marketing
@Author URI: http://www.centralstatesmarketing.com/
@Version: 1.0
@Date: October 2023
@charset "utf-8";
*/

/* ========== CSS Custom Properties ========== */
:root {
	--red: #CE1432;
	--blue: hsl(214, 50%, 76%);
	--white: #FFFFFF;
	--gray-bg: #F5F5F5;
	--gray-light: #D2D3D4;
	--gray-medium: #939598;
	--gray-dark: #5A5A5C;
	--black: #121212;
	
	--red-hover: #ac1a2c;

	--shadow: hsla(0, 0%, 0%, 0.3);

	--gutter: 2rem;
	--margin: 1rem;
	--max-w: 1500px;
	--max-ch: 70ch;

	--heading: 'Bebas Neue', sans-serif;
	--body: 'Lato', sans-serif;

	--xs: clamp(0.6rem, calc(0.56rem + 0vw), 0.7rem);
	--sm: clamp(0.8rem, calc(0.78rem + 0.08vw), 0.9rem);
	--base: clamp(1rem, calc(0.83rem + 0.21vw), 0.95rem);
	--md: clamp(1.2rem, calc(1rem + 0.4vw), 1.33rem);
	--lg: clamp(1.8rem, calc(1.26rem + 0.68vw), 1.78rem);
	--xl: clamp(2.25rem, calc(1.41rem + 1.1vw), 2.96rem);
	--xxl: clamp(2.6rem, calc(1.59rem + 1.6vw), 4.1rem);
	--jumbo: clamp(3.5rem, calc(1.71rem + 3.56vw), 6.21rem);
	--display: clamp(5rem, calc(2.1rem + 5.56vw), 8.21rem);
	--huge: clamp(8rem, calc(3.8rem + 12.51vw), 20.57rem);

	--transition: all 0.3s ease;
}

/* ========== Reset ========== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0;
	font-family: var(--body);
	background-color: var(--white);
	color: var(--black);
	scroll-behavior: smooth;
	scroll-padding-block-start: 83px;
}

img,
picture,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

input,
button,
textarea,
select {
	font: inherit;
}

figure {
	margin: 0;
}

a,
::after,
::before {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ========== Global Styles ========== */
[id] {
	scroll-margin-top: 100px;
}

:is(h1, h2, h3, h4, h5, h6) {
	--color: var(--black);
	font-family: var(--body);
	font-weight: 400;
	color: var(--color);
	padding: 0;
	margin: .5em 0;
}

h1 {
	--color: var(--red);
	font-size: var(--xxl);
	text-transform: uppercase;
	font-weight: bold;
}

h2 {
	--color: var(--red);
	font-size: var(--xl);
	font-family: var(--body);
	font-weight: 500;
}

h3 {
	--color: var(--red);
	font-size: var(--lg);
	font-family: var(--body);
	font-weight: 400;
}

h4 {
	font-size: var(--md);
	font-family: var(--body);
	font-weight: 500;
}

h5 {
	font-size: var(--md);
	font-family: var(--body);
	font-weight: 400;
	text-transform: uppercase;
}

h6 {
	font-size: var(--base);
	font-family: var(--body);
	font-weight: 700;
	text-transform: lowercase;
}

p {
	font-size: var(--md);
	line-height: 1.4;
}

hr {
	width: 100%;
	height: 1px;
	border: none;
	margin: 2rem 0;
	background-color: var(--gray-light);
}

main {
	position: relative;
}

main::before {
	content: '';
    background-image: url(images/logo-shield.svg);
    background-repeat: no-repeat;
    background-size: 90vh;
    background-position: top -10px left -30vmin;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0.085;
	pointer-events: none;
  	user-select: none;
 	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
	touch-action: none;
 	cursor: default; 
}

/* ========== Utils ========== */
.header.locked .header__logo--image {
	max-height: 80px;
	padding-block: 0.5rem;
}

.hide {
	display: none !important;
}

/* ========== Navigation ========== */
.header {
	z-index: 10000;
	position: sticky;
	top: 0;
	background-color: var(--red);
	color: var(--white);
	padding-inline: var(--gutter);
	box-shadow: 0 0 10px var(--shadow);
}

.header__wrapper {
	display: grid;
	grid-template-columns: 250px 1fr;
	align-items: center;
	justify-items: center;
	position: relative;
	gap: 1rem;
}
.header__logo--wrapper {
		max-width: 275px;
		width: 100%;
	}
@media (width <= 600px) {
	.header__wrapper {
		grid-template-columns: 1fr;
		gap: 0;
	}
	
}
@media (width > 600px) {
	.nav {
		justify-self: end;
	}
}

:is(.menu, .sub-menu) {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
}

.nav .menu-item {
	position: relative;
}

.nav .menu-item a {
	display: block;
	font-size: var(--base);
	color: var(--white);
	font-weight: 500;
	padding: 2rem 1rem;
	transition: none;
	text-transform: uppercase;
	text-decoration: none;
}
@media (width <= 600px) {
	.nav .menu-item a {
		padding: 1rem;
	}
}

.nav .menu-item:hover a {
	text-decoration: none;
	color: var(--red);
	background-color: var(--white);
}

.program__nav {
	display: flex;
	background-color: var(--gray-light);
	position: relative;
	width: 100%;
	z-index: 1000;
	box-shadow: 0 3px 6px var(--shadow);
}

.program__nav a {
	color: var(--black);
	text-transform: uppercase;
	font-size: var(--sm);
	flex: 0 0 auto;
	padding: 1rem calc(var(--gutter) / 2);
	width: max-content;
	text-decoration: none;
	display: block;
}

.program__nav .subnav {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	align-items: center;
}

.program__nav .subnav a {
    width: 100%;
}

@media (width >= 1100px) {
	.subnav li {
		position: relative;
	}
	.subnav a {
		display: block;
		padding: 1rem calc(var(--gutter) / 2);
	}
	.subnav > li:hover > a {
		background-color: var(--gray-medium);
	}
}
@media (width > 600px) {
	.program__nav .subnav {
		padding-inline-start: calc(var(--gutter) / 2);
	}
}
@media (width <= 600px) {
	.program__nav .subnav {
		justify-content: center;
	}
}

.page-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-block: 4rem;
}

.page-title img {
	max-height: 60px;
}

.page-title h1 {
	font-size: var(--xl);
	margin: 0;
}

.content {
	margin-left: auto;
    margin-right: auto;
    max-width: var(--tec-grid-width);
    width: 100%;
	padding-inline: var(--gutter);
}

.content .tribe-common-l-container {
	padding-block-start: 0 !important;;
}

.tribe-events-single {
	margin-block-start: 4rem;
}

.tribe-events-single .tribe-events-back {
	margin-block-end: 2rem;
}

/* ========== Footer ========== */
.footer {
	background-color: var(--gray-dark);
	padding: 4rem var(--gutter) 2rem;
	color: var(--white);
	font-size: var(--sm);
}

.footer__wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.footer__logo {
	width: clamp(120px, 15vw, 180px);
	height: 100%;
}

.footer__wrapper--center {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
}

.footer__address {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
}

.footer__socials {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	width: fit-content;
}

.footer__socials a {
	background-color: var(--black);
	border-radius: 50%;
	aspect-ratio: 1;
	height: 100%;
	height: 40px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

:is(.footer, .footer__bottom) a:not(.btn) {
	color: var(--white);
}

.footer__bottom {
	background-color: var(--gray-dark);
	color: var(--white);
	padding: 2rem var(--gutter);
	font-size: var(--xs);
	text-align: center;
}

.icon {
	width: 20px;
	height: 20px;
	background: var(--gray-medium);
	mask-size: contain;
	-webkit-mask-size: contain;
	transition: var(--transition);
}

.footer__socials a:hover .icon {
	background: var(--white);
}

.logo__x {
	mask: url('images/social-x.svg') no-repeat center / contain;
	-webkit-mask: url('images/social-x.svg') no-repeat center / contain;
}

.logo__fb {
	width: 24px;
	height: 24px;
	mask: url('images/social-facebook.svg') no-repeat center / contain;
	-webkit-mask: url('images/social-facebook.svg') no-repeat center / contain;
}

.logo__insta {
	mask: url('images/social-instagram.svg') no-repeat center / contain;
	-webkit-mask: url('images/social-instagram.svg') no-repeat center / contain;
}

.logo__yt {
	width: 24px;
	height: 24px;
	mask: url('images/social-youtube.svg') no-repeat center / contain;
	-webkit-mask: url('images/social-youtube.svg') no-repeat center / contain;
}

.logo__li {
	mask: url('images/social-linkedin.svg') no-repeat center / contain;
	-webkit-mask: url('images/social-linkedin.svg') no-repeat center / contain;
}


/* ========== 404 ========== */
.content.error {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	justify-content: center;
	padding: 4rem var(--gutter);
}

.error__404 {
	text-align: center;
}

.error__404 h1 {
	font-size: var(--display);
}

.error__404 .over-text {
	font-size: var(--xl);
	margin: 0;
}

.error__image {
	max-width: 400px;
	margin-inline: auto;
	padding-inline: var(--gutter);
	filter: drop-shadow(5px 10px 10px var(--shadow));
}

.error__text {
	text-align: center;
	max-width: var(--max-ch);
	margin-inline: auto;
}

.error__search {
	margin-block-start: 2rem;
}

.error__search form {
	display: flex;
	gap: 1rem;
	width: 100%;
	align-items: center;
}

.error__search form > div:first-of-type {
	width: 100%;
}

.error__search .search__input {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--gray-medium);
	color: var(--gray-medium);
	padding-block: 0.5rem;
}

.error__search .search__input::placeholder {
	color: var(--gray-medium);
}

.error__search .close__btn--search {
	display: none;
}

.error__search .search__btn--submit {
	transition: var(--transition);
	cursor: pointer;
}

.error__search .search__btn--submit:hover {
	background-color: var(--red);
	color: var(--white);
}

@media (width < 900px) {
	.content.error {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		gap: 3rem;
	}

	.content.error > div {
		grid-row: 1 / 2;
	}

	.content.error .error__image {
		grid-row: 2 / -1;
	}
}

/* ========== Live Fixes ========== */