/**
 * 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.20240528
 */


/*! - Settings */

:root {
	/*! Color Palette */

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

	--theme--navy:        #304855;
	--theme--dark-green:  #546055;
	--theme--aquamarine:  #aec7c3;  /* secondary color */
	--theme--gold:        #e0b039;  /* accent color */
	--theme--white-smoke: #f0f3f3;

	/* HSL breakouts */
	--theme--dark-green--hs:  125 7%;
	--theme--dark-green--l:   35%;
	--theme--dark-green--hsl: var(--theme--dark-green--hs) var(--theme--dark-green--l);


	/*! Box Shadows */
	--theme--box-shadow--color: rgba(68, 68, 68, 0.1);

	/* Divi presets */
	--theme--box-shadow--preset-1: 0px 2px 18px 0px var(--theme--box-shadow--color);
	--theme--box-shadow--preset-2: 6px 6px 18px 0px var(--theme--box-shadow--color);
	--theme--box-shadow--preset-3: 0px 12px 18px -6px var(--theme--box-shadow--color);
	--theme--box-shadow--preset-4: 10px 10px 0px 0px var(--theme--box-shadow--color);
	--theme--box-shadow--preset-5: 0px 6px 0px 10px var(--theme--box-shadow--color);
	--theme--box-shadow--preset-6: inset 0px 0px 18px 0px var(--theme--box-shadow--color);
	--theme--box-shadow--preset-7: inset 10px 10px 0px 0px var(--theme--box-shadow--color);

	--theme--box-shadow--glow:        var(--theme--box-shadow--preset-1);
	--theme--box-shadow--offset:      var(--theme--box-shadow--preset-2);
	--theme--box-shadow--raised:      var(--theme--box-shadow--preset-3);
	--theme--box-shadow--hard-offset: var(--theme--box-shadow--preset-4);
	--theme--box-shadow--outline:     var(--theme--box-shadow--preset-5);
	--theme--box-shadow--inner-glow:  var(--theme--box-shadow--preset-6);
	--theme--box-shadow--hard-inset:  var(--theme--box-shadow--preset-7);


	/*! 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:         0em;
	--theme--button--pad-bottom:      0em;
	--theme--button--pad-h:           0em;
	/* Divi default is button icon right */
	--theme--button--pad-left--icon:  0em;
	--theme--button--pad-right--icon: 1.2em;

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

	--theme--button--border-width:        0px;
	--theme--button--border-width-bottom: 3px;

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


	/*! Forms */

	--theme--field--pad-h:            1.25em;
	--theme--field--pad-v:            0.75em;
	--theme--field--font-size:        14px;
	--theme--field--color:            hsl( var(--theme--dark-green--hsl) / 75% );
	--theme--field--color-focus:      var(--theme--dark-green);
	--theme--field--background:      #fff;
	--theme--field--background-focus: var(--theme--field--background);
	--theme--field--border:           2px solid var(--theme--secondary-accent-color);
	--theme--field--border-focus:     2px solid var(--theme--accent-color);
	--theme--field--border-radius:    4px;

	--theme--field--placeholder--color: hsl( var(--theme--dark-green--hsl) / 50% );


	/*! Containers */

	--theme--container--border-radius: 4px;
}

.et_button_left {
	--theme--button--pad-left--icon:  1.2em;
	--theme--button--pad-right--icon: 0em;
}

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

/*! Forms: Fields */

input:is(
	[type=text],
	[type=email],
	[type=tel],
	[type=url],
	/* Divi extras (?) */
	.text,
	.title,
),
textarea,
select {
	padding: var(--theme--field--pad-v) var(--theme--field--pad-h);
	font-size: var(--theme--field--font-size);
	color:      var(--theme--field--color);
	background: var(--theme--field--background);
	border: var(--theme--field--border);
	border-radius: var(--theme--field--border-radius);
}

input:is(
	[type=text],
	[type=email],
	[type=tel],
	[type=url],
	/* Divi extras (?) */
	.text,
	.title,
):focus,
textarea:focus,
select:focus {
	color:      var(--theme--field--color-focus);
	background: var(--theme--field--background-focus);
	border: var(--theme--field--border-focus);
}

::placeholder {
	color: var(--theme--field--placeholder--color);
}


/*! Forms: Search fields */

.theme--field--search {
	display: inline-block;
	position: relative;
	font-size: var(--theme--field--font-size);
}

.theme--field--search::before {
	content: '\f002';  /* FA search / magnifying glass */
	position: absolute;
	top:       50%;
	transform: translateY(-50%);
	left: 0.75em;
	font-family: "FontAwesome";
	font-size: 1.15em;
	font-weight: 900;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	color: var(--theme--field--color);
}

.theme--field--search input {
	padding-left: calc( var(--theme--field--pad-h) + 1.75em );
}


/*! Forms: Buttons */

: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);
	font-weight: var(--theme--button--font-weight);
	line-height: var(--theme--button--line-height) !important;
	letter-spacing: 0.5px;
	text-align: center;
}
body .et_pb_button.et_pb_button {
	border-bottom: var(--theme--button--border-width-bottom) solid var(--theme--accent-color) !important;
}
.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-offset: 4%;  /* manual tweak setting for better vertical alignment */

	top:       calc( 50% - var(--top-offset) );
	transform: translateY( -50% );
	font-size: var(--theme--button--icon-size);
	line-height: inherit;
}


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


/*! 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 bottom pad, in place of the line height of the normal buttons (1.7em) */
	--theme--button--pad-bottom: 0.35em;

	/* Add extra vertical pad since the line height will be reduced (1em) */
	--extra-pad-v: 0em;
	--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);
	color: inherit;
	font-weight: inherit;
	line-height: inherit !important;
	letter-spacing: inherit;
	/* 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-bottom) ) );
}
.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) );
}

#top-menu .et_pb_button.et_pb_button::after {
	--top-offset: 20%;
}

/* 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-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%;
	}
}