/*
 Theme Name: Flow Life Global (Divi Child)
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Official theme of Flow Life Global
 Author: Wondermill Studio
 Author URI: https://wondermill.studio
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */




/* Sticky footer when content is short (Divi) */
#page-container{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* This is the main “content + footer” area in Divi */
#et-main-area{
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* Push footer to bottom when content is short */
#main-footer{
  margin-top: auto;
}

/* Adjust for WordPress admin bar */
body.admin-bar #page-container {
  min-height: calc(100vh - 32px);
}

/* Mobile admin bar is taller */
@media (max-width: 782px) {
  body.admin-bar #page-container {
    min-height: calc(100vh - 46px);
  }
} 


/* Intro overlay must sit above the header/logo during animation */
#flow-life-intro-overlay{
  z-index: 2147483647 !important; /* max-ish safe int */
}


/* ==========================================================
   DIVI CLASSIC HEADER (Desktop >= 991px) — GLOBAL NAV LAYOUT
   - Consistent bar height + vertically centered nav on ALL pages
   - Constant center gap reserved for logo (no menu animation)
   - Submenus anchored below header + hover bridge
   - Search icon legible + vertically centered
   ----------------------------------------------------------
   HOME ONLY (Desktop >= 991px)
   - Fixed overlay header (translucent at top, opaque when sticky)
   - Logo expansion/contract animation
   - Logo container uses TRANSFORM-FREE centering to avoid search-open jitter
   ========================================================== */

/* -------------------------
   GLOBAL VARS (all pages)
   ------------------------- */
body{
  --divi-header-h: 54px;
  --divi-logo-gap: 0px;   /* no gap; logo uses full header height */
  --logo-sticky-y: 6px;   /* no vertical nudge; flush to bar edges */

  /* Global spacing */
  --center-gap: 200px;
  --menu-item-gap: 30px;

  /* Submenu styling vars (global) */
  --submenu-top-bg: rgba(255,255,255,.38);
  --submenu-sticky-bg: rgba(255,255,255,.95);
  --submenu-top-blur: 10px;
  --submenu-sticky-blur: 6px;
  --submenu-radius: 14px;
  --submenu-shadow: 0 18px 45px rgba(0,0,0,.18);
  --submenu-border: rgba(0,0,0,.08);
  --submenu-hover: rgba(0,0,0,.06);
}

/* Non-home: logo vertical position in nav (0 = centered, flush) */
body:not(.home){
  --logo-sticky-y: 0px;
}

/* Home-only animation vars */
body.home{
  --logo-expand-y: 80px;
  --logo-expand-scale: 3.5;
  --logo-sticky-scale: 1.0;

  /* transform-free horizontal nudge (optional) */
  --logo-nudge-x: 12px; /* positive = nudge left; tweak as needed */
}

