/* ===========================================================================
 * The left menu, as one unit.
 *
 * include/profile-left-section.php is already a single partial shared by every
 * signed-in page. Its STYLING was not: the colours below were hard-set in
 * companyPage.css to the SuperHumanRace purple (#2b0a3d icons, #082eb5 links,
 * #f2f2f2 hover), each client theme then reached in with a 60-selector rule to
 * push the label back to black, and the accent treatment lived inside
 * liveFeedV2.css under body.lfPageV2 — so the menu was themed on the live feed
 * and grey on all 780-odd other pages.
 *
 * Everything the menu needs is here, driven by the tokens all-css.php now emits
 * for every page. Customise a client once in shr_modules/theme.php and the menu
 * follows on every page that prints it. Nothing below names a brand.
 *
 * Load order matters: this file is linked AFTER $controlThemeCss, and its
 * selectors are specificity (0,3,1) or higher, so it beats both companyPage.css
 * (0,3,0) and the .theme-1 .company-page-new-left ul li a rules (0,3,0).
 * =========================================================================== */

:root {
    /* One rhythm for the menu, so a row, its icon gutter and a sub-item are all
       multiples of the same 4px step rather than three unrelated numbers. */
    --ln-row-y:     10px;   /* vertical padding inside a row      */
    --ln-row-x:     16px;   /* the menu's left and right gutter   */
    --ln-icon:      26px;   /* icon column width                  */
    --ln-gap:       12px;   /* icon to label                      */
    --ln-rail:      3px;    /* current-page rail                  */
    --ln-radius:    8px;
}

/* --- the column ---------------------------------------------------------- */
.company-page-new-left .quickAccessUl {
    text-align: left;
    /* No padding-top. The menu, the feed column and the right rail all start at
       the same y, so a top pad here put the first row 10px below the first card
       and the Featured Posts panel — the one place the misalignment shows. */
    padding: 0 0 var(--ln-row-y);
    margin: 0;
    list-style: none;
}

/* --- a row --------------------------------------------------------------- */
.company-page-new-left .quickAccessUl > li {
    padding: 0;
    margin: 0 var(--nav-sp-2, 8px) 2px;
    border-radius: var(--ln-radius);
    text-transform: none;
    transition: background-color .15s ease;
}

.company-page-new-left .quickAccessUl > li > a.leftLiA {
    display: flex;
    align-items: center;
    gap: var(--ln-gap);
    padding: var(--ln-row-y) var(--ln-row-x);
    border-radius: var(--ln-radius);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--lf-ink, #131a18);
    text-transform: none;
    text-decoration: none;
    /* the rail is drawn, not laid out, so turning it on shifts nothing */
    box-shadow: inset 0 0 0 0 transparent;
    transition: box-shadow .15s ease, color .15s ease;
}

/* The icon column is a fixed width so every label starts on the same x,
   whatever glyph sits beside it. */
.company-page-new-left .quickAccessUl > li .iconSpan {
    flex: 0 0 var(--ln-icon);
    width: var(--ln-icon);
    height: var(--ln-icon);
    line-height: var(--ln-icon);
    text-align: center;
    display: inline-block;
}

.company-page-new-left .quickAccessUl > li .textSpan {
    flex: 1 1 auto;
    width: auto;
    display: flex;
    align-items: center;
    gap: var(--nav-sp-2, 8px);
}

/* --- icons, in the client's colour --------------------------------------- */
/* Duotone: the primary layer carries the accent at full strength, the secondary
   layer the same hue held back, so the icon reads as one colour with depth
   rather than two colours competing. Promoted here out of body.lfPageV2. */
