/* Site overrides that must outlive a theme update.
   Loaded after app.css, so anything here wins on equal specificity. */

/* The navbar logo slot was built for a wide lockup (190x44), and the theme
   pins the brand box to match: `.navbar-brand {width:170px; height:50px}`,
   later narrowed to `width:88px; max-width:88px`. A square emblem inside a box
   that shape is cut off — it was, at 88px wide and 50px tall.

   So the box is released to fit its contents and the IMAGE carries the size
   instead: contained rather than covered, height capped so the bar keeps its
   own height whatever proportions a future logo arrives in. */
.navbar .navbar-brand {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
}

.navbar .navbar-brand {
    justify-content: flex-start !important;
    gap: 12px;
}

.navbar .navbar-brand img {
    width: auto !important;
    height: auto !important;
    max-height: 58px;
    object-fit: contain;
}

/* The wordmark beside the mark: the company name, then what it does.

   Each of those is one line and never breaks. Left to wrap, "SkillBee Global"
   splits across two lines and the tagline across three, which turns a lockup
   into a paragraph. When the room runs out the tagline is dropped whole
   instead - see the breakpoints below. */
.navbar .navbar-brand .site-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}

.navbar .navbar-brand .site-logo-text strong,
.navbar .navbar-brand .site-logo-text small {
    white-space: nowrap;
}

.navbar .navbar-brand .site-logo-text strong {
    font-size: 20px;
    font-weight: 800;
    color: #16364d;
}

.navbar .navbar-brand .site-logo-text small {
    font-size: 11.5px;
    color: #5d7484;
}

/* Menu links carry the same weight as the brand, as in the design.

   The row must stay on one line: seven items plus sign-in were wrapping, and a
   menu item broken across two lines reads as two items. So nothing wraps, each
   label is kept whole, and the row is allowed to shrink into the space the
   brand leaves rather than pushing past it. */
.navbar .navbar-nav {
    flex-wrap: nowrap !important;
    min-width: 0;
}

.navbar .navbar-nav .nav-link {
    font-weight: 700;
    color: #16364d;
    white-space: nowrap;
    padding: 0.5rem 0.55rem;
    font-size: 14.5px;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
    color: #69b82a;
}

/* The navbar sat in a 1140px container while the design pages lay out on
   1220px, so the brand started inset from the content beneath it. Same width
   here means the logo lines up with the first word of the page. */
.navbar > .container {
    max-width: 1220px;
    width: min(1220px, 100% - 40px);
}

/* Sign-in reads as part of the same row, so it takes the same weight — and the
   same padding, so the gap before it matches the gap between every other pair
   of items rather than being set apart. */
.navbar .nav-item-user-menu a,
.navbar .nav-item-user-menu .user-name {
    font-weight: 700 !important;
    color: #16364d;
    white-space: nowrap;
}

.navbar .nav-item-user-menu > div > a {
    padding: 0.5rem 0.55rem !important;
}

.navbar .nav-item-user-menu a:hover {
    color: #69b82a;
}

/* Where the row runs out of room, the tagline goes rather than anything being
   squeezed onto a second line: the mark and the name still say who this is. */
@media (max-width: 1499px) {
    .navbar .navbar-nav .nav-link,
    .navbar .nav-item-user-menu > div > a {
        padding: 0.5rem 0.45rem !important;
        font-size: 13.5px;
    }
}

@media (max-width: 1299px) {
    .navbar .navbar-brand .site-logo-text small {
        display: none;
    }
}

@media (max-width: 991px) {
    .navbar .navbar-brand img {
        max-height: 42px;
    }

    .navbar .navbar-brand .site-logo-text strong {
        font-size: 16px;
    }
}