/* Topbar — fixed, white, 64px */

.maf-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background-color: var(--maf-white);
    min-height: 64px;
    transition:
        box-shadow var(--maf-duration-normal) var(--maf-easing-standard),
        top 300ms var(--maf-easing-enter);
}

.maf-topbar--shadow {
    box-shadow:
        0 2px 2px rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.2),
        0 1px 5px rgba(0, 0, 0, 0.12);
}

.maf-topbar__row {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 var(--maf-space-4) 0 0;
}

/* Hamburger */

.maf-topbar__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 8px 12px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--maf-radius-sm);
    color: #2d3f58;
    flex-shrink: 0;
    transition: transform var(--maf-duration-normal) var(--maf-easing-standard);
}

.maf-topbar__hamburger svg {
    width: 28px;
    height: 28px;
}

.maf-topbar__hamburger:hover {
    transform: scale(1.05);
}

.maf-topbar__hamburger:focus-visible {
    outline: 2px solid var(--maf-color-info);
    outline-offset: 2px;
}

/* Brand */

.maf-topbar__brand {
    flex-shrink: 0;
}

/* Spacer */

.maf-topbar__spacer {
    flex: 1;
}

/* Actions */

.maf-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--maf-space-1);
}

.maf-topbar__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: #2d3f58;
    transition: background-color var(--maf-duration-fast) var(--maf-easing-standard);
}

.maf-topbar__action svg {
    width: 24px;
    height: 24px;
}

.maf-topbar__action:hover {
    background-color: rgba(45, 63, 88, 0.08);
}

.maf-topbar__action:focus-visible {
    outline: 2px solid var(--maf-color-info);
    outline-offset: 2px;
}

/* Body offset */

.maf-topbar ~ .maf-main {
    margin-top: 64px;
}