.company-page-new-left .quickAccessUl > li .iconSpan em {
    font-size: 19px;
    color: var(--lf-accent-strong, #0c7a55);
    --fa-primary-color: var(--lf-accent-strong, #0c7a55);
    --fa-secondary-color: var(--lf-accent-strong, #0c7a55);
    --fa-secondary-opacity: .34;
    transition: --fa-secondary-opacity .15s ease;
}

/* --- hover --------------------------------------------------------------- */
.company-page-new-left .quickAccessUl > li:hover {
    background: var(--lf-accent-bg, #e6f1ee);
}
.company-page-new-left .quickAccessUl > li > a.leftLiA:hover,
.company-page-new-left .quickAccessUl > li > a.leftLiA:focus {
    color: var(--lf-accent-strong, #0c7a55);
    text-decoration: none;
}
.company-page-new-left .quickAccessUl > li > a.leftLiA:hover .iconSpan em,
.company-page-new-left .quickAccessUl > li > a.leftLiA:focus .iconSpan em {
    --fa-secondary-opacity: .5;
}

/* --- the page you are on ------------------------------------------------- */
/* A menu that highlights the same row on every page is telling you nothing.
   profile-left-section.php now sets .is-current from the request path. */
.company-page-new-left .quickAccessUl > li.is-current {
    background: var(--lf-accent-bg, #e6f1ee);
}
.company-page-new-left .quickAccessUl > li.is-current > a.leftLiA {
    color: var(--lf-accent-strong, #0c7a55);
    font-weight: 650;
    box-shadow: inset var(--ln-rail) 0 0 var(--lf-accent, #0c7a55);
}
.company-page-new-left .quickAccessUl > li.is-current > a.leftLiA .iconSpan em {
    --fa-secondary-opacity: .55;
}

/* --- the disclosure arrow ------------------------------------------------ */
.company-page-new-left .quickAccessUl > li .arrow {
    flex: 0 0 auto;
    width: 14px;
    font-size: 12px;
    padding: 0;
    text-align: center;
    color: var(--lf-ink-3, #5e6b66);
    transition: transform .15s ease;
}
.company-page-new-left .quickAccessUl > li > a.leftLiA:hover .arrow {
    color: var(--lf-accent-strong, #0c7a55);
}

/* --- sub-items ----------------------------------------------------------- */
/* Indented to the label column, not to an arbitrary 25px, so a sub-item lines
   up under the parent's text rather than floating between text and icon. */
.company-page-new-left .quickAccessUl > li > .subUl {
    padding: 2px 0 var(--nav-sp-2, 8px);
    margin: 0;
    list-style: none;
}
.company-page-new-left .quickAccessUl > li > .subUl > li {
    padding: 0;
    text-transform: none;
    text-align: left;
}
.company-page-new-left .quickAccessUl > li > .subUl > li > a {
    display: flex;
    align-items: center;
    gap: var(--nav-sp-2, 8px);
    padding: 6px var(--ln-row-x) 6px calc(var(--ln-row-x) + var(--ln-icon) + var(--ln-gap));
    font-size: 13.5px;
    font-weight: 400;
    color: var(--lf-ink-2, #4e5b57);
    text-transform: none;
    text-decoration: none;
    border-radius: 6px;
}
.company-page-new-left .quickAccessUl > li > .subUl > li > a:hover,
.company-page-new-left .quickAccessUl > li > .subUl > li > a:focus {
    color: var(--lf-accent-strong, #0c7a55);
    background: var(--lf-accent-bg, #e6f1ee);
    text-decoration: none;
}
.company-page-new-left .quickAccessUl > li > .subUl > li > a em {
    font-size: 10px;
    color: var(--lf-accent, #0c7a55);
    opacity: .7;
}

/* --- counters ------------------------------------------------------------ */
/* The friends count is informational, so it takes the brand. The pending-actions
   count is not: red there means "something needs you", and that meaning is the
   same for every client, so it stays semantic and is deliberately NOT themed. */
.company-page-new-left .quickAccessUl .textSpan .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}
.company-page-new-left .quickAccessUl .textSpan .label-info {
    background: var(--lf-accent, #0c7a55);
    color: var(--lf-accent-ink, #fff);
}
.company-page-new-left .quickAccessUl .textSpan > i.fa-square-plus {
    font-size: 13px;
    color: var(--lf-accent, #0c7a55);
}

/* The "add a friend" plus was .text-fuschia — a pink that belonged to no theme
   and clashed with four of them. It is the same affordance as the count it
   replaces, so it takes the same colour. */
.company-page-new-left .quickAccessUl .textSpan > i.text-fuschia {
    color: var(--lf-accent, #0c7a55);
}

/* --- one top offset for every page that carries the menu ----------------- */
/* .section-padding adds margin-top:25px on top of its own 99px padding. The
   live feed cancels it with an mt-0 in its markup; no other menu-bearing page
   did, so each of them opened 25px lower than the feed. Expressed as a rule
   about the shell rather than a class each page has to remember, and scoped by
   :has() to sections that actually print the menu so the ~700 pages that use
   .section-padding without it are untouched. Browsers without :has() keep
   today's behaviour. */
section.section-padding:has(.company-page-new-left) {
    margin-top: 0;
}