/* =========================================================
   NGT Pro Mega Menu
   1. Core Wrapper & 100vw Canvas (Trigger, Background, Animation)
   2. Structure & Alignment (Fluid 3-Column Layout)
   3. Typography & Hover Effects (White Links, Zoom, No-Wrap)
   4. Title Styling & Inner Heights (Services H2, Minimum Heights)
   5. Hover Bridge Fixes (Prevents Menu Closing)
   ========================================================= */


/* =========================================================
   1. CORE WRAPPER & 100VW CANVAS
   Description: Defines the main triggers, the full-width 
   edge-to-edge dropdown canvas, and opening animations.
   ========================================================= */

/* Header Container Reset */
header, .site-header {
    position: relative !important;
}

/* Main Wrapper */
.ngt-mega-wrapper {
    position: static !important;
    display: inline-block;
}

.ngt-mega-pane .wp-block-navigation-item {
    margin-bottom: 3px !important;
}

/* Dynamic Trigger Link (Removes outer box border and matches standard links) */
.ngt-mega-trigger {
    color: var(--ngt-trigger-color, #ffffff) !important;
    text-transform: var(--ngt-trigger-transform, uppercase) !important;
    text-decoration: var(--ngt-trigger-decoration, none) !important;
    cursor: pointer;
    padding: 0 0 4px 0 !important; /* Matches underline spacing */
    margin: 0 !important;
    border: none !important; /* <--- KILLS THE OUTER BORDER BOX */
    border-bottom: 2px solid transparent !important; /* Placeholder for hover underline */
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, color 0.25s ease !important;
    transform-origin: left center !important;
}

/* Trigger Hover State: Green Underline + Zoom Effect */
.ngt-mega-wrapper:hover .ngt-mega-trigger,
.ngt-mega-trigger:hover {
    color: #ffffff !important;
    border-bottom: 2px solid #81b144 !important; /* Green Underline */
    transform: scale(1.08) !important; /* Smooth Zoom Effect */
}

/* Dynamic 100vw Dropdown Canvas */
.ngt-mega-pane {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    
    background-color: var(--ngt-pane-bg-color, #083b54) !important;
    border-top: var(--ngt-pane-border-thickness, 3px) solid var(--ngt-pane-border-color, #81b144) !important;
    
    padding-top: var(--ngt-pane-padding-v, 56px) !important;
    padding-bottom: var(--ngt-pane-padding-v, 56px) !important;
    padding-left: calc((100vw - 1200px) / 2) !important;
    padding-right: calc((100vw - 1200px) / 2) !important;
    
    box-sizing: border-box !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    transform: translateY(10px);
    z-index: 99999;
    
    /* FIX: Changed to 0 so the container shrinks to fit content (JS handles dynamic height) */
    min-height: 0 !important; 
}

/* Hover/Focus States for the Canvas */
.ngt-mega-wrapper:hover .ngt-mega-pane,
.ngt-mega-wrapper:focus-within .ngt-mega-pane {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}


/* =========================================================
   2. STRUCTURE & ALIGNMENT
   Description: Sets up the dynamic, fluid 3-column layout 
   and aggressively hides default WordPress UI elements.
   ========================================================= */

/* Hide WordPress toggle arrows in the mega menu */
.ngt-mega-pane .wp-block-navigation-submenu__toggle,
.ngt-mega-pane button.wp-block-navigation-submenu__toggle,
.ngt-mega-pane .wp-block-navigation-item__content + button {
    display: none !important;
}

/* The Root Column (Column 1): Anchors everything to the top */
.ngt-mega-pane ul.wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important; 
    
    /* FIX: Make Column 1 fully dynamic based on text length */
    width: max-content !important; 
    max-width: max-content !important;
    
    position: relative !important; 
}

/* Strip anchor positioning from list items so they stack clean */
.mark-submega-tree, 
.mark-submega-tree1 { position: static !important; }
.ngt-mega-pane .wp-block-navigation-item {
    display: block !important;
    width: 100% !important; 
}

/* Level 2 Submenu (Column 2): Pops out perfectly to the right of Column 1 */
.mark-submega-tree > .wp-block-navigation__submenu-container {
    position: absolute !important; 
    top: 0px !important; 
    
    /* FIX: Aligns exactly to the end of Column 1 */
    left: 100% !important; 
    
    margin-top: 0 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 1px !important;
    
    /* FIX: Column 2 width is fully dynamic */
    width: max-content !important; 
    
    padding: 0 0 0 40px !important; 
    background: transparent !important; 
    border: none !important; 
    box-shadow: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease-in-out !important;
}

/* Level 3 Submenu (Column 3): Pops out perfectly to the right of Column 2 */
.mark-submega-tree1 > .wp-block-navigation__submenu-container {
    position: absolute !important; 
    top: 0px !important; 
    
    /* FIX: Aligns exactly to the end of Column 2 */
    left: 100% !important; 
    
    margin-top: 0 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 1px !important;
    
    /* FIX: Column 3 width is fully dynamic */
    width: max-content !important; 
    
    padding: 0 0 0 40px !important; 
    background: transparent !important; 
    border: none !important; 
    box-shadow: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease-in-out !important;
}

/* Reveal Submenus on Hover */
.mark-submega-tree:hover > .wp-block-navigation__submenu-container,
.mark-submega-tree:focus-within > .wp-block-navigation__submenu-container,
.mark-submega-tree1:hover > .wp-block-navigation__submenu-container,
.mark-submega-tree1:focus-within > .wp-block-navigation__submenu-container {
    opacity: 1 !important;
    visibility: visible !important; 
    pointer-events: auto !important;
}


/* =========================================================
   3. TYPOGRAPHY & HOVER EFFECTS
   Description: Sets font sizes, forces a STRICT WHITE 
   underline, zoom effect, and stops text from wrapping.
   ========================================================= */

/* Base Typography for ALL mega menu links (14px Font) */
.ngt-mega-pane .wp-block-navigation-item > a,
.ngt-mega-pane .wp-block-navigation-item > a.wp-block-navigation-item__content,
.ngt-mega-pane .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: #ffffff !important;
    display: inline-block !important;
    padding: 0 0 4px 0 !important; 
    margin: 0 !important;
    border-bottom: 1px solid transparent !important; 
    transform-origin: left center !important; 
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    
    /* FIX: Forces all link text to remain on a single line */
    white-space: nowrap !important;
}

/* ALL MEGA MENU LINKS HOVER (Strictly White Underline & Zoom) */
.ngt-mega-pane li.wp-block-navigation-item > a:hover,
.ngt-mega-pane li.wp-block-navigation-item > a.wp-block-navigation-item__content:hover,
.ngt-mega-pane .wp-block-navigation-item:focus-within > a.wp-block-navigation-item__content,
.ngt-mega-pane .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.ngt-mega-pane .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover {
    color: #ffffff !important;
    border-bottom: 1px solid #ffffff !important; /* Forces WHITE */
    border-color: #ffffff !important;
    transform: scale(1.03) !important; /* Minor Zoom */
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 0 4px 0 !important; /* Prevents text shifting */
}


/* =========================================================
   4. TITLE STYLING & INNER HEIGHTS
   Description: Controls the "Services" H2 title styling and 
   the minimum height of the inner submenu container.
   ========================================================= */

/* Inner Container Height */
.wp-block-navigation .wp-block-navigation__submenu-container {
    /* FIX: Changed to 0 to prevent artificial stretching */
    min-height: 0 !important; 
}

/* Style the "Services" H2 Title */
.ngt-mega-pane h2 {
    color: #ffffff !important; 
    display: inline-block !important; 
    width: max-content !important; /* Shrinks invisible box to text width */
    border-bottom: 2px solid #81b144 !important; /* Green Underline */
    padding-bottom: 8px !important; 
    margin-bottom: 20px !important; 
}

/* =========================================================
   KILL OUTER BORDER BOXES AROUND MEGA MENU TRIGGERS
   ========================================================= */
.wp-block-ngt-mega-menu.ngt-mega-wrapper,
.wp-block-ngt-mega-menu.ngt-mega-wrapper-edit,
.ngt-mega-wrapper,
.wp-block-ngt-mega-menu {
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ngt-mega-trigger,
.ngt-mega-trigger-edit,
.wp-block-ngt-mega-menu .ngt-mega-trigger {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   5. HOVER BRIDGE FIXES
   Description: Creates safe zones bridging gaps so menus 
   stay open smoothly when moving the mouse.
   ========================================================= */

/* Safe Hover Bridge covering the gap directly above the dropdown pane */
.ngt-mega-pane::before {
    content: '' !important;
    position: absolute !important;
    top: -40px !important;
    left: 0 !important;
    width: 100% !important;
    height: 40px !important;
    background: transparent !important;
    display: block !important;
    pointer-events: auto !important;
}

/* Internal Bridge for Submenus */
.wp-block-navigation .wp-block-navigation__submenu-container::before {
    content: "" !important;
    position: absolute !important;
    top: -40px !important; 
    left: 0 !important;
    width: 100% !important;
    height: 40px !important; 
    background: transparent !important; 
    display: block !important;
    pointer-events: auto !important;
}
/* Horizontal Hover Bridge for Submenus */
.mark-submega-tree > .wp-block-navigation__submenu-container::before,
.mark-submega-tree1 > .wp-block-navigation__submenu-container::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -40px !important; /* Bridges the exact 40px padding gap to the left */
    width: 40px !important;
    height: 100% !important;
    background: transparent !important;
    display: block !important;
    pointer-events: auto !important;
}