/* ==========================================================================
   Kazbar Projects - HEADER & NAV (Divi 5, Theme Builder header)
   - Desktop menu: Poppins links, orange hover underline, "Contact" CTA pill.
   - Transparent over the hero, solid white on scroll (JS adds .kz-stuck).
   - Mobile (<=980px): right-slide white panel with a two-bar hamburger -> X.
   Colour tokens come from the child style.css :root (orange/ink).
   Build the header in Divi Theme Builder with a Menu module.
   Give the header SECTION the CSS class "kz-header".
   Give the "Contact" menu item the CSS class "kz-nav-cta" (Menu > item > CSS classes).
   ========================================================================== */

html{ scroll-behavior:smooth; scroll-padding-top:var(--kz-header-h,108px); }

/* Let dropdowns / the mobile panel escape any header clipping */
.et-l--header,
.et-l--header .et_pb_row,
.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu__wrap,
.et-l--header .et_pb_menu_inner_container{ overflow:visible !important; }

/* Logo sizing (white logo is the Menu module's own image).
   SAME size in both states - the header must not resize on scroll, only recolour. */
.kz-header .et_pb_menu--with-logo .et_pb_menu__logo img,
.kz-header.kz-stuck .et_pb_menu--with-logo .et_pb_menu__logo img{ max-height:var(--kz-logo-h,76px) !important; height:auto !important; width:auto !important; }

/* ============================================================
   HEADER SECTION LOOK - transparent over the hero, white on scroll.
   JS (header-nav.js) toggles .kz-stuck on the header once the page scrolls.
   !important wins over Divi's generated section CSS.
   ============================================================ */
/* VERTICAL header spacing lives on the SECTION (Divi respects this reliably); the ROW
   only caps width + gives horizontal padding. SAME in both states so it never resizes. */
.kz-header.et_pb_section,
.kz-header.kz-stuck.et_pb_section{
  padding:16px 0 !important;   /* vertical 16, horizontal 0 (row handles sides) */
  transition:background .35s ease, box-shadow .35s ease;
}
.kz-header.et_pb_section{ background:transparent !important; }
.kz-header.kz-stuck.et_pb_section{
  background:#fff !important;
  box-shadow:0 4px 24px rgba(0,0,0,.08);
}
/* Divi's sticky adds a scrollbar-compensation margin/padding when the section pins,
   which shifts the header content sideways ("jumps right"). Pin the section to the full
   viewport width in the sticky/fixed state so it can't move; the row stays centred. */
.kz-header.et_pb_section.et_pb_sticky,
.kz-header.et_pb_section.et_pb_sticky--active,
.kz-header.kz-stuck.et_pb_section{
  width:100% !important; max-width:100% !important;
  margin-left:0 !important; margin-right:0 !important;
  padding-left:0 !important; padding-right:0 !important;
  left:0 !important; right:0 !important; box-sizing:border-box !important;
}
/* Divi built this header as a FLEX section (et_flex_section). In the non-sticky state the
   row is capped at 1240 but sits at flex-start (left); in the sticky state it centres - which
   is exactly why the content "jumps right" on scroll. Centre the row in the flex layout so
   both states match. */
.kz-header.et_flex_section,
.kz-header .et_pb_row_inner{ align-items:center !important; justify-content:center !important; }
/* 3-class specificity (kz-header + et_pb_section + et_pb_row) so it beats Divi's
   per-module `.et_pb_row_0_tb_header.et_pb_row{padding:0}` in BOTH states - that was
   giving the non-sticky row 0 padding and the sticky row 32px, hence the sideways jump. */
.kz-header.et_pb_section .et_pb_row{
  width:80% !important; max-width:var(--kz-maxw,1560px) !important;
  margin-left:auto !important; margin-right:auto !important; align-self:center !important;
  padding-top:0 !important; padding-bottom:0 !important;
  padding-left:0 !important; padding-right:0 !important;
}


/* ---- Sticky logo swap ----
   White logo = the Menu module's <img>. Dark logo = a Media Library upload,
   referenced root-relative and cross-faded in once the header is stuck.
   Both logos share the same aspect ratio. Replace the file (or URL) to change it. */
.kz-header .et_pb_menu__logo{ position:relative; display:inline-block; }
.kz-header .et_pb_menu__logo img{ transition:opacity .3s ease; }
.kz-header .et_pb_menu__logo::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:url("/wp-content/uploads/2026/07/logo.png") left center / contain no-repeat;
  opacity:0; transition:opacity .3s ease;
}
.kz-header.kz-stuck .et_pb_menu__logo::after{ opacity:1; }
.kz-header.kz-stuck .et_pb_menu__logo img{ opacity:0; }

/* ============================================================
   DESKTOP NAV (>= 981px)
   ============================================================ */
