/* initialize with display:none */
.hero-top-bar, .hero-menu-bar,
.hero-menu-mobile,.mobnav-parent,.mobile-subchild,
.searchBtn:not(.searchBtn-open)+.searchSpan {display: none;}

/* MODULE VARIABLES */
.hero-section {
  
  --hero-top-bar-height: 33px; /* mockup: 55px */
  --hero-menu-bar-height: 68px; /* mockup: */

  --hero-top-bar-grey: #FAFAFA; /* login bar bg */
  --hero-top-bar-btn: #999999; /* login bar button color. */

  --hero-menu-bg: white; /**/
  --hero-menu-dropdown-bg: var(--dt-beige); /* dropdown + triangular separator bg color. */

  --hero-menu-bar-grey: #2D2D2D; /* navbar titles' color */
  --hero-menu-col-title-size: 13px; /* column title fontsize */
  /* --searchBtn-blue: rgb(40, 150, 193); matches search logo blue color */

  --mobile-top-bar-height: 44px;
  --mobile-hero-bar: #D2D2D2; /* top bar bg color */
  --mobnav-color: #003864; /* same as dt-dark-blue */
  --mobnav-bg: #EEEEEE; /* inactive menu item bg */
  --mobnav-color-open: #EFEFEF; /* active menu item color */
  --mobnav-bg-open: #00A0DE; /* same as dt-light-blue */

  --mobnav-lineHeight: 1.8; /*governs line height of all mobile menu items */


}
.hero-content {
  --hero-content-padding: 4vw calc((100% - var(--container-max-width, 90%))/2) 5vw calc((100% - var(--container-max-width, 90%))/2);
  --hero-h1-size: 48px;
}

