/* FishPonds.biz compact sticky brand bar */

:root {
    --site-header-height: 60px;
}

html {
    scroll-padding-top: calc(var(--site-header-height) + 16px);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid rgba(24, 55, 40, 0.12);
}

.site-header-inner {
    min-height: var(--site-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    color: var(--color-text, #17231d);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.site-brand:hover,
.site-brand:focus-visible {
    text-decoration: none;
}

.site-brand-mark {
    color: var(--color-primary, #1f6b4f);
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-brand-mark svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.site-brand-mark circle,
.site-brand-fish {
    fill: currentColor;
}

.site-brand-ripple {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.site-brand-text {
    font-size: 1.05rem;
    letter-spacing: -0.015em;
}

@media (max-width: 640px) {
    :root {
        --site-header-height: 54px;
    }

    .site-header-inner {
        gap: 0.75rem;
    }

    .site-brand-mark {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    .site-brand-text {
        font-size: 1rem;
    }
}