@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@300;400;500;600;700&display=swap');

:root {

    /* UI element colours */
    --colour-background: black;
    --colour-body: white;
    --colour-header: rgba(255,255,255,1.0);
    --colour-footer: rgba(255,255,255,1.0);
    --colour-text: #021F2E;
    --colour-primaryaccents: #1D4A5C; 
    --colour-secondaryaccents: #38838F;
    --colour-tertiaryaccents: #B20109;
    --colour-navMenu: rgba(255,255,255,0.85);
    --colour-navMobileSubMenu: rgba(56,131,143,0.85);
    --colour-navWideScreenSubMenu: rgba(255,255,255,0.85);
}

/* DEBUGGING STYLES -----------------------------------------*/
/* ----------------------------------------------------------*/
.debug_border-yellow {
    border: 1px solid yellow;
}

.debug_border-green {
    border: 1px solid green;
}

.debug_border-blue {
    border: 1px solid blue;
}

.debug_border-red {
    border: 1px solid red;
}

.debug_border-black {
    border: 1px solid black;
}

.debug_border-purple {
    border: 1px solid purple;
}

/* BASELINE STYLE FOR MOBILE ------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* MOBILE/ SMALL SCREENS STYLE -----------------------------------------------------*/
/*-----BODY SECTION ---------------------*/
/*---------------------------------------*/
body {
    background-color: var(--colour-background);
    color: var(--colour-text);
    font-family: 'Red Hat Text', sans-serif;
    font-size: 1.15rem;
}

/*HEADER SECTION GRID -------------------*/
/*---------------------------------------*/
.banner {
    background-color: var(--colour-header);
    color: var(--colour-text);
    border-bottom: 1px solid var(--colour-secondaryaccents);
}

.menu-button-label {
    font-family: 'Red Hat Text', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--colour-text);
}

.css-only-menu-button-label {
    font-family: 'Red Hat Text', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--colour-text);
}

/* NAVIGATION ---------------------------*/
/*---------------------------------------*/
.navigation {
    background-color: var(--colour-navMenu);
    color: var(--colour-text);
    font-size: 1.15rem;
}

.navigation ul{
    width: auto;
    list-style: none;
    color: var(--colour-text);
}

.navigation li {
    list-style: none;
    color: var(--colour-text);
}

.navigation a{
    color: var(--colour-text);
    text-decoration: none;
    text-transform: uppercase;
    text-align: left;
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    border-bottom: 0.2rem solid transparent;
}

.navigation a:hover {
    border-bottom: 0.2rem solid var(--colour-secondaryaccents);
}

.navigation .about-button {
    color: var(--colour-text);
    text-decoration: none;
    text-transform: uppercase;
    text-align: left;
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 600;
    border-bottom: 0.2rem solid transparent;
}

.navigation .about-button:hover {
    border-bottom: 0.2rem solid var(--colour-secondaryaccents);
}

.navigation #about-link {
    color: var(--colour-text);
    text-decoration: none;
    text-transform: uppercase;
    text-align: left;
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 600;
    border-bottom: 0.2rem solid transparent;
}

.navigation #about-link:hover {
    border-bottom: 0.2rem solid var(--colour-secondaryaccents);
}

.navigation>ul>li>a.currenttopic  {
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 600;
    color: var(--colour-primaryaccents);
    border-bottom: 0.2rem solid var(--colour-primaryaccents);
}

.navigation>ul>li>a:focus {
    color: var(--colour-primaryaccents);
    border-bottom: 0.2rem solid var(--colour-tertiaryaccents);
}

.navigation-submenu a:hover {
    border-bottom: 0.2rem solid var(--colour-primaryaccents);
}

.navigation-submenu a:focus {
    color: var(--colour-primaryaccents);
    border-bottom: 0.2rem solid var(--colour-tertiaryaccents);
}

.toggle-submenu { /* Class used to display sub-menu via javascript event handlers. */
    background-color: var(--colour-navMobileSubMenu) !important;
}

.navigation li#about:focus-within .navigation-submenu#about-submenu 
{
    background-color: var(--colour-navMobileSubMenu);
}

/* OPEN NAVIGATION MENU (JAVASCRIPT-ENHANCED MENU BUTTON) --------*/
/*----------------------------------------------------------------*/
.navigation-open {
    background-color: var(--colour-navMenu);
}

.menu-button-open {
    color: var(--colour-text);
    background-color: var(--colour-header);
}

.menu-button-arrow-open {
    color: var(--colour-text);
}

/*MAIN PAGE SECTION -------------------*/
/*--------------------------------------*/

