/* Account block, shared by the frontend and Site Editor. Author: Soidraw. */
.yw-account-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    color: #fff;
    font-family: var(--wp--preset--font-family--cousine), "Courier New", monospace;
}
.yw-account-menu .yw-account-link {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 62px;
    min-width: 76px;
    padding: 9px 12px 8px;
    border: 1px solid transparent;
    border-bottom-width: 3px;
    border-radius: 0;
    background: transparent;
    color: #fff;
    text-decoration: none;
    box-shadow: none;
    text-shadow: none;
}
.yw-account-menu .yw-account-link:hover,
.yw-account-menu .yw-account-link:focus-visible {
    background: #24321b;
    border-color: #789655;
    color: #fff;
    text-decoration: none;
    box-shadow: none;
}
.yw-account-menu .yw-account-link:focus-visible {
    outline: 2px solid #a8cc79;
    outline-offset: 3px;
}
.yw-account-menu .yw-account-profile { min-width: 0; max-width: 248px; }
.yw-account-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: center; }
.yw-account-primary { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.yw-account-secondary { display: block; color: #c5d0bc; font-size: 12px; font-weight: 400; line-height: 1.35; white-space: nowrap; }
.yw-account-profile .yw-account-label { align-items: flex-start; }
.yw-account-profile .yw-account-primary { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.yw-account-menu .yw-account-avatar {
    box-sizing: border-box;
    flex: 0 0 32px;
    display: block;
    width: 32px;
    height: 32px;
    max-width: none;
    border: 1px solid #66864e;
    border-radius: 0;
    object-fit: cover;
}
.yw-account-menu .yw-account-avatar-fallback { display: grid; place-items: center; background: #24321b; font-size: 18px; }
.yw-account-editor-preview { pointer-events: none; }
.yw-account-editor { min-width: 0; }

/* The account block is a sibling of Navigation, not a menu item. */
.yw-site-header .yw-header-account-layout {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas: "title title" "navigation account";
    align-items: center;
    column-gap: 24px;
    row-gap: 12px;
}
.yw-site-header .yw-header-account-layout > .wp-block-site-title { grid-area: title; margin: 0; min-width: 0; }
.yw-site-header .yw-header-account-layout > .yw-bilingual-navigation { grid-area: navigation; justify-self: start; margin: 0; }
.yw-site-header .yw-header-account-layout > .wp-block-yinwurealm-account-menu { grid-area: account; justify-self: end; margin: 0; min-width: 0; max-width: 100%; }
/* Keep the account beside the menu on the second row, with a fixed 24px gap. */
@media (min-width: 901px) and (max-width: 1759px) {
    .yw-site-header .yw-header-account-layout > .wp-block-yinwurealm-account-menu { justify-self: start; }
}
@media (min-width: 1760px) {
    .yw-site-header .yw-header-account-layout {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "title navigation account";
    }
}
@media (max-width: 900px) {
    .yw-site-header .yw-header-account-layout {
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-areas: "title title" "navigation account";
        column-gap: 16px;
    }
}
@media (max-width: 640px) {
    .yw-account-menu { gap: 4px; }
    .yw-account-menu .yw-account-link { min-width: 64px; min-height: 56px; padding: 6px 8px; gap: 8px; }
    .yw-account-menu .yw-account-profile { min-width: 0; }
    .yw-account-profile .yw-account-primary { max-width: 8ch; }
    .yw-account-menu .yw-account-avatar { width: 28px; height: 28px; flex-basis: 28px; }
}

/* Decorative grouping line, centered in the existing desktop navigation gap. */
@media (min-width: 901px) {
    .yw-site-header .yw-header-account-layout > .wp-block-yinwurealm-account-menu {
        position: relative;
    }
    .yw-site-header .yw-header-account-layout > .wp-block-yinwurealm-account-menu::before {
        content: "";
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 28px;
        background: rgba(102, 134, 78, 0.65);
        pointer-events: none;
    }
}