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


/*! - Settings */

:root {
	/*! Color Palette */

	--theme--dark-blue:   #084359;  /* primary; backgrounds */
	--theme--bright-blue: #39f;     /* logo peak */
	--theme--light-blue:  #d0dbe6;  /* outlines */
	--theme--gold:        #cd8d2a;  /* accent; buttons */
	--theme--gray:        #666;     /* text */
	--theme--dark-gray:   #343434;  /* headlines */
	--theme--light-gray:  #e8e8e8;  /* light backgrounds */


	/*! Layout Values */

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


	/*! Notching */

	--theme--notch-size:    70px;
	--theme--notch-incline: 1.1;

	--theme--btn--notch-size:    1.25em;
	--theme--btn--notch-incline: var(--theme--notch-incline);

	--theme--img--notch-size:    100px;
	--theme--img--notch-incline: var(--theme--notch-incline);
}



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



/*! - Header */

/*! Logo */

#main-header .logo_container {
	--offset-left: calc( -1 * calc( calc( 101vw - var(--theme--container--max-width) ) / 2 ) );  /* Header container's distance from left window edge; padded for rounding */
	--logo-pad:    10%;  /* scaling top, right, bottom logo padding */

	z-index: 10000;  /* above dropdown menus */
	display: flex;
	align-items: center;
	width: auto;   /* let the logo dictate the width (and height) so everything scales nicely */
	height: 150%;  /* overlap the header bottom */
	text-align: right;
	filter: drop-shadow( 0 0 6px rgba(0, 0, 0, 0.2) );
}
/* Fullscreen header */
@media ( min-width: 981px ) {
	.et_fullwidth_nav #main-header .logo_container {
		--offset-left: -30.5px;
	}
}

/* Turn the logo helper into the notched logo background */
#main-header .logo_helper {
	position: absolute;
	top:    0;
	left:   0;
	right:  calc( -1 * var(--logo-pad) );  /* pull out right background edge here since we're avoiding padding the logo */
	bottom: 0;
	width:  auto;
	height: auto;
	background: var(--theme--dark-blue);
	/* top-right notch, through to left window edge */
	clip-path: polygon(
		var(--offset-left) 0,
		53% 0,
		100% 55%,
		100% 100%,
		var(--offset-left) 100%
	);
}
/* Add a background to connect flush with window edge (inside clipped container, so edges antialias the same) */
#main-header .logo_helper::before {
	content: '';
	position: absolute;
	top:    0;
	left:   var(--offset-left);
	right:  99%;  /* little bit of overlap to avoid rounding gaps */
	bottom: 0;
	background: var(--theme--dark-blue);
}

#main-header .logo_container a {
	display: block;
	/* Adding padding can mess up the container's `width: auto;`, so set a height here instead */
	height: calc( 100% - calc( var(--logo-pad) * 2 ) );
}

#main-header #logo {
	max-width:  100%;  /* mobile media query tries to set this */
	max-height: 100%;
}



/*! - Navigation */

/*! Nav: Mobile */

#mobile_menu {
	padding-top: 7%;  /* bit extra to avoid the overhanging logo */
}


/*! Nav: Buttons */

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



/*! - Notches */

[class*="theme--notched"],
[class*="theme--notch-buttons"] .et_pb_button {
	clip-path: polygon(
		/* top left */
		calc(
			calc(
				var(--theme--notch--top-left, 0) * var(--theme--notch-size)
			)
		) 0,
		/* top right */
		calc(
			100% - calc(
				var(--theme--notch--top-right, 0) * var(--theme--notch-size)
			)
		) 0,
		/* right top */
		100% calc(
			calc(
				var(--theme--notch-incline) * calc(
					var(--theme--notch--top-right, 0) * var(--theme--notch-size)
				)
			)
		),
		/* right bottom */
		100% calc(
			100% - calc(
				var(--theme--notch-incline) * calc(
					var(--theme--notch--bottom-right, 0) * var(--theme--notch-size)
				)
			)
		),
		/* bottom right */
		calc(
			100% - calc(
				var(--theme--notch--bottom-right, 0) * var(--theme--notch-size)
			)
		) 100%,
		/* bottom left */
		calc(
			var(--theme--notch--bottom-left, 0) * var(--theme--notch-size)
		) 100%,
		/* left bottom */
		0 calc(
			100% - calc(
				var(--theme--notch-incline) * calc(
					var(--theme--notch--bottom-left, 0) * var(--theme--notch-size)
				)
			)
		),
		/* left top */
		0 calc(
			var(--theme--notch-incline) * calc(
				var(--theme--notch--top-left, 0) * var(--theme--notch-size)
			)
		)
	);
}

.theme--notched--top-left,
.theme--notch-buttons--top-left .et_pb_button {
	--theme--notch--top-left: 1;
}

.theme--notched--top-right,
.theme--notch-buttons--top-right .et_pb_button {
	--theme--notch--top-right: 1;
}

.theme--notched--bottom-left,
.theme--notch-buttons--bottom-left .et_pb_button {
	--theme--notch--bottom-left: 1;
}

.theme--notched--bottom-right,
.theme--notch-buttons--bottom-right .et_pb_button {
	--theme--notch--bottom-right: 1;
}

body .theme--notchless {
	--theme--notch--top-left:     0;
	--theme--notch--top-right:    0;
	--theme--notch--bottom-left:  0;
	--theme--notch--bottom-right: 0;

	clip-path: none;
}


/*! Notched: Buttons */

.et_pb_button {
	--theme--notch-size:    var(--theme--btn--notch-size);
	--theme--notch-incline: var(--theme--btn--notch-incline);
}


/*! Notched: Images */

.et_pb_image {
	--theme--notch-size:    var(--theme--img--notch-size);
	--theme--notch-incline: var(--theme--img--notch-incline);
}