/*FOOTER SECTION STYLES ------------------*/
/*--------------------------------------*/
.page-footer {
    background-color: var(--colour-footer);
    color: var(--colour-text);
    border-top: 1px solid var(--colour-secondaryaccents);
}

.breadcrumb-nav ol {
    border-bottom: 1px solid var(--colour-secondaryaccents);
}

.breadcrumb-nav li {
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
}

.breadcrumb-nav a {
    color: var(--colour-primaryaccents);
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    /*border: 1px solid darkgrey;*/
}

svg.logo-footer {
    width: 7rem;
}

address a {
    text-decoration: none;
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 400;
    color: var(--colour-text);
}

a.address-footer:first-child {
    margin-bottom: 0.125rem;
}

.address-footer {
    font-style: normal;
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

span.phonenumber {
    font-weight: 700
}

p.email a {
    font-weight: 700
}

a.top-of-page-link {
    color: var(--colour-text);
    font-family: 'Red Hat Text', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
}

.copyright {
    color: var(--colour-text);
    font-family: 'Red Hat Text', sans-serif;
    font-size: 1rem;
    font-weight: 300;
}
/* END: BASELINE STYLE FOR MOBILE: ------------------------------------------------*/

/* MID-SIZED SCREEN BREAKPOINT: ---------------------------------------------------*/
/*---------------------------------------------------------------------------------*/
@media only screen and (min-width: 730px) {

    /*BODY ----------------------------*/
    /*---------------------------------*/ 
    /*HEADER --------------------------*/
    /*---------------------------------*/
    /* NAVIGATION ---------------------------*/
    /*---------------------------------------*/
    .navigation {
        background-color: transparent; /*var(--colour-navMenu);*/
        color: var(--colour-text);
        font-family: 'Red Hat Text', sans-serif;
        font-weight: 600;
    }

    .navigation li {
        width: auto;
        color: var(--colour-text);
        font-family: 'Red Hat Text', sans-serif;
        font-weight: 600;
    }

    .navigation a {
        color: var(--colour-text);
        font-family: 'Red Hat Text', sans-serif;
        font-weight: 600;
        border-bottom: 0.2rem solid transparent;
    }

    .navigation a:hover {
        border-bottom: 0.2rem solid var(--colour-secondaryaccents);
    }

    .navigation .about-button {
        color: var(--colour-text);
        text-decoration: none;
        text-transform: uppercase;
        text-align: left;
        font-family: 'Red Hat Text', sans-serif;
        font-weight: 600;
        border-bottom: 0.2rem solid transparent;
    }

    .navigation .about-button:hover {
        border-bottom: 0.2rem solid var(--colour-secondaryaccents);
    }

    .navigation #about-link {
        color: var(--colour-text);
        text-decoration: none;
        text-transform: uppercase;
        text-align: left;
        font-family: 'Red Hat Text', sans-serif;
        font-weight: 600;
        border-bottom: 0.2rem solid transparent;
    }

    .navigation #about-link:hover {
        border-bottom: 0.2rem solid var(--colour-secondaryaccents);
    }

    .navigation>ul>li>a.currenttopic  {
        font-family: 'Red Hat Text', sans-serif;
        font-weight: 600;
        color: var(--colour-primaryaccents);
        border-bottom: 0.2rem solid var(--colour-primaryaccents);
    }

    .navigation>ul>li>a:focus {
        color: var(--colour-primaryaccents);
        border-bottom: 0.2rem solid var(--colour-tertiaryaccents);
    }

    .navigation-submenu {
        font-family: 'Red Hat Text', sans-serif;
        font-weight: 600;
        color: var(--colour-text);
    }

    .toggle-submenu {  /* Class used to display sub-menu via javascript event handlers. */
        background-color: var(--colour-navWideScreenSubMenu) !important;
    }

    .navigation li#about:focus-within .navigation-submenu#about-submenu 
    {
        background-color: var(--colour-navWideScreenSubMenu);
    }

    .navigation-submenu li {
        color: var(--colour-text);
        font-family: 'Red Hat Text', sans-serif;
        font-weight: 600;
    }

    .navigation-submenu a {
        text-align: left;
        color: var(--colour-text);
        font-family: 'Red Hat Text', sans-serif;
        font-weight: 600;
        border-bottom: 0.2rem solid transparent;
    }

    .navigation-submenu a:focus {
        color: var(--colour-primaryaccents);
        border-bottom: 0.2rem solid var(--colour-tertiaryaccents);
    }

    /*MAIN ----------------------------*/
    /*---------------------------------*/
    /*FOOTER --------------------------*/
    /*---------------------------------*/
} /* END:  MID-SIZED SCREENS BREAKPOINT ----------------------------------------- */