.header-blog {
    --overflow-button-width: 60px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    background-color: var(--gray);
}

.header-blog .container-nav {
    grid-column: 1 / span 2;
}

.header-blog .custom-navbar .label,
.header-blog .container-link {
    line-height: 60px;
}

.header-blog .container-link {
    background-color: var(--peach-alt-1);
    color: white;
    text-align: center;
}
.header-blog .container-link a {
    font-family: var(--pitch);
    font-size: 18px;
    color: var(--gray);
    text-transform: uppercase;
}

.header-blog .custom-navbar {
    display: grid;
    grid-template: auto / max-content minmax(0, 1fr);
    align-items: center;
    margin: 0;
    border: none;
    font-family: var(--pitch);
    font-size: 18px;
    color: white;
    text-transform: uppercase;
}
.header-blog .custom-navbar .label {
    color: var(--peach-alt-1);
    display: inline-block;
    padding: 0 0 0 40px;
}
.header-blog .custom-navbar .primary-list {
    flex-basis: calc(100% - var(--overflow-button-width));
    padding-right: 20px;
    line-height: 32px;
}
.header-blog .custom-navbar .inner {
    display: flex;
    justify-content: space-between;
    margin: 0;
    max-width: 100%;
}
.header-blog .custom-navbar .primary-list li a {
    color: white;
}
.header-blog .custom-navbar .overflow {
    background-color: transparent;
}
.header-blog .custom-navbar .overflow.open .overflow-list {
    min-width: 240px;
    bottom: 1px;
    background-color: var(--gray);
    border: none;
}
.header-blog .custom-navbar .overflow button {
    min-width: 0;
    width: var(--overflow-button-width);
    height: 100%;
    margin: 0;
}
.header-blog .custom-navbar .mobile-caption,
.header-blog .custom-navbar .desktop-caption {
    display: none;
}

.header-blog .container-search {
    order: 1;
    grid-column: 1 / span 3;
    padding: 0 28px;
    background-color: #ececec;
}
.header-blog .blogSearchForm {
    max-width: 400px;
    height: 34px;
    margin: 10px auto 0;
    border-bottom: 2px solid var(--gray-light);
}
.header-blog .blogSearchForm h3 {
    display: none;
}

.header-blog .blogSearchForm input[type="text"],
.header-blog .blogSearchForm select {
    color: var(--gray-light);
}

.header-blog .blogSearchForm input[type="text"],
.header-blog .blogSearchForm select {
    background-color: transparent;
    text-transform: uppercase;
    font-family: var(--pitch);
    font-size: 18px;
}

.header-blog .blogSearchForm input[type="text"]:focus,
.header-blog .blogSearchForm .submitSearch:focus {
    outline: 1px solid var(--teal);
}

@media(min-width: 64em) {
    .header-blog .blogSearchForm input[type="text"],
    .header-blog .blogSearchForm input[type="text"]:focus {
        width: calc(100% - 25px);
        max-width: calc(100% - 25px);
    }
}

.header-blog .blogSearchForm .submitSearch:hover,
.header-blog .blogSearchForm .submitSearch:focus {
    background-color: transparent;
    background-image: url('/includes/public/assets/shared/blog-header-search.svg');
    background-size: 18px 27px;
    background-repeat: no-repeat;
    color: transparent;
}

.header-blog .blogSearchForm form > .row > div {
    position: relative;
}

.header-blog .blogSearchForm form {
    display: flex;
    justify-content: space-between;
}

.header-blog .blogSearchForm .submitSearch {
    width: 18px;
    height: 27px;
    padding: 0;
    background-image: url('/includes/public/assets/shared/blog-header-search.svg');
    background-size: 18px 27px;
    background-repeat: no-repeat;
    background-color: transparent;
    color: transparent;
    position: relative;
    top: 4px;
}

.header-blog .blogSearchForm form > .row:nth-child(1),
.header-blog .blogSearchForm form > .row:nth-child(2) {
    display: none;
}

@media (hover: hover) {
    .header-blog .custom-navbar .overflow a:hover {
        color: white;
    }
}

@media (min-width: 50em) {
    .header-blog {
        grid-template:
            'nav search link' auto / minmax(0, 1fr) 310px 225px;
    }

    .header-blog .container-nav {
        grid-area: nav;
    }

    .header-blog .container-search {
        grid-area: search;
        max-width: 310px;
        padding: 0 40px 0 33px;
        background: none;
    }

    .header-blog .container-link {
        grid-area: link;
        max-width: 225px;
    }

    .header-blog .custom-navbar .label,
    .header-blog .container-link {
        line-height: 72px;
    }

    .header-blog .custom-navbar .overflow {
        position: static;
    }

    .header-blog .custom-navbar .overflow button {
        margin: 5px 0 0 0;
    }

    .header-blog .blogSearchForm {
        margin: 20px 0 0 auto;
        border-color: #676767;
    }
}

@media (min-width: 64em) {
    .header-blog {
        max-width: calc(100% - 60px);
        margin-left: 60px;
    }
}