/*
Theme Name: PBH Build Co.
Description: Divi Child Theme by Mandurah Graphics
Author: Mandurah Graphics
Author URI: https://www.mandurahgraphics.com.au
Template: Divi
*/

/* Theme customization starts here
------------------------------------------------------- */

/**
 * LightGalleryJS Overrides
 */
.lg-outer .lg-thumb-item {
	border-radius: 0 !important;
}

.lg-counter, 
:is(.lg-toolbar .lg-icon, .lg-next, .lg-prev):not(:hover) {
	color: rgb(from var(--color-base) r g b / 80%) !important;
}

.lg-backdrop.in {
	opacity: 0.75 !important;
}

.lg-outer .lg-thumb-outer {
	background-color: transparent !important;
}


/**
 * Design Tokens/Style Variables
 */
:root {
	--color-base: #fff;
	--color-contrast: #231f20;
	--color-primary: slategray;
	--color-secondary: gray;
	--color-focus: #2ea3f2;
	
	
	/* @link https://utopia.fyi/type/calculator?c=500,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--text--2: clamp(0.7813rem, 0.7686rem + 0.0405vw, 0.8rem);
	--text--1: clamp(0.9375rem, 0.8953rem + 0.1351vw, 1rem);
	--text-0: clamp(1.125rem, 1.0405rem + 0.2703vw, 1.25rem);
	--text-1: clamp(1.35rem, 1.2064rem + 0.4595vw, 1.5625rem);
	--text-2: clamp(1.62rem, 1.3949rem + 0.7203vw, 1.9531rem);
	--text-3: clamp(1.944rem, 1.6079rem + 1.0755vw, 2.4414rem);
	--text-4: clamp(2.3328rem, 1.847rem + 1.5545vw, 3.0518rem);
	--text-4-5: clamp(1.75rem, 1.034rem + 3.182vw, 3.5rem); /* Viewport range: 360px to 1240px */
  --text-5: clamp(2.7994rem, 2.1133rem + 2.1953vw, 3.8147rem);
	
	
	/* @link https://utopia.fyi/space/calculator?c=500,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8|10,3xl-5xl|2xl-4xl|xl-3xl&g=s,l,xl,12 */
	  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5203rem + 0.1351vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8328rem + 0.1351vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0405rem + 0.2703vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.5608rem + 0.4054vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.0811rem + 0.5405vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.1216rem + 0.8108vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.1622rem + 1.0811vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.2432rem + 1.6216vw, 7.5rem);
  --space-4xl: clamp(9rem, 8.3243rem + 2.1622vw, 10rem);
  --space-5xl: clamp(11.25rem, 10.4054rem + 2.7027vw, 12.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1014rem + 0.6757vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.3091rem + 0.8108vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.6216rem + 0.8108vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.6182rem + 1.6216vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.1385rem + 1.7568vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.2365rem + 3.2432vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.277rem + 3.5135vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 2.473rem + 6.4865vw, 7.5rem);
  --space-3xl-4xl: clamp(6.75rem, 4.5541rem + 7.027vw, 10rem);
  --space-4xl-5xl: clamp(9rem, 6.6351rem + 7.5676vw, 12.5rem);

  /* Custom pairs */
  --space-3xl-5xl: clamp(6.75rem, 2.8649rem + 12.4324vw, 12.5rem);
  --space-2xl-4xl: clamp(4.5rem, 0.7838rem + 11.8919vw, 10rem);
  --space-xl-3xl: clamp(3.375rem, 0.5878rem + 8.9189vw, 7.5rem);
	
	
	--hero--text--min-height: calc(var(--space-3xl) * 2);
}


body,
.et_pb_text {
	line-height: 1.7;
}

h1 {
	font-size: var(--text-5); 
}

h2 {
	font-size: var(--text-4); 
}

h3 {
	font-size: var(--text-3); 
}

h4 {
	font-size: var(--text-2); 
}


/** 2.0 Layouts
 * 
 * Base styles for various layouts 
 * Layouts taken from 'Every Layout' by Andy Bell
 */

/** 2.1 Layout: With Sidebar */

.with-sidebar {
	display: flex; 
	flex-wrap: wrap; 
}

.with-sidebar:not([data-direction*="rtl"]) > :first-child:not(.et-vb-ui), 
.with-sidebar:not([data-direction*="rtl"]) > .et-first-child,
.with-sidebar[data-direction*="rtl"] > :last-child:not(.et-vb-ui), 
.with-sidebar[data-direction*="rtl"] > .et-last-child {
	flex-grow: 1; 
	flex-shrink: 0; 
	flex-basis: var(--sidebar-width, auto); /* Width when sidebar IS a sidebar */
}

.with-sidebar:not([data-direction*="rtl"]) > :last-child:not(.et-vb-ui), 
.with-sidebar:not([data-direction*="rtl"]) > .et-last-child,
.with-sidebar[data-direction*="rtl"] > :first-child:not(.et-vb-ui), 
.with-sidebar[data-direction*="rtl"] > .et-first-child{
	flex: 999 0 0; /* Grow non-sidebar element from nothing */
	min-inline-size: 50%; /* Wrap .with-sidebar when elements are of equal width */
}


/** 2.2 Layout: Frame */

.frame {
	display: flex; 
	justify-content: center; 
	align-items: center; 
	overflow: hidden; 
	aspect-ratio: var(--w) / var(--h); 
}

.frame > :not(.et-vb-ui, h1, h2, h3, h4, h5, h6, p) {
	height: 100%;
	width: 100%;
}

.frame img,
.frame video {
	object-fit: cover; 
	height: 100%; 
	width: 100%; 
}


/** 2.3 Layout: Switcher 
 * 
 * Switches flex row to a flex column when flex container width is less than var(--threshold)
 */

.switcher.switcher {
	display: flex; 
	flex-wrap: wrap;
}

.switcher > :not(.et-vb-ui) {
	flex-grow: 1; 
	flex-shrink: 0; 
	flex-basis: calc((var(--threshold, 30rem) - 100%) * 999); /* Negative value -> each item takes equal proportion of available horizontal space. Positive value -> each item takes up whole row */
	width: unset;
	max-inline-size: 100% !important; 
}


/**
 * 3.0 Gravity Forms Styling
 */
.gform_wrapper {
	input:not([type=submit]),
		textarea {
		border-top: none;
		border-right: none;
		border-left: none;
		transition: background-color 0.3s;
		border-color: var(--color-contrast);
	}
	
	.gform_body .gfield_label {
		font-size: var(--text-0) !important;
		font-family: var(--et_global_heading_font) !important;
		text-transform: uppercase;
	}
	
	.ginput_complex label {
		font-family: var(--et_global_heading_font);
		text-transform: uppercase;
		font-weight: 600;
		font-size: var(--text--1) !important;
	}
	
	.gfield_required.gfield_required_text {
		font-style: normal !important;
		font-size: var(--text-xs) !important;
		text-transform: none;
	}
	
	input:not([type=submit]):hover, textarea:hover {
		background-color: rgb(from var(--color-contrast) r g b / 0.05);
	}
	
	.gform_button[type=submit] {
		all: unset;
		border: 3px var(--color-contrast) solid;
		font-family: var(--et_global_heading_font);
		font-weight: 700;
		font-size: var(--text-0);
		text-transform: uppercase;
			color: var(--color-contrast);
			background-color: var(--color-base);
		padding: var(--space-2xs) var(--space-xs);
		transition: all 0.3s;
		
		&:hover {
			color: var(--color-base);
		background-color: var(--color-contrast);
			border-color: transparent;
			cursor: pointer;
		}
	}
}