/* Language switcher and right-to-left overrides.
   A NEW file rather than edits to the six existing stylesheets: those are
   cached for a week under ?v=6, and a visitor holding that cache would render
   an Arabic page with the left-hand padding baked into base.css and pricing.css.
   A fresh URL cannot be served stale, so no ?v= bump is needed anywhere, and
   the nine English compare pages stay byte-identical for the running
   lead experiment. */

.lang-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin: 1.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  max-width: min(48rem, 100%);
  font-size: 0.85rem;
}

.lang-switcher a {
  color: var(--text-light);
  text-decoration: none;
}

.lang-switcher a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.lang-switcher [aria-current] {
  color: var(--text);
  font-weight: 600;
}

/* --- Long words ------------------------------------------------------- */
/* German compounds are single unbreakable tokens: "Datenschutzerklaerung",
   "Nutzungsbedingungen" and "KI-Lebensmittelerkennung" are each wider than the
   256px content box of a 320px viewport, so they escape their container and
   scroll the whole page. Fourteen pages broke the responsive invariant this
   way and English broke none, because English words are short enough to fit.
   break-word only acts when a word genuinely cannot fit, so it changes nothing
   on a page whose words already do. `hyphens: auto` is deliberately NOT set:
   it would re-hyphenate English body copy for no benefit. */
h1, h2, h3, h4, h5, h6,
p, li, td, th, dt, dd, summary, figcaption, blockquote {
  overflow-wrap: break-word;
}

/* The "Best Value" badge is positioned from its TOP edge, so a longer
   translation grows downward and buries the plan name underneath it. English
   is 10 characters; German is "Bestes Preis-Leistungs-Verhaeltnis" at 33 and
   wraps to three lines, covering the <h3>. Anchoring the bottom edge instead
   makes it grow upward, away from the card's content, at any length. The
   -14px keeps the original 14px overlap of the card's top border. */
.popular-badge {
  top: auto;
  bottom: 100%;
  margin-bottom: -14px;
  max-width: calc(100% - 2rem);
  text-align: center;
}

/* The pricing grid's CTA. One badge pair under the whole grid, not a button in
   every card: all four cards linked to the same two store URLs, so eight
   buttons implied a per-tier checkout that does not exist. The plan is chosen
   in the app. */
.pricing-badges {
  margin-top: 2.5rem;
}

.pricing-note {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-light);
}

/* Cards no longer end in a button, so their feature lists need the bottom
   padding the button used to provide. */
.pricing-card ul:last-child {
  margin-bottom: 0.5rem;
}

/* --- Right to left ---------------------------------------------------- */
/* Mirrors every physical offset in the six base stylesheets. Each rule here
   pairs with the exact line it overrides, so a change there needs a change
   here; the pairs are listed in website/CLAUDE.md. */

[dir="rtl"] .content ul,
[dir="rtl"] .content ol {          /* base.css .content ul,ol */
  padding-left: 0;
  padding-right: 1.5rem;
}

[dir="rtl"] nav a {                /* layout.css nav a */
  margin-left: 0;
  margin-right: 2rem;
}

[dir="rtl"] .breadcrumb li + li::before {   /* layout.css breadcrumb separator */
  content: "<";
  margin-right: 0;
  margin-left: 0.25rem;
}

[dir="rtl"] .footer-col {          /* layout.css .footer-col */
  text-align: right;
}

[dir="rtl"] details summary::after {        /* marketing.css summary marker */
  margin-left: 0;
  margin-right: 1rem;
}

[dir="rtl"] .comparison-table th,
[dir="rtl"] .comparison-table td {          /* marketing.css comparison table */
  text-align: right;
}

[dir="rtl"] .pricing-card ul {     /* pricing.css .pricing-card ul */
  text-align: right;
}

[dir="rtl"] .pricing-card li {     /* pricing.css .pricing-card li */
  padding-left: 0;
  padding-right: 1.5rem;
}

[dir="rtl"] .pricing-card li::before {      /* pricing.css tick bullet */
  left: auto;
  right: 0;
}

@media (max-width: 768px) {
  [dir="rtl"] nav a {              /* layout.css 768px nav a */
    margin-right: 0;
    margin-left: 1.5rem;
  }
}