/* Site-wide visual QA fixes (claude-1437). Loaded last in <head> on every public page by
   scripts/apply_game_menu.py. Keep rules small and scoped; each one is listed in qa/claude-1437/REPORT.md. */

/* Section rhythm on pages that do not load launch.css (game, plan, status, about, news...).
   Without this, .launch-section had 0 padding and position:static, so the pixel band edges of
   .section--alt anchored to the wrong box and cut through body text. Values mirror launch.css. */
.launch-section { position: relative; padding: 76px 0; }
@media (max-width: 650px) { .launch-section { padding: 48px 0; } }
.catalog-hero + .launch-section { padding-top: 24px; }
.launch-section .catalog-reading > h2:first-child { margin-top: 0; }

/* Contact page: the "Ready to start?" note sat flush under the submit button. */
form + .info-block { margin: 36px 0 0; padding: 28px 0 0; border-top: 1px solid #a99bff26; border-bottom: 0; }

/* Homepage game cards: the "Explore all 16 games" link was glued to the grid. */
.catalog-grid + p { margin-top: 24px; }

/* "Orders open this weekend" is a status label, not a dead button. The generic disabled rule
   (.btn[aria-disabled] opacity .55) on top of the purple plan button left ~2.4:1 text contrast. */
.btn.btn--closed[aria-disabled="true"],
.world-section .world-plan .btn.btn--closed {
  opacity: 1; cursor: default; box-shadow: none; transform: none;
  background: rgba(169, 155, 255, .08); color: #e4dcff;
  border: 1px dashed rgba(169, 155, 255, .55);
}
.btn.btn--closed[aria-disabled="true"]:hover,
.world-section .world-plan .btn.btn--closed:hover { background: rgba(169, 155, 255, .08); color: #e4dcff; }

/* Page-head CTA sat flush against the lead paragraph (games, status, news, roadmap, FAQ, billing, panel). */
.pagehead .lead + .btn { margin-top: 28px; }

/* Phones: game catalog cards were tall, centred stacks with a big empty icon tile and
   mixed centred/left text. Use a compact left-aligned row: icon beside the name. */
@media (max-width: 600px) {
  .catalog-card {
    display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px;
    align-items: center; justify-items: start; padding: 18px; text-align: left;
  }
  .catalog-card img { width: 60px; height: 40px; margin: 0; }
  .catalog-card h2, .catalog-card h3 { margin: 0; font-size: 1.2rem; }
  .catalog-card p { grid-column: 1 / -1; margin: 12px 0 0; }
  .catalog-card > span { grid-column: 1 / -1; margin-top: 12px; }
  .catalog-card:not(:has(p)) img { grid-row: 1 / span 2; }
  .catalog-card:not(:has(p)) > span { grid-column: 2; margin-top: 2px; font-size: .9rem; }
}

/* Plan cards: "Plan details" link was flush under the order-status label. */
.launch-plan .btn--closed + a { margin-top: 14px; justify-self: start; }

/* Guides: at desktop widths the 760px article left a ~420px empty gutter while the
   "On this page" list sat inline. Move it into a sticky sidebar in that gutter. */
@media (min-width: 1100px) {
  .guide { max-width: none; display: grid; grid-template-columns: minmax(0, 760px) 260px; column-gap: 56px; align-items: start; }
  .guide > * { grid-column: 1; }
  .guide > .guide-toc { grid-column: 2; grid-row: 1 / span 400; position: sticky; top: 112px; margin: 0; }
}

/* Contact rows: one WhatsApp chip style everywhere. In-page rows used a chunky pixel-shadow
   button while the footer used a flat chip; match the footer (flat, 10px radius, 16px icon). */
a.contact-phone__whatsapp,
.why-row a.contact-phone__whatsapp {
  min-height: 40px; padding: 0 14px; gap: 8px;
  border: 1px solid #a99bff40; border-radius: 10px; background: #211a37; color: #e4dcff;
  box-shadow: none; font-size: .875rem; font-weight: 500; line-height: 1.2;
}
a.contact-phone__whatsapp:hover, a.contact-phone__whatsapp:focus-visible,
.why-row a.contact-phone__whatsapp:hover { background: #302449; border-color: #a99bff; color: #fff; }
a.contact-phone__whatsapp svg { width: 16px; height: 16px; flex: 0 0 16px; }
@media (max-width: 767px) { a.contact-phone__whatsapp, .why-row a.contact-phone__whatsapp { min-height: 44px; } }
main .contact-phone__location { font-size: .75rem; color: var(--muted); }

/* Sitemap: "Go straight to a guide" was flush under the link grid, and the game/plan list
   below ran full-width in one long column, out of line with the 900px content column. */
.info-directory + .info-block { margin-top: 44px; }
.info-page > .launch-section > .wrap { max-width: 900px; padding-inline: 0; }
.info-page > .launch-section h2 { font-size: 25px; line-height: 1.3; margin: 0 0 18px; }
.info-page > .launch-section ul { columns: 2 260px; column-gap: 40px; margin: 0; padding-left: 20px; }
.info-page > .launch-section li { break-inside: avoid; margin: 0 0 8px; }
@media (max-width: 960px) { .info-page > .launch-section > .wrap { padding-inline: var(--gut, 20px); } }

/* 404 (and other short launch-page heads): the lines were stacked with no spacing. */
.launch-page-head h1 + p { margin-top: 16px; }
.launch-page-head > .btn { margin: 12px 0 32px; }
.launch-page-head > p { margin-bottom: 10px; }
main > .launch-page-head:only-child { padding-bottom: 120px; }

/* Phones: mobile.css makes every `main a` a 44px inline-flex box for tap size. Inside running
   text that broke line spacing and left gaps after links ("Choose Java   for Vanilla").
   Inline links in sentences are exempt from target-size rules (WCAG 2.5.8), so restore them. */
@media (max-width: 767px) {
  main :is(p, td, dd, figcaption, blockquote, .lead, .aside) > a:not(.btn):not([class*="contact-phone"]) {
    display: inline; min-height: 0; min-width: 0;
  }
}

/* Contact page phones: Support/Billing cards were 2-up at 375px and cut off the addresses. */
@media (max-width: 480px) {
  .contact-channels { grid-template-columns: 1fr; }
  .contact-channel { min-height: 0; }
}

/* Plan detail pages: give the price block hierarchy and room before the order-status label,
   and stop the 480px pickaxe tile dominating the reading column. */
.pagehead .launch-price { margin: 20px 0 4px; font: 700 1.5rem/1.2 var(--font-h); color: var(--text); }
.pagehead .launch-price + p { margin: 0; color: var(--muted); }
.pagehead p + .btn { margin-top: 24px; }
.catalog-reading > img[src$="minecraft-hosting.png"] { display: block; width: 200px; max-width: 50%; height: auto; margin: 0 0 8px; border-radius: 12px; }

/* Games catalog: 16 cards in 3 columns left a lone card on the last row. 4 x 4 on wide screens. */
@media (min-width: 1100px) {
  .catalog-grid:has(> .catalog-card:nth-child(16)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .catalog-grid:has(> .catalog-card:nth-child(16)) .catalog-card { padding: 22px; }
}
/* Homepage: section intro sat flush on the game card grid. */
p + .catalog-grid { margin-top: 28px; }