/* ------------------------------------------------------------------
   Right-to-left layer for the Hebrew site.

   Loaded after site.css and custom.css. It only mirrors the directional
   declarations in those files — floats, text alignment, one-sided margins
   and padding, and absolutely positioned decorations — so that site.css
   stays a clean vendored copy of the original stylesheet.

   Full-bleed positioning tricks (figure.video iframe, .bg-video) are
   deliberately left alone: their `left` is a centring/stretch device, not
   a reading-order one, and flipping them would break the embed.
   ------------------------------------------------------------------ */

/* No font-family here. This file used to set a Hebrew-capable stack on
   body/input/textarea/select/button, because site.css asked for a Latin-only
   face and Hebrew had to fall through to whatever the system provided. Heebo
   covers both scripts now, so custom.css sets the typeface and this file stays
   about direction.

   Worth keeping in mind when adding rules: this stylesheet loads last, so any
   property it repeats from custom.css wins silently at equal specificity. */

/* Hebrew has no capitals; uppercasing only stretches the tracking out. */
#footer nav span {
    text-transform: none;
}

/* ---------------------------------------------------------- page frame */

main.blog {
    float: right;
}

#sidebar {
    float: left;
    padding: 5rem 2rem 5rem 5rem;
}

#footer nav {
    float: right;
    margin: 0 0 2rem 1rem;
}

#footer aside {
    float: left;
}

#copyright {
    text-align: left;
}

/* ------------------------------------------------------------- header */

#logo {
    margin-right: 0;
    margin-left: 2rem;
}

#menuOpener {
    left: auto;
    right: 0;
}

#menu-service {
    float: left;
}

#menu-service a.login {
    margin-left: 0;
    margin-right: 1rem;
}

#menu ul ul li {
    text-align: right;
}

/* The category dropdown's arrow sits inside the item, so it swaps sides. */
#top:not(.opened) #menu li.blog {
    background-position: 10% center;
}

#top:not(.opened) #menu li.blog a {
    padding-right: 0;
    padding-left: 1.6rem;
}

/* The category fly-out is a sibling of the menu rather than a child of the
   Blog item, so nothing in CSS knows where the item is — site.js sets the
   offset, and it anchors the right edge when the document is RTL. */

/* -------------------------------------------------------- search field */

/* The magnifier marks the far end of the field, away from where typing
   starts, and the padding that keeps text off it moves with it. */
input.search {
    padding-right: 0;
    padding-left: 1.3rem;
    background-position: left center;
}

/* In the header the padding is symmetric, so only the icon swaps sides. */
#header input.search {
    background-position: 5% center;
}

/* ------------------------------------------------------------ content */

.align-left section.container {
    text-align: right;
}

.container ul,
.container ol {
    padding-left: 0;
    padding-right: 40px;
}

.postdata span {
    margin-right: 0;
    margin-left: 1rem;
}

.tags li {
    float: right;
    margin: 0 0 0.6rem 0.6rem;
}

#pagination li {
    float: right;
    margin-right: 0;
    margin-left: 0.5rem;
}

[class^="column-"],
.fullwidth {
    float: right;
}

/* Two-up post grid: the gutter belongs on the inner edge of each column. */
article.bottom:nth-child(2n+1) {
    padding-right: 0;
    padding-left: 1.5rem;
}

article.bottom:nth-child(2n) {
    padding-left: 0;
    padding-right: 1.5rem;
}

article.top ~ article.bottom:nth-child(2n+1) {
    padding-left: 0;
    padding-right: 1.5rem;
}

article.top ~ article.bottom:nth-child(2n) {
    padding-right: 0;
    padding-left: 1.5rem;
}

/* --------------------------------------------------- promo panel */

.bottompic .container {
    padding: 8rem 12rem 8rem 32rem;
    text-align: right;
}

.bottompic .container img {
    right: auto;
    left: 5rem;
}

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

#social .ssb-copied {
    left: auto;
    right: 0;
}

/* --------------------------------------------------- breakpoints */

@media screen and (max-width: 800px) {
    /* site.css clears the footer columns' right margin at this width; the
       mirrored margin has to be cleared too or the columns stay indented. */
    #footer nav,
    #footer aside {
        margin-left: 0;
    }
}

@media screen and (max-width: 1000px) {
    #sidebar {
        padding: 5rem;
    }
}

@media screen and (max-width: 700px) {
    #sidebar {
        padding: 3rem;
    }

    .bottompic .container {
        padding: 6rem 5rem;
        text-align: center;
    }
}