.fancy-menu {
    position: absolute;
    left: 0;
    bottom: 0; /* attach to the bottom edge of the header without affecting header height */
    width: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* darken the menu bar on header (non-sticky) for stronger contrast */
    background: rgba(0,0,0,0.8);
    box-sizing: border-box;
    overflow: visible; /* allow dropdowns to overflow */
    color: #fff; /* default text/icon color: white */
    height: 40px; /* default desktop height */
}

.fancy-menu .fancy-menu-inner {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap; /* keep items in a single row */
}

.fancy-menu .fancy-menu-inner > li {
    position: relative;
}

.fancy-menu .fancy-menu-inner > li > a {
    color: #fff;
    padding: 0 12px;
    text-decoration: none;
    display: inline-block;
    line-height: 40px; /* vertically center within the 40px bar */
    white-space: nowrap;
    /* responsive font size: shrink if available width is smaller */
    font-size: clamp(13px, 1.2vw, 16px);
}

/* First-level dropdown boxes (direct child ul of top-level items) - slightly darker */
.fancy-menu .fancy-menu-inner > li > ul {
    background: rgba(0,0,0,0.28); /* a bit darker than deeper-level boxes */
}

/* Put a small triangle behind items that have submenus. The triangle points down for
   dropdowns and right for flyouts. We use ::before positioned behind the anchor text. */
.fancy-menu .fancy-menu-inner li.has-children > a {
    position: relative;
    z-index: 1; /* keep text above the triangle */
    /* add extra right padding so the triangle (positioned inside) doesn't overlap text */
    padding-right: 1.5rem;
}

/* ensure submenu list items are positioned relative so we can place icons inside the box */
.fancy-menu .fancy-menu-inner li ul li { position: relative; }
.fancy-menu .fancy-menu-inner li.has-children > a::before {
    content: "";
    position: absolute;
    /* place the triangle inside the header item, 2px from the right edge */
    right: 2px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff; /* down-pointing triangle (white) */
    z-index: 0;
    pointer-events: none;
    opacity: 1;
}

/* Nested items (second-level) should show a right-pointing triangle inside the submenu box */
.fancy-menu .fancy-menu-inner li ul li { position: relative; }
.fancy-menu .fancy-menu-inner li ul li.has-children > a::before {
    /* place the right-pointing triangle inside the submenu box, 2px from the right edge */
    right: 2px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #fff; /* right-pointing triangle (white) */
}
/* Mobile-specific layout removed: use the theme's (Kadence) mobile menu instead */

/* Mobile triangle indicators reverted to theme defaults */

/* Remove underlines from submenu link items to match request */
.fancy-menu .fancy-menu-inner li ul li a { text-decoration: none !important; }

/* Submenu style (hidden by default) */
.fancy-menu .fancy-menu-inner li ul {
    display: none;
    position: absolute;
    /* drop further down (add a small gap) so menus don't sit flush against the parent */
    top: calc(100% + 8px);
    left: 0;
    background: rgba(0,0,0,0.18);
    padding: 0; /* submenu items will provide spacing */
    list-style: none;
    min-width: 180px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    z-index: 10000;
    border-radius: 0; /* no rounded corners */
}

/* Remove any gaps between submenu boxes at all levels */
.fancy-menu .fancy-menu-inner li ul,
.fancy-menu .fancy-menu-inner li ul li,
.fancy-menu .fancy-menu-inner li ul li a,
.fancy-menu .fancy-menu-inner li ul li ul {
    margin: 0; padding: 0; box-sizing: border-box; line-height: normal;
}

/* Make nested submenus drop down below the parent instead of flying out to the right */
.fancy-menu .fancy-menu-inner li ul li ul {
    /* stack nested uls under their parent items (don't position to the right) */
    position: static;
    left: auto;
    top: auto;
}

