/* RTL overrides for Arabic (spec section 1). Loaded only when is_rtl is
   true (base.html adds this stylesheet + dir="rtl" on <html>/<body>).
   Pattern ported from mpn-universe-website's body[dir="rtl"] { ... }
   attribute-selector approach -- every override below is scoped the same
   way, not a single global flip, so LTR pages stay completely untouched.

   Covers text alignment, nav layout, and form field order (spec section 1:
   "niet alleen tekstrichting, ook uitlijning van formulieren, kalender en
   navigatie spiegelen"). The browser's native <input type="date/time">
   picker widget itself is platform-rendered and not stylable by us -- its
   internal layout follows the OS/browser locale, not this stylesheet; the
   *field* it sits in (label position, width, alignment) is what we mirror
   here. */

body[dir="rtl"] {
  text-align: right;
}

/* Nav: the language switcher is float:right in LTR (base.css) to sit at
   the end of the reading direction -- in RTL "the end" is the left. */
body[dir="rtl"] .lang-switcher {
  float: left;
}
body[dir="rtl"] .lang-switcher a {
  margin-left: 0;
  margin-right: 0.4rem;
}

/* Nav links + breadcrumb-style "&middot;"-separated lists read start-to-end
   just like text, so text-align: right on body already mirrors them; only
   explicit left/right margins/floats elsewhere need manual overrides. */

/* Forms: labels and inputs stay full-width block elements already (no
   float to flip), but form-adjacent controls that sit inline (buttons
   following a hidden-field form, table action groups) need explicit
   mirroring since they rely on source order reading LTR by default. */
body[dir="rtl"] form {
  text-align: right;
}
body[dir="rtl"] form label {
  text-align: right;
}
body[dir="rtl"] table th,
body[dir="rtl"] table td {
  text-align: right;
}

/* Staff dashboards keep their action buttons (Bevestigen/Annuleren/...)
   left-to-right internally since that UI is NL-only -- no override needed
   there; RTL only ever applies to the public-facing 'ar' pages. */

/* Evenementenlijst: text column left / photo column right (base.css grid)
   mirrors to photo-left / text-right. */
body[dir="rtl"] .event-item {
  grid-template-columns: 22rem 1fr;
}
body[dir="rtl"] .event-foto-col {
  order: -1;
}