/* ==========================================================================
   JENOBIX — HEADER CUSTOM CSS  (v3 — rebuilt for native Divi nav structure)
   ==========================================================================
   Nav structure changed from DiviFlash's Advanced Menu to native Divi:
     Column 2 > Group module (class "JX-nav")
                  > individual Link modules (one per nav item, no class needed)
                  > Button module (class "JX-cta") as the last item in the group

   What this file does NOT do, on purpose:
     - Set font-family or font-size  → owned by Divi Variable Manager +
       Typography presets (Link Nav, Button Primary, etc.)
     - Set brand colors directly     → owned by Divi Global Colors, applied
       via each module's Design tab. Where a color is unavoidable in CSS
       (e.g. a pseudo-element background), it comes from color-bridge.css
       or from currentColor, never a hardcoded hex.
   ========================================================================== */

/* -----------------------------------------------------------
   1. HEADER SECTION
   Class "JX-header-section" on the Section (Theme Builder → Global Header).
   ----------------------------------------------------------- */
.JX-header-section{
  transition:box-shadow .3s cubic-bezier(.22,.9,.32,1);
}
body.JX-scrolled .JX-header-section{
  box-shadow:0 6px 24px rgba(16,24,40,.08);
}

/* -----------------------------------------------------------
   2. HEADER ROW — sticky shrink
   Class "JX-header-row" on the Row (1/4 + 3/4).
   ----------------------------------------------------------- */
.JX-header-row{
  transition:min-height .3s cubic-bezier(.22,.9,.32,1);
}
body.JX-scrolled .JX-header-row{
  min-height:64px !important;
}

/* -----------------------------------------------------------
   3. NAV LINKS — growing underline
   Class "JX-nav" is on the Group module (rendered as an <li>),
   wrapping individual native Divi Link modules (<a class="et_pb_link...">).
   Text color / hover color are set per-link in each Link module's own
   Design tab (Link Nav preset) — this only adds the underline motion,
   via currentColor so it always matches whatever color Divi already set.

   NOTE — active/current page: native Link modules placed manually don't
   get an automatic "this is the current page" class the way a real
   WordPress menu item would. If you want the active-page underline
   back, the practical options are: (a) go back to a WP-menu-driven nav
   module that supports it natively, or (b) duplicate the header per
   page and manually mark the current link — happy to set up either,
   just say which.
   ----------------------------------------------------------- */
.JX-nav .et_pb_link{
  position:relative;
  display:inline-flex;      /* prevents flex-stretch from widening the box past the text */
  flex:0 0 auto;
  transition:color .25s cubic-bezier(.22,.9,.32,1);
}
.JX-nav .et_pb_link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-5px;
  height:2px;
  background:var(--JS-D-Blue);   /* explicit, not currentColor — see note below */
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.9,.32,1);
  pointer-events:none;
}
.JX-nav .et_pb_link:hover::after{ transform:scaleX(1); }
/* NOTE: currentColor was removed here on purpose. Divi applies the
   hover text color to a nested inner element (something like
   .et_pb_link_text), not to .et_pb_link itself — so currentColor on
   this ::after (a child of .et_pb_link) was reading the link's RESTING
   color, not its hover color, which is why the underline showed gray
   instead of blue. Referencing a real variable directly sidesteps that
   inheritance problem entirely.

   IMPORTANT: this now points at --JS-D-Blue (per your update) instead
   of --JX-brand-blue. I don't have that variable defined anywhere in
   color-bridge.css — if it's not declared in a :root block somewhere
   in your CSS, this will silently fall back to invalid/transparent and
   the underline won't show at all. Either add it to color-bridge.css
   (e.g. --JS-D-Blue: #0B5FD0;) or tell me and I'll rename it to match
   whatever you've actually set up.*/

/* -----------------------------------------------------------
   4. MEGA MENU PANEL — hover tint
   Unchanged from before — still applies if the mega menu panel content
   uses Blurb/Link modules with class "JX-mega-link". If you've since
   rebuilt the mega menu with the same Group+Link approach as the top
   nav, tell me and I'll adjust this section to match, same as above.
   ----------------------------------------------------------- */
.JX-mega-link{
  border-radius:8px;
  transition:background .25s cubic-bezier(.22,.9,.32,1), transform .25s cubic-bezier(.22,.9,.32,1);
}
.JX-mega-link:hover{
  background:var(--JX-brand-blue-wash);
  transform:translateX(3px);
}


/* -----------------------------------------------------------
   5. CTA BUTTON
   Native Divi Button module, class "JX-cta" applied directly to
   .et_pb_button — confirmed working via inspection. Colors/padding/
   radius/icon come from the module's own Design tab (Button Primary
   spec + Divi's built-in "Add Button Icon" feature) — this only adds
   motion: lift, shadow grow, and nudging Divi's own icon glyph right.

   CORRECTED: earlier versions of this file gave the header CTA the
   cursor-tracking glow-border effect that was only ever meant for the
   Hero section's OUTLINE button — the header button never had that in
   the original design. Worse, that version used .JX-cta::after with
   its own `content:""`, which silently overwrote Divi's own ::after
   (Divi renders its button icon glyph via ::after with `content:"\..."`)
   — that's why the icon disappeared regardless of Design tab settings.
   This version never sets `content` on ::after, so Divi's icon and our
   hover nudge coexist without conflict.

   .df-menu-button kept as a harmless fallback in case any DiviFlash
   buttons are still in use elsewhere in the header.
   ----------------------------------------------------------- */
.JX-cta,
.df-menu-button{
  transition:transform .3s cubic-bezier(.22,.9,.32,1), box-shadow .3s cubic-bezier(.22,.9,.32,1);
}
.JX-cta:hover,
.df-menu-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(16,24,40,.28); /* neutral shadow — swap for a brand-blue rgba if you'd rather it tint blue */ 
}
/* Nudges Divi's own icon glyph right on hover — does NOT set `content`,
   so it layers on top of whatever icon Divi is already rendering. */
.JX-cta:hover::after,
.df-menu-button:hover::after{
 /* transform:translateX(3px);
  transition:transform .3s cubic-bezier(.22,.9,.32,1);*/
}
.button-shine {
  position: relative; 
  overflow: hidden;
}
.button-shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
}
.button-shine:hover::after {
left: 130%;
}
.button-shine .df-am-button-icon{
  margin-top: 3px;
}

.JX-FOOTER-LINK-ITEM {
 width:fit-content;
  align-self:flex-start;
  position:relative;
  transition:transform .35s cubic-bezier(.22,.9,.32,1);
}
.JX-FOOTER-LINK-ITEM:hover{
  transform:translateX(4px);
}
.JX-FOOTER-LINK-ITEM::after {
      content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 1px;
    width: 0;
    background: white;
    transition: width .35s cubic-bezier(.22, .9, .32, 1);;
}
.JX-FOOTER-LINK-ITEM:hover::after {
    width: 100%;
}
/*
Fixing the Header button Icon hover effect.
*/
body #page-container .et_pb_section .et_pb_button_0_tb_header:after, body #page-container .et_pb_section .et_pb_button_0_tb_header:hover:after {
    line-height: 0em !important;
}