/* ===================================================================== * Custom front-end overrides (hand-maintained, not Vite-built) * Enqueued from functions.php after the compiled theme CSS. * --------------------------------------------------------------------- * Blog category filter "More" flyout: * - size the box to its content (so short lists stay small and long * category names like "Anti Money Laundering Directive (AMLD)" fit), * - cap the width so it never gets absurdly wide, * - let an over-long name wrap gracefully instead of overflowing, * - tighten font-size / padding so the menu reads as a compact list. * Covers both the flex-tabs overflow menu and the blog-filter "-more" menu. * ===================================================================== */ .flex-tabs__outer .-secondary, .blog-filter__list .-more ul { width: max-content; min-width: 14em; max-width: min(90vw, 42em); padding: 0.6rem 0.4rem; border-radius: 14px; } .flex-tabs__outer .-secondary a, .blog-filter__list .-more a { display: block; padding: 0.8rem 1.6rem !important; font-size: 1.6rem; line-height: 1.35; white-space: normal; /* wrap long category names instead of overflowing */ border-radius: 8px; } /* The post cards' full-card click overlay (.c-block__link-full) uses z-index:10. * The filter flyout was also z-index:10 and comes earlier in the DOM, so clicks * on the "More" menu fell through to the card behind it. Lift the whole filter * bar into a higher stacking layer so the dropdown reliably captures clicks. */ .blog-filter { position: relative; z-index: 40; } .flex-tabs__outer .-secondary, .blog-filter__list .-more ul { z-index: 50; } /* --------------------------------------------------------------------- * Desktop nav: cascade nested submenus (2nd/3rd level) as flyouts. * Two upstream bugs caused them to stack on top of the parent: * 1) submenu
  • s were not positioning contexts, so a nested .sub-menu * positioned against the FIRST dropdown (they all landed in one spot); * 2) `left: calc(100% + var(--dst--dropdown-padding))` used a two-value * custom prop (1.5rem 3rem) -> invalid calc -> offset never applied. * ------------------------------------------------------------------- */ @media (min-width: 1113px) { /* Hide the redundant chevron on desktop for items INSIDE a submenu (they * already show a circular arrow). Top-level navbar chevrons stay — they're * the only dropdown indicator there. Mobile keeps all chevrons to tap-expand. */ .nav-main .sub-menu .nav-icon, .nav-secondary .sub-menu .nav-icon { display: none; } .nav-main .sub-menu .menu-item, .nav-secondary .sub-menu .menu-item { position: relative; } .nav-main .sub-menu .sub-menu, .nav-secondary .sub-menu .sub-menu { top: 0; /* align first child with the parent item row */ left: calc(100% + 1rem); /* slight overlap into the parent panel edge (clears the arrow) */ padding-top: 0; /* match the parent item's row height (no extra vertical bulk) */ padding-bottom: 0; } /* Invisible hover-bridge across the gap (lets the mouse travel parent->child * without the menu closing). The core rule gave it a colored border, which * now shows as a green bracket in the gap — neutralize it. */ .nav-main .sub-menu .sub-menu::before, .nav-secondary .sub-menu .sub-menu::before { left: -3rem; width: 3rem; height: 100%; top: 0; border: 0; background: transparent; transform: none; } } /* --------------------------------------------------------------------- * Mobile nav: nested submenu parents open on tapping the entry (see * custom-overrides.js), so hide their redundant chevron. Top-level items * keep their chevron/toggle as before. * ------------------------------------------------------------------- */ @media (max-width: 1112px) { .nav-main .sub-menu .menu-item-has-children > .nav-icon, .nav-secondary .sub-menu .menu-item-has-children > .nav-icon { display: none; } } /* --------------------------------------------------------------------- * Newsletter submit: the theme's globe icon is a background-image applied to * the submit , but newer Gravity Forms renders a