@import url('/community/stx-community.css?v=20260802-theme-comments-v1');
@import url('/assets/site-community.css?v=20260802-theme-comments-v1');
@import url('/assets/today-on-stx.css?v=20260809b');
@import url('/assets/trivia-home.css?v=20260808b');
@import url('/assets/stx-header-recovery.css?v=20260808h');
@import url('/assets/stx-account-repair-v2.css?v=20260808i');

/*
  STX Online unified public top stack.
  Scoped so the Politics and Trivia page designs below it keep their own CSS.
*/
.stx-global-stack {
  --green: #76c442;
  --green-bright: #9cde68;
  --white: #f5f7f8;
  --muted: #b8c0c5;
  position: relative;
  z-index: 10000;
  width: 100%;
  margin: 0;
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(145deg, #173a26 0%, #203a2d 48%, #1a3028 100%);
  isolation: isolate;
}

/* Directory/News already live inside .site-shell. Trivia/Politics do not. */
body > .stx-global-stack {
  width: min(1120px, calc(100% - 34px));
  margin-left: auto;
  margin-right: auto;
}
.site-shell > .stx-global-stack {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.stx-global-stack .site-header {
  position: relative !important;
  top: auto !important;
  z-index: 12000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 13px 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.stx-global-stack .brand {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--white) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

.stx-global-stack .brand-logo {
  display: block !important;
  width: clamp(118px, 14vw, 155px) !important;
  height: auto !important;
  max-width: none !important;
  max-height: 74px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.stx-global-stack .header-cluster {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  overflow: visible !important;
}

.stx-global-stack .nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #d6dcdf !important;
  font: 700 14px/1.2 Arial, Helvetica, sans-serif !important;
  white-space: nowrap !important;
}

/* No active-page pill. Current page is indicated only by aria-current. */
.stx-global-stack .nav a,
.stx-global-stack .nav a[aria-current='page'],
.stx-global-stack .nav a.button,
.stx-global-stack .nav .button {
  display: inline !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #eef1ef !important;
  font: inherit !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}
.stx-global-stack .nav a:hover,
.stx-global-stack .nav a:focus-visible {
  color: var(--green-bright) !important;
  background: transparent !important;
  text-decoration: none !important;
}

.stx-global-stack .header-community[data-stx-auth] {
  position: relative !important;
  z-index: 15000 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 0 0 auto !important;
  overflow: visible !important;
  color: var(--white) !important;
}

/* Politics/Trivia have page-level heading rules; keep the Today card identical to home. */
.stx-global-stack .stx-today-headline,
.stx-global-stack .stx-today-copy h2 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
}
.stx-global-stack .stx-today-on-stx,
.stx-global-stack .stx-trivia-champion-strip {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

/* The account dropdown must never be clipped by the foreign page CSS below. */
.stx-global-stack,
.stx-global-stack .site-header,
.stx-global-stack .header-cluster,
.stx-global-stack .header-community,
.stx-global-stack [data-stx-auth] {
  overflow: visible !important;
}
.stx-global-stack .stx-account-v2-menu,
.stx-global-stack .stx-compact-member-dropdown,
.stx-global-stack .stx-profile-editor {
  z-index: 30000 !important;
}

@media (max-width: 940px) {
  .stx-global-stack .site-header {
    align-items: flex-start !important;
  }
  .stx-global-stack .header-cluster {
    align-items: flex-end !important;
    flex-direction: column !important;
    gap: 9px !important;
  }
  .stx-global-stack .nav {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 11px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 680px) {
  body > .stx-global-stack {
    width: calc(100% - 24px);
  }
  .stx-global-stack .site-header,
  .stx-global-stack .header-cluster {
    width: 100% !important;
  }
  .stx-global-stack .header-cluster {
    align-items: stretch !important;
  }
  .stx-global-stack .nav {
    justify-content: flex-start !important;
    gap: 12px !important;
  }
  .stx-global-stack .brand-logo {
    width: min(155px, 45vw) !important;
    max-height: 58px !important;
  }
}