* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /*z-index: 4;*/
}

.gjs-row {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: 17px;
}

.gjs-cell {
    min-height: 75px;
    flex-grow: 1;
    flex-basis: 100%;
}

#iu2w {
    height: 98px;
    box-shadow: 0 0 5px 0 black;
    background-color: #ffffff !important;
}

#ixjf {
    height: 43px;
    background-repeat: repeat;
    background-position: left top;
    background-attachment: scroll;
    background-size: auto;
    background-image: linear-gradient(#000f2c 0%,#0a0064 100%); /*(#0a0064 0%, #0a0064 100%);*/
    box-shadow: 0 0 5px 0 black;
}

#ikom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.logo-container {                       /*ruimte rechts van logo*/
    padding-right: 0px;/*10px;*//*180px;*/               /*padding-right: 267px;*/
}


#ilbc {                                 /*dit is het logo in de bar*/
    color: black;
    width: 200px;                       /*200 307*/
    height: 120px;                       /*81*/
    margin: -7px 0px 4px 0px;          /*  267            160*/
    padding: 3px 0px 0px 0px;
}

#iod5y {
    padding: 10px;
    font-family: Tahoma, Geneva, sans-serif;
    letter-spacing: 1px;
    font-weight: 600;
    text-align: right;
    color: #ffffff;
    line-height: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    /*transform: translateY(-15px);*/
}

    #iod5y .contact-info {
        display: inline-flex;
        gap: 2rem; /* space between “office” and “mobile” */
    }

    #iod5y .auth-buttons {
        margin-left: auto;
    }

.navbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

/*for navbar collapse buttons*/
/* make sure collapsed menu floats above everything */
.navbar-collapse {
    z-index: 20 !important;
}

    /* full‐width dropdown when “show” */
    .navbar-collapse.show {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 90%;
        width: 20vw;
        background-color: #fff;
        padding: 1rem 0;
        box-shadow: -4px 4px 5px 5px #0d101052;
    }

        /* stack links vertically */
        .navbar-collapse.show .navbar-nav {
            flex-direction: column;
            align-items: flex-start;
            gap: clamp(1rem, 5vw, 1.22rem);
        }

            /* spacing between items */
            .navbar-collapse.show .navbar-nav .nav-item + .nav-item {
                margin-top: 0.5rem;
            }

            /* make each link full-width and touch-friendly */
            .navbar-collapse.show .navbar-nav .nav-link {
                width: 100%;
                padding: 0.5rem 1.5rem;
            }
/*for navbar collapse buttons*/

.auth-buttons {
    display: flex;
    align-items: center; /* vertically center children */
    /* optional: if you want to guarantee it fills its parent’s height */
    height: 100%;
    /* optional: space them out a bit */
    gap: 0.5rem;
}

    /* reset any odd margins/paddings */
    .auth-buttons .nav-link,
    .auth-buttons .btn {
        margin: 0;
        padding: 0;
    }


.login-button {
    /*color: darkblue !important;*/
    opacity: 0 !important; /* fully transparent */
    pointer-events: auto !important; /* allow clicks through the transparent element */
}

.logout-button {
    color: white !important;
}

@media (max-width: 768px) {                                         
    .gjs-row {
        flex-wrap: wrap;
    }
}


/*5-7-2023*/




/*alles hieronder is oud, voor 5-7-2023*/
/* Define the navy color */
:root {
    --navy: #000e29; /*#000080;*/
    --french: #006EB3;
    --brown: #917153;
    --comicblue: #00AEEF;
    --canaryyellow: #FFEF00;
    --cream: #FEFBEA;
}

/* Style for the top navy bar */
.top-bar {
    height: 1cm;
    background-color: var(--navy);
    width: 100%;
}

