/*
 * Right-to-left overrides.
 *
 * Loaded only when the resolved language is RTL (see mishnah_enqueue_rtl_style
 * in inc/mishnah-i18n-rtl.php).
 *
 * The plugin's own stylesheets use logical properties, so they mirror on their
 * own and need nothing here. This file covers what cannot mirror by itself:
 * third-party widget CSS written with physical properties, and a handful of
 * places where the markup order itself assumes left-to-right.
 */

/* --------------------------------------------------------------------------
 * Base
 * -------------------------------------------------------------------------- */

/*
 * Only direction is set, never text-align.
 *
 * text-align defaults to `start`, which already resolves against direction - so
 * setting direction alone right-aligns anything nobody has aligned by hand, and
 * leaves anything deliberately centred exactly where the designer put it.
 * Writing `text-align: start` here as well looks harmless but overrides that
 * intent: every centred heading inside these blocks snapped to the right edge.
 */
/*
 * .chart-seder and .mishnah-dashboard-panel used to be listed here too. Both
 * belonged to markup the rebuilt templates no longer emit.
 */
.mishnah-rtl .masechtas {
  direction: rtl;
}

/* Chapter tiles read right to left, like the text they number */
.mishnah-rtl .pereks {
  direction: rtl;
}

/* --------------------------------------------------------------------------
 * Third-party widgets
 * -------------------------------------------------------------------------- */

/* SlimSelect: arrow and padding are positioned physically in its own CSS */
.mishnah-rtl .ss-main,
.mishnah-rtl .ss-content {
  direction: rtl;
}

.mishnah-rtl .ss-main .ss-arrow {
  margin-left: 0;
  margin-right: auto;
}

.mishnah-rtl .ss-values .ss-value {
  margin-left: 5px;
  margin-right: 0;
}

/*
 * The date picker needs nothing here. Luach Picker sets dir="rtl" on its own
 * root from `direction: "auto"` plus the hebrewLocale it is given, so it
 * mirrors itself. The block that used to sit here mirrored the old picker's
 * chrome by hand.
 */

/* intl-tel-input: flag dropdown sits on the opposite side */
.mishnah-rtl .iti {
  direction: rtl;
}

.mishnah-rtl .iti__flag-container {
  left: auto;
  right: 0;
}

/* The flag sits on the right in RTL, so the padding swaps. The number itself
   stays left-to-right - a phone number reads the same way in every language. */
.mishnah-rtl .iti input,
.mishnah-rtl .iti input[type="tel"] {
  padding-left: 6px;
  padding-right: 52px;
  direction: ltr;
  text-align: right;
}

/* balloon.css tooltips */
.mishnah-rtl [data-balloon]::after {
  direction: rtl;
}

/* --------------------------------------------------------------------------
 * Centred text stays centred
 *
 * Mirroring the page should move text that was aligned to a side, and leave
 * text that was aligned to the middle alone - centring is a deliberate design
 * choice, not a left-to-right assumption.
 *
 * No rule above sets text-align except the phone input, where it is deliberate,
 * so the common case is already handled. These cover the ways the theme, Bricks
 * and the block editor mark something as centred, in case a rule elsewhere ever
 * reaches it.
 * -------------------------------------------------------------------------- */

.mishnah-rtl [style*="text-align: center"],
.mishnah-rtl [style*="text-align:center"],
.mishnah-rtl .has-text-align-center,
.mishnah-rtl .text-center,
.mishnah-rtl .align-center,
.mishnah-rtl .mishnah-subtitle.hebrew {
  text-align: center;
}

/* --------------------------------------------------------------------------
 * Directional glyphs
 *
 * Arrows in content are drawn characters, not layout, so they do not mirror
 * on their own.
 * -------------------------------------------------------------------------- */

/*
 * The back chevron is a rotated box, not a character, so it needs turning
 * rather than mirroring.
 *
 * The theme draws it as a 12px square with only its top and right borders set -
 * a corner - and points that corner left with transform: rotate(-135deg).
 *
 * This rule used to say transform: scaleX(-1), which was the whole problem.
 * transform is a single property, so that REPLACED the rotation instead of
 * adding to it: the box lost its turn altogether and the arrow rendered as an
 * unrotated corner sitting next to the text.
 *
 * Rotating is the fix, and the angle is not arbitrary. The corner points
 * up-right at rest; -135deg carries it round to pointing left, and +45deg
 * carries it to pointing right, which is what "back" means on a mirrored page.
 *
 * The gap moves too. The theme puts 5px on the right of the arrow, which is
 * between it and the label in a left-to-right layout; mirrored, the label is on
 * the other side, so the gap has to be as well.
 */
.mishnah-rtl div.mishnah-back-arrow__arrow {
  transform: rotate(45deg);
  margin-right: 0;
  margin-left: 5px;
}

/*
 * The .next-mishnah-button arrows were mirrored here. The button is gone, and
 * its replacement mirrors its own chevrons in css/mishnah-learn-nav.css, next
 * to the note explaining why scaleX(-1) is safe on those and not on the back
 * arrow above.
 */

/* --------------------------------------------------------------------------
 * Opting out
 *
 * Some things are left-to-right no matter what language surrounds them: English
 * quotations, code, phone numbers, URLs, logos, and any layout that was built
 * around a specific visual order.
 *
 * Add .nortl to such an element. It restores left-to-right for that element and
 * everything inside it.
 *
 *     <div class="nortl"> ... </div>
 *
 * Use .nortl-self instead when only the element itself should stay LTR while
 * its children follow the page, which is rare but occasionally what a wrapper
 * needs.
 *
 * .nortl wins over the RTL rules above through specificity: two classes beat
 * the single .mishnah-rtl class, and !important covers the cases where a theme
 * or third-party stylesheet has its own opinion.
 * -------------------------------------------------------------------------- */

/* Direction only, for the same reason as above - resetting text-align here
   would drag every centred heading inside the block back to the left edge. */
.mishnah-rtl .nortl,
.mishnah-rtl .nortl * {
  direction: ltr !important;
}

.mishnah-rtl .nortl-self {
  direction: ltr !important;
}

/* Flex and grid children lay out in writing order, so a row inside an RTL page
   reverses even when its direction is restored. Put the order back too. */
.mishnah-rtl .nortl.mishnah-row,
.mishnah-rtl .nortl .mishnah-row {
  flex-direction: row;
}

/* Numbers, code and identifiers read left-to-right in every language. Marking
   them up this way is more precise than .nortl on a whole block. */
.mishnah-rtl code,
.mishnah-rtl kbd,
.mishnah-rtl samp,
.mishnah-rtl pre,
.mishnah-rtl .ltr-text,
.mishnah-rtl a[href^="tel:"],
.mishnah-rtl a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: embed;
}