/* ===========================================================================
 * Top navigation alignment, platform wide.
 *
 * The bar is nested Bootstrap float columns carrying ad-hoc padding-top values,
 * so nothing in it was ever centred. Measured on the live feed at 1280px, its
 * groups sat at four different vertical centres against a bar centre of 32:
 *
 *     logos            23.6   (8px high)
 *     header icons     15     (17px high)
 *     third group      30
 *     account block    34
 *
 * This flexes the three nesting levels that hold those groups and centres them,
 * dropping the padding that caused the skew. The bar keeps its height from
 * min-height instead, so align-items has a box to centre within.
 *
 * Applies to every page that renders .esg-navigation (include/navigation.php is
 * used by ~789 of them). The selectors are deliberately tied to the specific
 * col-md-12 > col-md-10 > col-md-9 nesting: a nav laid out differently simply
 * will not match, and is left untouched.
 * =========================================================================== */

.esg-navigation .container-fluid > .row > [class*="col-md-12"],
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"],
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-9"] {
    display: flex;
    align-items: center;
    float: none;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* the bar keeps its height here rather than from the padding above */
.esg-navigation .container-fluid > .row > [class*="col-md-12"] {
    min-height: 64px;
}

/* the left logo cell keeps its width; everything after it shares the rest */
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"],
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-9"] {
    flex: 1 1 auto;
    min-width: 0;
}
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"],
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-9"],
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-3"] {
    align-self: stretch;
}

/* the groups inside the middle column centre on the same axis.
   Deliberately NOT a blanket [class*="col-"] reset: that would zero padding on
   every column inside any nav on any page, which is far more than this needs. */
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-9"] > div {
    display: flex;
    align-items: center;
    float: none;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* the account block sits flush right */
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-3"] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    float: none;
    flex: 0 0 auto;
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-right: 0 !important;
}

/* it is a <table>, whose row box does not take part in the flex centring */
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-3"] table {
    align-self: center;
    margin: 0 !important;
    width: auto;
}
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-3"] table td {
    vertical-align: middle !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-3"] table td:last-child {
    padding-right: 0 !important;
}

/* The bar's right edge lines up with the page's content edge. 10px is what the
   live feed's rail reserves for its scrollbar; other pages inherit the same
   inset so the bar ends consistently. */
.esg-navigation .container-fluid {
    padding-right: 10px;
}

/* Small screens keep the stock stacked layout: the flex row above is a desktop
   concern, and the mobile bar uses position-absolute children that must not be
   pulled into a flex context. */
@media (max-width: 767px) {
    .esg-navigation .container-fluid > .row > [class*="col-md-12"],
    .esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"],
    .esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-9"],
    .esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-9"] > div,
    .esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-10"] > [class*="col-md-3"] {
        display: block;
        float: left;
    }
    .esg-navigation .container-fluid > .row > [class*="col-md-12"] { min-height: 0; }
    .esg-navigation .container-fluid { padding-right: 15px; }
}


/* ===========================================================================
 * Spacing scale.
 *
 * The bar's right-hand side was laid out with two <table>s using percentage
 * column widths (20% / 70% / 10% on the account block), so gaps were a
 * consequence of available width rather than a decision: the icons bunched
 * left, a wide void opened before the divider, and the power button sat hard
 * against "MUMBAI".
 *
 * One scale, applied deliberately. Steps are 4px multiples so everything in the
 * bar lands on the same rhythm.
 * =========================================================================== */
:root {
    --nav-sp-1: 4px;
    --nav-sp-2: 8px;
    --nav-sp-3: 12px;
    --nav-sp-4: 16px;
    --nav-sp-5: 24px;
    --nav-sp-6: 32px;
}

/* --- the bar's own gutters --------------------------------------------- */
.esg-navigation .container-fluid {
    padding-left: var(--nav-sp-4);
    padding-right: var(--nav-sp-4);
}

/* --- icon row: even gaps, not table-distributed ------------------------ */
.esg-navigation [class*="col-md-9"] table,
.esg-navigation [class*="col-md-9"] tbody,
.esg-navigation [class*="col-md-9"] tr {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
}
.esg-navigation [class*="col-md-9"] tr { gap: var(--nav-sp-5); }
.esg-navigation [class*="col-md-9"] td {
    display: flex;
    align-items: center;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
}

