/* Header styles */
.site-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-medium);
    padding: 0.5rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-branding {
    max-width: var(--header-width);
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
}

.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.menu-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.logo-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.site-logo {
    overflow: hidden;
    display: inline-block;
    max-width: 250px;
}

.logo-left .site-logo {
    display: none;
}

@media (max-width: 767px) {
    .logo-left+.site-logo {
        display: none;
    }

    .logo-left .site-logo {
        display: block;
    }
}

.current-date {
    font-size: 0.9rem;
    color: var(--rule);
    font-weight: 500;
}

.logo-left img {
    height: 90px;
    width: auto;
}

.logo-left .filesusr {
    height: 50px;
}

.search-box {
    position: relative;
}

.search-box .search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box .search-form label {
    margin: 0;
    position: relative;
}

.search-box input[type="search"],
.search-box .search-field {
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border: 2px solid var(--color-gray-medium);
    border-radius: 25px;
    font-size: 0.9rem;
    width: 200px;
    transition: all 0.3s ease;
}

.search-box input[type="search"]:focus,
.search-box .search-field:focus {
    outline: none;
    border-color: var(--ink);
}

.search-box input[type="submit"],
.search-box .search-submit {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 10;
    display: block !important;
    border-radius: 0;
}

.search-box input[type="submit"]::after,
.search-box .search-submit::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.search-box input[type="submit"]:hover::after,
.search-box .search-submit:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235a5a56' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

.menu-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.menu-icon-img {
    width: 40px;
    height: auto;
    transition: transform 0.3s ease;
}

.menu-button:hover .menu-icon-img {
    transform: scale(1.1);
}

.menu-text {
    font-size: 0.85rem;
    color: var(--rule);
    font-weight: 500;
    text-align: center;
}

.gnma-info {
    font-size: 0.9rem;
    color: var(--rule);
    font-weight: 500;
    text-align: center;
}

/* Page header styles */
.page-header {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
}

.page-title {
    font-weight: var(--font-weight-black);
    font-size: 2.5rem;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
}

.archive-description {
    margin-top: 1rem;
    font-size: 1.1rem;
    color: var(--color-gray-dark);
}

/* Mobile responsive for header */
@media (max-width: 768px) {

    .search-box input[type="search"],
    .search-box .search-field {
        width: 150px;
    }

    .menu-right {
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {

    .search-box input[type="search"],
    .search-box .search-field {
        width: 120px;
    }

    .menu-button:not(.menu-text) {
        font-size: 28px;
    }

    .logo-left img {
        height: 70px;
    }
}