/* Derry Village Clinic brand line (2026-10-25), Hearth header pattern: round mark + name + one live tracked line. Colours come from the page's
   --p / --pd / --ink when present (this site's site.css), else the fallbacks here. */
.bl {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: min-content;
    flex: 1 1 auto;
    margin-right: auto;
    color: inherit;
    text-decoration: none;
    align-content: center;
    justify-content: center;
}

.bl-mark {
    display: block;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover
}

.bl-mark.bl-sq {
    border-radius: 12px
}

.bl-who {
    display: block;
    min-width: max-content;
    flex: 1 1 auto;
    text-align: -webkit-auto;
}

.bl-who b {
    display: block;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--ink,#0c2e2b);
    white-space: nowrap;
    letter-spacing: -.005em;
}

.bl-tag {
    display: block;
    width: 0;
    min-width: 100%;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 750;
    color: var(--pd,#0b4f4a);
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis
}

.bl-tag.is-closed {
    color: #475569
}

.bl-tag[lang="pa"] {
    letter-spacing: .02em;
    text-transform: none;
    font-size: 12px
}

.bl-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none
}

/* Login takes the place of the "Patient portal" nav item on wide screens; the mobile menu keeps it */
@media (min-width: 621px) {
    .topbar .nav a.nav-portal {
        display:none
    }
}

.nav a,.top-actions .btn {
    white-space: nowrap
}

.bl-tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink,#0c2e2b);
    text-decoration: none;
    white-space: nowrap
}

.bl-tel svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    color: var(--p,#0f766e)
}

.bl-tel:hover {
    color: var(--pd,#0b4f4a);
    text-decoration: underline
}

.bl-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1.5px solid var(--p,#0f766e);
    color: var(--pd,#0b4f4a);
    background: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap
}

.bl-login:hover {
    background: #f1f5f9;
    border-color: var(--pd,#0b4f4a)
}

.bl-login:focus-visible,.bl-tel:focus-visible,.bl:focus-visible {
    outline: 3px solid var(--p,#0f766e);
    outline-offset: 2px
}

@media (max-width: 1399px) {
    .bl-tel span {
        display:none
    }

    .bl-tel {
        width: 38px;
        height: 38px;
        justify-content: center;
        border-radius: 50%;
        border: 1.5px solid #e2e8f0
    }

    .bl-tel svg {
        width: 17px;
        height: 17px
    }
}

@media (max-width: 620px) {
    .bl {
        gap:9px
    }

    .bl-mark {
        width: 40px;
        height: 40px
    }

    .bl-who b {
        font-size: 15px
    }

    .bl-tag {
        font-size: 10px;
        letter-spacing: .1em
    }

    .bl-right .bl-tel,.bl-right .bl-login {
        display: none
    }
}