/*
Theme Name: Divi 5 Child
Theme URI: https://example.com/
Description: Child theme for Divi 5.
Author: Trefoil
Author URI: https://example.com/
Template: Divi
Version: 1.0.0
Text Domain: divi5-child
*/

/* --------------------------------------------------------------------------
MKE 7 Global Design Notes

Colors
- Dark blue:            #0b3e63
- Mid blue:             #0065a2
- Less dark blue:       #0072b9
- Medium blue (buttons):#1780c0
- Button hover:         #12669a  (border radius 8px, no border)
- Light blue:           #2cace3
  - tint:               #71c7ec
  - shade:              #177fad
- Lightest bg gray:     #e7e7e8
  - tint:               #ffffff
  - shade:              #c0c0c3

Typography
- Display + nav font:   Poppins
- Body font:            Titillium Web

Breakpoints
- Desktop/tablet-and-up: 1024px
- Hide secondary search icon: 879px
-------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
Base tweaks
-------------------------------------------------------------------------- */

#top-menu,
#top-menu-nav {
  width: 100%;
}

#et-main-area a:not(.et_pb_button):not(.et-pb-arrow-next):not(.et-pb-arrow-prev):hover,
#et-main-area a:not(.et_pb_button):not(.et-pb-arrow-next):not(.et-pb-arrow-prev):focus {
  color: #6f6f6f;
}

#et-secondary-nav li a:hover {
  opacity: 1 !important;
}

/* Hide Divi default top search (you are using the injected icon) */
#et_top_search {
  display: none;
}


.et-pb-arrow-prev, .et-pb-arrow-next { 
    border-radius: 50%;
    background-color: rgba(255,255,255,0.3);
}
.et-pb-arrow-prev:focus, .et-pb-arrow-next:focus {
    outline: 0;
    box-shadow: 0 0 0 5px #19f;
}

#eyebrow {
    width: 95%;
    padding: .3123rem .9845rem .3123rem .8375rem;
    font-size: .9375rem;
    text-transform: uppercase;
    /* -webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); */
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    color: #fff;
    background-color: #0065a2;
    font-style: normal;
    margin-bottom: 10px;
    width: fit-content;
}

/* --------------------------------------------------------------------------
Secondary nav search icon (in secondary menu)
-------------------------------------------------------------------------- */

#et-secondary-nav .menu-item-search a {
  font-family: "ETmodules";
  font-size: 16px;
  transform: scaleX(-1);
  padding: 0 16px;
  color: #2cace3;
}

#et-secondary-nav .menu-item-search a:hover {
  color: #105878;
}


/* --------------------------------------------------------------------------
Header positioning fixes (admin bar + fixed nav)
-------------------------------------------------------------------------- */

body.et_fixed_nav.et_secondary_nav_enabled #main-header,
body.et_fixed_nav #top-header,
body.admin-bar.et_fixed_nav #top-header {
  top: 0 !important;
}

body.admin-bar.et_secondary_nav_enabled #main-header {
  top: 32px !important;
}


/* --------------------------------------------------------------------------
Mobile-first header layout (<= 980px)
Goal: secondary bar below mobile nav row
Requires: #top-header is inside #main-header (your PHP injection)
-------------------------------------------------------------------------- */

header#main-header .et_menu_container {
  display: flex;
  flex-wrap: wrap;
}

body:not(.et-fb) #page-container {
  padding-top: 94px !important;
}

@media (max-width: 980px) {
  body:not(.et-fb) #page-container {
    padding-top: 116px !important;
  }
}
/*
body.logged-in #page-container {
  padding-top: 126px !important; 
}

@media (max-width: 782px) {
  body.logged-in #page-container {
    padding-top: 162px !important; 
  }
}
*/

/* Make each header chunk take full width so they stack cleanly */
header#main-header #et-top-navigation,
header#main-header #top-header,
header#main-header .logo_container {
  width: 100%;
}

/* Order: logo + nav first, secondary bar below */
header#main-header .logo_container { order: 1; }
header#main-header #et-top-navigation { order: 2; }
header#main-header #top-header { order: 3; }

/* Give the secondary bar its intended height when visible */
header#main-header #top-header {
  height: 36px;
  overflow: hidden;
  transition: height .2s ease, padding .2s ease, margin .2s ease, opacity .2s ease;
}

