.banner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding-bottom:1.25rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem calc(var(--site-veritical-spacing)*2);
    box-sizing: border-box;
}
/* Logo */
.banner .logo {
    padding-top:0.75rem;
}
.banner .logo a {
    display: block;
}

/* Title */
.banner .title {
    order: 3;
    /*transform: translateY(-6px);*/
}
.banner .title h1 {
    color: var(--color-text-light);
    font-size:1.125rem;
    margin:0;
    line-height: 1.2;
    position: relative;
}
.banner .title h1 a {
    color:inherit;
    text-decoration: none;
}
@media print, screen and (max-width: 1000px) { 
    .banner .title {
        text-align:center;

    }
}

/* Search */
.banner .search {
    display: none;
}

.banner .search form {
    border: var(--site-border-light)!important;
    border-radius: var(--site-border-radius)!important;
    display: flex;
    align-items: center;
}
.banner .search form input,
.banner .search form button {
    border: none!important;
    padding: 0.75rem 1rem!important;
    line-height: 1!important;
    background:transparent!important;
    appearance: none!important;
}
.banner .search form input[type="search"] {
    min-width:18rem!important;
    font-size: 16px;
}
.banner .search form input[type="image"] {
    box-sizing: unset!important;
}
.banner .search form button img {
    display: block!important;
}

/* Menu Toggle */
.banner .menu-toggle {
    order: -1;
    width: calc(100% - var(--site-veritical-spacing)*2);
    padding: 0.75rem var(--site-veritical-spacing);
    border-bottom: var(--site-border-light);
    text-align: right;
}
.banner .menu-toggle button {
    display: block;
    position: relative;
    padding:0;
    margin-left:auto;
    background: transparent;
    border:none;
    width:1.125rem;
    height:0.875rem;
    cursor: pointer;
    outline-offset:4px;
}
.banner .menu-toggle button .icon,
.banner .menu-toggle button::before,
.banner .menu-toggle button::after {
    content:'';
    position:absolute;
    display: block;
    width:100%;
    height:0.125rem;
    background: var(--color-gov-blue);
    /*transition: top 0.5s, transform 0.5s;*/
}
.banner .menu-toggle button::before { top: 0; }
.banner .menu-toggle button .icon { top: 0.375rem; }
.banner .menu-toggle button::after { top: 0.75rem; }

.banner .menu-toggle button[aria-expanded="true"]::before {
    top:calc(50% - 2px);
    transform: rotate(45deg);
}
.banner .menu-toggle button[aria-expanded="true"] .icon {
    display:none;
}
.banner .menu-toggle button[aria-expanded="true"]::after {
    top:calc(50% - 2px);
    transform: rotate(-45deg);
}

/**
 * Medium breakpoint
 */
@media screen and (min-width: 40em) {
    .banner {
        flex-direction: row;
        padding: 1.25rem var(--site-veritical-spacing);
    }
    /* Logo */
    .banner .logo {
        padding-top:0;
    }
    /* Title */
    .banner .title {
        order: initial;
        flex: 1;
    }
    .banner .title h1 {
        font-size:1.3125rem;
    }
    /* Menu Toggle */
    .banner .menu-toggle {
        display:block;
        order: initial;
        flex: 0;
        border: none;
    }
    .banner .menu-toggle button {
        width:1.5rem;
        height:1.1875rem;
    }
    .banner .menu-toggle button .icon,
    .banner .menu-toggle button::before,
    .banner .menu-toggle button::after {
        height:0.1875rem;
    }
    .banner .menu-toggle button::before { top: 0.0625rem; }
    .banner .menu-toggle button .icon { top: 0.5rem; }
    .banner .menu-toggle button::after { top: 0.9375rem; }
}

/**
 * Large breakpoint
 */
@media screen and (min-width: 64em) {
    /* Search */
    .banner .search {
        display: block;
        margin-top: -2%;
    }
    /* Menu Toggle */
    .banner .menu-toggle {
        display:none;
    }
}

.gnl-header__logo {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.25rem;
    margin-top: 0.125rem;
    text-indent: -9999px;
    width: 12.375rem;
    background-image: url(../img/MyGovNL.svg);
    margin-left: auto; 
    margin-right: 0;
}

.gnl-header__logo_mobile {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.25rem;
    margin-top: 0.125rem;
    text-indent: -9999px;
    width: 12.375rem;
    background-image: url(../img/MyGovNL.svg);
    margin-left: 0; 
    margin-right: auto;
}

.sr-only {
    /*position: absolute;*/
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.gnl_mobile_link {
    display: block;
    width: 50%;
    margin-bottom: -6%;
}

/* Language Buttons */
.lang-menu {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 16px;
}

.lang-button {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    padding: 0.85em 1em;
    border: 1px solid transparent;
    border-radius: 0;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    font-family: inherit;
    font-size: 0.9rem;
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    font-size: inherit;
    color: #fff;
    background-color: var(--color-primary);
    border-radius: 2rem;
    padding: 0.3125rem 0.75rem 0.5rem 1rem;
    margin: 0;
    text-decoration: none;
    width: 68px;
}

.lang-button::after {
    content: "\f105";
    font-family: FontAwesome;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
  /*  top: 0.125rem; */
    left: 0.4rem;
}


@media screen and (max-width: 64em) {
    .lang-menu {
        margin-top: auto;
        margin-bottom: auto;
    }
}