/* ─────────────────────────────────────────────────────────────
   h305_Stats_Layout.css
   Scope: Statistics pages – TOP header cell only
   Updated: 2025-08-09
   ───────────────────────────────────────────────────────────── */

/* ========= Layer A: Class-based (preferred when our classes exist) ========= */

.public-stats__content .statisticstable th.statheader .h305-stathead {
  display: flex !important;            /* beat LS_Base */
  align-items: center;
  gap: 0.75rem;                        /* space between text block and image */
}

.public-stats__content .statisticstable th.statheader .h305-statstack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;                        /* vertical space between the two lines */
  line-height: 1.25;
}

.public-stats__content .statisticstable th.statheader .h305-statstack .h305-stat-primary,
.public-stats__content .statisticstable th.statheader .h305-statstack .h305-stat-secondary {
  font-weight: 600;
}

.public-stats__content .statisticstable th.statheader img.h305-statimg {
  display: block;
  margin: 0;                           /* wipe LS_Base centering margins first */
  margin-left: auto !important;        /* push fully right */
  margin-right: 0.8em;                 /* right gutter */
  height: 3em !important;              /* DT size; adjust after confirm */
  width: auto !important;              /* preserve aspect ratio */
  max-width: none !important;          /* neutralize LS_Base max-width:100% */
}

/* ========= Layer B: Structural general (works even if our classes are missing) ========= */
/* th.statheader > strong > div > [text-block, img] */

.public-stats__content .statisticstable th.statheader strong > div {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
}

.public-stats__content .statisticstable th.statheader strong > div > *:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  line-height: 1.25;
  font-weight: 600;                     /* both lines bold */
}

.public-stats__content .statisticstable th.statheader strong > div > img {
  display: block;
  margin: 0;                            /* wipe LS_Base margin: .1em auto */
  margin-left: auto !important;         /* override LS_Base centering */
  margin-right: 0.8em;
  height: 3em;
  width: auto;
  max-width: none;
}

/* ========= Layer C: Exact-path fallback (last resort; wins on specificity) ========= */

#statsContainer .public-stats__content .table-responsive table thead tr:nth-child(2) th > strong > div {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
}

#statsContainer .public-stats__content .table-responsive table thead tr:nth-child(2) th > strong > div > *:first-child {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  line-height: 1.25;
  font-weight: 600;
}

#statsContainer .public-stats__content .table-responsive table thead tr:nth-child(2) th > strong > div > img {
  display: block;
  margin: 0;
  margin-left: auto !important;
  margin-right: 3.8em;
  height: 9em;
  width: auto;
  max-width: none;
}

/* ========= Mobile tweak ========= */
@media (max-width: 600px) {
  .public-stats__content .statisticstable th.statheader img.h305-statimg,
  .public-stats__content .statisticstable th.statheader strong > div > img,
  #statsContainer .public-stats__content .table-responsive table thead tr:nth-child(2) th > strong > div > img {
    height: 2.6em !important;
    margin-right: 0.5em;
  }
}