/* --------------------------------------------------------------------------
<= 980px: make the gray secondary bar full-width and align logo/menu
-------------------------------------------------------------------------- */
@media (max-width: 980px) {

  /* Container must span full width */
  #main-header .et_menu_container {
    width: 100% !important;
  }

  /* Logo column: center contents and offset for the 36px secondary bar */
  #main-header .logo_container {
    padding-bottom: 36px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: 200ms ease padding-bottom;
  }

  #main-header.et-fixed-header .logo_container {
    padding-bottom: 0 !important;
  }

  /* Secondary bar layout */
  #main-header #top-header {
    display: flex !important;
    position: relative !important;
    z-index: 1000 !important;
  }

  /* Ensure secondary menu block behavior */
  #main-header #et-secondary-nav, #main-header #et-secondary-menu {
    display: block !important;
  }

  /* Match vertical padding */
  #main-header #et-secondary-menu > ul > li > a {
    padding-top: .75em !important;
  }

  /* Logo image should not be constrained to 50% */
  .et_header_style_left #logo {
    max-width: 100% !important;
  }

  /* Give primary nav some breathing room on the right */
  #main-header #et-top-navigation {
    padding-right: 5% !important;
  }

  /* Secondary bar inner container width */
  #main-header #top-header > .container {
    width: 90% !important;
  }
  
  .et_fixed_nav #main-header {
      position: fixed !important;
  }
  
  .et-fixed-header #top-header {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0;
    border: 0 !important;
  }
}

/* --------------------------------------------------------------------------
Desktop/tablet-and-up (>= 1024px)
Goal: logo left column full height, secondary bar + primary nav right column
-------------------------------------------------------------------------- */

@media (min-width: 981px) {

  /* Fullwidth container padding reset */
  .et_fullwidth_nav #main-header .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Restore intended DOM order for desktop layout */
  header#main-header .logo_container { order: 1; }
  header#main-header #top-header { order: 2; }
  header#main-header #et-top-navigation { order: 3; }

  /* Logo column */
  header#main-header .logo_container {
    width: 16vw;               /* adjust as needed */
    height: 100%;
    background-color: #0b3e63;
    top: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Secondary bar (right side) */
  #top-header {
    position: relative !important;
    padding-right: 33px;
    height: 36px;
  }

  /* Primary nav shifts right to make room for logo column */
  #et-top-navigation {
    padding-left: calc(16vw + 16px) !important;
    float: none;
  }

  /* Search overlay positioning (Divi fullwidth nav) */
  .et_fullwidth_nav .et-search-form,
  .et_fullwidth_nav .et_close_search_field {
    right: 0 !important;
    top: 32px !important;
  }

  /* Header shadow */
  #main-header,
  #main-header.et-fixed-header {
    box-shadow: 0 0 15px #000000aa !important;
  }

  /* Dropdown menu styling */
  .nav li ul {
    border: 1px solid #e7e7e8 !important;
    box-shadow: none;
    padding: 0;
    margin-left: -16px;
  }

  .nav li ul li {
    padding: 0 !important;
  }

  .nav li ul li a {
    padding: 24px 16px !important;
    width: 238px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    line-height: 1 !important;
    font-size: 16px !important;
  }

  #top-menu li:hover > a {
    color: #2cace3 !important;
    opacity: 1 !important;
    transition: all 100ms !important;
  }

  #top-menu li ul li:hover > a {
    background: #f5f5f5 !important;
  }

  /* Remove dropdown caret spacing and icon */
  #top-menu .menu-item-has-children > a:first-child:after,
  #et-secondary-nav .menu-item-has-children > a:first-child:after {
    content: "" !important;
  }

  #top-menu .menu-item-has-children > a:first-child,
  #et-secondary-nav .menu-item-has-children > a:first-child {
    padding-right: 0 !important;
  }

  /* Contact button that appears in fixed header state (your selector kept, but scoped to >=1024px) */
  .contact-item {
    opacity: 0;
    pointer-events: none;
    float: right;
    position: absolute !important;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 100ms !important;
    transition-delay: 0ms !important;
  }

  .et-fixed-header #top-menu .contact-item a {
    padding: 8px 16px !important;
    color: #0065a2 !important;
    border-radius: 8px;
    border: 2px solid #0065a2;
    transition: 100ms ease color;
  }

  #top-menu li.contact-item a:hover {
    background-color: #0065a2 !important;
    color: #ffffff !important;
    border-color: #000000;
  }

  /* Your existing fixed-header reveal selector kept intact */
  #main-header.et-fixed-header .contact-item {
    opacity: 1 !important;
    pointer-events: all !important;
    transition: opacity 300ms ease !important;
    transition-delay: 200ms !important;
  }

  /* Search animation tweaks (kept as-is) */
  .et_search_outer { padding-right: 10px; }

  #main-header .et_search_outer form,
  #main-header .et_search_outer span {
    transition: transform 100ms !important;
    transition-delay: 0ms !important;
  }

  #main-header.et-fixed-header .et_search_outer form,
  #main-header.et-fixed-header .et_search_outer span {
    transform: translateY(-50%);
    transition: transform 300ms !important;
    transition-delay: 200ms !important;
  }

  /* Collapse secondary bar when fixed header is active */
  .et-fixed-header #top-header {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0;
    border: 0 !important;
  }

  .et-fixed-header #top-header .container,
  .et-fixed-header #top-header .et_pb_row,
  .et-fixed-header #top-header .et_pb_column {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .et-fixed-header .et_menu_container {
    align-items: stretch;
  }
}


