Kadence Nav CSS Backup

CSS
.wp-block-navigation ul {
    display: flex;
    gap: 15px;
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible {
    text-decoration: underline;
}

// Off Canvas Logo 
.offcanvas-logo {
    position: relative;
    top: -60px;
    max-width: 70%;
}

.drawer-header,
.drawer-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.popup-drawer .drawer-header {
	padding: 0 16px !important;
}

.offcanvas-kontakt {
    margin-top: 25px;
}

* a:focus-visible {
    outline: 2px dashed orange !important;
}

// kadence Reset
.single-content address,.single-content figure,.single-content hr,.single-content p,.single-content table,.single-content pre,.single-content form,.single-content .wp-block-buttons,.single-content .wp-block-button,.single-content .wc-block-grid,.single-content .wp-block-kadence-advancedbtn,.single-content .wp-block-media-text,.single-content .wp-block-cover,.single-content .entry-content-asset,.single-content .wp-block-kadence-form,.single-content .wp-block-group,.single-content .wp-block-yoast-faq-block,.single-content .wp-block-yoast-how-to-block,.single-content .schema-faq-section,.single-content .wp-block-kadence-tableofcontents,.single-content .enlighter-default,.single-content .wp-block-kadence-iconlist,.single-content [class*=__inner-content] {
    margin-top: 0;
    margin-bottom: 15px !important;
}

.single-content h1, .single-content h2, .single-content h3, .single-content h4, .single-content h5, .single-content h6 {
    margin: 1em 0 0.5em;
}

.ntm {
    margin-top: 0 !important;
}

.set-rel {
    position: relative !important;
}

// WS Forms angepasst an Farben
button.wsf-button.wsf-button-primary {
    color: var(--global-palette9) !important;
    background-color: var(--global-palette-highlight) !important;
    border-color: var(--global-palette-highlight) !important;
    max-width: 220px !important;
}

button.wsf-button.wsf-button-primary:hover,
button.wsf-button.wsf-button-primary:focus-visible {
    color: var(--global-palette9) !important;
    background-color: var(--global-palette-highlight-alt) !important;
    border-color: var(--global-palette-highlight-alt) !important;
    box-shadow: none !important;
}

.header-navigation .menu {
    gap: 28px !important;
}

/* Base styles for menu items */
.primary-menu-container ul li a {
    position: relative;
    display: inline-block;
    padding-bottom: 5px; /* Space for the border animation */
    transition: all 0.3s ease; /* Smooth transition for text and border */
    padding: 0 0 4px 0 !important;
    color: #333 !important;
}

/* On hover: add border and move text up */
.primary-menu-container ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px; /* Height of the bottom border */
    background-color: #B30013; /* Border color */
    transform: scaleY(0); /* Start with no visible border */
    transition: transform 0.3s ease; /* Smoothly scale the border */
    transform-origin: bottom;
}

.primary-menu-container ul li a:hover::after {
    transform: scaleY(1); /* Full height on hover */
}

.primary-menu-container ul li a:hover {
    transform: translateY(-4px); /* Move the text up slightly */
    box-shadow: none; /* Prevent shadow on hover */
    color: #B30013 !important;
}

/* For active/current menu item */
.primary-menu-container ul li.current-menu-item a {
    transform: translateY(-4px); /* Keep text up for active item */
    box-shadow: 0px -3px 0px #B30013 inset; /* Static bottom border for active item */
    transition: all 0.3s ease;
    color: #B30013 !important;
}

/* Consistent animation for submenu items */
ul.sub-menu li:hover>a {
    transform: translateY(0); /* No text movement for submenu items */
    box-shadow: none;
    transition: all 0.3s ease;
}