/* ============================================================
   syw-header.css — SYW header: fluid bar refactor
   Custom override — MUST load AFTER black-style.css and style.css.
   All rules are scoped to body.msl-black .header-style-3 at >=992px
   so they are a no-op on other themes and mobile.

   Root cause of the three legacy hacks this replaces
   (all in vendor style.css — do not edit that file):
   1. .center-logo: position:absolute; bottom:0; width:30%
      → logo floats to bottom, drifts off-centre when account block is wide
   2. .header-2st-row.align-center-nav: position:absolute; bottom:-72px
      → nav row hardcoded offset that overlaps the logo row on any height change
   3. .header-2st-row: padding:15px 0 1px (asymmetric)
      → lopsided top/bottom padding inflates the row height unevenly

   All three are overridden here; vendor files are untouched.
   ============================================================ */

/* ── CSS tokens ─────────────────────────────────────────────
   Override --syw-header-gutter / --syw-logo-max-h in a later
   rule if you need to tweak without touching this file.         */
:root {
  --syw-header-gutter:   16px;   /* gap between left/center/right groups */
  --syw-logo-max-h:      64px;   /* logo cap; native GIF is 315×97 → ≤97 stays sharp */
  --syw-row-pad-y:        8px;   /* symmetric row top/bottom padding */
  --syw-account-font:  0.95em;   /* account block text size (~12px — up from 10.8px) */
  --syw-account-min-w:  210px;   /* prevents RANK/XP line from wrapping (see note below) */
}

/* ── Desktop-only overrides (≥992px) ────────────────────────
   Below 992px the dl-menu / mobile layout takes over; these
   rules are deliberately not active there.                      */
@media (min-width: 992px) {

  /* 1. Row padding — symmetric, replaces vendor 15px/1px */
  body.msl-black .header-style-3 .header-2st-row:not(.align-center-nav) {
    padding-top:    var(--syw-row-pad-y);
    padding-bottom: var(--syw-row-pad-y);
  }

  /* 2. Container — flex so left/right groups sit on one axis;
        position:relative so the absolute-centered logo can anchor to it.
        min-height hugs the logo cap so the row never collapses shorter. */
  body.msl-black .header-style-3 .header-2st-row:not(.align-center-nav) > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--syw-header-gutter);
    min-height: var(--syw-logo-max-h);
    position: relative;
  }

  /* 3. Side groups — cancel Bootstrap floats, become flex children */
  body.msl-black .header-style-3 .header-2st-row:not(.align-center-nav) > .container > .pull-left,
  body.msl-black .header-style-3 .header-2st-row:not(.align-center-nav) > .container > .pull-right {
    float: none;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    text-align: left;
    margin: 0;
  }
  body.msl-black .header-style-3 .header-2st-row:not(.align-center-nav) > .container > .pull-left  { justify-content: flex-start; }
  body.msl-black .header-style-3 .header-2st-row:not(.align-center-nav) > .container > .pull-right { justify-content: flex-end;   }

  /* 4. Cancel floats/margins on direct children of each side group */
  body.msl-black .header-style-3 .header-2st-row:not(.align-center-nav) > .container > .pull-left  > *,
  body.msl-black .header-style-3 .header-2st-row:not(.align-center-nav) > .container > .pull-right > * {
    float: none;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* 5. Logo — absolutely centered TO the bar.
        left/top 50% + translate(-50%,-50%) keeps it dead-center regardless
        of how wide the account block is. Also overrides the vendor
        `bottom:0` and any JS-applied transform. */
  body.msl-black .header-style-3 .header-2st-row:not(.align-center-nav) > .container > .center-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;          /* neutralise vendor right:0 — was stretching element to 585px wide */
    width: auto;          /* neutralise vendor width:30% */
    transform: translate(-50%, -50%);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  /* 6. Kill default margins/padding inside the logo DOM tree */
  body.msl-black .header-style-3 .center-logo .logo,
  body.msl-black .header-style-3 .center-logo h1,
  body.msl-black .header-style-3 .center-logo h1 a {
    margin: 0;
    padding: 0;
    line-height: 0;
    transform: none;
  }

  /* 7. Logo image — cap height; show only the light variant on msl-black.
        logo-drak is the dark-theme image — keep it hidden (vendor default).
        Setting display:block on both would override that vendor display:none. */
  body.msl-black .header-style-3 .center-logo img.logo-light {
    max-height: var(--syw-logo-max-h);
    width: auto;
    display: block;
  }
  body.msl-black .header-style-3 .center-logo img.logo-drak {
    display: none;
  }

  /* 8. Nav row — back in normal flow so it stacks flush below the utility row.
        Overrides vendor `position:absolute; bottom:-72px` which is the
        overlap bug when the row height changes. */
  body.msl-black .header-style-3 .header-2st-row.align-center-nav {
    position: static;
    inset: auto;
  }

  /* 9. Account block — text sizing applied to every descendant that carries
        an inline font-size (theme specificity on `.syw-account-block span`
        outspecifies a parent-only rule — confirmed live).
        min-width prevents the RANK/XP combined line from wrapping;
        max-width guards so a very long rank name never reaches the logo.
        NOTE: tune --syw-account-min-w once live with real badge names. */
  body.msl-black .header-style-3 .syw-account-block,
  body.msl-black .header-style-3 .syw-account-block > span,
  body.msl-black .header-style-3 .syw-account-block > span > a,
  body.msl-black .header-style-3 .syw-account-block > a {
    font-size: var(--syw-account-font);
  }
  body.msl-black .header-style-3 .syw-account-block {
    white-space: nowrap;
    min-width: var(--syw-account-min-w);
    max-width: 30%;
    overflow: hidden;
  }

} /* end @media (min-width: 992px) */

/* ── Phase 3: Content offset below fixed header ─────────────────────────────
   The nav row is now in-flow, making the fixed .header-style-3 taller.
   --syw-content-offset must be ≥ total fixed header height (ticker + logo row
   + nav row).  Measured ~200px logged-in at 992px.  Tune this variable after
   a live browser check at 992 / 1200 / 1440px.
   The .syw-page-content class is added to the content wrapper in base.html
   so we can target it without touching every child template.               */
:root {
  --syw-content-offset: 205px;  /* ← tune after live verification */
}
body.msl-black .header-style-3 ~ .syw-page-content {
  margin-top: var(--syw-content-offset) !important;
}

/* ── Account-block colours (theme-agnostic, no media-query needed) ──────────
   Replaces the inline style="color:… font-size:…" attributes that were
   on each span/a in the old markup.                                           */

/* Welcome line — white text; email link keeps a subtle accent */
.syw-account-block > span:first-child {
  color: #ffffff !important;
}
.syw-account-block > span:first-child > a {
  color: #c9d8e3 !important;   /* slightly muted white so the link reads as a link */
}

/* RANK / XP line — white; neon glow kept for badge flavour */
.syw-account-block .syw-account-rank {
  color: #ffffff !important;
  text-shadow: 0 0 5px #e60073, 0 0 5px #e60073, 0 0 5px #e60073;
}

/* LOGOUT link — purple accent, unchanged */
.syw-account-block .syw-account-logout {
  color: #84699c !important;
}