.fancy-menu .fancy-menu-inner li ul li a {
    padding: 0.5rem 0.75rem;
    display: block;
    color: #fff;
    background: rgba(0,0,0,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin: 0; /* remove extra spacing */
    box-sizing: border-box; /* ensure padding doesn't add gaps */
}

/* Ensure submenu list items have no gap between them */
.fancy-menu .fancy-menu-inner li ul li { margin: 0; padding: 0; }

/* On some themes anchor elements may render with line-height/gap; enforce zero gap */
.fancy-menu .fancy-menu-inner li ul { line-height: 0; }
.fancy-menu .fancy-menu-inner li ul li a { line-height: 1.2; }

/* Desktop: show submenu on hover */
@media (min-width: 768px) {
    /* Show top-level and all descendant submenus on hover. Nested uls will
       drop down beneath their parent items (stacked vertically). */
    .fancy-menu .fancy-menu-inner li:hover ul {
        display: block;
    }
    /* Sticky / fixed style applied when JS adds .fancy-menu-sticky on scroll */
    .fancy-menu.fancy-menu-sticky {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100000;
        box-shadow: 0 4px 18px rgba(0,0,0,0.18);
        /* solid black background and white text when pinned */
        background: #000;
        color: #fff;
        transition: transform 180ms ease, box-shadow 180ms ease;
    }
    /* Ensure links and submenu text are white on the sticky bar */
    .fancy-menu.fancy-menu-sticky a,
    .fancy-menu.fancy-menu-sticky .fancy-menu-inner li a {
        color: #fff !important;
    }
    .fancy-menu.fancy-menu-sticky .fancy-menu-inner > li > ul,
    .fancy-menu.fancy-menu-sticky .fancy-menu-inner li ul li a {
        background: #000;
    }
    /* Ensure hamburger is hidden on desktop/tablet */
    .fancy-menu .fancy-menu-toggle { display: none !important; }
}

/* Mobile behavior: show hamburger only */
.fancy-menu .fancy-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

/* Submenu toggle button (injected by JS). Hidden on desktop, visible on mobile. */
.fancy-menu .fancy-sub-toggle {
    display: none; /* desktop default */
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}


/* Mobile layout reverted: the theme's default mobile menu (Kadence) will be used.
   No fancy-menu mobile positioning or hamburger overrides are applied. */

/* Second-level (and deeper) flyouts for desktop: position to the right of their parent item */
.fancy-menu .fancy-menu-inner li ul li ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 180px;
    border-radius: 0;
    background: rgba(0,0,0,0.18);
}

/* Show nested flyout on hover for desktop */
@media (min-width: 768px) {
    .fancy-menu .fancy-menu-inner li ul li:hover > ul { display: block; }
}

/* Make sure menu inherits color default in theme headers */
header.site-header .fancy-menu a,
header#masthead .fancy-menu a,
header .fancy-menu a {
    color: inherit;
}

/* Removed forced hiding of .fancy-menu on mobile — mobile behavior handled by theme/server-side checks */

/* Tablet: hide the hamburger toggle in the top-right and show full menu
   (target tablets roughly between 768px and 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .fancy-menu .fancy-menu-toggle { display: none !important; }
    /* Ensure the full menu is visible on tablets */
    .fancy-menu .fancy-menu-inner { display: flex !important; }
    /* In case the menu was positioned differently for small viewports, keep it full-width */
    .fancy-menu { left: 0; right: 0; width: 100%; justify-content: center; }
}

/* Tablet-specific sizing: make the menu bar 24px high and adjust link centering */
@media (min-width: 768px) and (max-width: 1024px) {
    .fancy-menu { height: 30px; }
    .fancy-menu .fancy-menu-inner {
        gap: 0.5rem;
    }
    /* smaller font-size and reduced padding on tablet so entries fit */
    .fancy-menu .fancy-menu-inner > li > a {
        line-height: 30px;
        padding: 0 8px;
        font-size: clamp(12px, 1.6vw, 14px);
    }
}