/*
 * assets/css/nav-extra.css  (v44: new menu design)
 * Loaded from includes/header.php AFTER style.css. Menu rules only.
 *
 * WIDE SCREENS (801px and up): one blue bar, no divider lines. Each item has a yellow line that
 * slides in under it on hover and stays under the page you are on (the current page also has the
 * darker blue background). The 8 items stay on ONE row from 801px to 1920px:
 *   801 to 1100px : slightly smaller text, long labels may wrap inside their own item
 *   1101px and up : 12px side padding (14px made the menu break onto two rows at 1101 to 1119px)
 *
 * PHONES (800px and below): a "Menu" button with a three-line (burger) icon that turns into a
 * cross when the menu is open, the name of the page you are on (small box on the right), and an
 * arrow that turns upside down when open. The open menu is a full-width list with large tap areas;
 * the current page has a yellow bar on the left and bold text.
 *
 * Colours: only the palette (white, #4073AF, #255D9D, #FFDE39). Motion is switched off for
 * visitors who ask their system for reduced motion.
 */

/* ---------- Wide screens ---------- */

.main-nav {
    background: var(--blue);
}

.main-nav .menu-list a,
.main-nav .menu-list li:first-child a,
.main-nav .menu-list li:last-child a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 10px 12px;
    border: 0;
    color: #FFFFFF;
    font-size: 0.95rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* The yellow line under an item (hidden until hover; always there on the current page) */
.main-nav .menu-list a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    background: #FFDE39;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.main-nav .menu-list a:hover,
.main-nav .menu-list a:focus-visible,
.main-nav .menu-list a.current {
    background: #255D9D;
    color: #FFFFFF;
}

.main-nav .menu-list a:hover::after,
.main-nav .menu-list a:focus-visible::after,
.main-nav .menu-list a.current::after {
    transform: scaleX(1);
}

.main-nav .menu-list a:focus-visible {
    outline: 3px solid #FFDE39;
    outline-offset: -3px;
}

/* The phone-only parts are hidden on wide screens */
.nav-toggle {
    display: none;
}

@media (min-width: 801px) and (max-width: 1100px) {

    .main-nav .menu-list {
        flex-wrap: nowrap;
    }

    .main-nav .menu-list li {
        display: flex;
    }

    .main-nav .menu-list a,
    .main-nav .menu-list li:first-child a,
    .main-nav .menu-list li:last-child a {
        padding: 10px 9px;
        font-size: 0.85rem;
    }

    .main-nav .menu-list a::after {
        left: 9px;
        right: 9px;
    }
}

/* ---------- Phones ---------- */

@media (max-width: 800px) {

    .main-nav .nav-toggle {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-height: 56px;
        padding: 0;
        background: transparent;
        color: #FFFFFF;
        border: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.05rem;
        font-weight: bold;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .main-nav .nav-toggle:focus-visible {
        outline: 3px solid #FFDE39;
        outline-offset: -3px;
    }

    /* Burger: three lines that turn into a cross */
    .nav-burger {
        position: relative;
        flex: 0 0 auto;
        width: 24px;
        height: 18px;
    }

    .nav-burger span {
        position: absolute;
        left: 0;
        width: 24px;
        height: 3px;
        background: #FFFFFF;
        transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
    }

    .nav-burger span:nth-child(1) { top: 0; }
    .nav-burger span:nth-child(2) { top: 7.5px; }
    .nav-burger span:nth-child(3) { top: 15px; }

    .nav-toggle[aria-expanded="true"] .nav-burger span:nth-child(1) {
        top: 7.5px;
        transform: rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .nav-burger span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] .nav-burger span:nth-child(3) {
        top: 7.5px;
        transform: rotate(-45deg);
    }

    /* The page you are on */
    .nav-current {
        margin-left: auto;
        max-width: 55%;
        padding: 5px 10px;
        background: #255D9D;
        border-left: 3px solid #FFDE39;
        font-size: 0.85rem;
        font-weight: bold;
        line-height: 1.25;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* Arrow: points down, turns upside down when the menu is open */
    .nav-chevron {
        flex: 0 0 auto;
        width: 10px;
        height: 10px;
        margin: -4px 4px 0 0;
        border-right: 3px solid #FFFFFF;
        border-bottom: 3px solid #FFFFFF;
        transform: rotate(45deg);
        transition: transform 0.25s ease, margin 0.25s ease;
    }

    .nav-toggle[aria-expanded="true"] .nav-chevron {
        margin-top: 4px;
        transform: rotate(-135deg);
    }

    /* Without a page name (Privacy Policy, Terms of use) the arrow goes to the right edge */
    .nav-toggle .nav-toggle-label + .nav-chevron {
        margin-left: auto;
    }

    /* The open menu */
    .main-nav .menu-list {
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0 0 12px 0;
    }

    .main-nav .menu-list.open {
        display: flex;
        animation: nav-drop 0.2s ease-out;
    }

    .main-nav .menu-list li {
        display: block;
    }

    .main-nav .menu-list a,
    .main-nav .menu-list li:first-child a,
    .main-nav .menu-list li:last-child a {
        justify-content: space-between;
        min-height: 54px;
        padding: 12px 8px 12px 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.35);
        font-size: 1rem;
    }

    /* Each item has a small arrow on the right (the yellow hover line is not used on phones) */
    .main-nav .menu-list a::after {
        position: static;
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        background: transparent;
        border-right: 2px solid #FFFFFF;
        border-top: 2px solid #FFFFFF;
        transform: rotate(45deg);
        transition: none;
    }

    .main-nav .menu-list a:hover::after,
    .main-nav .menu-list a:focus-visible::after,
    .main-nav .menu-list a.current::after {
        transform: rotate(45deg);
    }

    /* Current page: darker row, yellow bar on the left, bold text */
    .main-nav .menu-list li a.current,
    .main-nav .menu-list li:first-child a.current,
    .main-nav .menu-list li:last-child a.current {
        padding-left: 12px;
        border-left: 4px solid #FFDE39;
        font-weight: bold;
    }
}

@keyframes nav-drop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .main-nav .menu-list a,
    .main-nav .menu-list a::after,
    .nav-burger span,
    .nav-chevron {
        transition: none;
    }

    .main-nav .menu-list.open {
        animation: none;
    }
}

/* ===== v47: menu stays on screen while the page scrolls, with a finer look =====
 * main.js moves the header up by the height of the logo band (style "top"), so only the blue
 * menu bar stays at the top of the screen. Without JavaScript the header scrolls away as before. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 800;
}

.main-nav {
    box-shadow: 0 2px 8px rgba(38, 38, 38, 0.22);
}

html {
    scroll-padding-top: 72px;
}

@media (min-width: 801px) {
    /* thin light divider between the items (not before the first one) */
    .main-nav .menu-list li + li a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        bottom: 16px;
        width: 1px;
        background: rgba(255, 255, 255, 0.28);
    }

    .main-nav .menu-list li + li a:hover::before,
    .main-nav .menu-list li + li a.current::before,
    .main-nav .menu-list li:hover + li a::before,
    .main-nav .menu-list li:has(a.current) + li a::before {
        background: transparent;
    }
}

@media (max-width: 800px) {
    /* a long open menu scrolls inside itself instead of running off the screen */
    .main-nav .menu-list.open {
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}