/* ═══════════════════════════════════════════════════════════════════════════ DocuCore Theme + Plugin — Complete RTL Stylesheet v3.3 ═══════════════════════════════════════════════════════════════════════════ IMPORTANT ARCHITECTURE NOTE: When dir="rtl" is set on , flex containers with flex-direction:row AUTOMATICALLY reverse their item order (right-to-left). Therefore we must NOT add flex-direction:row-reverse — that would double-reverse items back to LTR, which is the opposite of what we want. What we DO need to fix: • margin-left/right (physical, not auto-swapped by dir) • padding-left/right (physical, not auto-swapped by dir) • left/right positioning (physical, not auto-swapped by dir) • border-left/right (physical, not auto-swapped by dir) • text-align (unless using start/end) • directional icons/arrows (scaleX(-1)) • animation slide directions ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0. GLOBAL RTL FOUNDATION ─────────────────────────────────────────── */ html[dir="rtl"], body.rtl { direction: rtl; text-align: right; } body.rtl { font-family: var(--font-body), 'Noto Sans Arabic', 'Tahoma', sans-serif; } /* ── 0a. SKIP LINK ────────────────────────────────────────────────────── */ body.rtl .skip-link, [dir="rtl"] .skip-link { left: auto; right: var(--sp-4); } /* ═══════════════════════════════════════════════════════════════════════════ 1. SITE HEADER dir="rtl" already reverses the flex row: brand appears right, toggle left. We only need to swap physical margins. ═══════════════════════════════════════════════════════════════════════════ */ body.rtl .site-header__nav { margin-left: 0; margin-right: var(--sp-4); } body.rtl .site-header__search { margin-left: 0; margin-right: auto; } body.rtl .site-header__mobile-toggle { margin-left: 0; margin-right: var(--sp-3); } /* Header search input */ body.rtl .site-header__search-input { text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ 2. MOBILE DRAWER — slides from LEFT in RTL ═══════════════════════════════════════════════════════════════════════════ */ body.rtl .mobile-nav__drawer { right: auto; left: 0; animation-name: dpt-slideInLeft; } @keyframes dpt-slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Mobile drawer links */ body.rtl .mobile-nav__links a, body.rtl .mobile-nav__links li > a { text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ 3. HOMEPAGE HERO ═══════════════════════════════════════════════════════════════════════════ */ /* Eyebrow: swap decorative line from before to after */ body.rtl .dp-hero__eyebrow::before { display: none; } body.rtl .dp-hero__eyebrow::after { content: ''; display: block; width: 24px; height: 1px; background: var(--gold-400); } body.rtl .dp-hero__content { text-align: right; } body.rtl .dp-hero__title, body.rtl .dp-hero__subtitle { text-align: right; } body.rtl .dp-hero__search-input { text-align: right; } /* Stats: keep natural RTL flow, no flex-direction override */ /* Hero grid: dir="rtl" already mirrors the 2-column grid */ /* ═══════════════════════════════════════════════════════════════════════════ 4. HOMEPAGE SECTIONS ═══════════════════════════════════════════════════════════════════════════ */ /* ── Category strip chips ── */ body.rtl .dp-cat-strip__heading { text-align: right; } /* ── Categories grid ── */ body.rtl .dp-cat-card__name { text-align: right; font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } body.rtl .dp-categories-grid__title { font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } /* ── Section header ── */ /* flex auto-reverses in RTL — no override needed */ /* ── Document carousel ── */ /* Arrow positions: swap left↔right physically */ body.rtl .dp-carousel__prev { left: auto; right: -16px; } body.rtl .dp-carousel__next { right: auto; left: -16px; } /* Flip arrow glyphs so they point the right direction */ body.rtl .dp-carousel__prev, body.rtl .dp-carousel__next { transform: scaleX(-1); } body.rtl .dp-carousel__track { direction: rtl; } /* Carousel card text */ body.rtl .dp-ccard__body { text-align: right; } body.rtl .dp-ccard__title { text-align: right; } body.rtl .dp-ccard__author { text-align: right; } /* Badge position: swap from left to right */ body.rtl .dp-ccard__badge { left: auto; right: var(--sp-2); } /* Views pushed to opposite side */ body.rtl .dp-ccard__views { margin-left: 0; margin-right: auto; } /* ── Pricing plans ── */ body.rtl .dp-pricing__card { text-align: right; } body.rtl .dp-pricing__features { padding-right: 0; } body.rtl .dp-pricing__features li { text-align: right; } body.rtl .dp-pricing__features li .dp-pricing__icon { margin-right: 0; margin-left: 10px; } /* Badge centered — transform translateX(-50%) + left:50% works in both dirs */ body.rtl .dp-pricing__badge { left: 50%; right: auto; transform: translateX(-50%); } /* ── FAQ accordion ── */ body.rtl .dp-faq__q { text-align: right; } body.rtl .dp-faq__icon { margin-right: 0; margin-left: 12px; } body.rtl .dp-faq__a { padding-left: 0; padding-right: var(--sp-10); text-align: right; } /* ── Upload CTA section ── */ body.rtl .dp-upload-cta__inner { text-align: right; } body.rtl .dp-upload-cta__title, body.rtl .dp-upload-cta__desc { text-align: right; font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } /* ═══════════════════════════════════════════════════════════════════════════ 5. SITE FOOTER ═══════════════════════════════════════════════════════════════════════════ */ body.rtl .site-footer__col { text-align: right; } body.rtl .site-footer__brand-desc { text-align: right; } body.rtl .site-footer__links { text-align: right; } /* ── Breadcrumb ── */ body.rtl .dp-breadcrumb__sep { transform: scaleX(-1); } /* ═══════════════════════════════════════════════════════════════════════════ 6. DOCUMENT VIEWER PAGE — 3-Column Layout (.dp-doc-page) ═══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .dp-doc-page, body.rtl .dp-doc-page { direction: rtl; } /* Left sidebar → becomes right visual column */ [dir="rtl"] .dp-doc-page__left, body.rtl .dp-doc-page__left { border-right: none; border-left: 1px solid var(--dc-grey-bd); text-align: right; } /* Right sidebar → becomes left visual column */ [dir="rtl"] .dp-doc-page__right, body.rtl .dp-doc-page__right { border-left: none; border-right: 1px solid var(--dc-grey-bd); text-align: right; } /* Center viewer — PDF pages render LTR */ [dir="rtl"] .dp-doc-page__center, body.rtl .dp-doc-page__center { direction: ltr; } /* Title and info boxes */ [dir="rtl"] .dp-doc-page__title, [dir="rtl"] .dp-doc-page__excerpt, [dir="rtl"] .dp-doc-page__info-box, body.rtl .dp-doc-page__title, body.rtl .dp-doc-page__excerpt, body.rtl .dp-doc-page__info-box { text-align: right; font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } /* Meta icon margin swap */ [dir="rtl"] .dp-meta-icon, body.rtl .dp-meta-icon { margin-right: 0; margin-left: 2px; } /* Back to Library link — flip arrow */ [dir="rtl"] .dp-doc-page__back svg, body.rtl .dp-doc-page__back svg { transform: scaleX(-1); } /* Info category link */ [dir="rtl"] .dp-info-cat-link, body.rtl .dp-info-cat-link { margin-right: 0; margin-left: 6px; } /* ── 6a. Download + Action Buttons ─────────────────────────────────── */ [dir="rtl"] .dp-action-btn--download, body.rtl .dp-action-btn--download { text-align: right; } [dir="rtl"] .dp-action-btn--report, body.rtl .dp-action-btn--report { text-align: right; } /* ── 6b. Reading Progress ──────────────────────────────────────────── */ [dir="rtl"] .dp-progress-fill, body.rtl .dp-progress-fill { border-radius: 99px; margin-left: auto; margin-right: 0; background: linear-gradient(270deg, #22c55e, #16a34a); } /* ── 6c. Table of Contents ─────────────────────────────────────────── */ [dir="rtl"] .dp-toc__item, body.rtl .dp-toc__item { padding-left: 12px; padding-right: 12px; text-align: right; } [dir="rtl"] .dp-toc__item--depth-0, body.rtl .dp-toc__item--depth-0 { padding-left: auto; padding-right: 12px; } [dir="rtl"] .dp-toc__item--depth-1, body.rtl .dp-toc__item--depth-1 { padding-left: auto; padding-right: 22px; } [dir="rtl"] .dp-toc__item--depth-2, body.rtl .dp-toc__item--depth-2 { padding-left: auto; padding-right: 32px; } /* ── 6d. Tier Badges ───────────────────────────────────────────────── */ [dir="rtl"] .dp-tier-badge, body.rtl .dp-tier-badge { font-family: var(--font-body), 'Noto Sans Arabic', sans-serif; } /* ═══════════════════════════════════════════════════════════════════════════ 7. VIEWER TOOLBAR ═══════════════════════════════════════════════════════════════════════════ */ /* Prev/Next page arrows — flip */ [dir="rtl"] .dp-viewer-btn--prev, body.rtl .dp-viewer-btn--prev, [dir="rtl"] .dp-viewer-btn--next, body.rtl .dp-viewer-btn--next { transform: scaleX(-1); } /* Page info / zoom — keep LTR for digits */ [dir="rtl"] .dp-page-info, body.rtl .dp-page-info, [dir="rtl"] .dp-zoom-label, body.rtl .dp-zoom-label { direction: ltr; } /* Center title bar */ [dir="rtl"] .dc-viewer-title-bar, body.rtl .dc-viewer-title-bar { text-align: right; font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } /* Spinner — flip margin */ [dir="rtl"] .dp-spinner-ring, body.rtl .dp-spinner-ring { margin-right: 0; margin-left: 8px; } /* ═══════════════════════════════════════════════════════════════════════════ 8. VIEWER: Related Documents ═══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .dp-related__heading, body.rtl .dp-related__heading { text-align: right; } [dir="rtl"] .dp-related-item__title, body.rtl .dp-related-item__title { text-align: right; font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } /* Badge position swap */ [dir="rtl"] .dp-related-item__badge, body.rtl .dp-related-item__badge { left: auto; right: 3px; } /* Thumbnail wrapper stays LTR */ [dir="rtl"] .dp-related-item__thumb-wrap, body.rtl .dp-related-item__thumb-wrap { direction: ltr; } /* ═══════════════════════════════════════════════════════════════════════════ 9. VIEWER: Report Modal ═══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .dp-modal__panel, body.rtl .dp-modal__panel { font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; text-align: right; } [dir="rtl"] .dp-report-note, body.rtl .dp-report-note, [dir="rtl"] .dp-report-disclaimer, body.rtl .dp-report-disclaimer, [dir="rtl"] .dp-report-section__desc, body.rtl .dp-report-section__desc { text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ 10. VIEWER: Share Panel + Toast ═══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .dp-share-panel__item, body.rtl .dp-share-panel__item { text-align: right; } [dir="rtl"] .dp-toast, body.rtl .dp-toast { direction: rtl; text-align: center; } /* ═══════════════════════════════════════════════════════════════════════════ 11. VIEWER: Responsive — RTL border adjustments ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { [dir="rtl"] .dp-doc-page__left, body.rtl .dp-doc-page__left { border-left: none; border-bottom: 1px solid var(--dc-grey-bd); } [dir="rtl"] .dp-doc-page__right, body.rtl .dp-doc-page__right { border-right: none; border-top: 1px solid var(--dc-grey-bd); } } /* ═══════════════════════════════════════════════════════════════════════════ 12. CATALOG PAGE ═══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .dp-archive-hero__title, body.rtl .dp-archive-hero__title { letter-spacing: 0; font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; text-align: right; } [dir="rtl"] .dp-archive-hero__desc, body.rtl .dp-archive-hero__desc { text-align: right; } /* Search icon — swap */ [dir="rtl"] .dp-search__icon, body.rtl .dp-search__icon { left: auto; right: 12px; } [dir="rtl"] .dp-search__input, body.rtl .dp-search__input { padding-left: 14px; padding-right: 38px; text-align: right; } /* Select dropdowns — flip arrow to left */ [dir="rtl"] .dp-select, body.rtl .dp-select { padding: 8px 12px 8px 30px; background-position: left 10px center; text-align: right; } /* Autocomplete suggestions */ [dir="rtl"] .dp-suggest-item__title, body.rtl .dp-suggest-item__title { text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ 13. CATALOG: Document Cards (Grid View) ═══════════════════════════════════════════════════════════════════════════ */ /* Badge — swap from left to right */ [dir="rtl"] .doc-card__badge, body.rtl .doc-card__badge { left: auto; right: 8px; } /* Lock icon — swap from right to left */ [dir="rtl"] .doc-card__lock, body.rtl .doc-card__lock { right: auto; left: 8px; } /* Card text */ [dir="rtl"] .doc-card__title, [dir="rtl"] .doc-card__author, body.rtl .doc-card__title, body.rtl .doc-card__author { text-align: right; font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } [dir="rtl"] .doc-card__pages-left, body.rtl .doc-card__pages-left { text-align: right; } [dir="rtl"] .doc-card__cat-chip, body.rtl .doc-card__cat-chip { text-align: right; } /* Bookmark — swap from right to left */ [dir="rtl"] .doc-card__bookmark, body.rtl .doc-card__bookmark { right: auto; left: 8px; } /* ═══════════════════════════════════════════════════════════════════════════ 14. CATALOG: Document Cards (List View) ═══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .doc-list-row__badge, body.rtl .doc-list-row__badge { left: auto; right: 5px; } [dir="rtl"] .doc-list-row__title, [dir="rtl"] .doc-list-row__excerpt, body.rtl .doc-list-row__title, body.rtl .doc-list-row__excerpt { text-align: right; font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } [dir="rtl"] .doc-list-row__right, body.rtl .doc-list-row__right { margin-left: 0; margin-right: auto; } /* ═══════════════════════════════════════════════════════════════════════════ 15. CATALOG: Archive Category Chips ═══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .dp-archive-cats-section__title, body.rtl .dp-archive-cats-section__title { text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ 16. CATEGORIES / TAGS PAGES ═══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .docucore-tags__search, [dir="rtl"] .docucore-categories__search, body.rtl .docucore-tags__search, body.rtl .docucore-categories__search { text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ 17. FRONTEND UPLOAD FORM ═══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .dp-upload-form, body.rtl .dp-upload-form { text-align: right; } [dir="rtl"] .dp-form-label, body.rtl .dp-form-label { text-align: right; } [dir="rtl"] .dp-required, body.rtl .dp-required { margin-left: 0; margin-right: 2px; } [dir="rtl"] .dp-form-input, [dir="rtl"] .dp-form-textarea, [dir="rtl"] .dp-form-select, body.rtl .dp-form-input, body.rtl .dp-form-textarea, body.rtl .dp-form-select { text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ 18. VIEWER: DOCX Content Rendering ═══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .docucore-viewer__docx-content, body.rtl .docucore-viewer__docx-content { text-align: right; direction: rtl; } /* ═══════════════════════════════════════════════════════════════════════════ 19. AD BLOCKS — Stay LTR (external ad networks expect LTR) ═══════════════════════════════════════════════════════════════════════════ */ body.rtl .dpt-ad, [dir="rtl"] .dpt-ad, [dir="rtl"] .dc-ad-slot, body.rtl .dc-ad-slot, body.rtl .dpt-home-ad, [dir="rtl"] .dpt-home-ad { direction: ltr; text-align: center; } /* ═══════════════════════════════════════════════════════════════════════════ 20. THEME DOCUMENT FEATURES (sidebar actions) ═══════════════════════════════════════════════════════════════════════════ */ [dir="rtl"] .dpt-actions__item--download, body.rtl .dpt-actions__item--download { text-align: right; } [dir="rtl"] .dpt-actions__grid, body.rtl .dpt-actions__grid { direction: rtl; } /* Related documents (theme) */ [dir="rtl"] .dpt-related__title, body.rtl .dpt-related__title { text-align: right; } [dir="rtl"] .dpt-related__name, body.rtl .dpt-related__name { text-align: right; } [dir="rtl"] .dpt-related__grid, body.rtl .dpt-related__grid { direction: rtl; } [dir="rtl"] .dpt-related__card, body.rtl .dpt-related__card { text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ 21. STUDENT TESTIMONIALS ═══════════════════════════════════════════════════════════════════════════ */ body.rtl .dp-testimonials__title, body.rtl .dp-testimonials__desc { font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } body.rtl .dp-testimonial-card { text-align: right; } body.rtl .dp-testimonial-card__text { text-align: right; font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } body.rtl .dp-testimonial-card__name, body.rtl .dp-testimonial-card__role { text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ 22. AJAX SEARCH DROPDOWN ═══════════════════════════════════════════════════════════════════════════ */ body.rtl .dpt-search-results { text-align: right; } body.rtl .dpt-search-results__item { text-align: right; } body.rtl .dpt-search-results__body { text-align: right; } body.rtl .dpt-search-results__meta { text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ 23. MISC GLOBAL ═══════════════════════════════════════════════════════════════════════════ */ /* Flip directional arrows in links/buttons */ body.rtl .dp-section-link span[aria-hidden], body.rtl .btn span[aria-hidden="true"] { transform: scaleX(-1); } /* Card views margin */ body.rtl .dp-card__views { margin-left: 0; margin-right: auto; } /* Results count */ [dir="rtl"] .dp-results-count, body.rtl .dp-results-count { text-align: right; } /* Download counters — keep LTR for digits */ [dir="rtl"] .dp-dl-counter, body.rtl .dp-dl-counter { direction: ltr; text-align: right; display: inline-block; } /* Generic page entry content */ body.rtl .entry-content { text-align: right; font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } body.rtl .entry-title { font-family: var(--font-body), 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } /* ═══════════════════════════════════════════════════════════════════════════ 24. RESPONSIVE RTL OVERRIDES ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Catalog controls stack on mobile — natural direction handles ordering */ [dir="rtl"] .dp-catalog__controls, body.rtl .dp-catalog__controls { flex-direction: column; align-items: stretch; } }