/*
 * Right-to-left overrides, loaded on the Hebrew and Yiddish pages.
 *
 * Both are written in Hebrew script and read right to left. Setting
 * dir="rtl" on <html> handles text flow and most of flexbox on its own; what
 * it does not handle is anything anchored with an explicit left or right, an
 * asymmetric border, or a transform. Those are the rules below.
 *
 * Numbers, the Latin-script brand names (ShopRite, DeCicco's) and street
 * addresses stay left to right inside the RTL page, which is correct and is
 * what the unicode-bidi isolation at the bottom is for. An address rendered
 * right to left is an address nobody can type into a satnav.
 *
 * Loaded by inc/assets.php only when zadies_is_rtl_lang() is true, so the
 * four left-to-right languages never download it. Every rule is keyed on
 * [dir="rtl"] rather than on a language, so it covers both without knowing
 * which one it is looking at.
 */

/* --- typography ------------------------------------------------------- */

/*
 * Hebrew script has no case, so the uppercase-and-track treatment used on the
 * English kickers does nothing but stretch the letters apart. Turn it off and
 * lean on weight instead.
 */
[dir="rtl"] .kick,
[dir="rtl"] .awards .lbl,
[dir="rtl"] .press .lbl,
[dir="rtl"] table.hrs caption,
[dir="rtl"] .crmtable th,
[dir="rtl"] .footbase,
[dir="rtl"] .bar {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
}

/* Hebrew script sits lower and needs a little more room between lines. */
[dir="rtl"] body {
	line-height: 1.72;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
	line-height: 1.3;
	letter-spacing: 0;
}

/* --- header and navigation -------------------------------------------- */

[dir="rtl"] .skip:focus {
	left: auto;
	right: 1rem;
}

[dir="rtl"] .logo {
	margin-right: 0;
	margin-left: auto;
}

[dir="rtl"] .dotgreen {
	margin-right: 0;
	margin-left: .5rem;
}

/* The chevron on the mobile menu rows points the way the reader travels. */
[dir="rtl"] .mobnav a svg {
	transform: scaleX( -1 );
}

/* --- buttons ----------------------------------------------------------- */

[dir="rtl"] .btn svg,
[dir="rtl"] .loc a.maplink svg {
	transform: scaleX( -1 );
}

[dir="rtl"] .btn:hover svg,
[dir="rtl"] .loc a.maplink:hover svg {
	transform: scaleX( -1 ) translateX( 3px );
}

/* --- hero and slider ---------------------------------------------------- */

[dir="rtl"] .hero .glow {
	right: auto;
	left: -10%;
}

[dir="rtl"] .slarrow.prev {
	left: auto;
	right: 1.2rem;
	transform: scaleX( -1 );
}

[dir="rtl"] .slarrow.next {
	right: auto;
	left: 1.2rem;
	transform: scaleX( -1 );
}

/* --- cards and panels --------------------------------------------------- */

[dir="rtl"] .qcard::before {
	left: auto;
	right: 0;
}

[dir="rtl"] .callout,
[dir="rtl"] .rc-note,
[dir="rtl"] .aquote {
	border-left: 0;
	border-right: 4px solid var( --brand );
}

[dir="rtl"] .aquote {
	left: auto;
	right: -26px;
}

[dir="rtl"] .warn::after {
	right: auto;
	left: -30px;
}

[dir="rtl"] .reel .play {
	right: auto;
	left: .65rem;
}

[dir="rtl"] .reel .views {
	left: auto;
	right: .65rem;
}

[dir="rtl"] .rev .qm {
	right: auto;
	left: 1rem;
	transform: scaleX( -1 );
}

[dir="rtl"] .gwrap::before {
	left: auto;
	right: -8%;
}

[dir="rtl"] .gwrap::after {
	right: auto;
	left: -8%;
}

/* --- FAQ accordion ------------------------------------------------------ */

[dir="rtl"] .qa summary {
	transition: padding-right .3s var( --ease ), color .25s;
}

[dir="rtl"] .qa summary:hover {
	padding-left: 0;
	padding-right: 1.5rem;
}

[dir="rtl"] .qa summary::after {
	right: auto;
	left: 1rem;
}

/* --- tables ------------------------------------------------------------- */

[dir="rtl"] table.hrs caption,
[dir="rtl"] table.hrs th,
[dir="rtl"] table.hrs td,
[dir="rtl"] .crmtable th {
	text-align: right;
}

[dir="rtl"] table.hrs td {
	text-align: left;
}

[dir="rtl"] .rc-top .ref {
	text-align: left;
}

/* --- search fields ------------------------------------------------------ */

[dir="rtl"] .galsearch svg {
	left: auto;
	right: .9rem;
}

[dir="rtl"] .galsearch input {
	padding-left: 1rem;
	padding-right: 3.1rem;
}

[dir="rtl"] .loc a.maplink {
	padding-right: 0;
	padding-left: .4rem;
}

/* --- action bar --------------------------------------------------------- */

[dir="rtl"] .actionbar a + a {
	border-left: 0;
	border-right: 1px solid rgba( 255, 255, 255, .16 );
}

/*
 * Latin-script and numeric content inside an RTL page.
 *
 * Street addresses, phone numbers, retailer names and the two certification
 * marks are all Latin script or digits. Without isolation the bidi algorithm
 * reorders their punctuation - "2150 Promenade Blvd, Building 2" can come out
 * with the comma and the "2" on the wrong side. This pins them.
 */
[dir="rtl"] .addr .big,
[dir="rtl"] .maplinks,
[dir="rtl"] .loc ul li,
[dir="rtl"] .loc h3,
[dir="rtl"] .logocell b,
[dir="rtl"] .press b,
[dir="rtl"] .gcard b,
[dir="rtl"] .galsec h2,
[dir="rtl"] .kosher span,
[dir="rtl"] table.hrs td,
[dir="rtl"] .reel .who {
	direction: ltr;
	unicode-bidi: isolate;
	text-align: right;
}

[dir="rtl"] .loc ul li,
[dir="rtl"] .addr .big {
	text-align: right;
}