/**
 * 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:        4.20241206
 */


/*! - Settings */

:root {
	/*! Color Palette */

	--theme--blackish:    #0d0d16;
	--theme--dark-gray:   #343434;
	--theme--gray:        #666;
	--theme--light-gray:  #efefef;

	--theme--green: #6c694a;
	--theme--brown: #7C5A32;
	--theme--teal:  #515B56;


	/*! Layout Values */

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

	--theme--header--offset: 0;


	/*! Button Settings */

	/* NOTE: Each Divi Supreme button writes out their own specific padding with !important, so if you deviate from Divi's default (0.3em 1em) you'll have to style each manually or make some very aggressive override selectors */
	--theme--button--pad-top:         0.3em;
	--theme--button--pad-bottom:      0.3em;
	--theme--button--pad-h:           1em;
	/* Divi default is button icon right */
	--theme--button--pad-left--icon:  0.7em;
	--theme--button--pad-right--icon: 2em;

	--theme--button--font-weight: 500;
	--theme--button--line-height: 1.7;
	--theme--button--transition:  all 0.2s;
	--theme--button--icon-size:   1.6em;

	--theme--button-group--spacing: 1em;
}

.et_button_left {
	--theme--button--pad-left--icon:  2em;
	--theme--button--pad-right--icon: 0.7em;
}

.et_button_no_icon {
	--theme--button--pad-left--icon:  var(--theme--button--pad-h);
	--theme--button--pad-right--icon: var(--theme--button--pad-h);
}



/*! Media Breakpoints */

@media (max-width: 980px) {
	:root {
		--theme--is-mobile: 1;
	}
}

@media (min-width: 981px) {
	:root {
		--theme--is-desktop: 1;
	}

	body.et_fixed_nav {
		--theme--header--offset: 90px;  /* approximate default; will update via JS */
	}
}



/*! - Forms */

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

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



/*! - Buttons */

/*! Divi Button Defaults */

.et_pb_button {
	display: inline-block;
	padding: var(--theme--button--pad-top) var(--theme--button--pad-h) var(--theme--button--pad-bottom);
	line-height: var(--theme--button--line-height) !important;
	text-align: center;
}
.et_button_icon_visible .et_pb_button {
	padding-left:  var(--theme--button--pad-left--icon);
	padding-right: var(--theme--button--pad-right--icon);
}
body:not(.et_button_no_icon) .et_pb_button:hover,
body:not(.et_button_no_icon) .et_pb_module .et_pb_button:hover {
	padding: var(--theme--button--pad-top) var(--theme--button--pad-right--icon) var(--theme--button--pad-bottom) var(--theme--button--pad-left--icon);
}

/* Divi sets padding with `!important` when the global setting is no icon, so follow suit */
body.et_button_no_icon .et_pb_button,
body.et_button_no_icon .et_pb_button:hover {
	padding: var(--theme--button--pad-top) var(--theme--button--pad-h) var(--theme--button--pad-bottom) !important;
}

body .et_pb_button.et_pb_button::after {
	top:       50%;
	transform: translateY( -50% );
	font-size: var(--theme--button--icon-size);
}


/*! Button Group */

.theme--button-group {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: calc( -1 * var(--theme--button-group--spacing) * 0.5);
	margin-top: auto;
}
.theme--button-group.theme--align-left {
	justify-content: flex-start;
}
.theme--button-group.theme--align-center {
	justify-content: center;
}
.theme--button-group.theme--align-right {
	justify-content: flex-end;
}

.theme--button-group + .theme--button-group {
	margin-top: var(--theme--button-group--spacing);
}

.theme--button-group .et_pb_button {
	margin: calc( var(--theme--button-group--spacing) * 0.5 );
}



/*! - Header */

#main-header {}


/*! Header: Logo */

.logo_container {}

/* PATCH: Horizontal overflow when nav is fullwidth */
@media (min-width: 981px) {
	.et_fullwidth_nav.et_header_style_left .logo_container {
		/* accommodate the padding on the parent container */
		width: calc( 100% - 62px );
	}
}


/*! Header: Search */

.et-search-form input {
	width: calc( 90% - 30px );  /* avoid running into a wide logo on mobile */
}



/*! - 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 */

.menu-item .et_pb_button {
	font-size: inherit;
}

/* Desktop menu link containing a button */
#top-menu .menu-item > a:has(.et_pb_button) {
	/* keep opaque */
	opacity: 1;
}

