/*
 Theme Name: WMA Child Theme
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme created by Walker Media Agency
 Author: Walker Media Agency
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 2.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */
:root {
    --primary-blue: #364153;
    --harbor-gold: #c5a059;
    --deep-sea: #003366;
    --harbor-fog-grey: #f2f2f2; /* Typical light grey hex, feel free to adjust */
}

/* Now you can actually use them in your CSS like this: */
body {
   
}

.et_pb_section p {
	text-wrap: pretty;
}
.et_pb_text_inner p strong { color:  var(--deep-sea)};


.photo-drop-shadow .et_pb_image_wrap {
	background: transparent;
	overflow: visible;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18),   /* wide, soft outer glow */
    0 4px 8px rgba(0, 0, 0, 0.12);    /* tighter, darker center */
}

.card-row-two-up {}
.card-row-two-up .pw-card {
	border-radius: 10px;
	border: 0.8px solid #E5E7EB;
	background: #FFF;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}

.balanced-buckets .et_pb_text_inner > p {
	text-wrap: balance;
}

.photo-drop-shade,
.full-inpage-image {
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.00);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}


.photo-drop-shade .et_pb_image_wrap {
	height: 100%;
	object-fit: cover;
}

.glow-box-container {
	border-radius: 14px;
	border: 1.6px solid rgba(0, 51, 102, 0.10);
	background: #FFF;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
/* Lower the stacking priority of the masthead */
.masthead-section {
  position: relative;
  z-index: 1;

	
}

h1 {
	text-wrap: pretty;
}

@media (min-width: 981px) {
	.masthead-section {
		min-height: 90vh;
	}
    .masthead-section h1 {
        /* DYNAMIC SCALING
           Min: 80px (for smaller laptops)
           Preferred: 8vw (scales with screen)
           Max: 130px (your desired peak) */
        font-size: clamp(80px, 8vw, 130px)!important;
        
        /* DYNAMIC LETTER SPACING
           As the font gets bigger, it needs to be tighter.
           This starts at -1px and gets tighter as the viewport width increases. */
        letter-spacing: -1px;
		
        
        line-height: 1.05!important; /* Slightly tighter for huge text */
        text-align: left;
        
        /* Sophisticated shadow using your Heading Color variable */
        text-shadow: 0.04em 0.04em 0.07em hsl(from var(--gcid-heading-color) h s l / 0.1);
        
        /* Optional: Prevents awkward word breaks at huge sizes */
        word-break: keep-all; 
    }
}



/* Lift all subsequent sections to slide over it */
.masthead-section ~ .et_pb_section {
  position: relative;
  z-index: 2;
 
}

.masthead-wave {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;  
  width: 43vw;
  height: 120vh; 
min-height: 1000px;
  max-width: clamp(45%, 60vw, 1600px);
  
  /* Your white border 
  border-left: 45px solid #ffffff;*/
  
  /* UPDATED RADII: 
     The '80%' values here make the top and bottom 'corners' 
     sharper/thicker, while the 100% horizontal keeps the deep curve. */
  border-radius: 100% 0 0 100% / 110% 0 0 110%;
  
  overflow: visible; 
  background: #f4f4f4; 
  z-index: -1;
  pointer-events: none;
}
.masthead-wave::before {
	min-height: 1000px;
    content: "";
    position: absolute;
    top: 0;
    left: -1.1vw; 
    width: 100%;
    height: 120vh;
    border-radius: 100% 0 0 100% / 110% 0 0 110%;
    
    /* DYNAMIC WIDTH: Min 20px, scales with 3% of screen width, max 60px */
    border-left: clamp(20px, 3vw, 46px) solid #5DA9E9;
    
    box-shadow: inset 10px 0 15px -5px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.masthead-wave::after {
	min-height: 1000px;
    content: "";
    position: absolute;
    top: 0;
    /* DYNAMIC OVERLAP: This calculates the offset based on the blue border's width 
       and subtracts 5px to keep them locked together. */
    left: 1vw; 
    
    width: 100%;
    height: 120vh;
    border-radius: 100% 0 0 100% / 110% 0 0 110%;
    
    /* DYNAMIC WIDTH: Slightly thinner than the blue one for a tapered secondary look */
    border-left: clamp(15px, 2vw, 45px) solid #f4f4f4; 
    
    box-shadow: inset 5px 0 10px rgba(0, 0, 0, 0.1);
    z-index: -1; 
    pointer-events: none;
}

/* Desktop Only Stacking Logic */
@media (min-width: 1800px) {
  .masthead-wave::after {
			left: -.1vw; 

	} 
	
	.masthead-section h1 {
		 letter-spacing: calc(-1px - 0.1vw);
	}
}

/* Tablet Adjustments */
@media (max-width: 980px) and (min-width: 768px) {
    .masthead-wave {
        width: 38vw; /* Slims it down significantly */
        opacity: 0.8; /* Makes it more of a background element */
    }
}

/* Mobile: Ditch or Repurpose */
@media (max-width: 767px) {
    /* OPTION A: Ditch it (Recommended for Boomer Readability) */
    .masthead-wave {
        display: none !important;
    }
    
    /* OPTION B: If you really want it, we move it to the background 
       and make it very faint so text can sit ON TOP of it. */
    /*
    .masthead-wave {
        width: 100vw;
        height: 40vh;
        top: 0;
        right: 0;
        transform: none;
        border-left: none;
        border-bottom: 10px solid #5DA9E9;
        border-radius: 0 0 0 100% / 0 0 0 50%;
        opacity: 0.3;
    }
    */
}

/* Fix for Divi 5 Visual Builder Mode */
.et-fb-root-ancestor .masthead-wave {
    position: absolute; /* Reverts from fixed so it stays in the section */
    height: 100% !important;
    top: 0 !important;
    transform: none !important;
    max-height: 800px; /* Caps the height so you can still click the section below it */
	max-width: 600px!important;
}

/* Ensure the pseudo-element also behaves in the builder */
.et-fb-root-ancestor .masthead-wave::before {
    height: 100% !important;
}

/* 2. Style the Labels */
body .gform_wrapper .gfield_label, 
body .gform_wrapper .gfield_label_before_complex {
    color: var(--primary-blue) !important;
    font-family: 'Lora', serif !important;
    font-weight: 600; /* Optional: adds a bit of weight for readability */
    font-size: 1.1rem;
}

/* 3. Style the Submit Button */
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_page_footer input[type="button"] {
    background-color: var(--primary-blue) !important;
    color: #ffffff !important;
    font-family: 'Lora', serif !important;
    padding: 14px 30px !important;
    border: none !important;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease-in-out;
}

/* 4. Hover State for Submit Button */
body .gform_wrapper .gform_footer input[type="submit"]:hover {
    background-color: var(--deep-sea) !important;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 5. Sub-labels (e.g., "First", "Last" under Name) */
body .gform_wrapper .gfield_description, 
body .gform_wrapper .field_sub_label {
    font-family: 'Lora', serif !important;
    color: #666; /* Keeps secondary text subtle */
}