.nav-link-highlight {
    position: relative;
    display: inline-block;
    padding: 0 .15rem;
}
.nav-link-highlight::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--bs-dark);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s ease;
}
.nav-link-highlight:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
.nav-link-active::after {
    transform: scaleX(1);
    transform-origin: left;
    background-color: var(--bs-primary);
}

nav.site-navigation .dropdown-toggle {
    display: inline-flex;
    align-items: center;
}
nav.site-navigation .nav-dropdown-menu {
    min-width: auto;
}
nav.site-navigation .dropdown-toggle::after {
    display: none;
}
nav.site-navigation .accordion-button.collapsed::after,
nav.site-navigation .accordion-button:not(.collapsed)::after {
    display: none;
}

.nav-dropdown-icon {
    display: inline-block;
    position: relative;
    width: .9em;
    height: .9em;
    vertical-align: middle;
    transition: transform .3s ease;
}
.nav-dropdown-icon::before,
.nav-dropdown-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: currentColor;
}
.nav-dropdown-icon::before {
    width: 60%;
    height: 2px;
    transform: translate(-50%, -50%);
}
.nav-dropdown-icon::after {
    width: 2px;
    height: 60%;
    transform: translate(-50%, -50%);
}
.dropdown-toggle:hover .nav-dropdown-icon,
.accordion-button:hover .nav-dropdown-icon,
.accordion-button:not(.collapsed) .nav-dropdown-icon {
    transform: rotate(90deg);
}

nav.site-navigation .accordion-item {
    border: 0;
}
nav.site-navigation .accordion-header {
    font-size: inherit;
}
nav.site-navigation .accordion-button {
    padding: 0;
    font-size: inherit;
    box-shadow: none;
}

nav.site-navigation,
nav.site-navigation a,
nav.site-navigation span,
nav.site-navigation button {
    font-size: 1.25rem;
}

/*
|--------------------------------------------------------------------------
| Two-tone nav buttons
|--------------------------------------------------------------------------
|
| .nav-btn-primary:   nav items with the "button" option (red)
| .nav-btn-secondary: dropdown / offcanvas sub items (black/grey)
|
| Same design as the content buttons in kirby-tsvwm (.btn-tsvwm-*),
| kept here on purpose so this plugin has no dependency on kirby-tsvwm.
|
| Rectangular button: dark part on the left, light part on the right with
| a 45° diagonal split. On hover/focus the dark part moves right
| until it covers the whole button (same .3s ease as the underline above).
| Built from background layers only — no clip-path or positioning.
|
*/

/* Registered as <number> so the hover movement can be transitioned */
@property --nav-btn-split {
    syntax: '<number>';
    inherits: false;
    initial-value: .33;
}

.nav-btn-primary,
.nav-btn-secondary {
    /* Diagonal width = button height → 45° split. Uses 1em instead of
       --bs-btn-font-size because nav links are set to 1.25rem above. */
    --nav-btn-slant: calc(1em * var(--bs-btn-line-height) + 2 * var(--bs-btn-padding-y));
    --nav-btn-split: .33;

    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: 0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: transparent;

    background-repeat: no-repeat;
    background-image:
        /* light part, anchored right, with a 45° diagonal on its left edge
           (135deg gradient: the stop at slant / √2 runs from (slant, 0) to
           (0, height), i.e. "/"; 1px soft against aliasing) */
        linear-gradient(135deg,
            transparent calc(var(--nav-btn-slant) * .7071 - .5px),
            var(--nav-btn-light) calc(var(--nav-btn-slant) * .7071 + .5px)),
        /* dark part, full size underneath */
        linear-gradient(var(--nav-btn-dark), var(--nav-btn-dark));
    /* The light part shrinks from (1 - split) × (width + slant) to 0 */
    background-size:
        calc((1 - var(--nav-btn-split)) * (100% + var(--nav-btn-slant))) 100%,
        100% 100%;
    background-position:
        right top,
        left top;
    transition: --nav-btn-split .3s ease, box-shadow .15s ease-in-out;
}

.nav-btn-primary {
    --nav-btn-dark: #a90000;
    --nav-btn-light: #e30512;
    --bs-btn-focus-shadow-rgb: 227, 5, 18;
}

.nav-btn-secondary {
    --nav-btn-dark: #000;
    --nav-btn-light: #303030;
    --bs-btn-focus-shadow-rgb: 38, 38, 38;
}

.nav-btn-primary:hover,
.nav-btn-primary:focus-visible,
.nav-btn-primary.show,
.nav-btn-secondary:hover,
.nav-btn-secondary:focus-visible {
    --nav-btn-split: 1;
}

/* No underline inside a button (dropdown toggle with button option) */
.nav-btn-primary .nav-link-highlight::after {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .nav-btn-primary,
    .nav-btn-secondary {
        transition: none;
    }
}