/* VisionCoders brand lockup — centred header slot.
   The header is transparent over the dark banners and turns solid #000 once
   sticky, so both the mark and the wordmark are white in every state. */

.logo-img .brand_lockup {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
}

/* mirrors the template's own `.logo-img img { width: 70px }` */
.logo-img .brand_lockup img {
    display: block;
    width: 70px;
    height: auto;
}

.logo-img .brand_name {
    display: block;
    margin-top: 8px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.6px;
    color: #fff;
    white-space: nowrap;
}

/* style.css sets a dark `a:hover` colour; keep the wordmark legible on hover */
.logo-img .brand_lockup:hover .brand_name,
.logo-img .brand_lockup:focus .brand_name {
    color: #fff;
}

@media (max-width: 767px) {
    .logo-img .brand_lockup img { width: 56px; }
    .logo-img .brand_name { font-size: 14px; letter-spacing: 0.4px; margin-top: 6px; }
}

/* Sticky header.
   style.css positions the scrolled header with `top:-70px` and relies on
   `transform:translateY(70px)` to pull it back to 0 — but that transform and
   its `background:#000` never take effect in the browser, so the bar sits 70px
   above the fold with no backdrop. That was harmless when the header was only
   ~76px tall (a few pixels of the old mark peeked out); with the taller brand
   lockup it left "VisionCoders" floating over the page content. Restore the
   intended end state explicitly. */
.header-area .main-header-area.sticky {
    top: 0;
    -webkit-transform: none;
    transform: none;
    background: #000;
}