/**
 * Theme Name:     Big Storm Web Design
 * Description:    Custom site theme.
 * Theme URI:      https://greatbigstorm.com/
 *
 * Author:         Drew Schug
 * Author URI:     https://www.greatbigstorm.com/web-design/
 *
 * Template:       Divi
 *
 * Version:        1.20230609
 */


/*! - Settings */

:root {
	/*! Color Palette */

	--theme--gray:        #666;
	--theme--dark-gray:   #343434;
	--theme--light-gray:  #e8e8e8;


	/*! Layout Values */

	--theme--container--max-width: min(
		80vw,
		1080px
	);
}



/*! - Forms */

:is(
	input,
	button
):is(
	[type="button"],
	[type="submit"],
	[type="reset"]
):not( [disabled] ) {
	cursor: pointer;
}



/*! - Notices */

[class*="theme--notice"] {
	margin:  1em auto;
	padding: 1em;
	border: var(--theme--button--border-width, 2px) solid var(--theme--light-gray);
	border-radius: var(--theme--button--border-radius, 0);
}

.theme--notice--alert {
	border-color: var(--wp--preset--color--luminous-vivid-amber, orange);
}

.theme--notice--error {
	border-color: var(--wp--preset--color--luminous-vivid-orange, orangered);
}



/*! - Header */

#main-header {}


/*! Header: Logo */

.logo_container {}



/*! - Navigation */

/*! Nav: Primary */

#et-top-navigation {}


/*! Nav: Primary desktop */

#top-menu-nav {}

#top-menu {}


/*! Nav: Primary mobile */

#et_mobile_nav_menu {}

#mobile_menu {}


/*! Nav: Buttons */

/* Desktop button */
#top-menu .menu-item .et_pb_button {
	display: inline-block;
	/* don't add height to the overall nav */
	/* margin-top:    -1em; */
	/* margin-bottom: -1em; */
}

/* Mobile menu link containing a button */
#mobile_menu .menu-item > a:has(> .et_pb_button) {
	/* override default hover */
	background: transparent;
	opacity: 1;
}
/* ...inside the last, top-level menu item */
#mobile_menu > .menu-item:last-child > a:has(> .et_pb_button) {
	padding-top:    20px;  /* bit extra */
	padding-bottom: 5px;   /* bit less */
	text-align: center;
	border-bottom: none;
}



/*! - Layout: Center non-empty columns */

/**
 * Use: Apply `theme--center-non-empty-columns` class to either a section or row
 * to collapse empty columns and center the remaining columns with content.
 *
 * Notes:
 *   - There are 3 places gutter width can be set: global/body, page, row
 *   - `_gutters3` comes first in Divi's CSS (being default)
 *
 * 2022-07 [sw]
 */

/* Match Divi's column margins with `column-gap` */
.et_pb_gutters3 .theme--center-non-empty-columns .et_pb_row,
.et_pb_gutters3 .et_pb_row.theme--center-non-empty-columns,
.et_pb_section.theme--center-non-empty-columns .et_pb_row.et_pb_gutters3,
.et_pb_section .et_pb_row.theme--center-non-empty-columns.et_pb_gutters3 {
	column-gap: 5.5%;
}
.et_pb_gutters1 .theme--center-non-empty-columns .et_pb_row,
.et_pb_gutters1 .et_pb_row.theme--center-non-empty-columns,
.et_pb_section.theme--center-non-empty-columns .et_pb_row.et_pb_gutters1,
.et_pb_section .et_pb_row.theme--center-non-empty-columns.et_pb_gutters1 {
	column-gap: 0;
}
.et_pb_gutters2 .theme--center-non-empty-columns .et_pb_row,
.et_pb_gutters2 .et_pb_row.theme--center-non-empty-columns,
.et_pb_section.theme--center-non-empty-columns .et_pb_row.et_pb_gutters2,
.et_pb_section .et_pb_row.theme--center-non-empty-columns.et_pb_gutters2 {
	column-gap: 3%;
}
.et_pb_gutters4 .theme--center-non-empty-columns .et_pb_row,
.et_pb_gutters4 .et_pb_row.theme--center-non-empty-columns,
.et_pb_section.theme--center-non-empty-columns .et_pb_row.et_pb_gutters4,
.et_pb_section .et_pb_row.theme--center-non-empty-columns.et_pb_gutters4 {
	column-gap: 8%;
}

/* Change rows to flex layout */
.et_pb_section.theme--center-non-empty-columns .et_pb_row,
.et_pb_row.theme--center-non-empty-columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Remove the clearfix element or it will add `column-gap` to the end */
.et_pb_section.theme--center-non-empty-columns .et_pb_row::after,
.et_pb_row.theme--center-non-empty-columns::after {
	display: none;
}

/* Remove Divi's gutter margins */
.et_pb_section.theme--center-non-empty-columns .et_pb_column,
.et_pb_row.theme--center-non-empty-columns .et_pb_column {
	margin-right: 0 !important;
}

/* Remove the empty columns from the layout */
.et_pb_section.theme--center-non-empty-columns .et_pb_column_empty,
.et_pb_row.theme--center-non-empty-columns .et_pb_column_empty {
	display: none;
}



/*! - Team Members */

/*! Team Members List */

.theme--team-members-list {
	--num-columns:  1;
	--gutter-width: 0%;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-left:  calc( -1 * var(--gutter-width) );
	margin-right: calc( -1 * var(--gutter-width) );
}

@media (min-width: 480px) {
	.theme--team-members-list {
		--num-columns:  2;
		--gutter-width: 2.5%;
	}
}

@media (min-width: 981px) {
	.theme--team-members-list {
		--num-columns:  4;
		--gutter-width: 1.5%;
	}
}


/*! Team Members Card */

.theme--team-member-card {
	position: relative;
	width:    calc(
		calc(
			100% - calc(
				var(--num-columns) * var(--gutter-width) * 2
			)
		) / var(--num-columns)
	);
	max-width: 400px;
	margin: 0 var(--gutter-width, 0) 32px;
	transition: transform 300ms ease 0ms;
}
.theme--team-member-card:hover {
	transform: scaleX(1.03) scaleY(1.03);
}

.theme--team-member-card--photo {
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	background: var(--theme--light-gray);
	border-radius: 6px;
	overflow: hidden;
}

.theme--team-member-card--photo .theme--team-member--photo {
	position: absolute;
	top:  0;
	left: 0;
	width:  100%;
	height: 100%;
	object-fit: cover;
}

.theme--team-member-card--details {
	position: relative;
	margin: -20px 15px 0 -15px;
	padding: 15px 15px 10px;
	background: #fff;
	border-radius: 6px 6px 26px 6px;
	box-shadow: 0px 2px 22px 0px rgba(145,139,136,0.2);
}

.theme--team-member-card--details .theme--team-member--name {
	font-size: 20px;
	text-transform: uppercase;
}

.theme--team-member-card--details .theme--team-member--position {
	font-size: 18px;
	font-family: 'trade-gothic-lt-bc20';
	letter-spacing: 1px;
	line-height: 1;
	color: #231f20;
}

.theme--team-member-card--full-link {
	position: absolute;
	top:    0;
	left:   0;
	right:  0;
	bottom: 0;
}