/* ==========================================================================
   unstablesmp.io — layout corrections
   --------------------------------------------------------------------------
   Loaded AFTER styles.css. styles.css is the original site stylesheet and is
   left byte-for-byte untouched so the colour palette, typography and core
   design stay identical.

   This file only fixes layout and spacing. Nothing here changes a colour.
   ========================================================================== */

/* ==========================================================================
   A. HEADER — the nav could not shrink and pushed the page wider than the
      viewport at <=900px. .navActions was overlapping .navSlots as a result.
   ========================================================================== */

/* The original stylesheet sets body { min-width: 320px }. Below that the page
   is forced wider than the screen and the whole document scrolls sideways.
   No shipping phone is narrower than 360 CSS px, so lowering the floor to
   300px removes the failure mode without changing any real layout. */
body {
  min-width: 300px;
}

.hotbarInner > .navSlots {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}

.hotbarInner > .navSlots::-webkit-scrollbar {
  display: none;
}

.hotbarInner > .navSlots > .navSlot {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.hotbarInner > .navActions {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .hotbarInner {
    gap: 4px;
    padding-inline: 12px;
  }

  .brandWordmark {
    min-width: 0;
    flex: 0 1 auto;
    padding-right: 6px;
  }

  .brandWordmark img {
    width: 132px;
  }

  .navSlot {
    padding-inline: 11px;
    font-size: 0.92rem;
  }

  .navSlot.active::after {
    left: 11px;
    right: 11px;
  }

  .navStore,
  .navDiscord {
    min-width: 0;
    padding-inline: 12px;
  }

  /* Icon-only actions on the narrowest screens so the nav keeps its width. */
  .navDiscord span,
  .navStore span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .navDiscord img {
    width: 20px;
  }
}

/* ==========================================================================
   B. GRID TRACKS — `1fr` has an `auto` minimum, so a wide child (a data table,
      a long unbroken string) pushed the single column past its container.
      `minmax(0, 1fr)` lets the track shrink and the child scroll instead.
   ========================================================================== */
.articleLayout,
.guideArticleLayout,
.introGrid,
.faqResources,
.faqGrid {
  min-width: 0;
}

.articleLayout > *,
.guideArticleLayout > *,
.introGrid > *,
.faqResources > *,
.faqGrid > * {
  min-width: 0;
}

/* Collapse the article + sidebar layout earlier than the original stylesheet
   does (980px). Keeping a 290px sidebar down to 980px leaves the article only
   ~455px on a 1000px screen, which squeezes card grids into a ragged single
   column. Full-width content reads far better and lets cards stay 2-up. */
@media (max-width: 1180px) {
  .articleLayout,
  .introGrid,
  .faqResources,
  .faqGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .guideArticleLayout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   C. HOME / PUBLIC-SMP FEATURE GRID
      .exploreMoreGrid is a six-track bento. Explicit spans keep the four cards
      filling the grid, and the track count now steps down with the viewport.
   ========================================================================== */
.exploreMoreGrid > :first-child {
  grid-column: span 4;
}

.exploreMoreGrid > :nth-child(2) {
  grid-column: span 2;
}

.exploreMoreGrid > :nth-child(3) {
  grid-column: span 2;
}

.exploreMoreGrid > :nth-child(4) {
  grid-column: span 4;
}

@media (max-width: 1080px) {
  .exploreMoreGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exploreMoreGrid > * {
    grid-column: auto !important;
  }
}

@media (max-width: 620px) {
  .exploreMoreGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .landscapeCard {
    min-height: 260px;
  }
}

/* ==========================================================================
   D. FAQ — .faqResources carries a large outer margin. Nested inside a
      .section, which already has page padding, that doubled the vertical
      rhythm on the creator hub and the server IP page.
   ========================================================================== */
.faqGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: stretch;
  gap: 18px;
  margin-block: 0;
}

.section .faqResources {
  margin-block: 0;
}

/* Must come after the base rule above — equal specificity, later wins. */
@media (max-width: 980px) {
  .faqGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   E. CARD GRIDS INSIDE A NARROW ARTICLE COLUMN
      Three-up grids inside a ~380px column produced ~95px cards. Two-up at
      tablet width, one-up on phones.
   ========================================================================== */
.articleLayout .introCopy .pathGrid,
.articleLayout .introCopy .guideGrid,
.articleLayout .seoArticle .pathGrid,
.articleLayout .seoArticle .guideGrid,
.articleLayout .seoArticle .featureGrid,
.articleLayout .seoArticle .ruleGrid,
.guideArticleLayout .seoArticle .pathGrid,
.guideArticleLayout .seoArticle .guideGrid,
.guideArticleLayout .seoArticle .featureGrid,
.guideArticleLayout .introCopy .pathGrid,
.guideArticleLayout .introCopy .guideGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Card grids inside a long-form article.
   auto-fit fills the row instead of leaving dead space, so a grid of 3 or 4
   cards stays even at any width. A fixed 2-column rule left an orphan card
   alone on the second row, which is what made the tiles look inconsistent. */
.articleLayout .introCopy .pathGrid,
.articleLayout .introCopy .guideGrid,
.articleLayout .seoArticle .pathGrid,
.articleLayout .seoArticle .guideGrid,
.articleLayout .seoArticle .featureGrid,
.articleLayout .seoArticle .ruleGrid,
.guideArticleLayout .seoArticle .pathGrid,
.guideArticleLayout .seoArticle .guideGrid,
.guideArticleLayout .seoArticle .featureGrid,
.guideArticleLayout .introCopy .pathGrid,
.guideArticleLayout .introCopy .guideGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

/* Card grids: equal-height rows with the call to action pinned to the bottom,
   so a row of cards never looks ragged. */
.pathGrid,
.guideGrid,
.featureGrid,
.ruleGrid,
.relatedJoinGuides .pathGrid {
  align-items: stretch;
}

.pathGrid > *,
.guideGrid > *,
.featureGrid > *,
.ruleGrid > * {
  height: 100%;
}

/* ==========================================================================
   F. SIDEBAR — stop a short panel stretching down a long article, and stop a
      tall panel from running off screen.
   ========================================================================== */
.articleLayout > .sidebarPanel,
.articleLayout > .resourcePanel {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--nav-height) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 980px) {
  .articleLayout > .sidebarPanel,
  .articleLayout > .resourcePanel {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.articleLayout .discordSidebarLink {
  min-height: 0;
  padding: 10px 12px;
}

/* ==========================================================================
   G. FOOTER — five columns now; the original capped at four and wrapped.
   ========================================================================== */
.siteFooter .footerLinks {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 22px 26px;
}

@media (max-width: 1180px) {
  .siteFooter .footerLinks {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .siteFooter .footerLinks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  /* Comfortable tap targets for the stacked footer links on touch screens. */
  .footerCol a {
    display: inline-block;
    padding-block: 7px;
    min-height: 34px;
  }

  .footerCol span {
    margin-bottom: 4px;
  }

  .footerBrand a {
    display: inline-block;
    padding-block: 6px;
    min-height: 34px;
  }

  .backToTop {
    display: inline-block;
    padding-block: 8px;
    min-height: 36px;
  }

  .breadcrumbs li a,
  .breadcrumbs li span {
    display: inline-block;
    padding-block: 5px;
    min-height: 30px;
  }

  .resourcePanel a,
  .sourceGrid a,
  .homeFacts a,
  .sideNavLink {
    min-height: 40px;
  }
}

@media (max-width: 460px) {
  .siteFooter .footerLinks {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ==========================================================================
   H. TABLES — wide tables scroll inside their wrapper instead of widening the
      page. min-width keeps columns legible rather than collapsing to nothing.
   ========================================================================== */
.tableScroll {
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

/* Any grid or flex ancestor must be allowed to shrink, otherwise the wrapper
   grows to the table instead of scrolling it. */
.seoArticle > *,
.guideArticle > *,
.introCopy > * {
  min-width: 0;
  max-width: 100%;
}

.troubleshootingTable {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
}

.troubleshootingTable th,
.troubleshootingTable td {
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
}

@media (max-width: 620px) {
  .troubleshootingTable {
    min-width: 340px;
  }

  .troubleshootingTable th,
  .troubleshootingTable td {
    padding: 9px 10px;
    font-size: .88rem;
  }
}

/* Long unbroken strings (addresses, URLs) must not force width.
   `anywhere` is required rather than `break-word`: `break-word` only breaks a
   word once it has already overflowed, so it does NOT reduce the element's
   min-content width — which is what grid and flex children are sized against.
   `anywhere` participates in intrinsic sizing, which is what we need here. */
.articleLayout .introCopy *,
.articleLayout .seoArticle *,
.guideArticle *,
.seoArticle *,
.introCopy *,
.articleLayout .sidebarPanel *,
.articleLayout .resourcePanel *,
.sidebarPanel *,
.resourcePanel *,
.sourcePanel *,
.faqPanel *,
.faqGrid *,
.faqResources *,
.guideArticleLayout .serverGuidesAside *,
.serverGuidesAside *,
.focusList,
.focusList *,
.focusList li,
.discordSidebarLink,
.discordSidebarLink span,
.sourceGrid *,
.sourceGrid a,
.listingList *,
.serverRow *,
.ipBox,
.ipBox code,
.guideQuickAnswer * {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Grid and flex children default to a min-content floor; remove it so a long
   token wraps instead of pushing the track wider than its container. */
.seoArticle > *,
.introCopy > *,
.guideArticle > * {
  min-width: 0;
  max-width: 100%;
}

.pathGrid > *,
.guideGrid > *,
.featureGrid > *,
.ruleGrid > *,
.relatedJoinGuides .pathGrid > *,
.showcaseList > *,
.connectionGrid > *,
.checkList > *,
.steps > * {
  min-width: 0;
}

.checkList li,
.steps li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contentCard h3,
.guideCard h3,
.featureCard h3,
.ruleCard h3,
.seoArticle h1,
.seoArticle h2,
.seoArticle h3,
.seoArticle h4 {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   I. LOCATIONS WIKI — a vertical list of illustrated entries.
      .gameplayTiles is a six-column stat strip and .seoShowcase is a
      horizontal carousel; neither suits this content.
   ========================================================================== */
.showcaseList {
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
}

.showcaseItem {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--line-2);
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
}

.showcaseItemMedia {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  background: var(--bg-2);
}

.showcaseItemImage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.showcaseItemBody {
  padding: clamp(20px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.showcaseItemBody h2 {
  margin-bottom: 12px;
}

.showcaseItemBody p {
  margin-bottom: 14px;
}

.showcaseItemBody .guideNote {
  margin-bottom: 0;
}

/* Alternate the image side so a long list does not read as a rigid table. */
.showcaseItem:nth-child(even) .showcaseItemMedia {
  order: 2;
}

@media (max-width: 860px) {
  .showcaseItem {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcaseItemMedia {
    order: 0 !important;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   J. VIDEO EMBED — responsive 16:9. Inside .seoShowcase (a horizontal
      carousel) the player was clipped to 270px and scrolled sideways.
   ========================================================================== */
.videoEmbed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  overflow: hidden;
}

.videoEmbed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Creator channel embeds. Four stacked full-width players pushed the page
   down by ~2500px, so they sit two-up on desktop and pair up by name. */
.videoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  margin-bottom: 8px;
}

.videoGridItem {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.videoGridItem h4 {
  margin: 0;
  color: var(--accent-bright);
  font-family: var(--pixel);
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .videoGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   K. SIDEBAR NAVIGATION
      .discordSidebarLink in the original stylesheet is a Discord component:
      a 28px icon, a label, then a blue badge. Using it as a generic nav link
      drops the text into the badge column. .sideNavLink is the correct
      two-column pattern (marker + label), matching .serverGuidesAside a.
   ========================================================================== */
.sideNavLink {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 52px;
  padding: 10px 12px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: color .16s ease, background .16s ease, border-color .16s ease,
    transform .16s var(--ease-out);
}

.sideNavLink:hover,
.sideNavLink:focus-visible,
.sideNavLink[aria-current="page"] {
  color: var(--text-bright);
  background: var(--surface-3);
  border-color: var(--accent-line);
}

.sideNavLink:hover {
  transform: translateY(-1px);
}

/* The marker is a fixed-width numeric chip. It never truncates because the
   numbers are always two characters, and it never wraps. */
.sideNavLink small {
  display: grid;
  place-items: center;
  width: 38px;
  height: 30px;
  color: var(--accent-bright);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  font-family: var(--pixel);
  font-size: .78rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

.sideNavLink span {
  color: inherit;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sidebarPanel nav {
  display: grid;
  gap: 8px;
}

/* ==========================================================================
   L. FOCUS LIST
      styles.css styles .focusList and its ::before marker but never styles
      the <strong> label or <span> value, so they render as one run of text
      ("Javaunstablesmp.io"). Give them two explicit columns.
   ========================================================================== */
.focusList li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 6px 14px;
  align-items: baseline;
}

.focusList li strong {
  color: var(--text-bright);
  font-family: var(--pixel);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.focusList li span {
  color: var(--text);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Stacked variant for the widest value, e.g. a long support address. */
.focusList--stack li {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.focusList--stack li span {
  text-align: left;
}

@media (max-width: 420px) {
  .focusList li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .focusList li span {
    text-align: left;
  }
}

/* ==========================================================================
   M. SECTION ACTION
      A lone centred button under a card grid reads as orphaned. The site
      already has .sectionHeadingAction for this, so prefer it in markup;
      this keeps the fallback tidy when it is used.
   ========================================================================== */
.sectionAction {
  margin-top: 28px;
}

.sectionHeadingAction {
  flex: none;
}

.sectionHeading {
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .sectionHeading {
    align-items: flex-start;
    gap: 18px;
  }

  .sectionHeadingAction {
    width: 100%;
  }

  .sectionHeadingAction .button {
    width: 100%;
  }
}

/* ==========================================================================
   N. MISC COMPONENT SPACING
   ========================================================================== */

/* "Also called …" alias line on the locations wiki. */
.contentCard > .alsoKnownAs {
  border: 1px solid var(--line-2);
  color: var(--accent-bright);
  background: var(--accent-dim);
  font-family: var(--pixel);
  letter-spacing: .04em;
  text-transform: uppercase;
  align-self: flex-start;
  border-radius: 6px;
  margin-bottom: 22px;
  padding: 5px 10px;
  font-size: .8rem;
}

/* Two-up connection grid: two-up on desktop, stacked when it gets tight. */
.articleLayout .connectionGrid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .articleLayout .connectionGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Section headings followed immediately by a grid need no extra gap. */
.sectionHeading + .pathGrid,
.sectionHeading + .guideGrid,
.sectionHeading + .featureGrid,
.sectionHeading + .showcaseList {
  margin-top: 0;
}

/* Anchor targets from the location jump list must clear the fixed header. */
:target {
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

.showcaseItem:target,
.contentCard:target {
  border-color: var(--accent);
}

/* Breadcrumbs can get long on nested guides. */
.breadcrumbs ol {
  flex-wrap: wrap;
  row-gap: 6px;
}

@media (max-width: 620px) {
  .homeFacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeFacts a + a {
    border-left: 0;
  }

  .homeFacts a:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .homeFacts a:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .joinGuideCards {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}