/************** MENUS: TABLET/DESKTOP STYLING **************/
@media (min-width: 768px) {
  .hero-content {
    --hero-content-padding: 4vw 15vw 5vw 15vw;
    --hero-h1-size: 52px;
  }
  /************* TOP BAR: login, contact, search ******************/
  .hero-top-bar{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
    min-height: var(--hero-top-bar-height);
    position: relative;
    z-index:3;
    background-color:var(--hero-top-bar-grey);
    font-size: 12px;
  }

  .hero-top-bar > div {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
  }
  .hero-top-bar a {
    text-decoration: none;
    line-height: 1.25em;
    height: auto;
    display: inline-block;
    color: var(--hero-top-bar-btn);
    padding: calc(var(--hero-top-bar-height)/4);
    margin-right: 15px;
    margin-left: 0;
  }
  .hero-top-bar a:hover{ color: var(--dt-blue) }
  .hero-top-bar img.top-bar-map { filter: grayscale(1) }
  .hero-top-bar a:hover > img.top-bar-map { filter: grayscale(0); }

  .hero-top-bar i.fa-li.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiasaed;
  }
  .fa-phone:before {
    content: "\f095";
  }
  .fa-envelope:before {
    content: "\f0e0";
  } 

  /************** MENU BAR: logo + navigation ***************/
  /* SMALLER: collapsing into two rows */
  @media (max-width: 1144px) {
    .hero-menu-bar {
      --bar-flex-flow: column nowrap;
      --bar-height: calc( var(--hero-menu-bar-height) * 1.25);
      --left-bar-width: 25%;
      --right-bar-width: 100%;

      --col-padding-top: calc(0.25*calc(var(--hero-menu-bar-height) - 0.5em));
      --spacer-width: calc(var(--hero-menu-bar-height) * .125);
      --spacer-top: 2px;
      margin-top: 10px;
    }
    .hero-content {
      --hero-content-padding: 4vw calc((100% - var(--container-max-width, 90%))/2) 5vw calc((100% - var(--container-max-width, 90%))/2);
      --hero-h1-size: 60px;
    }
  }
  /* MEDIUM */
  @media (min-width: 1145px) and (max-width: 1324px) {
    .hero-menu-bar {
      --bar-flex-flow: row nowrap;
      --bar-height: var(--hero-menu-bar-height);
      --left-bar-width: 20%;
      --right-bar-width: calc(80% - 20px);

      --col-padding-top:  calc(0.5*calc(var(--hero-menu-bar-height) - 0.5em));
      --spacer-width: calc(var(--hero-menu-bar-height) * .2);
      --spacer-top: 6px;
    }
    .hero-content {
      --hero-content-padding: 4vw calc((100% - var(--container-max-width, 90%))/2) 5vw calc((100% - var(--container-max-width, 90%))/2);
      --hero-h1-size: 60px;
    }
  }
  /* LARGEST */
  @media (min-width: 1325px) {
    .hero-menu-bar{
      --bar-flex-flow: row nowrap;
      --bar-height: var(--hero-menu-bar-height);
      --left-bar-width: 20%;
      --right-bar-width: 77%;
      
      --col-padding-top:  calc(0.5*calc(var(--hero-menu-bar-height) - 0.5em));
      --spacer-width: calc(var(--hero-menu-bar-height) * .2);
      --spacer-top: 6px;
    }
    .hero-content {
      --hero-content-padding: 4vw calc((100% - var(--container-max-width, 90%))/2) 5vw calc((100% - var(--container-max-width, 90%))/2);
      --hero-h1-size: 64px;
    }
  }

  .hero-menu-bar{
    display: flex;
    flex-flow: var(--bar-flex-flow);
    justify-content: space-between;
    align-items: center;
    height: var(--bar-height);
    position: relative;
    z-index:2;
    background-color: var(--hero-menu-bg);
  }
  .hero-menu-bar-left{
    width: var(--left-bar-width); align-self: center; margin:0 10px
  }
  .hero-menu-bar-right{
    width: var(--right-bar-width); height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 6px;
    margin: 0 10px;
  }


  .hero-menu-bar-right .hero-menu-col {
    padding-top: var(--col-padding-top);
    flex: 3 1 10%;
    position: relative;
  }
  .hero-menu-bar-right .hero-menu-col > a + div {
    max-height: 0px;
    overflow-y: hidden;
  }
  .hero-menu-col.hero-menu-col-homeEquity {flex: 1 2 10%;}
  .hero-menu-col.hero-menu-col-propResearch {flex: 5 1 12%; min-width: 137px;}
  .hero-menu-col.hero-menu-col-about {flex: 1 2 10%;}
  .hero-menu-col.hero-menu-col-about div.hero-menu-col-links {
    position: relative; left: -20%; width:120%;
  }

  /* column styling */
  .hero-menu-col-title {
    color: var(--hero-menu-bar-grey);
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    font-size: var(--hero-menu-col-title-size);
    border-bottom: 3px solid transparent;
    /* transition-delay: 0.2s; */
  }
  .hero-menu-col-spacer {
    background-color: transparent;
    opacity: 0;
    border: solid;
    border-width: var(--spacer-width);
    border-top-width: var(--spacer-top);
    border-color: transparent transparent var(--hero-menu-dropdown-bg);
    width: 0;
    margin: 0 auto;
    transition-duration: 0.1s;
  }
  .hero-menu-col-links {
    display: flex;
    max-height: 0px;
    opacity: 0;
    flex-flow: column nowrap;
    background-color: var(--hero-menu-dropdown-bg);
    transition-duration: 0.1s;
    width: 120%;
    position: absolute;
    left: -10%;
    overflow-y: hidden;
  }

  .hero-menu-col:first-child > .hero-menu-col-links {
    left: 0;
  }
  .hero-menu-col:last-child > .hero-menu-col-links {
    left: -20%;
  }

  .hero-menu-col-slug {
    border-bottom: 1px solid grey;
    color: var(--dt-grey);
    font-size: calc( var(--hero-menu-col-title-size) - 2px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.7px;
    padding: 10px 25px;
    text-decoration: none;
    text-transform: uppercase;
    transition-duration: 0.15s;
  }
  @media (min-width: 768px) and (max-width: 846px){
    .hero-menu-col > a.hero-menu-col-title-link > h4 {
      font-size: 0.8em
    }
    .hero-menu-col-slug {
      padding: 10px 10px;
    }
  }
  @media (min-width: 846px) and (max-width: 950px){
    .hero-menu-col-slug {
      padding: 10px 12px;
    }
  }
  
  {#  When hovering over a column... #}
  .hero-menu-col:hover .hero-menu-col-title {
    border-bottom: 3px solid var(--dt-blue);
  }
  .hero-menu-col:hover > a + div {
    max-height: 100px;
  }
  .hero-menu-col:hover .hero-menu-col-spacer, 
  .hero-menu-col:hover>.hero-menu-col-links{
    /* visibility: visible; */
    max-height: 800px;
    opacity: 1;
  }
  
  .hero-menu-col-slug:hover { background-color: var(--dt-dark-grey); color: var(--hero-menu-dropdown-bg) }
}

/************** MENUS: MOBILE STYLING logo, button, ul tag ****************/
@media (max-width: 767px) {
  .hero-section {
    --hero-content-padding: 2vw 5vw 2vw 5vw;
  }

  .hero-menu-mobile{display: flex; flex-flow: row nowrap; justify-content: space-between;
    background-color:var(--mobile-hero-bar); height: var(--mobile-top-bar-height)
  }
  .hero-menu-mobile-left{margin: calc((var(--mobile-top-bar-height) - 19px) * 0.5) 0 0 12px} /* using 12px indents/padding */
  .hero-menu-mobile-right{width: var(--mobile-top-bar-height)}


  .mobnav-btn {
    height: 100%;
    width: 100%;
    background-color: var(--mobile-hero-bar);
    color: var(--dt-blue);
    border: none;
    text-align: center;
    vertical-align: middle;
    font-size: 25px;
    font-family: 'Roboto';
    font-weight: 700;
  }

  .mobnav-open {
    font-weight: 400;
  }

  /* When mobnav is opened... */
  .mobnav-open + .mobnav-parent {
    background-color: var(--mobnav-bg);
    position: absolute; 
    top: var(--mobile-top-bar-height); left: 0px;
    display: flex; flex-flow: column nowrap; z-index:3
  }

  /* searchbar */
  .mobnav-open + .mobnav-parent form {
    display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center;padding-left: 5%;
  }
  .mobnav-open + .mobnav-parent form img { padding: 1%; }
  .mobnav-open + .mobnav-parent form input {outline: none; flex-grow: 1}
  /* .mobnav-open + .mobnav-parent form input:focus { background-color: purple } */
  
  .mobnav-child {
    /* border-width: 0px 1px 1px 1px;
    border-color: var(--dt-grey);
    border-style: solid; */
    color: var(--mobnav-color);
    line-height: var(--mobnav-lineHeight);
    text-indent: 10px;
    width: 85vw;
    min-width: 350px;
  }

  /* Row containing menu child label, and open/close span */
  .mobnav-child-row{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    max-width: 100vw;
    padding: 0 12px;
  }
  a.mobnav-child-label{
    min-width: 80%;
    vertical-align: middle;
    color: var(--mobnav-color);
  }
  span.mobnav-child-label{
    min-width: 80%;
    vertical-align: middle;
  }
  .mobnav-child-btn{  /* open/close span */
    text-align: center;
  }

  /* mobnav-child arrow dropdown icon */
  .mobnav-child-btn img {
    margin: 1px 0 -1px 0;
    transform: rotate(-90deg);
    transition: all ease .3s;
  }
  .mobnav-child-btn-open img {
    transform: rotate(0deg);
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    transition: all ease .3s;
  }

  /* ...when mobile child is opened... */
  .mobnav-child-open {
    color: var(--mobnav-color-open);
    background-color: var(--mobnav-bg-open);
  }

  /* subchildren (links). opens when .mobnav-child-open class toggled on. */
  .mobnav-child-open .mobile-subchild {
    display: block;
    text-indent: 20px;
    background-color: white;
    text-decoration: none;
    border-top: 1px solid var(--dt-blue);
    text-transform: capitalize;
    padding: 0 12px;
    color: var(--dt-grey);
  }

}


/************************ CONTENT: heading, subheading, cta *********************/
.hero-content{ 
  position: relative; z-index:0;
  margin: 0 auto;
  /* background-color: rgba(0, 56, 100, 0.1); */
  padding: var(--hero-content-padding);
}

.hero-preheading{ font-size: 14px; line-height: 1.1; letter-spacing: 3px; }
.hero-heading{ font-size: var(--hero-h1-size); line-height: 1.1;margin-top: 30px; font-weight: 700}
.hero-subheading{font-size: 24px; line-height: 1.15;}
.hero-subheading > span { font-size: 24px; line-height: 1.1; color: var(--dt-blue)}

.wp-hero-cta {
  color: white;
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  letter-spacing: 1.13px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 16px 40px;
  background-color: var(--dt-orange);
  border-radius: 31px;
  border: 2px solid var(--dt-orange);
}
.wp-hero-cta:hover {
  text-decoration: underline;
}