/* Define your theme's custom properties */
:root {
    --header-height: 80px; /* IMPORTANT: Adjust this to your actual header height */
    --primary-color: #00326d; /* Main brand color for links */
    --primary-text-color: #FFFFFF; /* Used for sub-menu links generally */
    --light-gray-background: #f8f8f8; /* Background for promo area/subtle sections */
    --hover-color: #f26722; /* Darker hover color */
      --hover-nav-color: #f26722; /* Darker hover color */

    --active-color: #f26722; /* Active state color */
}

/* --- Main Navigation Styling --- */
.navigation-primary {
    background-color: white; /* Or transparent, depending on your actual header background */
    padding: 2px 0;
    position: relative;
    z-index: 20; /* Ensure main nav is above page content */
}

/* Ensure the main menu list itself is a horizontal flex container */
.primary-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex !important; /* Force flex display */
    flex-direction: row !important; /* Force row direction */
    justify-content: center; /* Center the main menu items */
    gap: 10px; /* Space between main menu items */
    width: auto !important; /* Prevent it from taking full width */
}

.menu-item {
    /* Basic styles for each individual main menu LI */
    flex-shrink: 0; /* Prevent items from shrinking too much */
    width: auto !important; /* Ensure width is auto on desktop */
    position: relative; /* Needed for positioning the mega menu content */
}

.menu-link {
    text-decoration: none;
    color: var(--primary-color);
    padding: 6px 10px;
    display: block;
    font-weight: 800;
    font-size: 0.95em;
    transition: color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap; /* Prevent menu items from wrapping */
    border-bottom: 2px solid #fff;
}

.menu-link:hover,
.menu-link:focus {
    color: #002f5f!important;
  border-bottom: 2px solid #E05206;
}

.menu-link:active {
    color: var(--hover-nav-color);
}

/* Active Menu Item Styles */
.menu-link.active-item {
    position: relative;
    background-color: #f0f0f0;
    border-radius: 4px;
}

/* Underline for active top-level menu item */
.navigation-primary .menu-link.active-item:after {
    background-color: var(--hover-nav-color)!important;
    bottom: -3px;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    width: 100%;
}

/* Style for the active mega menu trigger */
.menu-link.js-has-megamenu-trigger.is-active-megamenu-trigger {
    color: #002f5f;
  border-bottom:2px solid #f26722;
}

/* --- Inline Mega Menu Content Styling --- */
/* Hide the mega menu content by default on desktop */
.hidden-megamenu-content {
  position: absolute;
  top: calc(var(--header-height) + 15px); /* Adjust if needed */
  left: 0;
  width: 100vw;
  max-width: 100vw;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  border-top: 2px solid rgb(0 0 0 / 10%);
}


/* Make the mega menu span the entire viewport width */
.hidden-megamenu-content {
    left: 0;
    transform: translateX(0);
    width: 100%; /* Take up 100% of the screen width */
}
/* If you want it to align with your content wrapper, uncomment this and adjust max-width */
/*
.hidden-megamenu-content .megamenu-inner-wrapper {
    max-width: 1200px; // Adjust to your site's content width
    margin: 0 auto;
    padding: 0 20px; // Horizontal padding for content
}
*/

/* Show the active mega menu content */
.hidden-megamenu-content.is-active-megamenu-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Allows clicks when visible */
  position:fixed;
  padding:1rem;

}

/* Adjust body scroll when megamenu is active */
body.megamenu-active {
    /* overflow: hidden; */ /* Uncomment if you want to prevent scrolling when mega menu is open */
}

/* Inner wrapper for columns */
.megamenu-inner-wrapper {
    display: flex; /* Make it a flex container for columns */
    flex-wrap: wrap;
    gap: 30px; /* Space between columns */
    max-width: 1200px; /* Adjust to your content width */
    margin: 0 auto;
    padding: 0 20px; /* Horizontal padding for content within the wrapper */
    position: relative; /* For close button if needed here */
      align-items: center;
  justify-content: space-between;
}

