/* Optional additions for the shared UK Velo header */

/* Keeps the injected header wrapper from affecting layout */
#site-header {
    width: 100%;
}

/* Make navigation links easy to tap on mobile */
@media (max-width: 1199.98px) {
    #site-header .offcanvas-body .nav-link {
        display: block;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }
}

/* Prevent logo distortion */
#site-header .navbar-brand img,
#site-header .offcanvas-header img {
    height: auto;
    max-width: 100%;
}

/* Cycle Events dropdown: Bootstrap click/tap + desktop hover */
@media (min-width: 1200px) {
    #site-header .cycle-events-menu {
        position: relative;
    }

    #site-header .cycle-events-menu > .dropdown-menu {
        margin-top: 0 !important;
    }

    /* Open on desktop hover/focus regardless of theme dropdown animation rules */
    #site-header .cycle-events-menu:hover > .dropdown-menu,
    #site-header .cycle-events-menu:focus-within > .dropdown-menu,
    #site-header .cycle-events-menu > .dropdown-menu.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    #site-header .cycle-events-menu > .nav-link {
        cursor: pointer;
    }
}

/* On mobile/tablet Bootstrap controls the menu using its .show class */
@media (max-width: 1199.98px) {
    #site-header .cycle-events-menu > .dropdown-menu.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}