/*
 * Surgery template - RTL overlay
 *
 * Loaded only when is_rtl() is true (Arabic). Surgery's CSS is desktop LTR-only;
 * this file flips the interactions and rebalances the layout primitives we use.
 *
 * Order matters: this file MUST load AFTER all other surgery CSS so the rules
 * here win. The layout pushes it last via @stack('styles').
 */

html[dir="rtl"] body,
body.lang-ar,
.stj-template[dir="rtl"] {
    text-align: right;
    font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
}

/* ---------- Top banner / utility menu / main menu ---------- */
html[dir="rtl"] .menu--top-banner-menu .menu,
html[dir="rtl"] .menu--utility-menu .menu,
html[dir="rtl"] .menu--main .menu,
html[dir="rtl"] .menu--footer .menu {
    flex-direction: row-reverse;
}

html[dir="rtl"] .universal-header {
    flex-direction: row-reverse;
}

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

html[dir="rtl"] .main-menu__nav-sub-nav {
    left: auto;
    right: 0;
}

html[dir="rtl"] .main-menu__item-list--level-0 > li > .nav-button::after {
    margin-left: 0;
    margin-right: .5rem;
    transform: scaleX(-1);
}

/* ---------- Mobile menu ---------- */
html[dir="rtl"] .mobile-header-button-bar {
    flex-direction: row-reverse;
}

html[dir="rtl"] .mobile-menu-items {
    text-align: right;
}

html[dir="rtl"] .mobile-menu-items .menu-level-1,
html[dir="rtl"] .mobile-menu-items .menu-level-2 {
    padding-right: 1rem;
    padding-left: 0;
}

html[dir="rtl"] .mobile-menu-items .nav-button {
    flex-direction: row-reverse;
}

/* Drupal's chevron carets - flip them for RTL */
html[dir="rtl"] .nav-button::after,
html[dir="rtl"] .has-children > .nav-button::after,
html[dir="rtl"] .dropdown-button::after {
    transform: scaleX(-1);
}

/* ---------- Photo CTAs and grids ---------- */
html[dir="rtl"] .paragraph--type--photo-cta-row {
    direction: rtl;
}

html[dir="rtl"] .paragraph--type--photo-cta {
    text-align: right;
}

html[dir="rtl"] .paragraph--type--photo-cta .link-arrow {
    flex-direction: row-reverse;
}

html[dir="rtl"] .paragraph--type--photo-cta .link-arrow::after {
    margin-left: 0;
    margin-right: .5rem;
    transform: scaleX(-1);
}

/* ---------- Linked-icon row (quick actions / achievements) ---------- */
html[dir="rtl"] .paragraph--type--linked-icon-container .field--name-field-linked-icons {
    direction: rtl;
}

html[dir="rtl"] .paragraph--type--linked-icon {
    text-align: center; /* icons are centered regardless */
}

/* ---------- Text blocks ---------- */
html[dir="rtl"] .paragraph--type--text-block {
    text-align: right;
}

html[dir="rtl"] .paragraph--type--text-block ul,
html[dir="rtl"] .paragraph--type--text-block ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* ---------- News teaser cards ---------- */
html[dir="rtl"] .views-row .node--type-news.has-image {
    flex-direction: row-reverse;
}

html[dir="rtl"] .views-row .node--type-news .field--name-field-image {
    margin-left: 1rem;
    margin-right: 0;
}

html[dir="rtl"] .views-row .node--type-news .text-container {
    text-align: right;
}

html[dir="rtl"] .news-main-link {
    text-align: right;
    display: block;
}

/* ---------- Forms ---------- */
html[dir="rtl"] .form-item__label,
html[dir="rtl"] label,
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .surgery-form .form-item {
    text-align: right;
}

/* ---------- Pagination ---------- */
html[dir="rtl"] .pager__items {
    flex-direction: row-reverse;
}