#top-menu .menu-item .et_pb_button {
	/* Add extra vertical pad since the line height will be reduced (1em) */
	--extra-pad-v: 0.35em;
	--pad-top:     calc( var(--theme--button--pad-top)    + var(--extra-pad-v) );
	--pad-bottom:  calc( var(--theme--button--pad-bottom) + var(--extra-pad-v) );

	padding-top:    var(--pad-top);
	padding-bottom: var(--pad-bottom);
	line-height: inherit !important;
	/* Offset the button's vertical padding to not add height to the overall nav / keep submenus aligned to bottom edge of header */
	margin-top:    calc( -1 * calc( var(--pad-top)    + var(--theme--button--border-width) ) );
	margin-bottom: calc( -1 * calc( var(--pad-bottom) + var(--theme--button--border-width) ) );
}
.et_button_no_icon #top-menu .menu-item .et_pb_button {
	padding-top:    var(--pad-top) !important;
	padding-bottom: var(--pad-bottom) !important;
}
body:not(.et_button_no_icon, .et_button_icon_visible) #top-menu .menu-item .et_pb_button:hover {
	--icon-growth-offset-h: calc( -1 * calc(
		var(--theme--button--pad-left--icon) + var(--theme--button--pad-right--icon)
		- calc( 2 * var(--theme--button--pad-h) )
	) );

	/* Offset the button's horizontal growth on hover so the rest of the nav doesn't shift */
	margin-left:  calc( 0.5 * var(--icon-growth-offset-h) );
	margin-right: calc( 0.5 * var(--icon-growth-offset-h) );
}

/* Mobile menu link containing a button */
#mobile_menu .menu-item > a:has(.et_pb_button) {
	/* override default hover */
	background: transparent;
	opacity: 1;
}
/* ...marked to align the button's text with other menu items */
#mobile_menu .menu-item.theme--mobile--flush-text > a:has(.et_pb_button) {
	margin-left: calc( -1 * var(--theme--button--pad-h) );
}
/* ...marked to center */
#mobile_menu .menu-item.theme--mobile--center > a:has(.et_pb_button) {
	text-align: center;
}
/* ...inside the last, top-level menu item */
#mobile_menu > .menu-item:last-child > a:has(.et_pb_button) {
	padding-top:    15px;  /* bit extra */
	border-bottom: none;
}


/*! Nav: Mini-Mega Menus */
/*
 * Changes full nav-width mega menus to instead be n * width the normal dropdown menu.
 *
 * Currently supports 2 and 3 column mega menus.
 */

#top-menu .theme--mini-mega {
	--mega-menu--columns: 1;
	--sub-menu--pad-h:    30px;
	--sub-menu--width:    240px;
}

#top-menu .theme--mini-mega:is(
	.mega-menu-parent-2,
	.mega-menu-parent-3
) {

	position: relative;
}
#top-menu .theme--mini-mega.mega-menu-parent-2 {
	--mega-menu--columns: 2;
}
#top-menu .theme--mini-mega.mega-menu-parent-3 {
	--mega-menu--columns: 3;
}

#top-menu .theme--mini-mega:is(
	.mega-menu-parent-2,
	.mega-menu-parent-3
) > .sub-menu {
	width: calc(
		calc( var(--mega-menu--columns) * var(--sub-menu--width) )
		+ calc( 2 * var(--sub-menu--pad-h) )
	);
	/* center the menu under its parent's text, accounting for the padding for the dropdown icon */
	left:  calc( 50% - 20px ) !important;
	right: auto !important;
	transform: translateX( -50% );
}



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

/**
 * Use: Apply `theme--center-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-columns .et_pb_row,
.et_pb_gutters3 .et_pb_row.theme--center-columns,
.et_pb_section.theme--center-columns .et_pb_row.et_pb_gutters3,
.et_pb_section .et_pb_row.theme--center-columns.et_pb_gutters3 {
	column-gap: 5.5%;
}
.et_pb_gutters1 .theme--center-columns .et_pb_row,
.et_pb_gutters1 .et_pb_row.theme--center-columns,
.et_pb_section.theme--center-columns .et_pb_row.et_pb_gutters1,
.et_pb_section .et_pb_row.theme--center-columns.et_pb_gutters1 {
	column-gap: 0;
}
.et_pb_gutters2 .theme--center-columns .et_pb_row,
.et_pb_gutters2 .et_pb_row.theme--center-columns,
.et_pb_section.theme--center-columns .et_pb_row.et_pb_gutters2,
.et_pb_section .et_pb_row.theme--center-columns.et_pb_gutters2 {
	column-gap: 3%;
}
.et_pb_gutters4 .theme--center-columns .et_pb_row,
.et_pb_gutters4 .et_pb_row.theme--center-columns,
.et_pb_section.theme--center-columns .et_pb_row.et_pb_gutters4,
.et_pb_section .et_pb_row.theme--center-columns.et_pb_gutters4 {
	column-gap: 8%;
}

/* Change rows to flex layout */
.et_pb_section.theme--center-columns .et_pb_row,
.et_pb_row.theme--center-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-columns .et_pb_row::after,
.et_pb_row.theme--center-columns::after {
	display: none;
}

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

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


/*! Center Blog module grid columns */

@media (min-width: 768px) {
	.et_pb_blog_grid_wrapper.theme--center-columns .et_pb_salvattore_content {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Remove empty columns' width and offset their neighbor's right margin */
	.et_pb_blog_grid_wrapper.theme--center-columns .et_pb_salvattore_content .column:empty {
		width: 0;
		margin-left: -5.5%;
	}
}