@media (min-width:981px){
  .kz-header.et_pb_section .et_pb_row{ width:90% !important; }

  /* Push the menu to the right and right-align the items */
  .et-l--header .et_pb_menu__menu{ margin-left:auto; }
  .et-l--header .et_pb_menu__menu > nav > ul{ display:flex; align-items:center; justify-content:flex-end; gap:4px; list-style:none; }
  .et-l--header .et_pb_menu__menu > nav > ul > li{ margin:0 !important; padding:0 !important; }

  /* Links (Poppins, medium) */
  .et-l--header .et_pb_menu__menu > nav > ul > li > a{
    display:inline-block !important;
    font-family:'Poppins',sans-serif !important;
    font-weight:500 !important;
    font-size:1.2rem !important;
    letter-spacing:.01em !important;
    padding:8px 10px 13px !important;
    position:relative;
    text-decoration:none !important;
    transition:color .3s ease;
    text-transform: uppercase !important;
  }
  /* Orange hover underline drawn as a background gradient on the link itself
     (an absolutely-positioned ::after can render through Divi menu text). */
  .et-l--header .et_pb_menu__menu > nav > ul > li:not(.kz-nav-cta) > a{
    background-image:linear-gradient(var(--orange,#F48036),var(--orange,#F48036));
    background-repeat:no-repeat;
    background-position:50% calc(100% - 4px);
    background-size:0% 1px;
    transition:background-size .3s ease, color .3s ease;
    
  }
  .et-l--header .et_pb_menu__menu > nav > ul > li:not(.kz-nav-cta):hover > a{
    background-size:calc(100% - 32px) 1px;
  }

  /* Link colour: white over the hero, ink once stuck. Text-shadow for legibility on video. */
  .et-l--header .et_pb_menu__menu > nav > ul > li > a{ color:#fff !important; text-shadow:0 1px 10px rgba(0,0,0,.45); }
  .kz-header.kz-stuck .et_pb_menu__menu > nav > ul > li > a{ color:var(--ink) !important; text-shadow:none; }

  /* "Contact" CTA pill - orange in both states, white text always */
  .et-l--header .et_pb_menu__menu > nav > ul > li.kz-nav-cta > a,
  .kz-header.kz-stuck .et_pb_menu__menu > nav > ul > li.kz-nav-cta > a{
    background:var(--orange,#F48036) !important; color:#fff !important;
    padding:9px 22px !important; border-radius:50px !important; text-shadow:none !important;
    margin-left:10px;
  }
  .et-l--header .et_pb_menu__menu > nav > ul > li.kz-nav-cta:hover > a{ background:var(--orange-dark,#e06d22) !important; }

  /* Hide Divi's mobile hamburger on desktop */
  .et-l--header .et_pb_menu__mobile-bottom,
  .et-l--header .et_mobile_nav_menu{ display:none !important; }
}

/* ============================================================
   MOBILE NAV (<= 980px) - right-slide white panel, two-bar hamburger -> X
   ============================================================ */
@media (max-width:980px){

  /* Hide the desktop <ul>; we drive the panel off Divi's mobile menu */
  .et-l--header .et_pb_menu__menu{ display:none !important; }

  /* Divi's hamburger -> our two-bar icon */
  .et-l--header .et_mobile_nav_menu{ display:block !important; position:relative; z-index:130; }
  .et-l--header .et_mobile_nav_menu .mobile_menu_bar:before,
  .et-l--header .et_mobile_nav_menu .mobile_menu_bar:after{ content:none !important; }
  /* z-index must beat the panel's 120: the bar and the panel are siblings inside
     .et_mobile_nav_menu, so without this the open panel paints over the close X */
  .et-l--header .et_mobile_nav_menu .mobile_menu_bar{
    position:relative; display:block; width:34px; height:34px; z-index:130;
  }
  /* Two bars */
  .et-l--header .et_mobile_nav_menu .mobile_menu_bar::before{
    content:"" !important; position:absolute; left:2px; right:2px; top:11px; height:2.5px; border-radius:2px;
    background:#fff; transition:transform .35s var(--ease,ease), background .3s ease;
  }
  .et-l--header .et_mobile_nav_menu .mobile_menu_bar::after{
    content:"" !important; position:absolute; left:2px; right:2px; top:20px; height:2.5px; border-radius:2px;
    background:#fff; transition:transform .35s var(--ease,ease), background .3s ease;
  }
  .kz-header.kz-stuck .et_mobile_nav_menu .mobile_menu_bar::before,
  .kz-header.kz-stuck .et_mobile_nav_menu .mobile_menu_bar::after{ background:var(--ink); }

  /* Open state (JS toggles .kz-menu-open on <body>): morph to an X */
  body.kz-menu-open .et_mobile_nav_menu .mobile_menu_bar::before{ transform:translateY(4.5px) rotate(45deg); background:var(--ink); }
  body.kz-menu-open .et_mobile_nav_menu .mobile_menu_bar::after{ transform:translateY(-4.5px) rotate(-45deg); background:var(--ink); }

  /* The slide-in panel = Divi's generated mobile menu <ul> */
  .et-l--header .et_mobile_menu{
    position:fixed !important; top:0 !important; right:0 !important; left:auto !important;
    height:100vh !important; width:78% !important; max-width:340px !important;
    background:#fff !important; border:none !important;
    display:flex !important; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:8px; padding:0 44px !important; margin:0 !important;
    transform:translateX(100%); transition:transform .35s var(--ease,ease);
    box-shadow:-10px 0 40px rgba(0,0,0,.15); z-index:120;
  }
  body.kz-menu-open .et-l--header .et_mobile_menu{ transform:translateX(0); }
  .et-l--header .et_mobile_menu li{ width:100%; border:none !important; padding:0 !important; }
  .et-l--header .et_mobile_menu li a{
    display:block; padding:13px 0 !important; color:var(--ink) !important;
    font-family:'Poppins',sans-serif !important; font-weight:500 !important; font-size:1.275rem !important;
    text-transform: uppercase !important;
  }
  .et-l--header .et_mobile_menu li.kz-nav-cta a{ color:var(--orange) !important; }
}