/* --- divider: equal air either side ------------------------------------ */
.esg-navigation .border-left {
    border-left: 1px solid #e2e8ed !important;
    margin-left: var(--nav-sp-5);
    padding-left: var(--nav-sp-5) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* --- account block: avatar, identity, action --------------------------- */
.esg-navigation [class*="col-md-3"] table,
.esg-navigation [class*="col-md-3"] tbody,
.esg-navigation [class*="col-md-3"] tr:first-child {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
}
.esg-navigation [class*="col-md-3"] tr:first-child { gap: var(--nav-sp-3); }
.esg-navigation [class*="col-md-3"] td {
    display: flex;
    align-items: center;
    width: auto !important;      /* kills the 20% / 70% / 10% split */
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap;
}
/* the identity stacks name over location and owns the middle */
.esg-navigation [class*="col-md-3"] td:nth-child(2) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    line-height: 1.2;
}
/* the avatar already carries mr-2 in the markup; the flex gap replaces it */
.esg-navigation [class*="col-md-3"] td:first-child img { margin-right: 0 !important; }
/* the action gets its own breathing room, not a hard butt against the name */
.esg-navigation [class*="col-md-3"] td:last-child { margin-left: var(--nav-sp-2); }
.esg-navigation [class*="col-md-3"] td:last-child em { margin-top: 0 !important; }

@media (max-width: 767px) {
    .esg-navigation [class*="col-md-9"] table,
    .esg-navigation [class*="col-md-9"] tbody,
    .esg-navigation [class*="col-md-9"] tr,
    .esg-navigation [class*="col-md-9"] td,
    .esg-navigation [class*="col-md-3"] table,
    .esg-navigation [class*="col-md-3"] tbody,
    .esg-navigation [class*="col-md-3"] tr:first-child,
    .esg-navigation [class*="col-md-3"] td {
        display: revert;
        width: revert !important;
    }
    .esg-navigation .border-left {
        margin-left: 0;
        padding-left: var(--nav-sp-3) !important;
    }
}


/* ===========================================================================
 * Logo alignment, measured from the artwork.
 *
 * Centring the two logos' element boxes is not the same as centring what you
 * can see. Each logo is a separate file with its own internal margin, and the
 * client's file is whatever they uploaded, so matching box heights still gives
 * two marks of different visible size sitting on different centre lines.
 *
 * shr_modules/logoInk.php measures each file's artwork and writes two numbers
 * onto the <img>:
 *
 *     --logo-ink-h   artwork height as a fraction of the file's height
 *     --logo-ink-c   artwork centre as a fraction of the file's height
 *
 * From those, one cap height and one nudge give every logo the same visible
 * size on the bar's own axis. Both properties have fallbacks here, so a logo
 * that could not be measured keeps exactly the size it has today.
 * =========================================================================== */
:root {
    /* the visible height every nav logo is normalised to */
    --nav-logo-ink: 26px;
}

.esg-navigation .navLogo {
    --logo-ink-h: 1;        /* assume tightly cropped until measured */
    --logo-ink-c: .5;       /* assume already centred until measured */

    /* scale the file so its artwork, not its canvas, is --nav-logo-ink tall */
    height: calc(var(--nav-logo-ink) / var(--logo-ink-h));
    width: auto;
    max-width: 100%;

    /* then lift or drop it by however far the artwork sits off the file's centre */
    transform: translateY(calc((.5 - var(--logo-ink-c)) * var(--nav-logo-ink) / var(--logo-ink-h)));
}

/* The logo cell carries mt-3 (15px). Under align-items:center that margin is
   part of the item's box, so the logo landed 7.5px below the bar's axis while
   everything else sat on it. The flex centring supplies the offset now. */
.esg-navigation .container-fluid > .row > [class*="col-md-12"] > [class*="col-md-2"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* The client logo is the widest thing on the left; give its cell the few pixels
   the normalised height needs so max-width does not scale it back down. */
.esg-navigation .corporateLogo { padding-right: 0; }

@media (max-width: 767px) {
    /* the mobile bar stacks and sizes its logos from the markup's own classes */
    .esg-navigation .navLogo {
        height: auto;
        transform: none;
    }
}