/*
 * Platform brand link (<platform-brand />, PlatformBrandTagHelper).
 *
 * The home link at the left of the navigation bar: a square badge carrying
 * the product's mark, then its wordmark. Platform owns the geometry and type;
 * the product owns the mark, the wordmark (PlatformBrand configuration) and the
 * colours, through its brand tokens (--navy, --white).
 *
 * Rules moved verbatim from HumanCapital/wwwroot/css/site2.css (.nav-logo,
 * .nav-logo-mark) under the Second-Time Rule, when iStampCC became the second
 * consumer. The bar the link starts (.platform-nav-bar, below) is here too;
 * hiding the wordmark on a narrow screen stays with the bar's owner.
 */

.platform-brand {
    font-family: var(--platform-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.platform-brand-mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    border-radius: 7px;
    font-family: var(--platform-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.05em;
}

/* =========================================
   NAVIGATION BAR WITH THE MENU AT ITS CENTRE
   =========================================
   Moved from HumanCapital/wwwroot/css/site2.css ("Main nav centering")
   when iStampCC became the second consumer (Second-Time Rule), renamed only
   where the class was product-local (.site-nav, .nav-center, .nav-right).

   The bar's start, its menu and its end take equal shares of the bar, and
   the menu is centred in the middle share, so it sits at the bar's centre
   while it fits there. A share never shrinks below its content, so a menu
   wider than its share pushes the other two aside rather than overlap them.
   The start is the brand link itself (it then fills its share), or
   .platform-nav-start holding it (the link keeps its own width).
   At phone width the start takes only its content; the menu is in the drawer
   (.platform-desktop-only, platform-drawer.css). */

.platform-nav-bar {
    display: flex;
    align-items: center;
}

.platform-nav-bar > .platform-brand,
.platform-nav-bar > .platform-nav-start {
    flex: 1;
}

.platform-nav-start {
    display: flex;
    align-items: center;
}

.platform-nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.platform-nav-end {
    flex: 1;
    margin-left: 0; /* override old auto push */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media (max-width: 768px) {

    /* Prevent flex squeeze */
    .platform-nav-bar > .platform-brand,
    .platform-nav-bar > .platform-nav-start {
        flex: none;
    }
}