@font-face {
    font-family: Poppins;
    src: url('poppins-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Poppins;
    src: url('poppins-bold.woff2') format('woff2');
    font-weight: 600 800;
    font-display: swap;
}

.reference-header {
    --reference-nav-red: #c1303f;
    --reference-nav-dark: #1b2429;
    --reference-nav-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
    --reference-nav-gap: clamp(16px, 3vw, 52px);
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns: var(--reference-nav-columns);
    align-items: center;
    gap: var(--reference-nav-gap);
    padding: 18px clamp(20px, 4vw, 56px);
    color: #fff;
    font: 400 16px/1.25 Poppins, system-ui, sans-serif;
}

.mdb-reference-portal-header {
    margin: 14px;
    border-radius: 30px;
    background: var(--reference-nav-dark);
}

.reference-header a { color: inherit; text-decoration: none; }
.reference-header :focus-visible { outline: 2px solid var(--reference-nav-red); outline-offset: 3px; }
.reference-header > .brand {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    justify-items: center;
    z-index: 1;
    gap: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: 650;
    line-height: 1;
}
.reference-header > .brand img { display: block; width: 38px; height: auto; }
.reference-header > .brand small { display: block; margin-top: 4px; font-size: 7px; letter-spacing: .18em; text-transform: uppercase; }
.reference-header > #menu {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: var(--reference-nav-columns);
    gap: var(--reference-nav-gap);
    font-size: .9rem;
    font-weight: 500;
}
.reference-header > #menu a:hover { text-decoration: underline; }
.reference-header .reference-nav-side { display: flex; align-items: center; gap: clamp(14px, calc(6vw - 44px), 42px); }
.reference-header .reference-nav-start { grid-column: 1; justify-content: flex-end; }
.reference-header .reference-nav-end { grid-column: 3; }
.reference-header > .menu-toggle { display: none; }
.reference-header #menu .contact-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 clamp(16px, 2vw, 30px);
    border-radius: 999px;
    background: var(--reference-nav-red);
    color: #fff;
    font-size: .83rem;
    font-weight: 650;
}

.reference-header .reference-nav-group { position: relative; }
.reference-header .reference-nav-group[open] { z-index: 2; }
.reference-header .reference-nav-group summary { display: flex; align-items: center; gap: .4em; white-space: nowrap; cursor: pointer; list-style: none; }
.reference-header .reference-nav-group summary::-webkit-details-marker { display: none; }
.reference-header .reference-nav-group summary::after {
    width: .4em;
    height: .4em;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-.12em) rotate(45deg);
    content: '';
}
.reference-header .reference-nav-group[open] summary::after { transform: translateY(.12em) rotate(225deg); }
.reference-header .reference-nav-dropdown {
    position: absolute;
    inset-block-start: calc(100% + 12px);
    inset-inline-start: -.8rem;
    display: grid;
    gap: 4px;
    width: max-content;
    min-width: 160px;
    max-width: min(300px, 85vw);
    padding: .5rem;
    border: 1px solid #eddbdc;
    border-radius: 16px;
    background: white;
    color: #263238;
    box-shadow: 0 10px 30px #1b242922;
}
.reference-header .reference-nav-dropdown a { display: block; padding: .65rem; border-radius: 10px; }
.reference-header .reference-nav-dropdown a:hover { background: #f9eef0; color: #97202d; text-decoration: none; }
.reference-header .reference-nav-dropdown :focus-visible { outline-color: #97202d; }

@media (max-width: 900px) {
    .reference-header { --reference-nav-gap: 12px; padding-block: 15px; }
    .mdb-reference-portal-header { margin: 8px; border-radius: 24px; }
    .reference-header > .brand img { width: 34px; }
    .reference-header > .menu-toggle {
        display: inline-grid;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid #ffffff86;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
    .reference-header > #menu {
        display: none;
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        min-width: 0;
        padding: 10px;
        border-radius: 14px;
        background: var(--reference-nav-dark);
        color: #fff;
    }
    .reference-header > #menu[data-open="true"] { display: grid; }
    .reference-header .reference-nav-side { display: grid; grid-column: 1; gap: 4px; justify-content: stretch; }
    .reference-header .reference-nav-group summary, .reference-header .reference-nav-link { min-height: 44px; padding-inline: 8px; }
    .reference-header .reference-nav-group summary { justify-content: space-between; }
    .reference-header .reference-nav-link { display: flex; align-items: center; }
    .reference-header #menu .contact-top { justify-self: start; margin-top: 4px; }
    .reference-header .reference-nav-dropdown { position: static; max-width: 100%; width: auto; margin-top: 6px; box-shadow: none; }
}