/* Align the logo within the toolbar without the legacy image offset. */
html #utf-header-container-block #header { height: auto !important; }
html #utf-header-container-block #header #logo img {
    position: static !important;
    top: auto !important;
    transform: none !important;
}
@media (min-width: 1100px) {
    html #utf-header-container-block #header #navigation {
        margin-top: 0 !important;
        align-self: center;
        align-items: center;
    }
}
/* Mobile: left-aligned brand, theme switch and dropdown menu button. */
@media (max-width: 1099px) {
    html #utf-header-container-block,
    html #utf-header-container-block #header {
        height: auto !important;
        min-height: 72px;
        background: #fff !important;
        color: #1b3a6b !important;
    }
    html #utf-header-container-block #header > .container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 64px 44px;
        grid-template-rows: 72px auto;
        align-items: center;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        gap: 0 !important;
        padding: 0 12px !important;
    }
    html #utf-header-container-block #header .utf-left-side,
    html #utf-header-container-block #header .utf-right-side {
        display: contents !important;
    }
    html #utf-header-container-block #header .clearfix,
    html #utf-header-container-block #header .utf-header-widget-item {
        display: none !important;
    }
    html #utf-header-container-block #header #logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        min-width: 0 !important;
        width: auto !important;
        height: 72px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        float: none !important;
    }
    html #utf-header-container-block #header #logo img.logo-light {
        display: block !important;
        width: auto !important;
        height: 32px !important;
        max-width: 100%;
    }
    html #utf-header-container-block #header #logo img.logo-dark { display: none !important; }
    html #utf-header-container-block #header .theme-toggle {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        width: 48px !important;
        min-width: 48px !important;
        margin: 0 !important;
    }
    html #utf-header-container-block #header .mmenu-trigger {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        background: #fff !important;
        border: 1px solid #d9e2ee;
        border-radius: 10px !important;
    }
    html #utf-header-container-block #header .mmenu-trigger .hamburger {
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
    }
    html #utf-header-container-block #header .utf-hamburger-inner-item,
    html #utf-header-container-block #header .utf-hamburger-inner-item::before,
    html #utf-header-container-block #header .utf-hamburger-inner-item::after {
        background-color: #1b3a6b !important;
    }
    html #utf-header-container-block #header #navigation {
        display: none !important;
        grid-column: 1 / -1;
        grid-row: 2;
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: calc(100dvh - 88px);
        overflow-y: auto;
        margin: 0 !important;
        padding: 8px 0 12px !important;
        background: #fff !important;
        border-top: 1px solid #e5eaf1;
        box-shadow: none !important;
        transform: none !important;
    }
    html #utf-header-container-block #header #navigation.mobile-nav-open { display: block !important; }
    html #utf-header-container-block #header #navigation > ul {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 2px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html #utf-header-container-block #header #navigation > ul > li {
        display: block !important;
        float: none !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    html #utf-header-container-block #header #navigation > ul > li > a {
        display: flex !important;
        align-items: center;
        min-height: 44px;
        padding: 10px 14px !important;
        margin: 0 !important;
        color: #1b3a6b !important;
        background: #fff !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        font-size: 15px !important;
        line-height: 24px !important;
    }
    html #utf-header-container-block #header #navigation > ul > li > a.current,
    html #utf-header-container-block #header #navigation > ul > li > a:hover {
        background: #edf4fc !important;
        color: #16305a !important;
    }
    html #utf-header-container-block #header button:focus-visible,
    html #utf-header-container-block #header #navigation a:focus-visible {
        outline: 2px solid #2f7fc9;
        outline-offset: 2px;
    }
    html body .intro-banner.intro-hero-v2.hero-split .hero-trending {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    html body .intro-banner.intro-hero-v2.hero-split .hero-trending .trending-tag {
        flex: 0 1 auto;
        white-space: normal;
        max-width: 100%;
    }
}