/* Overlay CSS fixes for the captured Figma Sites mirror.
 *
 * The capture is laid out with absolute positioning, one DOM section per
 * breakpoint root: [data-width="375"] (mobile), "800" (tablet), "1280"
 * (desktop). A few elements in the mobile section were anchored with values
 * that only center correctly at the original design width, so they drift
 * off-center on real phones. We re-anchor them at left:50% + translateX(-50%),
 * matching how the tablet/desktop sections already center the same elements.
 *
 * Scoped to the mobile breakpoint root AND wrapped in the same @media the
 * runtime uses (max-width:799px) so tablet/desktop layout is never touched.
 * Lives in overlay/ (outside public/) so re-scraping can't delete it.
 */
@media (max-width: 799px) {
  /* "Dieses Projekt wird offiziell gefördert von" — mobile variant was
   * anchored by a fixed right offset (right:179.27px) plus translateX(50%),
   * which assumes the design width. Center it like the other breakpoints. */
  #container [data-width="375"] .css-yqfnlt {
    right: auto;
    left: 50%;
  }
  #container [data-width="375"] .css-yz2sq7 {
    transform: translateX(-50%);
  }

  /* Homepage "Impressum" footer link — mobile variant used
   * left:calc(50% - 76.5px), a hard-coded half-width that no longer centers
   * once the label width changes (e.g. EN/DE toggle) or on a narrow viewport. */
  #container [data-width="375"] .css-k1rc4u {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Research-page "Impressum" footer link — same hard-coded-offset bug as the
   * homepage, but a different generated class (left:calc(50% - 76.5px)). */
  #container [data-width="375"] .css-9t6c5f {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Research-page nav link ("Research" / German "Forschung").
   * The mobile variant is anchored at left:calc(50% - 18.25px) — half the
   * width of the English "Research" — so the wider German "Forschung" sits
   * off-center near the screen edge and, with word-break:break-word on the
   * label, breaks onto two lines ("Forschun" + "g"). Re-center on the box's
   * own width and force the label to stay on one line. */
  #container [data-width="375"] .css-9lcwoy {
    left: 50%;
    /* keep the existing translateY(50%) vertical anchor from .css-t44ynx */
    transform: translate(-50%, 50%);
    width: max-content;
  }
  #container [data-width="375"] .css-9lcwoy .css-b3i0qd {
    word-break: normal;
    white-space: nowrap;
  }

  /* Homepage nav link ("Research" / German "Forschung"). Same wrap, different
   * cause than the research page: here the mobile box has a fixed width:66px
   * (sized for "Research") plus left:calc(50% - 5.5px), so the wider German
   * "Forschung" overflows 66px and, with word-break:break-word on the label,
   * the "g" drops to a second line. Let the box size to its text, re-center,
   * and keep the label on one line. */
  #container [data-width="375"] .css-nhhljz {
    width: max-content;
    left: 50%;
    /* keep the existing translateY(50%) vertical anchor from .css-t44ynx */
    transform: translate(-50%, 50%);
  }
  #container [data-width="375"] .css-nhhljz .css-ddpd8r {
    word-break: normal;
    white-space: nowrap;
  }
}