/* ========
    New website header styles June 2024 RFS
    Updated May 2025 ( remove 75  )
   ======== */

   .masthead .row {
       padding-top: 0.6rem;
       margin: 0 auto;
       display:grid;
       gap: 0.2rem 0.5rem;
       align-items: center;
       grid-template-columns: 70px auto;
       grid-template-rows: repeat(3, max-content);
       grid-template-areas:
           "mh-logo mh-button-2"
           "mh-logo mh-button-1"
           "mh-search mh-search";
   }
   @media screen and (min-width: 576px) {
    .masthead .row {
        grid-template-columns: 70px auto max-content;
        grid-template-rows: repeat(2, max-content);
        grid-template-areas:
            "mh-logo mh-button-1 mh-button-2"
            "mh-search mh-search mh-search";
    }
}
@media screen and (min-width: 768px) {
    .masthead .row {
        grid-template-columns: 70px auto max-content max-content;
        grid-template-rows: max-content 1fr;
        grid-template-areas:
            "mh-logo . mh-button-1 mh-button-2"
            "mh-logo . mh-search mh-search";
    }
}
    @media screen and (min-width: 960px) {
    .masthead .row {
        grid-template-columns: 444px auto max-content max-content;
        grid-template-rows: max-content 1fr;
        grid-template-areas:
            "mh-logo . mh-button-1 mh-button-2"
            "mh-logo . mh-search mh-search";
    }
}
.masthead img, .masthead picture {
    width: auto;
    height: auto;
}
.masthead-logo {
    grid-area: mh-logo;
}
.masthead-75 {
    grid-area: mh-75;
}
.masthead-buttons {
    justify-self: end;
    align-self: start;
}
.masthead-buttons .btn, 
.masthead-buttons .btn:visited {
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
    padding: 0;
    background: transparent;
    padding: 0.4rem;
    color: #4F6497;
    border: 1px solid #A3AFCC;
    border-radius: 5px;
    text-align: center;
}
.masthead-buttons .btn:focus-visible {
    background: #4F6497;
    color: #fff;
}
.masthead-button-1 {
    grid-area: mh-button-1;
}
.masthead-button-2 {
    grid-area: mh-button-2;
}

@media screen and (min-width: 576px) {
    .masthead-button-1 {
        justify-self: end;
    }
}

@media screen and (min-width: 768px) {
    .masthead-buttons {
        justify-self: center;
        align-self: center;
    }
    .masthead-buttons .btn, 
    .masthead-buttons .btn:visited {
        color: #fff;
        font-size: 0.9rem;
        font-weight: 500;
        border-radius: 5px;
        padding: 0.6rem 1.5rem;
        margin: 0;
        border:initial;
    }
    .masthead-button-1 {
        grid-area: mh-button-1;
    }
    .masthead-buttons.masthead-button-1 .btn,
    .masthead-buttons.masthead-button-1 .btn:visited {
        background-color: #007A90;
        border: 2px solid #007A90;
    }
    .masthead-button-1 .btn:focus-visible {
        border-color: #35456B;
    }
    .masthead-button-2 {
        grid-area: mh-button-2;
    }
    .masthead-buttons.masthead-button-2 .btn,
    .masthead-buttons.masthead-button-2 .btn:visited {
        background-color: #006168;
        border: 2px solid #006168;
    }
    .masthead-button-2 .btn:focus-visible {
        border-color: #35456B;
    }

}
.masthead-search {
    grid-area: mh-search;
}
.masthead-search input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    margin:0;
    box-sizing: border-box;
    border: 2px solid #579599;
    transition: border-color 0.3s ease;
    border-radius: 3px;
    font-family: Arial, FontAwesome;
    font-size: 1rem;
}
.masthead-search input[type="text"]:focus,
.masthead-search input[type="text"]:focus-visible {
    border-color: #5BC1A5;
}