/* Megamenu Columns List */
.megamenu-column-list {
    list-style: none;
    padding: 0;
    margin: 0;
   /* flex: 1;  Each column takes equal space */
    min-width: 180px; /* Minimum width for a column before wrapping */
}



/* --- */
/* Base Styles for Mega Menu Links */
.megamenu-column-list li a.megamenu-link {
    text-decoration: none; /* Remove browser's default underline */
    display: block; /* Ensures the whole block is clickable and allows padding */
    font-weight: normal;
    font-size: 0.95em;
    position: relative; /* Essential for the pseudo-element underline */
    overflow: hidden; /* Important for clean underline animation if using a side-to-side effect */

    /* Smooth transitions for all properties that will change on hover */
    transition: all 0.3s ease-out; /* Adjust timing as needed */
}

/* Headings within the Mega Menu */
.megamenu-column-list li h3 {
    color: #6C6F70;
}

/* --- */
/* Custom Underline Effect (Pseudo-element) */
.megamenu-column-list li a.megamenu-link::after {
    content: ''; /* Required for pseudo-elements */
    position: absolute;
    left: 0;
    bottom: 0; /* Position the underline at the bottom of the link */
    width: 0; /* Starts with no width, will expand on hover */
    height: 2px; /* Thickness of your underline */
    background-color: #E05206; /* Pantone 166 PC - Your chosen orange */
    transition: width 0.3s ease-out; /* Smooth animation for the underline expansion */
}

/* --- */
/* Hover & Focus States for Mega Menu Links */
.megamenu-column-list li a.megamenu-link:hover,
.megamenu-column-list li a.megamenu-link:focus {
    color: #6C6F70; /* Text color remains white on hover */

    /* The "POP" effect: */
    /* Option 1: Subtle Text Glow */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* Soft white glow */

    /* Option 2: Subtle Background Highlight (uncomment to try) */
    /* background-color: rgba(255, 255, 255, 0.08); */ /* Very light white overlay */

    /* Option 3: Lift with Box Shadow (uncomment to try) */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
    /* transform: translateY(-2px); */ /* Moves the element slightly up */

    /* Ensure accessibility for keyboard users */
    outline: none; /* Remove default focus outline if you're providing a visual alternative */
}

/* Underline Animation on Hover & Focus */
.megamenu-column-list li a.megamenu-link:hover::after,
.megamenu-column-list li a.megamenu-link:focus::after {
    width: 100%; /* Underline expands to full width on hover */
}
/* Megamenu Promo Area (right side content) */
.megamenu-promo-area {
    flex: 0 0 250px; /* Fixed width for promo area */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  background-color:#fff;
}
.megamenu-promo-area h3 {
    margin-top: 0;
    color: var(--primary-color);
}
.megamenu-promo-area p {
    font-size: 0.9em;
    line-height: 1.5;
    color: #666;
}
.megamenu-promo-area .button {
    display: inline-block;
    padding: 8px 15px;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 15px;
    transition: background-color 0.2s ease;
}
.megamenu-promo-area .button:hover {
    background-color: var(--hover-color);
}

/* Close button within the mega menu content */
.close-megamenu {
    position: absolute;
    top: 10px; /* Adjust as needed */
    right: 10px; /* Adjust as needed */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 28px;
    color: #333;
    z-index: 100; /* Ensure it's above content */
    padding: 5px;
    line-height: 1;
    transition: color 0.2s ease;
}
.close-megamenu:hover {
    color: var(--primary-color);
}