/* --------------------------------------------------------------------------
Hide secondary search icon at <= 879px
-------------------------------------------------------------------------- */

@media (max-width: 980px) {
  #et-secondary-nav .menu-item-search {
    display: none !important;
  }
}


@media (max-width: 980px) {
  #m7-secondary-bar {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
Slide-in mobile menu styles
-------------------------------------------------------------------------- */

@media (max-width: 980px) {
  body.m7-offcanvas-open {
    overflow: hidden;
  }

  /* overlay */
  .m7-offcanvas-overlay {
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 9998;
  }
  body.m7-offcanvas-ready .m7-offcanvas-overlay {
    background: rgba(0,0,0,.45);
  }
  body.m7-offcanvas-open .m7-offcanvas-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* off-canvas panel using Divi's existing mobile menu */
  body.m7-offcanvas-ready ul.et_mobile_menu {
    position: fixed;
    top: 80px;
    right: 0;
    left: auto;
    height: calc(100vh - 80px);
    width: min(100vw, 371px);
    overflow-y: auto;
    transition: transform 220ms ease;
    z-index: 9999;
    margin: 0;
    border-top: 0px;
  }

  body.m7-offcanvas-open ul.et_mobile_menu {
    transform: translateX(0);
  }
}

#main-header #mobile_menu {
    background-color: #ffffff;
    padding: 0;
}

#main-header #mobile_menu li a {
    color: #000000;
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.mobile_nav::after {
    content: "";
    width: 100vw;
    height: 100vh;
    background:rgba(11,62,99,.7);
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: 0;
    transition: 300ms ease opacity;
    display: block;
    z-index:1500;
}

.mobile_nav.closed:after {
    pointer-events: none;
}

.mobile_nav.opened:after {
    opacity: 1;
}

.mobile_nav.opened .mobile_menu_bar {
    z-index:1600;
}

.mobile_nav.opened .mobile_menu_bar:before {
    content:'\4d' !important;
}

.mobile_nav .mobile_menu_bar:before {
    color:#ffffff !important;
}

.mobile_nav .mobile-toggle:after {
    content:'\43' !important;
    background-color: transparent !important;
    font-size: 20px;
    color: #0065a2bb !important;
}

.sub-menu.visible+a {
    transform:scaleY(-1);
}


  #mobile_menu {
    overflow-y: auto;       /* keep scrolling enabled */
    -ms-overflow-style: none;  /* IE / old Edge */
    scrollbar-width: none;     /* Firefox */
  }

  /* Chrome, Safari, modern Edge */
  #mobile_menu::-webkit-scrollbar {
    display: none;
  }
  
  /* Stop background interaction */
  body.m7-menu-open #page-container {
    pointer-events: none;
  }

  /* Keep header + mobile menu usable */
  body.m7-menu-open #main-header,
  body.m7-menu-open #mobile_menu {
    pointer-events: auto;
  }

  /* Prevent background scrolling */
  body.m7-menu-open {
    overflow: hidden;
  }
  
  #mobile_menu li li li a {
      color: #818181 !important;
  }
  
  #mobile_menu .mobile-secondary, #mobile_menu .menu-item-search {
      display: none !important;
  }
  
  #mobile_menu > li {
      border-top:1px solid #f2f2f2;
  }
  
  #mobile_menu .menu-item-has-children>a {
      background:transparent;
  }
  
  .m7-social-linkedin::before {
  content: "\e09d";
  font-family:ETmodules !important
}

.m7-social-twitter::before {
  content: "\e094";
  font-family:ETmodules !important;
}

.mobileNav-secondary {
    padding: 32px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobileNav-secondary a {
    padding: 10px 13px;
    font-size:20px;
}
.mobileNav-secondary a:not(:last-child){
    margin-right: 8px;
}