/* ════════════════════════════════════════════════════════════════════════
   THE ONE APPROVED ForUs LOGO — company-wide (owner directive 2026-09-27)
   "The LOGO is in gold with transparent background For(white)Us(gold) tm
    white. and the font for the words is Georgia Pro" / "The logo has to be
    the same gold as the Us" / "make that the GLOBAL ONLY approved LOGO
    thorugh out the company"

   Markup — the ONLY form a page may render (api/tests/forusApprovedLogo.test.js
   pins it). HRHub is a Contracting system, so its department word is always
   CONTRACTING:
     span.forus-logo[role=img][aria-label="ForUs™ CONTRACTING"]
       img.forus-logo__mark  src=/styles/forus-mark-gold-160.png  alt=""
       span.forus-logo__text[aria-hidden=true]
         span.forus-logo__words > .forus-logo__for "For" + .forus-logo__us "Us" + .forus-logo__tm "™"
         span.forus-logo__dept  "CONTRACTING"
   Ink:  dark surface (default)  For, ™, CONTRACTING white #FFFFFF
         .forus-logo--light      For, ™, CONTRACTING black #000000
         .forus-logo--on-gold    every word takes that surface's dark label colour
         "Us" is ALWAYS gold #F3B923 (the same gold as the mark), except on gold.
   Size: --forus-logo-h is the mark height. Words = 0.62 × mark, bold, gap 8px;
   ™ = 0.34 of the word size, raised 0.18 of it, 1px left; CONTRACTING = 0.36
   of the word size, letter-spacing 0.32em, bold. Words are LIVE TEXT, never an
   image, in "Georgia Pro", Georgia, serif. The mark is never recoloured.
   ════════════════════════════════════════════════════════════════════════ */
.forus-logo {
  --forus-logo-h: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  vertical-align: middle;
}
html body .forus-logo .forus-logo__mark {
  display: block;
  width: var(--forus-logo-h) !important;
  height: var(--forus-logo-h) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0;
}
html body .forus-logo .forus-logo__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: calc(var(--forus-logo-h) * 0.62);
  font-family: "Georgia Pro", Georgia, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 1;
}
html body .forus-logo__words {
  display: inline-flex;
  align-items: flex-start;
  font-family: "Georgia Pro", Georgia, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1;
}
html body .forus-logo__tm {
  font-size: 0.34em;          /* 0.34 of the word size */
  margin-top: 0.53em;         /* 0.18 of the word size (0.18 / 0.34) */
  margin-left: 1px;
  line-height: 1;
}
html body .forus-logo .forus-logo__dept {
  display: block;
  font-size: 0.36em;          /* 0.36 of the word size */
  letter-spacing: 0.32em !important;
  font-family: "Georgia Pro", Georgia, serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  margin-top: 0.3em;
  line-height: 1;
}
/* Colours carry !important and a doubled class: the portal chrome forces
   every descendant of a top bar white (`.admin-topbar * {color:… !important}`),
   and "Us" must stay the logo gold under any of those rules. */
html body .forus-logo.forus-logo .forus-logo__for,
html body .forus-words.forus-words .forus-logo__for { color: #FFFFFF !important; }
html body .forus-logo.forus-logo .forus-logo__us,
html body .forus-words.forus-words .forus-logo__us  { color: #F3B923 !important; }
html body .forus-logo.forus-logo .forus-logo__tm,
html body .forus-words.forus-words .forus-logo__tm  { color: #FFFFFF !important; }
html body .forus-logo.forus-logo .forus-logo__dept  { color: #FFFFFF !important; }
/* White / light surfaces (white page, white paper): For, ™, CONTRACTING black. */
html body .forus-logo.forus-logo.forus-logo--light .forus-logo__for,
html body .forus-logo.forus-logo.forus-logo--light .forus-logo__tm,
html body .forus-logo.forus-logo.forus-logo--light .forus-logo__dept,
html body .forus-words.forus-words.forus-logo--light .forus-logo__for,
html body .forus-words.forus-words.forus-logo--light .forus-logo__tm { color: #000000 !important; }
/* Gold surfaces: every word takes that surface's dark label colour. */
html body .forus-logo.forus-logo.forus-logo--on-gold .forus-logo__for,
html body .forus-logo.forus-logo.forus-logo--on-gold .forus-logo__us,
html body .forus-logo.forus-logo.forus-logo--on-gold .forus-logo__tm,
html body .forus-logo.forus-logo.forus-logo--on-gold .forus-logo__dept {
  color: var(--forus-logo-on-gold-label, #000000) !important;
}

/* Sizing by the chrome that hosts it (the retired lockup image's slots). */
html body .topbar .forus-logo,
html body .dsg-topbar .forus-logo,
html body .pm-topbar .forus-logo,
html body .admin-topbar .forus-logo,
html body .admin-shell .admin-brand .forus-logo,
html body .employee-shell .employee-brand .forus-logo,
html body .employee-shell .me-brand .forus-logo,
html body .admin-sidebar .forus-logo { --forus-logo-h: 44px; }
@media (max-width: 880px) {
  html body .topbar .brand .forus-logo { --forus-logo-h: 32px; }
}
@media (max-width: 720px) {
  html body .topbar .forus-logo,
  html body .dsg-topbar .forus-logo,
  html body .pm-topbar .forus-logo,
  html body .admin-topbar .forus-logo,
  html body .admin-shell .admin-brand .forus-logo,
  html body .employee-shell .employee-brand .forus-logo,
  html body .employee-shell .me-brand .forus-logo,
  html body .admin-sidebar .forus-logo { --forus-logo-h: 36px; }
}
@media (max-width: 380px) {
  html body .topbar .brand .forus-logo { --forus-logo-h: 24px; }
}