/* --- Mobile Specific Overrides --- */
@media (max-width: 767px) { /* Adjust breakpoint for mobile */
    /* Hide desktop mega menu content on mobile */
    .hidden-megamenu-content {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: fixed !important; /* Override absolute for safety on mobile */
        top: -9999px !important;
        left: -9999px !important;
    }

    /* Ensure main menu list is a column on mobile */
    .primary-menu-list {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .menu-item {
        width: 100% !important; /* Take full width on mobile */
        border-bottom: 1px solid #eee;
    }
    .menu-item:last-child {
        border-bottom: none;
    }
    .menu-link {
        padding: 12px 20px;
        font-size: 1em;
    }

    /* Show mobile specific toggles */
    .submenu-toggle,
    .menu-arrow {
        display: block !important;
    }
    .submenu-toggle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 2;
        cursor: pointer;
    }
    .menu-arrow {
        display: flex !important;
        position: absolute;
        right: 15px;
        top: 0;
        height: 100%;
        width: 50px;
        justify-content: center;
        align-items: center;
        pointer-events: none; /* Allow click on checkbox */
    }

    .submenu-toggle:checked ~ .menu-arrow .menu-child-toggle-icon {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }
    .menu-arrow .menu-child-toggle-icon {
        transition: transform 0.3s ease;
    }

    /* Styles for the original nested submenus on mobile (toggled by checkbox) */
    /* This will be the `ul.megamenu-column-list` if it's nested directly, or a proper `ul.submenu` if you use it for pure mobile. */
    .megamenu-column-list { /* Assuming this is your mobile sub-list container */
        position: static !important;
        display: none !important; /* Hidden by default, toggled by checkbox */
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: none !important;
        border: none !important;
        background-color: transparent !important;
        width: 100%;
        padding-left: 20px !important; /* Indent mobile submenus */
    }

    .submenu-toggle:checked ~ .hidden-megamenu-content .megamenu-column-list {
        display: block !important; /* Show specific column list on mobile */
    }

    /* You might need to adjust .megamenu-promo-area for mobile if you want it to appear here */
    .megamenu-promo-area {
        margin-left: 0;
        margin-top: 20px;
        flex: 1 1 100%;
        padding: 15px;
    }
}


/* HubSpot Editor Styles - Keep these for proper editor behavior */
.hs-inline-edit .submenu.level-1 > li.has-submenu:hover .submenu.level-2,
.hs-inline-edit > li.has-submenu.focus .submenu.level-2,
.hs-inline-edit .hidden-megamenu-content { /* Ensure hidden content is hidden in editor if not being edited */
  visibility: hidden;
}

#nav-toggle,.header__mobile-menu-open-icon,.header__mobile-menu-close-icon{display:none;}
/* Ensure the trigger link (<a>) has positioning context and padding for the icon */
/* Target the specific link that has the 'js-has-megamenu-trigger' class */
.js-has-megamenu-trigger {
    position: relative; /* Crucial for absolute positioning of the icon within the link */
    padding-right: 25px; /* Adjust this value to create enough space for the icon on the right */
    display: flex; /* Use flexbox to align text and icon nicely */
    align-items: center; /* Vertically centers the text and icon */
    justify-content: space-between; /* Pushes the icon to the far right of the link */
}

/* Style the dynamically added SVG container */
.submenu-arrow-icon {
    flex-shrink: 0; /* Prevents the icon from shrinking if the text content is long */
    margin-left: 10px; /* Provides horizontal space between the menu text and the icon */

    /* If you prefer absolute positioning inside the link instead of flexbox for .submenu-arrow-icon: */
    /* position: absolute; */
    /* right: 5px; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* margin-left: 0; */ /* Remove flexbox margin if using absolute */

    width: 14px; /* Adjust the desired size of the icon */
    height: 14px; /* Adjust the desired size of the icon */
    display: flex; /* Ensures the SVG itself is perfectly centered within this span */
    align-items: center;
    justify-content: center;
}

/* The SVG itself will inherit color from its parent (which is white from your .megamenu-link color) */
.submenu-arrow-icon .dropdown-icon {
    display: block; /* Helps remove any extra spacing an inline SVG might introduce */
    width: 100%; /* Ensures the SVG fills its container */
    height: 100%;
}

/* --- Your existing mega menu link styling (applied to .megamenu-link) --- */
/* Your .megamenu-column-list li a.megamenu-link base styles */
/* Your .megamenu-column-list li a.megamenu-link::after for the underline */
/* Your .megamenu-column-list li a.megamenu-link:hover, :focus styles for text glow and underline animation */