/* Hebrew / RTL overrides for the Team of Monkeys site.
   Loaded after templatemo-noir-fashion.css and agency.css so it wins on
   cascade order. Only direction, alignment and mirrored spacing are changed
   here. Colours, sizes and layout structure stay exactly as the English site. */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
    font-family: "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", Arial, sans-serif;
}

/* Headings and lead copy read right to left. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] figcaption {
    text-align: right;
}

/* Lists put their markers on the right. */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: 22px;
    padding-left: 0;
}

/* Sections that are centred in the English design stay centred. */
html[dir="rtl"] .section-header,
html[dir="rtl"] .section-header h1,
html[dir="rtl"] .section-header p,
html[dir="rtl"] .cta-band,
html[dir="rtl"] .cta-band h2,
html[dir="rtl"] .cta-band p,
html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .footer-bottom p,
html[dir="rtl"] .about-person,
html[dir="rtl"] .about-figure figcaption {
    text-align: center;
}

/* The logo lockup mirrors so the mark sits on the right of the wordmark. */
html[dir="rtl"] .logo-link {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

/* Numbers, currency and Latin brand names stay left to right inside RTL text. */
html[dir="rtl"] .ltr,
html[dir="rtl"] .stat-number,
html[dir="rtl"] .plan-fee,
html[dir="rtl"] .math-value,
html[dir="rtl"] .seg-label,
html[dir="rtl"] .axis-tick,
html[dir="rtl"] .step-num,
html[dir="rtl"] .payment-icon,
html[dir="rtl"] .social-link,
html[dir="rtl"] .social-links a {
    direction: ltr;
    unicode-bidi: embed;
}

/* The budget graphic is identical to the English page in every respect: the
   legend order, the bar label column, the segment order, the equation line, the
   axis ticks and the table columns all sit exactly where they sit in English.
   The card is set to English orientation and then nothing inside it is touched
   again. No rule below may re-align, re-order or re-direct anything within
   .chart-card. Selectively flipping pieces back is what breaks this graphic, so
   the page-wide RTL text rules are cancelled here in one place instead. */
html[dir="rtl"] .chart-card,
html[dir="rtl"] .chart-card * {
    direction: ltr;
    text-align: left;
}

/* Every box above is positioned by the English layout. These text runs keep
   that positioning, and unicode-bidi lets each sentence render its own Hebrew
   punctuation correctly inside it. This affects glyph order within a line only.
   It moves no box, no column, no bar segment and no axis tick. */
html[dir="rtl"] .chart-card h3,
html[dir="rtl"] .chart-sub,
html[dir="rtl"] .legend-item,
html[dir="rtl"] .bar-label,
html[dir="rtl"] .equation-text,
html[dir="rtl"] .table-view caption,
html[dir="rtl"] .table-view th,
html[dir="rtl"] .table-view td {
    unicode-bidi: plaintext;
}

/* The two numeric table columns keep the English page's own right alignment. */
html[dir="rtl"] .table-view th:not(:first-child),
html[dir="rtl"] .table-view td:not(:first-child) {
    text-align: right;
}

/* The bar label keeps the English page's own right alignment. */
html[dir="rtl"] .bar-label {
    text-align: right;
}

/* Plan feature list: the check mark moves to the right of its own line, and
   the padding that made room for it swaps sides. */
html[dir="rtl"] .plan-list li {
    padding-left: 0;
    padding-right: 24px;
}

html[dir="rtl"] .plan-list li::before {
    left: auto;
    right: 0;
}

/* The worked-example strip inside the plan card takes its accent rule on the
   right edge, matching the direction the text now reads from. */
html[dir="rtl"] .plan-equiv {
    border-left: none;
    border-right: 3px solid #ff3366;
}

/* The cost-split bar graph is a measuring instrument, not text. It renders
   exactly as it does on the English page: every bar grows from the left edge
   and the axis runs 0% on the left to 100% on the right. Only the row labels
   inside it are Hebrew. Nothing about its geometry changes between languages. */
html[dir="rtl"] .split-graph,
html[dir="rtl"] .split-graph * {
    direction: ltr;
}

/* The row labels are Hebrew words, so they read right to left inside their own
   cell. This changes glyph order within the label only, never the bars, the
   axis or the column the label sits in. */
html[dir="rtl"] .sg-label {
    direction: rtl;
    text-align: right;
}

/* Blockquote-style callout takes its accent rule on the right edge. */
html[dir="rtl"] .about-callout {
    border-left: none;
    border-right: 3px solid #ff3366;
    padding-left: 0;
    padding-right: 22px;
}

/* Language switcher in the navigation. */
.lang-switch {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 40px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    -webkit-transition: border-color 0.25s ease, color 0.25s ease;
    transition: border-color 0.25s ease, color 0.25s ease;
    direction: ltr;
    unicode-bidi: embed;
}

.lang-switch:hover,
.lang-switch:focus {
    border-color: #ff3366;
    color: #ff3366;
}