html[dir="rtl"] .pager__item--previous .btn,
html[dir="rtl"] .pager__item--next .btn {
    transform: scaleX(-1);
}

html[dir="rtl"] .pager__item--previous .btn span,
html[dir="rtl"] .pager__item--next .btn span {
    transform: scaleX(-1);
    display: inline-block;
}

/* ---------- Footer ---------- */
html[dir="rtl"] .footer__inner {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .footer__contact,
html[dir="rtl"] .footer__social {
    text-align: right;
}

html[dir="rtl"] .footer__below {
    flex-direction: row-reverse;
}

/* ---------- Carousel slick arrows ---------- */
html[dir="rtl"] .slick-prev,
html[dir="rtl"] .slick-next {
    transform: scaleX(-1);
}

html[dir="rtl"] .slick-prev {
    left: auto;
    right: 25px;
}

html[dir="rtl"] .slick-next {
    right: auto;
    left: 25px;
}

/* ---------- FontAwesome icons that have direction (left/right arrows etc.) ---------- */
html[dir="rtl"] i.fa-arrow-right,
html[dir="rtl"] i.fa-chevron-right,
html[dir="rtl"] i.fa-angle-right,
html[dir="rtl"] i.fa-caret-right {
    transform: scaleX(-1);
    display: inline-block;
}

/* ---------- Generic flex rows we used in inline styles ---------- */
html[dir="rtl"] .news-filter-bar {
    flex-direction: row-reverse;
}

/* ============================================================
   Signature creative touches - RTL adjustments
   ============================================================ */

/* "EST. 1954 · EAST JERUSALEM" ribbon: physical right becomes
   physical left in RTL so it doesn't overlap the logo medallion. */
html[dir="rtl"] body.stj-template .region-hero::after {
    right: auto;
    left: 1.25rem;
    /* Translate Arabic-ready label */
    content: 'تأسس ١٩٥٤  ·  القدس الشرقية';
    letter-spacing: 0;
    font-family: 'Tajawal', 'Cairo', sans-serif;
    font-weight: 700;
}

/* Hero caption gold underline: anchor to the right edge in RTL */
html[dir="rtl"] body.stj-template .stj-hero-caption-fixed .stj-hero-caption__title::after {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, #C9A961, transparent);
}

/* Section H2 heading: gold rule appears AFTER the text in RTL (visually on the right) */
html[dir="rtl"] body.stj-template .region-content .field--name-field-title h2::before {
    margin-right: 0;
    margin-left: 1rem;
}
html[dir="rtl"] body.stj-template .region-content .field--name-field-title h2::after {
    margin-left: 0;
    margin-right: 1rem;
}

/* Action card row: icon stays beside text, but card reads RTL.
   Reverse the flex direction inside the link wrapper so the icon
   appears on the right (the leading edge in Arabic reading order)
   and shift the gold accent border from left to right. */
html[dir="rtl"] body.stj-template .region-content .item-1 .paragraph--type--linked-icon {
    border-left: 1px solid #ece4d3;
    border-right: 4px solid #C9A961;
    text-align: right !important;
}
html[dir="rtl"] body.stj-template .region-content .item-1 .paragraph--type--linked-icon a.link-wrapper {
    flex-direction: row-reverse;
}
html[dir="rtl"] body.stj-template .region-content .item-1 .paragraph--type--linked-icon:hover {
    border-left-color: #ece4d3 !important;
    border-right-color: #1B3A5C !important;
}

/* Achievement numerals: gold rule under numbers right-aligns in RTL */
html[dir="rtl"] body.stj-template .region-content .item-2 .paragraph--type--linked-icon {
    text-align: right;
}

/* Mission quote marks: swap LTR positions so opening quote is
   bottom-right (RTL reading start) and closing quote is top-left. */
html[dir="rtl"] body.stj-template .stj-mission-quote::before {
    left: auto;
    right: 8%;
}
html[dir="rtl"] body.stj-template .stj-mission-quote::after {
    right: auto;
    left: 8%;
}