/*
 * menucss.css
 * Final reviewed stylesheet - 4 September 2026.
 * Unused rules have been retained as comments so they can be restored if needed.
 * Rules marked UNUSED were not found in the page set that loads this stylesheet.
 */

/* ====================================================================
 ALCO VAN HIRE - MAIN NAVIGATION MENU CSS
====================================================================

 Purpose:
 - Desktop navigation menu
 - Mobile navigation menu
 - Mobile fixed header
 - Mobile scrolling for long menus
 - Multi-level submenu support

 HTML/PHP structure this CSS is designed for:

 .outermenu
    .mobilelogo
    .menu-checkbox
    label
        .mcbutton
    .cssmenu
        ul
            li
                a
                ul
                    li
                        a

 IMPORTANT:
 - Desktop menu behaviour is controlled by hover.
 - Mobile menu behaviour is controlled by the checkbox.
 - On mobile, the menu becomes a normal vertical list.
 - On mobile, ONLY the menu area scrolls.
 - The fixed mobile header remains at the top.

==================================================================== */
/* ====================================================================
 GOOGLE FONT
==================================================================== */
@import url(//fonts.googleapis.com/css?family=Oswald);
/* ====================================================================
 GLOBAL MENU FONT / BACKGROUND
==================================================================== */
.cssmenu,
.cssmenu ul ul li a,
.outermenu {
    font-family: Oswald, sans-serif;
    background: #f7f7f7;
}

/* ====================================================================
 STICKY MENU
====================================================================

 Used if the JavaScript/site markup adds the "sticky" class.

 The !important is retained because the menu may otherwise be
 overridden by other positioning rules elsewhere in the website.
==================================================================== */
.sticky {
    position: fixed !important;
    top: -3px;
    width: 100%;
}

/* ====================================================================
 RESET / BASE MENU STRUCTURE
====================================================================

 Removes default browser spacing and list styling.

 "position: relative" is important for the desktop submenu system,
 because the dropdown menus are positioned relative to their parent.
==================================================================== */
.cssmenu,
.cssmenu ul,
.cssmenu ul li,
.cssmenu ul li a,
.outermenu {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    z-index: 2;
}

/* ====================================================================
 CLEARFIX
====================================================================

 Clears the floated desktop menu items.
==================================================================== */
.cssmenu:after,
.cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

/* ====================================================================
 MAIN MENU CONTAINER
==================================================================== */
.cssmenu,
.outermenu {
    width: 100%;
    max-width: 1280px;
    border-radius: 0;
    float: right;
}

/* ====================================================================
 DESKTOP MENU BORDER / SPACING
==================================================================== */
.cssmenu {
    border-top: 3px solid red;
    border-bottom: 3px solid red;
    padding: 10px 0;
}

/* ====================================================================
 DESKTOP MENU ALIGNMENT
====================================================================

 Keeps the existing centred desktop menu behaviour.
==================================================================== */
.cssmenu.align-center > ul {
    font-size: 0;
    text-align: center;
}

.cssmenu.align-center > ul > li {
    display: inline-block;
    float: none;
}

/* ====================================================================
 DESKTOP MENU LINK TEXT
==================================================================== */
.cssmenu ul ul li a,
.cssmenu > ul > li > a {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
}

/* ====================================================================
 DESKTOP SUBMENU ALIGNMENT
==================================================================== */
.cssmenu.align-center ul ul {
    text-align: left;
}

/* ====================================================================
 DESKTOP TOP-LEVEL MENU ITEMS
====================================================================

 Six main menu items are currently used, therefore each item is
 approximately 16.66% wide.
==================================================================== */
.cssmenu > ul > li {
    float: left;
    width: 16.66%;
    border-left: 1px solid gray;
}

/* ====================================================================
 DESKTOP TOP-LEVEL LINKS
==================================================================== */
.cssmenu > ul > li > a {
    padding: 10px 0;
    color: red;
}

/* ====================================================================
 DESKTOP HOVER / ACTIVE STATES
==================================================================== */
.cssmenu > ul > li.active > a,
.cssmenu > ul > li:hover > a,
.cssmenu > ul > li > a:hover {
    color: #000;
}

/* ====================================================================
 DESKTOP SUBMENUS - HIDDEN BY DEFAULT
====================================================================

 Submenus are moved off-screen until the parent menu item is
 hovered.

 opacity is also set to 0 so the submenu isn't visible.
==================================================================== */
.cssmenu ul ul {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

/* ====================================================================
 DESKTOP SUBMENU - MAKE VISIBLE ON HOVER
==================================================================== */
.cssmenu ul ul > li:hover > ul,
.cssmenu > ul > li:hover > ul {
    opacity: 1;
}

/* ====================================================================
 DESKTOP FIRST-LEVEL DROPDOWN POSITION
==================================================================== */
.cssmenu > ul > li > ul {
    top: 91px;
    padding-top: 8px;
    border-radius: 0;
}

/* ====================================================================
 DESKTOP FIRST-LEVEL DROPDOWN - HOVER POSITION
====================================================================

 This is the actual position used when the main menu item is
 hovered.
==================================================================== */
.cssmenu > ul > li:hover > ul {
    left: auto;
    top: 36px;
}

/* ====================================================================
 DESKTOP SECOND-LEVEL SUBMENU POSITION
==================================================================== */
.cssmenu ul ul ul {
    top: 40px;
}

/* ====================================================================
 DESKTOP THIRD-LEVEL SUBMENU POSITION
====================================================================

 Retained so additional nested menu levels can still work if
 required in the future.
==================================================================== */
.cssmenu ul ul > li:hover > ul {
    top: 0;
    left: 178px;
    padding-left: 10px;
}

/* ====================================================================
 DESKTOP SUBMENU LINKS
==================================================================== */
.cssmenu ul ul li a {
    padding: 25px 0;
    border-radius: 0;
    border-left: 3px solid red;
    border-right: 3px solid red;
    transition: color 0.2s ease;
    z-index: 999999;
    margin: 0;
    text-align: center;
    color: red;
}

/* ====================================================================
 DESKTOP SUBMENU HOVER / ACTIVE STATES
==================================================================== */
.cssmenu ul ul li.active > a,
.cssmenu ul ul li:hover > a,
.cssmenu ul ul li > a:hover {
    color: #000;
}

/* ====================================================================
 DESKTOP FIRST SUBMENU ITEM
====================================================================

 Border-radius is retained from the original stylesheet even
 though the current value is zero.
==================================================================== */
.cssmenu ul ul li:first-child > a {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ====================================================================
 DESKTOP LAST SUBMENU ITEM
==================================================================== */
.cssmenu ul ul li:last-child > a {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 3px solid red;
}

/* ====================================================================
 MOBILE CONTROLS - HIDDEN ON DESKTOP
====================================================================

 The checkbox, mobile label and mobile logo are only displayed
 when the screen width is 767px or less.
==================================================================== */
.outermenu input[type="checkbox"],
.outermenu label {
    display: none;
}

/* ====================================================================
 MOBILE LOGO - HIDDEN ON DESKTOP
==================================================================== */
.mobilelogo {
    display: none;
}

/* ====================================================================
 MOBILE MENU
====================================================================

 Everything below this point applies only to screens 767px wide
 or smaller.

 Desktop menu behaviour above is therefore unaffected.
==================================================================== */
@media screen and (max-width: 767px) {
    /* ================================================================
     PAGE POSITIONING
    ================================================================ */
    .container2 {
        margin-top: 57px !important;
    }
    /* ================================================================
     HIDE DESKTOP HEADER
    ================================================================ */
    .mainheader,
    .tophead {
        display: none;
    }
    /* ================================================================
     FIXED MOBILE HEADER
    ================================================================

     Keeps the mobile logo / Book Online / menu button at the
     top of the screen.

     The menu itself is NOT made fixed. Instead, the .cssmenu
     below becomes the scrollable area.

     This is important because it prevents the entire page/header
     from becoming one large scrolling element.
    ================================================================ */
    .outermenu {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border-bottom: 5px solid red;
        z-index: 9999;
        /* * Allow the child menu to scroll. */
        max-height: 100vh;
        /* * Do NOT put overflow:auto here.
         * The .cssmenu is the scrolling element. */
        overflow: visible;
    }
    /* ================================================================
     MOBILE LOGO
    ================================================================ */
    .mobilelogo {
        display: block;
        width: 40%;
        margin: 0 0 -50px 0;
        text-align: center;
        border: 0;
    }
    /* ================================================================
     MOBILE LOGO IMAGE
    ================================================================ */
    .mobilelogo img {
        display: inline-block;
        height: 40px;
        margin: 5px 0;
    }
    /* ================================================================
     MOBILE BOOK ONLINE / MENU LABEL
    ================================================================ */
    .outermenu label {
        display: block;
        position: relative;
        float: right;
        width: calc(60% - 40px);
        margin: 0;
        padding: 16px 40px 15px 0;
        font-family: "Roboto Slab", Tahoma, Arial, sans-serif;
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
        text-align: center;
        color: red;
        cursor: pointer;
        border: 0;
    }
    /* ================================================================
     HAMBURGER ICON
    ================================================================ */
    .mcbutton {
        position: absolute;
        right: 12.5px;
        top: 12px;
        display: block;
        transition: all 0.1s ease-out;
    }
    /* ================================================================
     MOBILE MENU - HIDDEN BY DEFAULT
    ================================================================ */
    .cssmenu {
        display: none;
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        border-top: 2px solid red;
        border-bottom: 0;
        /* * This is the key scrolling fix.
         *
         * The mobile header is approximately 57px high.
         * The menu gets everything below it. */
        max-height: calc(100vh - 57px);
        /* * Allow the long menu to scroll vertically. */
        overflow-y: auto;
        /* * Prevent horizontal scrolling. */
        overflow-x: hidden;
        /* * Smoother scrolling on iPhone/iPad. */
        -webkit-overflow-scrolling: touch;
        /* * Prevent scroll chaining to the page underneath. */
        overscroll-behavior: contain;
        box-sizing: border-box;
    }
    /* ================================================================
     OPEN MOBILE MENU
    ================================================================ */
    .menu-checkbox:checked ~ .cssmenu {
        display: block;
        position: relative;
        top: 0;
    }
    /* ================================================================
     MOBILE MENU / SUBMENU POSITION RESET
    ================================================================

     Desktop submenus use absolute positioning and hover.

     That doesn't work well on touch devices.

     On mobile, every menu level is therefore converted into a
     normal vertical list.
    ================================================================ */
    .cssmenu ul,
    .cssmenu ul ul,
    .cssmenu ul ul ul,
    .cssmenu ul ul ul ul,

    .cssmenu ul ul li:hover > ul,
    .cssmenu ul ul ul li:hover > ul,

    .cssmenu.align-center > ul,
    .cssmenu > ul,
    .cssmenu > ul > li:hover > ul,
    .cssmenu > ul > li > ul {
        position: relative;
        left: 0;
        right: auto;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        opacity: 1;
        text-align: left;
    }
    /* ================================================================
     MOBILE MENU ITEMS
    ================================================================ */
    .cssmenu ul li {
        width: 100%;
        float: none;
        border: 0;
    }
    /* ================================================================
     MOBILE MAIN LINKS + SUBMENU LINKS
    ================================================================ */
    .cssmenu > ul > li > a,
    .cssmenu ul ul li a,
    .cssmenu ul ul li:first-child > a,
    .cssmenu ul ul li:last-child > a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        /* * 14px gives a good balance between tap target size
         * and keeping a long menu reasonably compact. */
        padding: 14px 12.5px;
        border: 0;
        border-top: 1px solid rgba(120, 120, 120, 0.2);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        text-decoration: none;
        font-family: Oswald, sans-serif;
        font-size: 14px;
        line-height: 1.2;
        text-align: left;
        color: red;
        margin: 0;
    }
    /* ================================================================
     MOBILE SUBMENU INDENTATION
    ================================================================ */
    .cssmenu ul ul li a {
        padding-left: 30px;
    }
    /* ================================================================
     MOBILE SUBMENU ARROW
    ================================================================

     Adds the right-arrow used in the existing mobile menu.
    ================================================================ */
    .cssmenu ul ul li a::before {
        content: "→ ";
    }
    /* ================================================================
     THIRD-LEVEL SUBMENU
    ================================================================ */
    .cssmenu ul ul ul li a {
        padding-left: 50px;
    }
    /* ================================================================
     FOURTH-LEVEL SUBMENU
    ================================================================ */
    .cssmenu ul ul ul ul li a {
        padding-left: 70px;
    }
    /* ================================================================
     MOBILE ACTIVE / HOVER STATES
    ================================================================ */
    .cssmenu > ul > li.active > a,
    .cssmenu > ul > li > a:hover,
    .cssmenu ul ul li.active > a,
    .cssmenu ul ul li > a:hover {
        color: #000;
    }
    /* ================================================================
     MOBILE SUBMENU BORDERS
    ================================================================ */
    .cssmenu ul ul li a {
        border-left: 0;
        border-right: 0;
    }
    .cssmenu ul ul li:last-child > a {
        border-bottom: 0;
    }
    /* ================================================================
     HIDE DESKTOP-ONLY ELEMENTS
    ================================================================ */
/*
 * UNUSED RULE - commented out 4 September 2026.
 * Unused responsive rule.
 * Selector: .notmobile
 * Original declarations: display: none !important;
 */
}

/* ====================================================================
 SMALL MOBILE DEVICES - 410px AND BELOW
==================================================================== */
@media screen and (max-width: 410px) {
    .mobilelogo img {
        height: 36px;
        padding: 2px 0;
    }
}

/* ====================================================================
 VERY SMALL MOBILE DEVICES - 360px AND BELOW
==================================================================== */
@media screen and (max-width: 360px) {
    .mobilelogo img {
        height: 32px;
        padding: 4px 0;
    }
}

/* ====================================================================
 END OF ALCO VAN HIRE MENU CSS
==================================================================== */