@media (min-width: 991px){

  /* ==========================================================
     GLOBAL: fixed-height header + vertically centered nav
     ========================================================== */

  /* Keep dropdowns painting outside */
  #main-header,
  #main-header .container,
  #main-header .et_menu_container,
  #et-top-navigation{
    overflow: visible !important;
  }

  /* Prevent Divi transforms from creating new containing block for fixed logo */
  #main-header{
    transform: none !important;
  }

  /* Lock heights + center nav wrappers */
  #main-header > .container,
  #et-top-navigation,
  #top-menu-nav,
  #main-header .et_menu_container{
    height: var(--divi-header-h) !important;
    min-height: var(--divi-header-h) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
    top: 0 !important;
  }

  /* Keep Divi’s left/right distribution (menu + search) */
  #et-top-navigation{
    width: 100% !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Center the menu group */
  #top-menu-nav{
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Top menu: constant spacing */
  #top-menu{
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: var(--menu-item-gap);
  }

  /* Reserve logo slot permanently (consistent spacing across pages) */
  #top-menu > li.centered-inline-logo-wrap{
    flex: 0 0 var(--center-gap) !important;
    width: var(--center-gap) !important;
    max-width: var(--center-gap) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;         /* only clips placeholder; home overrides for expanded logo */
    pointer-events: none !important;
  }
  #top-menu > li.centered-inline-logo-wrap > a{ display:none !important; }

  /* GLOBAL (all pages): Make logo link clickable — override parent pointer-events:none */
  #top-menu > li.centered-inline-logo-wrap .logo_container a{
    pointer-events: auto !important;
  }

  /* GLOBAL (all pages): Logo sizing and centering in the reserved slot */
  #top-menu > li.centered-inline-logo-wrap .logo_container{
    width: 100% !important;
    height: var(--divi-header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  #top-menu > li.centered-inline-logo-wrap #logo,
  #top-menu > li.centered-inline-logo-wrap .logo_container img{
    max-height: calc(var(--divi-header-h) - var(--divi-logo-gap)) !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transform: translateY(var(--logo-sticky-y)) !important;
  }

  /* Top-level link + caret alignment */
  #top-menu > li{ display:flex !important; align-items:center !important; }

  #top-menu > li > a{
    display: flex !important;
    align-items: center !important;
    height: var(--divi-header-h) !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  #top-menu > li.menu-item-has-children > a:after,
  #top-menu > li.menu-item-has-children > a .et-pb-icon{
    position: static !important;
    display: inline-block !important;
    margin-left: 6px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transform: translateY(2px) !important; /* consistent in both states to prevent sticky jump */
  }
  #main-header.et-fixed-header #top-menu > li.menu-item-has-children > a:after,
  #main-header.et-fixed-header #top-menu > li.menu-item-has-children > a .et-pb-icon{
    transform: translateY(2px) !important; /* match non-sticky; was 0, caused 2px jump on transition */
  }

  /* ==========================================================
     GLOBAL: Submenus (match bar + anchored below header)
     ========================================================== */
  #top-menu > li.menu-item-has-children{ position: relative !important; }

  #top-menu > li.menu-item-has-children > ul.sub-menu{
    top: calc(var(--divi-header-h) - 2px) !important;
    left: 0 !important;
    margin-top: 0 !important;
    transform: translateY(10px) !important;

    background: var(--submenu-top-bg) !important;
    -webkit-backdrop-filter: blur(var(--submenu-top-blur));
    backdrop-filter: blur(var(--submenu-top-blur));
    border: 1px solid var(--submenu-border);
    border-radius: var(--submenu-radius);
    box-shadow: var(--submenu-shadow);

    padding: 10px 0 !important;
    overflow: visible !important; /* allow 2nd-level submenus to show outside bounds */
    min-width: 240px;

    transition: background-color 520ms cubic-bezier(.16,1,.3,1),
                backdrop-filter 520ms cubic-bezier(.16,1,.3,1),
                -webkit-backdrop-filter 520ms cubic-bezier(.16,1,.3,1),
                box-shadow 520ms cubic-bezier(.16,1,.3,1);

    z-index: 1000001 !important;
  }

  #main-header.et-fixed-header #top-menu > li.menu-item-has-children > ul.sub-menu{
    background: var(--submenu-sticky-bg) !important;
    -webkit-backdrop-filter: blur(var(--submenu-sticky-blur));
    backdrop-filter: blur(var(--submenu-sticky-blur));
  }

  /* Non-home: submenus use sticky opacity to match opaque header */
  body:not(.home) #top-menu > li.menu-item-has-children > ul.sub-menu{
    background: var(--submenu-sticky-bg) !important;
    -webkit-backdrop-filter: blur(var(--submenu-sticky-blur));
    backdrop-filter: blur(var(--submenu-sticky-blur));
  }

  #top-menu li ul.sub-menu li a{
    background: transparent !important;
    padding: 12px 18px !important;
    line-height: 1.2 !important;
    font-weight: inherit;
    letter-spacing: inherit;
    transition: background-color 180ms ease, padding-left 180ms ease;
  }

  #top-menu li ul.sub-menu li a:hover,
  #top-menu li ul.sub-menu li a:focus{
    background: var(--submenu-hover) !important;
    padding-left: 22px !important;
  }

  #top-menu li ul.sub-menu li:not(:last-child){
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  /* Hover bridge so dropdown doesn’t collapse */
  #top-menu > li.menu-item-has-children::after{
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: 100%;
    height: 18px;
    background: transparent;
  }

  #top-menu li ul.sub-menu:before{ display:none !important; }

  /* ==========================================================
     2ND LEVEL SUBMENUS — arrows, positioning, animation
     - Remove down arrow from submenu items with children
     - Add left/right arrow based on top-level expand direction
     - Position and animate 2nd level submenu
     ========================================================== */

  /* Arrow container: parent needs position relative */
  #top-menu li ul.sub-menu li.menu-item-has-children > a{
    position: relative !important;
    padding-right: 1.8em !important; /* space for right arrow */
  }

  /* Hide default down arrow */
  #top-menu li ul.sub-menu li.menu-item-has-children > a .et-pb-icon{
    display: none !important;
  }

  /* Right arrow — absolute, vertically centered (default and et-expand-menus-right) */
  #top-menu li ul.sub-menu li.menu-item-has-children > a:after{
    content: "\203A" !important; /* › */
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.1em !important;
    line-height: 1 !important;
  }

  /* Left arrow (et-expand-menus-left) — absolute, vertically centered on left */
  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children > a{
    padding-right: 18px !important; /* reset right padding */
    padding-left: 1.8em !important; /* space for left arrow */
  }
  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children > a:after{
    content: none !important; /* remove right arrow */
  }
  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children > a:before{
    content: "\2039" !important; /* ‹ */
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.1em !important;
    line-height: 1 !important;
  }

  /* 2nd level submenu: base + expand right */
  #top-menu li ul.sub-menu li.menu-item-has-children{
    position: relative !important;
  }
  /* Expand right: when 1st-level submenu has et-expand-menus-right OR has neither class yet (fallback) */
  #top-menu ul.sub-menu.et-expand-menus-right li.menu-item-has-children > ul.sub-menu,
  #top-menu li ul.sub-menu:not(.et-expand-menus-left):not(.et-expand-menus-right) li.menu-item-has-children > ul.sub-menu{
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
    margin-left: 4px !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-10px) !important;
    transition: opacity 200ms ease-out, visibility 200ms ease-out, transform 200ms ease-out !important;
  }
  #top-menu ul.sub-menu.et-expand-menus-right li.menu-item-has-children:hover > ul.sub-menu,
  #top-menu ul.sub-menu.et-expand-menus-right li.menu-item-has-children.et-hover > ul.sub-menu,
  #top-menu li ul.sub-menu:not(.et-expand-menus-left):not(.et-expand-menus-right) li.menu-item-has-children:hover > ul.sub-menu,
  #top-menu li ul.sub-menu:not(.et-expand-menus-left):not(.et-expand-menus-right) li.menu-item-has-children.et-hover > ul.sub-menu{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  /* 2nd level submenu: expand left (et-expand-menus-left) — opens to the left of parent */
  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children > ul.sub-menu{
    top: 0 !important;
    left: auto !important;
    right: 100% !important;
    margin-right: 4px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(10px) !important;
    transition: opacity 200ms ease-out, visibility 200ms ease-out, transform 200ms ease-out !important;
  }
  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children:hover > ul.sub-menu,
  #top-menu ul.sub-menu.et-expand-menus-left li.menu-item-has-children.et-hover > ul.sub-menu{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  /* 2nd level submenu: inherit 1st level styling (blur, border, shadow) */
  #top-menu li ul.sub-menu li.menu-item-has-children > ul.sub-menu{
    background: var(--submenu-top-bg) !important;
    -webkit-backdrop-filter: blur(var(--submenu-top-blur));
    backdrop-filter: blur(var(--submenu-top-blur));
    border: 1px solid var(--submenu-border);
    border-radius: var(--submenu-radius);
    box-shadow: var(--submenu-shadow);
    min-width: 240px !important;
    z-index: 1000000 !important; /* below 1st level so its shadow appears behind */
  }
  #main-header.et-fixed-header #top-menu li ul.sub-menu li.menu-item-has-children > ul.sub-menu{
    background: var(--submenu-sticky-bg) !important;
    -webkit-backdrop-filter: blur(var(--submenu-sticky-blur));
    backdrop-filter: blur(var(--submenu-sticky-blur));
  }

  /* Non-home: 2nd level submenus use sticky opacity to match */
  body:not(.home) #top-menu li ul.sub-menu li.menu-item-has-children > ul.sub-menu{
    background: var(--submenu-sticky-bg) !important;
    -webkit-backdrop-filter: blur(var(--submenu-sticky-blur));
    backdrop-filter: blur(var(--submenu-sticky-blur));
  }

  /* ==========================================================
     GLOBAL: Search icon legible + vertically centered
     ========================================================== */
  #et_top_search{
    height: var(--divi-header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
  }

  #et_search_icon{
    display: block !important;
    line-height: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: translateY(0) !important;
  }

  #et_search_icon:before{
    position: relative !important;
    line-height: 1 !important;
    opacity: 1 !important;
    transform: translateY(2px) !important; /* tweak 0–3px */
  }

  #main-header:not(.et-fixed-header) #et_search_icon:before{ color: rgba(0,0,0,.85) !important; }
  #main-header.et-fixed-header #et_search_icon:before{ color: rgba(0,0,0,.92) !important; }
  #et_top_search:hover #et_search_icon:before{ color: rgba(0,0,0,1) !important; }

  /* Search: center in header, constrain width when open */
  #main-header .et_search_outer{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: none !important;   /* allow clicks to pass through when closed */
    overflow: visible !important;      /* prevent clipping of search bar edges */
    visibility: hidden !important;     /* hide by default on initial load */
  }
  /* When form is visible: Divi adds et_pb_search_form_visible on open, or removes et_pb_search_form_hidden.
     JS ensures et_pb_search_form_hidden is present on load so we stay hidden until user opens. */
  #main-header .et_search_outer:has(.et_pb_search_form_visible),
  #main-header .et_search_outer:has(.et_search_form_container:not(.et_pb_search_form_hidden)){
    visibility: visible !important;    /* show when form is open */
    top: 0 !important;                 /* align with header when open */
    left: 50% !important;
    right: auto !important;
    width: 320px !important;
    max-width: 320px !important;
    margin-left: -158px !important;    /* center: -160px + 2px nudge right to prevent left clip */
  }
  #main-header .et_search_outer .et_search_form_container:not(.et_pb_search_form_hidden){
    pointer-events: auto !important;   /* form receives clicks when visible */
  }
  #main-header .et_search_form_container{
    max-width: 320px !important;
  }
  /* When form is open: lock width (override Divi JS) and force full opacity */
  #main-header .et_search_form_container:not(.et_pb_search_form_hidden),
  #main-header .et_search_form_container.et_pb_search_form_visible{
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    opacity: 1 !important;
  }
  .et_pb_search_form_hidden{
    pointer-events: none !important;  /* when closed, don't block clicks on search icon */
    visibility: hidden !important;    /* hide on initial load */
    opacity: 0 !important;
  }
  /* Keep placeholder and close button at full opacity/color when search is open */
  #main-header .et_search_form_container:not(.et_pb_search_form_hidden) .et-search-field,
  #main-header .et_search_form_container:not(.et_pb_search_form_hidden) .et_close_search_field,
  #main-header .et_search_form_container.et_pb_search_form_visible .et-search-field,
  #main-header .et_search_form_container.et_pb_search_form_visible .et_close_search_field{
    opacity: 1 !important;
    color: rgba(0,0,0,0.9) !important;
  }
  #main-header .et_search_form_container:not(.et_pb_search_form_hidden) .et-search-field::placeholder,
  #main-header .et_search_form_container.et_pb_search_form_visible .et-search-field::placeholder{
    opacity: 1 !important;
    color: rgba(0,0,0,0.7) !important;
  }
  #main-header .et_search_form_container:not(.et_pb_search_form_hidden) .et_close_search_field:before,
  #main-header .et_search_form_container.et_pb_search_form_visible .et_close_search_field:before{
    opacity: 1 !important;
    color: inherit !important;
  }
  #et_top_search{
    position: relative !important;
    z-index: 10 !important;           /* ensure icon stays above search form when closed */
  }

  /* ==========================================================
     HOME ONLY: overlay header look + logo expansion animation
     (keeps the special hero overlay behavior on homepage only)
     ========================================================== */

  body.home #main-header{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 999999 !important;
    height: var(--divi-header-h) !important;
    min-height: var(--divi-header-h) !important;
    padding: 0 !important;
    overflow: visible !important;

    transition: background-color 520ms cubic-bezier(.16,1,.3,1),
                box-shadow 520ms cubic-bezier(.16,1,.3,1);
  }

  body.home #main-header:not(.et-fixed-header){
    background-color: rgba(255,255,255,.38) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none !important;
  }

  body.home #main-header.et-fixed-header{
    background-color: rgba(255,255,255,.95) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
  }

  body.home.et_fixed_nav #page-container{ padding-top: 0 !important; }

  /* Home: allow expanded logo to overflow (no clipping when scaled) */
  body.home #top-menu > li.centered-inline-logo-wrap{
    overflow: visible !important;
  }

  /* ==========================================================
     HOME ONLY: LOGO (position:absolute anchored to header)
     - Uses absolute (not fixed) so search-open transforms don't change containing block
     - Container set to position:static so logo anchors to header, not container
     - Nudge is done via margin-left math (no transforms)
     ========================================================== */
  body.home #main-header .container{
    position: static !important;  /* so logo anchors to header, not container */
  }

  body.home #main-header .logo_container{
    position: absolute !important;  /* anchored to header; immune to search-open transforms */
    top: 0 !important;
    left: 50% !important;

    width: var(--center-gap) !important;
    height: var(--divi-header-h) !important;

    /* Center without transforms */
    margin-left: calc((var(--center-gap) / -2) - var(--logo-nudge-x)) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: none !important;
    pointer-events: none !important;
    z-index: 1000000 !important;
    overflow: visible !important;
  }

  body.home #main-header .logo_container a{ pointer-events: auto !important; }

  body.home #main-header #logo,
  body.home #main-header .logo_container img{
    max-height: calc(var(--divi-header-h) - var(--divi-logo-gap)) !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  body.home #main-header #logo{
    transition: transform 520ms cubic-bezier(.16,1,.3,1);
    transform-origin: center top;
    will-change: transform;
  }

  body.home #main-header:not(.et-fixed-header) #logo{
    transform: translateY(var(--logo-expand-y)) scale(var(--logo-expand-scale)) !important;
  }

  body.home #main-header.et-fixed-header #logo{
    transform: translateY(var(--logo-sticky-y)) scale(var(--logo-sticky-scale)) !important;
  }
}

/* ----------------------------------------------------------
   MOBILE <= 990px
   We do NOT apply any of the desktop overrides.
   Divi's default hamburger/mobile menu behavior remains intact.
   ---------------------------------------------------------- */