/* The header on phones, from index-DcU4Xu6q.sections64.joinhdr.js on
 * (2026-09-24): its dark CTA is "Join today." (to #pricing, like the hero's)
 * instead of "Try out for free." (to the Discord invite), and the row has to
 * stay on one line in en, de and fr.
 *
 * A patch stylesheet, added rather than edited into mobile-sections.v6.css,
 * because *.css here is served max-age=604800. Loaded after it and after the
 * brand files, so its !important rules win on order at equal specificity.
 *
 * 1. mobile-sections.v6.css found the CTA by its discord.gg href (the one
 *    WITHOUT an aria-label; the icon button has one). The CTA no longer links
 *    there, so those two rules stopped matching; they are carried over here on
 *    the class the bundle now gives it, jpa-hdr-join.
 * 2. Nothing in the right-hand group wraps. "Sign in" used to break onto two
 *    lines on a 360px phone: the row was 2px short, and a flex item that is
 *    allowed to wrap is the one that gives.
 * 3. The fit. The row is what the header leaves after its gutters, the 8px
 *    gap and the wordmark; it has to hold Sign in + CTA + globe, which at 13px
 *    is 198px in en, 244px in de and 255px in fr. Below 440px the gutters go
 *    from 20 to 16px, the wordmark from 28 to 24px (the desktop size), Sign
 *    in's and the globe's own padding tighten; de and fr, whose labels are
 *    ~30% longer, also set the two labels at 12px; below 375px the wordmark
 *    is 22px; below 340px de and fr take one more step. Measured in all
 *    three languages at 320-414px. */
@media (max-width: 639px) {
  header a.jpa-hdr-join {
    font-size: 13px !important;
    padding-left: .6rem !important;
    padding-right: .6rem !important;
  }
  header .ml-auto > a { white-space: nowrap; }
}

@media (max-width: 439px) {
  header.sticky > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  header a[aria-label="Agoras home"] .jp-logo {
    height: 24px !important;
    max-width: 104px !important;
  }
  header .ml-auto > a[href="/login"] {
    padding-left: 8px;
    padding-right: 8px;
  }
  header .ml-auto > :last-child > button {
    padding-left: 6px;
    padding-right: 6px;
  }
  html:not([lang="en"]) header .ml-auto > a[href="/login"],
  html:not([lang="en"]) header a.jpa-hdr-join {
    font-size: 12px !important;
  }
  html:not([lang="en"]) header a.jpa-hdr-join {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
}

@media (max-width: 374px) {
  header a[aria-label="Agoras home"] .jp-logo {
    height: 22px !important;
    max-width: 96px !important;
  }
}

/* The smallest phones (320px) in de and fr: still ~25px short after all of
   the above, so the gutters, the wordmark and the paddings take one more
   step. en fits at 320 without it. */
@media (max-width: 339px) {
  html:not([lang="en"]) header.sticky > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
    column-gap: 6px;
  }
  html:not([lang="en"]) header a[aria-label="Agoras home"] .jp-logo {
    height: 18px !important;
    max-width: 80px !important;
  }
  html:not([lang="en"]) header .ml-auto > a[href="/login"] {
    padding-left: 6px;
    padding-right: 6px;
  }
  html:not([lang="en"]) header .ml-auto > :last-child > button {
    padding-left: 4px;
    padding-right: 4px;
  }
}