/* ============================================================
   SHARED PUBLIC NAVIGATION
   ============================================================ */

.site-nav {
    position: relative;
    z-index: 5000;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 14px;

    background: #ffffff;
    border-bottom: 1px solid #c9dce9;
}


/*
   Primary links and More button
*/

.site-nav > a,
.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 10px 16px;

    color: #073f73;
    background: transparent;
    border: 0;
    border-radius: 8px;

    font: inherit;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.15;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}


.site-nav > a:hover,
.site-nav > a:focus-visible,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible {
    color: #07366c;
    background: #eaf4fb;
}


.site-nav > a.active,
.nav-dropdown-toggle.active {
    color: #ffffff;
    background: #0b64b5;

    box-shadow:
        0 2px 5px
        rgba(7, 54, 108, .18);
}


/* ============================================================
   MORE DROPDOWN
   ============================================================ */

.nav-dropdown {
    position: relative;
}


.nav-dropdown-toggle {
    gap: 7px;
}


.nav-chevron {
    display: inline-block;

    font-size: .72rem;

    transition:
        transform .15s ease;
}


.nav-dropdown-toggle[aria-expanded="true"]
.nav-chevron {
    transform: rotate(180deg);
}


.nav-dropdown-menu {
    position: absolute;
    z-index: 6000;

    top: calc(100% + 8px);
    left: 50%;

    width: 220px;
    padding: 7px;

    background: #ffffff;

    border: 1px solid #bfd5e5;
    border-radius: 10px;

    box-shadow:
        0 12px 28px
        rgba(7, 54, 108, .18);

    transform:
        translateX(-50%);
}


.nav-dropdown-menu[hidden] {
    display: none;
}


.nav-dropdown-menu a {
    display: block;

    padding: 10px 12px;

    color: #073f73;

    border-radius: 7px;

    font-size: .86rem;
    font-weight: 750;

    text-decoration: none;
}


.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
    background: #eaf4fb;
}


.nav-dropdown-menu a.active {
    color: #ffffff;
    background: #0b64b5;
}


.login-mobile {
    display: none;
}


/* ============================================================
   MOBILE — TWO ROWS OF THREE
   ============================================================ */

@media (max-width: 700px) {

    .site-nav {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 6px;

        padding: 8px 10px;
    }


    /*
       First row:
       Home | More | Login
    */

    .nav-home {
        order: 1;
    }

    .nav-dropdown {
        position: static;
        order: 2;
    }

    .nav-login {
        order: 3;
        margin-left: 0;
    }


    /*
       Second row:
       Fixtures | League Tables | Cups
    */

    .nav-fixtures {
        order: 4;
    }

    .nav-tables {
        order: 5;
    }

    .nav-cups {
        order: 6;
    }


    .site-nav > a,
    .nav-dropdown-toggle {
        width: 100%;
        min-width: 0;
        min-height: 46px;

        padding: 7px 4px;

        font-size: .8rem;

        white-space: normal;
    }


    .login-desktop {
        display: none;
    }

    .login-mobile {
        display: inline;
    }


    /*
       On mobile the dropdown spans the full navigation width
       and opens beneath both rows.
    */

    .nav-dropdown-menu {
        top: calc(100% + 5px);
        left: 10px;
        right: 10px;

        width: auto;

        padding: 8px;

        transform: none;
    }


    .nav-dropdown-menu a {
        min-height: 44px;
        padding: 11px 13px;

        font-size: .88rem;
    }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

    .site-nav {
        gap: 5px;

        padding:
            7px 6px;
    }


    .site-nav > a,
    .nav-dropdown-toggle {
        padding:
            7px 2px;

        font-size:
            .73rem;
    }


    .nav-dropdown-menu {
        left: 6px;
        right: 6px;
    }

}



/*
   Align navigation with the 1120px site content area.
*/

.site-nav {
    justify-content: flex-start;

    padding-left:
        max(
            15px,
            calc((100% - 1120px) / 2)
        );

    padding-right:
        max(
            15px,
            calc((100% - 1120px) / 2)
        );
}


/*
   Separate the Secretary Login from the public links.
*/

.site-nav > .nav-login {
    margin-left: auto;

    color: #ffffff;
    background: #073b74;

    border: 1px solid #075a9c;

    box-shadow:
        0 2px 6px
        rgba(4, 48, 94, .20);
}


.site-nav > .nav-login:hover,
.site-nav > .nav-login:focus-visible {
    color: #ffffff;
    background: #0b64b5;
}