/* === LAYOUT_HEADER.CSS === */

    /* Logo */
    /* ============================================== */

        /* The container div for the logo */
        #LogoContainer {
            position: fixed;
            top: 0;
            left: 0;
            height: var(--height-header);
            width: 100%;
            background: var(--colour-background-3);
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: var(--z-bottom);
            border: none;
        }

        #LogoContainer a{
            display: contents;
        }

        .logo{
            width: 100px;
        }
            
        /* The logo increases in size for larger devices  */
        @media (min-width: 399px){
                .logo {
                    width: 175px;
                }
        }
        
       @media (min-width: 459px){
                .logo {
                    width: 200px;
                }
        }

        @media (min-width: 639px){
                .logo {
                    width: 250px;
                }
        }

        @media (min-width: 959px){
                .logo {
                    width: 200px;
                }
        }

        @media (min-width: 1279px){
                .logo {
                    width: 250px;
                }
        }

        /* Do not show the navigation menu as standard. */
        #NavbarDropdown {
            display:none;
        }

        /* SMALLER DEVICE NAVIGATION (DISCLOSURE MENU) */
        /* ============================================== */

            .smallDeviceMenuItem {
                display: flex;
                flex-direction: row;
                align-items: center;
                min-height: var(--disclosure-size);
                padding-left: var(--space-4);
                border-bottom: var(--disclosure-border);
            }

            .arrow{                   
                border-top-width: var(--disclosure-triangle-size);
                border-top-style: solid;
                border-top-color: transparent;
                border-right: none;
                border-bottom-width: var(--disclosure-triangle-size);
                border-bottom-style: solid;
                border-bottom-color: transparent;
                border-left-width: var(--disclosure-triangle-size);
                border-left-style: solid;
                border-left-color: var(--disclosure-triangle-colour);
                margin-left: var(--disclosure-triangle-margin);
                background: transparent;
                width: fit-content;
                padding: 0;
            }

            .levelOne{
                background: var(--disclosure-colour-background-1);
            }

            .levelTwo{
                background: var(--disclosure-colour-background-2);
                padding-left: var(--space-6);
            }

            /* DISCLOSURE ONE (CLOSED) */
            /* ====================================================== */
            
                    /* Stop the arrow from showing in the first disclosure summary. */
                    #DisclosureOne summary::marker,
                    #DisclosureOne summary::-webkit-details-marker {
                        display:none;
                    }

                    /* Stop the arrow from showing in the first disclosure summary. */
                    #DisclosureOne summary {
                        list-style: none;
                    }
            
                    /* Hamburger - format the display of the initial hamburger icon (located in the summary). */
                    #DisclosureOne #Hamburger {
                        background-image: url('/assets/images/header/hamburger_icon_small.webp');
                        background-repeat: no-repeat;
                        background-color: transparent;
                        position: fixed;
                        top: 0;
                        right: 0;
                        width: 50px;
                        height: 50px;
                        margin: 10px;
                        cursor: pointer;
                        z-index: var(--z-top);
                    }


            /* DISCLOSURE ONE (OPEN) */
            /* ====================================================== */

                    /* Format the area of the first disclosure. */
                    #DisclosureOne[open] {
                        position: fixed;
                        top: var(--height-header);
                        left: 0;
                        width: 100%;
                        z-index: var(--z-top);
                    }
                    
                    /* Format the individual contents of the disclosure. */
                    #DisclosureOne[open] .smallDeviceMenuItem{
                        color: var(--disclosure-colour-2);
                    }

                    /* Hamburger - format the display of the hamburger icon (located in the summary) when the disclosure is open. */
                    #DisclosureOne[open] #Hamburger {
                        background-image: url('/assets/images/header/hamburger_icon_small_active.webp');
                        background-repeat: no-repeat;
                    }
                    
                    /* Stops the arrow from showing in the first disclosure summary. */
                    #DisclosureOne[open] summary::marker, #DisclosureOne[open] summary::-webkit-details-marker  {
                        display:none;
                    }

                    /* Stops the arrow from showing in the first disclosure summary. */
                    #DisclosureOne[open] summary {
                        list-style: none;
                    }
                    
                    /* DEVICES THAT HAVE THE ABILITY TO HOVER (e.g. desktops) */
                    /* ################################################################ */
                    
                        @media (hover: hover) and (pointer: fine) {

                            /* Format the individual contents of the disclosure. */
                            #DisclosureOne[open] .smallDeviceMenuItem{
                                color: var(--disclosure-colour-1);
                            }
                            
                            /* Set the text color when hovered over. */
                            #DisclosureOne[open] .smallDeviceMenuItem:hover{
                                color: var(--disclosure-colour-2);
                            }

                        }                   
            
        /* DISCLOSURE TWO (CLOSED) */
        /* ====================================================== */

                /* DEVICES THAT HAVE THE ABILITY TO HOVER (e.g. desktops) */
                /* ################################################################ */

                @media (hover: hover) and (pointer: fine) {

                    /* Set the formatting for the <summary> smallDeviceMenuItem class. */
                    #DisclosureTwo summary.smallDeviceMenuItem {
                        cursor: pointer;                  
                    }
                    
                    /* Set the formatting for the 'arrow' class when hovered over <summary>. */
                    #DisclosureTwo summary:hover .arrow {
                        border-left-width: var(--disclosure-triangle-size);
                        border-left-style: solid;
                        border-left-color: var(--disclosure-triangle-colour-2);
                    }

                }

        /* DISCLOSURE TWO (OPEN) */
        /* ====================================================== */

                /* Set the formatting for the <detail> smallDeviceMenuItem class. */
                #DisclosureTwo[open] .smallDeviceMenuItem{
                    color: var(--disclosure-colour-1);
                }

                /* Set the formatting for the <summary> smallDeviceMenuItem class. */
                #DisclosureTwo[open] summary.smallDeviceMenuItem{
                    color: var(--disclosure-colour-2);
                    background: var(--disclosure-colour-background-3);
                }

                /* Set the formatting for the <summary> 'arrow' class. */
                #DisclosureTwo[open] summary .arrow {
                    transform: rotate(90deg);
                    border-left-width: var(--disclosure-triangle-size);
                    border-left-style: solid;
                    border-left-color: var(--disclosure-triangle-colour-open);
                }

                /* DEVICES THAT HAVE THE ABILITY TO HOVER (e.g. desktops) */
                /* ################################################################ */

                    @media (hover: hover) and (pointer: fine) {

                        /* Set the formatting for the <summary> smallDeviceMenuItem class when hovered over. */
                        #DisclosureTwo[open] summary.smallDeviceMenuItem:hover{
                            color: var(--disclosure-colour-2);
                            font-weight: normal;
                            background: var(--disclosure-colour-background-3);
                        }

                        /* Set the formatting for the <detail> smallDeviceMenuItem when hovered over. */
                        #DisclosureTwo[open] .smallDeviceMenuItem:hover{
                            color: var(--disclosure-colour-1);
                            font-weight: bold;
                        }

                    }

