/**
 * File: hero.css
 * Purpose: Custom styling for the full-width hero/header section, including responsive layout and typography.
 * Usage: Used on pages featuring the `.hero` section and Divi Fullwidth Header module.
 * Dependencies: Divi (Fullwidth Header module, ET modules structure)
 *
 * Notes:
 * - Uses custom fonts: Anton and Mulish
 * - Designed for layered text content over a full-width image or background
 */


/* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

.hero{
  --hero-title-bg-color: var(--brown-darker-trans-higher);
  --hero-title-border-color: var(--tan-medium);
  --hero-font-color: var(--tan-lightest);
  --hero-font-shadow-color: var(--black);
  --hero-font-accent-color: var(--brand-accent-color);
}

/* -------------------------- */

.hero{
	padding: 0!important;	
}

.et_pb_fullwidth_header:not(.et_pb_fullscreen) .et_pb_fullwidth_header_container,
.et_pb_fullwidth_header .et_pb_fullwidth_header_container{
	max-width: none!important;
	width:100%!important;
}

.et_pb_fullwidth_header .et_pb_fullwidth_header_container.center .header-content-container.center{
    align-self: flex-end!important;
}

.hero .header-content-container{ 
	position:absolute;
	padding-bottom: 0px;
}

.hero .header-content{
	margin: 0px auto!important;
    width: 100%!important;
    max-width: none!important;
    background-color: var(--hero-title-bg-color);
    padding: 40px;
    border: solid var(--hero-title-border-color);
    border-width: 1px 0px;
}

/* Tablet & mobile styles */
@media all and (max-width: 980px){
    .hero .header-content{
        padding: 30px 10px;
    }

	.hero .header-content-container{ 
	  padding-bottom: 0;
	}
}

/* Mobile styles */
@media all and (max-width: 767px){
    .hero .header-content{
        padding: 30px 10px;
    }
    .hero .header-content-container{ 
        padding-top: 8%;
    }
}

.hero .header-content > h1,
.hero .header-content > span 
{
    font-family: 'Mulish', Helvetica, Arial, Lucida, sans-serif;
    color: var(--hero-font-color) !important;
    text-shadow: 0 0 3px var(--hero-font-shadow-color);
}

.hero .header-content > h1 {  
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2vw;
    line-height: 1.8em; 
    padding-bottom: 0px!important;
}

/* Tablet styles */
@media all and (min-width: 768px) and (max-width: 980px){
	.hero .header-content > h1{
	  font-size: 2em;
	}
}

/* Mobile styles */
@media all and (max-width: 767px){
	.hero .header-content > h1{
	  font-size: 1.6em;
      line-height:2em;
	}
}

.hero .header-content > span {
    font-size: 1.2vw;
    line-height: 1.8em;
}

/* Tablet styles */
@media all and (min-width: 768px) and (max-width: 980px){
	.hero .header-content > span{
	  font-size: 20px;
	}
}

/* Mobile styles */
@media all and (max-width: 767px){
	.hero .header-content > span{
	  font-size: 20px;
	}
}

.hero .header-content > h1 span.hero-one,
.hero .header-content > h1 span.hero-two
{
    color: var(--hero-font-accent-color);
    text-shadow: 0 0 5px var(--hero-font-shadow-color);
}

.hero .header-content > h1 span.hero-one
{
    font-family: 'Anton', Helvetica, Arial, Lucida, sans-serif;
    font-size: 1.5em;
    letter-spacing: 5px;
    font-style: italic;
}

.hero .header-content > h1 span.hero-two
{
    font-family: 'Fjalla One', Helvetica, Arial, Lucida, sans-serif;
    font-size: 1.4em;
    letter-spacing: 2px;
}

.et_pb_fullwidth_header .header-image{
	margin-left: 0!important;
	margin-right: 0!important;
}

html :where(img[class*=wp-image-]) {
    height: auto!;
    max-width: none;
    width: 100%;
}