/* ===========================================================================
 * 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);
}

/* ===========================================================================
 * The action icons.
 *
 * They were stranded in the middle of the bar with a 73px hole before the
 * account divider, because two EMPTY grid columns — .corporate… and
 * .navSocialDiv, 634px between them — sit ahead of the cluster and push it
 * inward. Nothing renders in either at this width. Rather than delete columns
 * that other clients may fill, the cluster is pulled to the right edge of its
 * row, where actions belong: the bar reads [brand] … [actions │ account].
 *
 * The icons themselves had no shared geometry. Measured: 26×25, 24×20, 24×20,
 * 21×20, with gaps of 12, 12 and 19 — so neither the glyphs nor the spaces
 * between them matched, and fa-language is a boxed mark that carries far more
 * mass than the fa-light outlines beside it. Each action now gets an identical
 * 40px target, which makes the rhythm even by construction and gives every
 * icon a real hit area instead of a ~22px one.
 * =========================================================================== */
.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;
}
/* 4px, not 24px: the 40px targets carry the spacing now */
.esg-navigation [class*="col-md-9"] tr { gap: var(--nav-sp-1); }
.esg-navigation [class*="col-md-9"] td {
    display: flex;
    align-items: center;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
}

/* the cluster sits against the divider, not adrift in the empty columns */
/* The row that holds the empty columns and the cluster becomes a flex line, so
   the cluster can be pushed to the end with margin-left:auto. Floating right
   left it 78px short of the divider: the shrink-wrapped column still reserved
   width for a display:none cell, and a float cannot be told "use whatever is
   left". Flex can. The two empty columns collapse to nothing on their own. */
.esg-navigation [class*="col-md-9"] {
    display: flex;
    align-items: center;
}
.esg-navigation [class*="col-md-9"] > [class*="col-md-"] {
    float: none !important;
    width: auto !important;
}
.esg-navigation [class*="col-md-9"] > [class*="col-md-3"] {
    margin-left: auto;
    padding-right: 0 !important;
}
.esg-navigation [class*="col-md-9"] > [class*="col-md-3"] table { margin-left: auto; }

/* one target, one colour, one size */
.esg-navigation [class*="col-md-9"] td > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--lf-ink-2, #4e5b57) !important;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.esg-navigation [class*="col-md-9"] td > a:hover,
.esg-navigation [class*="col-md-9"] td > a:focus-visible {
    background: var(--lf-accent-bg, #e6f1ee);
    color: var(--lf-accent-strong, #0c7a55) !important;
}
.esg-navigation [class*="col-md-9"] td > a:focus-visible {
    outline: 2px solid var(--lf-accent-strong, #0c7a55);
    outline-offset: -2px;
}

.esg-navigation [class*="col-md-9"] td > a em {
    font-size: 19px !important;
    line-height: 1 !important;
    padding: 0 !important;       /* the language icon carried a pt-1 */
    margin: 0 !important;
    color: inherit !important;
}
/* fa-language is a filled, boxed mark: at a shared size it reads a weight
   heavier than the outline icons, so it is set optically smaller to match. */
.esg-navigation [class*="col-md-9"] td > a em.fa-language { font-size: 16px !important; }

/* the envelope's built-in dot is a signal, so it takes the accent */
.esg-navigation [class*="col-md-9"] td > a em.fa-envelope-dot {
    --fa-secondary-color: var(--lf-accent, #0c7a55);
    --fa-secondary-opacity: 1;
}

/* --- 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 --------------------------- */
/* .border-left pins these to the ACCOUNT column. Without it they also
   matched the icon cluster, which is a col-md-3 too — that is where the
   icons' 12px gap and the settings cell's stray 8px margin came from. */
.esg-navigation .border-left[class*="col-md-3"] table,
.esg-navigation .border-left[class*="col-md-3"] tbody,
.esg-navigation .border-left[class*="col-md-3"] tr:first-child {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
}
.esg-navigation .border-left[class*="col-md-3"] tr:first-child { gap: var(--nav-sp-3); }
.esg-navigation .border-left[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 .border-left[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 .border-left[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 .border-left[class*="col-md-3"] td:last-child { margin-left: var(--nav-sp-2); }
.esg-navigation .border-left[class*="col-md-3"] td:last-child em { margin-top: 0 !important; }

@media (max-width: 767px) {
    .esg-navigation [class*="col-md-9"] {
        display: revert;
    }
    .esg-navigation [class*="col-md-9"] > [class*="col-md-"] {
        float: revert !important;
        width: revert !important;
    }
    .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 .border-left[class*="col-md-3"] table,
    .esg-navigation .border-left[class*="col-md-3"] tbody,
    .esg-navigation .border-left[class*="col-md-3"] tr:first-child,
    .esg-navigation .border-left[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;
    }
}