/*
 * local_jangroheaderui styles.
 *
 * Real measurements before this fix (getBoundingClientRect against the
 * live rendered page, not assumed):
 *   .socials-header   height 39px  (top 28, bottom 67)
 *   #page-header       height 214px (top 67, bottom 281)
 *   .logo-header a.logo img  max-height:130px (theme_lambda's own compiled
 *     CSS), plus .logo-header{padding-top:25px} and
 *     #page-header{padding:15px 0 0 0} - together the dominant driver of
 *     the 214px height.
 *
 * Target: a masthead closer to the client's own real website header
 * (a short utility strip, then a compact logo/search/account row) -
 * logos shrunk but kept clearly readable, not the whole page scaled.
 */

/* "Login with:" + social icons - see lib.php for why this is always
   hidden, not just when logged in: none of the three providers are
   currently enabled (oauth2_issuer.enabled=0 for all of them), so there
   is no functioning login to preserve either way. */
.socials-header {
    display: none !important;
}

#page-header {
    padding: 10px 0 !important;
}

/*
 * Row-split + vertical centering: desktop widths only. Confirmed live
 * that forcing this unconditionally (no media query) broke mobile - the
 * theme's own native stacking behaviour below 768px is untouched/already
 * fine, and forcing flex-row there produced a real 5px horizontal
 * overflow (getBoundingClientRect confirmed) fighting that native
 * stacking. Client's own instruction is "ensure responsive/mobile
 * behaviour remains correct" - i.e. don't touch it, not redo it.
 */
@media (min-width: 768px) {
    #page-header > .container-fluid > .row-fluid {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    /*
     * Bug found live: theme_lambda's own .span6 width is a different
     * percentage/px value at every responsive breakpoint (confirmed in
     * the compiled CSS: 48.93%, 48.71%, 48.61%, 460px, 446px...
     * depending on viewport) - Bootstrap 2's percentage-grid math
     * assumes a block/float containing block, and switching the parent
     * row to flex broke that, collapsing both columns (and the logo
     * image inside one of them) to 0 width. Forcing a plain,
     * breakpoint-independent 50/50 split here instead of trying to
     * replicate every one of the theme's own breakpoint-specific widths.
     */
    #page-header > .container-fluid > .row-fluid > .span6 {
        flex: 1 1 50% !important;
        width: 50% !important;
        box-sizing: border-box !important;
    }
}

.logo-header {
    padding-top: 0 !important;
    text-align: left !important;
}

.logo-header a.logo img {
    max-height: 56px !important;
    width: auto !important;
}

.logo-header .cpd_logo img {
    max-height: 56px !important;
    width: auto !important;
}

.login-header {
    align-items: center !important;
}

.profileblock {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    left: auto !important;
}

.profileblock .welcome_userpicture {
    margin-top: 0 !important;
}