/* Style for the white bar underneath */
.second-bar {
    height: 2cm;
    /*background: linear-gradient(to bottom, var(--navy), var(--cream));*/ /*background-color: var(--french) !important;*/ /*white !important;*/
    display: flex;
    align-items: center; /* This centers items vertically */
    width: 100%;
}

    .second-bar .navbar {
        background-color: white; /*var(--french) !important;*/ /*white !important;*/ /* Set navbar background to white */
    }

    .second-bar .navbar-brand {
        margin-right: 0cm;/*1.5cm;*/ /* Space for the logo */
    }

.navbar-nav .nav-item {
    /* margin-right: 1.5cm;*/
    margin-left: 0; /*margin-left: 2cm;*/ /* Space between menu buttons */
}

.navbar-nav .nav-link {
    font-family: Tahoma, Geneva, sans-serif !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    color: var(--navy) !important; /* Set the color of the text to navy */
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
    transform: scale(1.1); /* Scale on hover */
}

.navbar-nav .btn-link {
    /*font-family: Tahoma, Geneva, sans-serif !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;*/
    color: var(--navy) !important; /* Set the color of the text to navy */
}

.navbar-nav {
    display: flex;
    flex-wrap: nowrap; /* keep them in one row */
    gap: clamp(1rem, 5vw, 5rem); /* never less than 1rem, never more than 3rem, scales at 5% of viewport width */
}

.custom-icon {
    width: 20px; /* adjust as needed */
    height: 20px; /* adjust as needed */
    /* add more styles as needed */
}

.custom-icon2 {
    width: 25px; /* adjust as needed */
    height: 25px; /* adjust as needed */
    /* add more styles as needed */
}


/*5-7-2023*/

/*──────────────────────────────────────────────────────────────────────────
  PHONE PORTRAIT LAYOUT: logo on left, phone-info in middle, toggler right
──────────────────────────────────────────────────────────────────────────*/
@media only screen and (max-width: 480px) {
    /* tighten up the top info-bar so the phone number can wrap */
    #ixjf {
        padding: 0 0.5rem !important;
    }

        #ixjf #iod5y {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: space-between !important;
            align-items: center !important;
        }

        #ixjf .login-button {
            display: none !important; /* keep that hidden for security */
        }

    #ilbc {
        margin: -7px 0px 4px -60px;
    }

    /* force your second bar (.navbar, id=iu2w) to space its children */
    #iu2w #ikom {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 0.5rem !important;
    }

    /* logo always sits flush left */
    #iu2w .logo-container {
        padding: 0 !important;
        margin-right: auto !important;
    }

    /* toggler flush right, with some breathing room */
    #iu2w .navbar-toggler {
        margin: 0 !important;
        margin-left: auto !important;
        z-index: 40 !important; /* above the dropdown */
    }

    /* dropdown itself pops down under the toggler, not off-screen */
    #iu2w .navbar-collapse.show {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        width: 80vw !important; /* 80% of the viewport width */
        max-width: 200px !important; /* never get wider than 200px */
        background-color: #fff !important;
        box-shadow: -4px 4px 5px rgba(0,0,0,0.2) !important;
    }

    #iu2w .navbar-collapse {
        z-index: 20 !important;
    }

        /* stack your menu items in a tight vertical list */
        #iu2w .navbar-collapse.show .navbar-nav {
            display: flex !important;
            flex-direction: column !important;
            gap: 0.5rem !important; /* 8px between items */
            padding: 0.5rem 0 !important;
        }

        #iu2w .navbar-collapse.show .nav-link {
            padding: 0.5rem 1rem !important;
            width: 100% !important;
        }

        /*for the contact info at the top, the phone numbers*/
    #iod5y {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* left-align both items */
        padding: 0.5rem; /* optional breathing room */
    }

        #iod5y .contact-info-phones {
            display: flex;
            flex-direction: column;
            gap: 0.25rem; /* one line under the other */
            width: 100%;
        }

        /* push the auth-buttons down a bit */
        #iod5y .auth-buttons {
            margin-top: 0.5rem;
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }

}