/* LARGER DEVICE NAVIGATION (DROP DOWN) */
/* ============================================== */

        @media (min-width:959px){ 
            
            /* Hide 'hamburger menu' */
            #DisclosureOne {
                display: none;
            }

            /*  Move logo to left, reduce width of div and increase z-index */
            #LogoContainer{
                justify-content: left;
                padding-left: var(--space-4);
                width: fit-content;
                z-index: var(--z-top);
            }

            /* Show 'navbar'  */
            #NavbarDropdown {
                position: fixed;
                top: 0;
                left: 0;
                height: var(--height-header);
                background: var(--colour-background-3);
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                z-index: var(--z-bottom);
            }
                            
            /* Navbar links */
            #NavbarDropdown a {
                margin-right: var(--navbar-dropdown-parent-margin);
                font-size: var(--navbar-dropdown-parent-font-size);
                font-weight: var(--navbar-dropdown-parent-font-weight);
            }
                            
            /* Dropdown content (hidden by default) */
            .dropContent {
                display: none;
                position: absolute;
                background: var(--navbar-dropdown-child-background-colour);
                box-shadow: var(--shadow-xl);
                text-align: left;
                padding: 0px;
                width: fit-content;
                min-width: 250px;
            }

            /* Links inside the dropdown */
            .dropContent a {
                display: block;
                font-size: 14px;
                padding: var(--navbar-dropdown-child-padding);
                width: 100%;
            }

            /* Change color of dropdown links on hover */
            .dropContent a:hover {
                background-color: var(--colour-1);
                color: var(--navbar-dropdown-child-font-colour-hover);
            }

            /* Show the dropdown menu on hover */
            .dropButton:hover .dropContent {
                display: block;
            }
        }

        /* Add space between links for XL devices */
        @media (min-width:1279px){

            /* Navbar links */
            #NavbarDropdown a {
                margin-right: var(--navbar-dropdown-parent-margin-xl);
            }

        }