/* ============================================================================= Bilingual (EN/FA) styles — loaded last, after base/layout/dark-mode. 1) Language switcher (.zia-langswitch) — single plain-text toggle in the menu bar. 2) Global fixes that apply to both languages. 3) English (LTR) overrides — scoped to html:not([dir="rtl"]). WordPress emits dir="rtl" on Persian pages but NO dir attribute on English ones, so this selector matches English pages only and can never touch the Persian (RTL) site → zero risk to the live Persian site. ============================================================================= */ /* ---- 1) Language switcher — single text toggle to the OTHER language ------ Absolutely positioned beside the dark/light (moon) toggle, mirroring its placement from dark-mode.css (.zia-theme-toggle: left:24px, 40px wide), so it never pushes the menu row onto a new line. "EN" on Persian pages, "فا" on English pages. (English moves both toggles to the RIGHT — see section 3.) */ .zia-langswitch { position: absolute; z-index: 5; left: 64px; /* immediately right of the 40px moon toggle at left:24px */ top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; height: 40px; font-size: 15px; font-weight: 600; line-height: 1; color: #777; /* matches the moon toggle's resting colour */ text-decoration: none; } .zia-langswitch:hover { color: #dd9933; } /* site orange */ @media (max-width: 768px) { /* mobile: moon moves to right:84px */ .zia-langswitch { left: auto; right: 124px; } } html[data-theme="dark"] .zia-langswitch { color: #9aa3ad; } html[data-theme="dark"] .zia-langswitch:hover { color: #dd9933; } /* ---- 2) Global fixes (both languages) ------------------------------------ */ /* The search toggle icon uses agnar's hardcoded cyan (#00b2d7) on hover/active; recolour it to the site's orange so the header stays on-brand. */ .toggle-search:hover .svg-icon, .toggle-search.active .svg-icon { fill: #dd9933 !important; } /* ---- 3) English (LTR) overrides — only on /en/ pages --------------------- */ /* base.css forces direction:rtl on for the Persian site; flip it back for English. (Latin text already uses the sans-serif fallback via Vazirmatn's Persian-only unicode-range, so no font change is needed.) */ html:not([dir="rtl"]) body { direction: ltr; } /* Titles & site identity: right-aligned for Persian → left for English */ html:not([dir="rtl"]) .post-header .post-title, html:not([dir="rtl"]) .page .page-title h2, html:not([dir="rtl"]) .site-title { text-align: left; } html:not([dir="rtl"]) .site-description { margin-right: 0; margin-left: 5px; } /* Header bar: Persian forces an RTL flexbox; let English use normal LTR flow. */ html:not([dir="rtl"]) #header .container-inner .group.pad { direction: ltr; } /* Author avatar + pagination + footer copyright: mirror back for LTR */ html:not([dir="rtl"]) img.avatar.avatar-64.photo { margin-left: 0; margin-right: 10px; } html:not([dir="rtl"]) li.next.right { float: right; } html:not([dir="rtl"]) li.prev.left { float: left; } html:not([dir="rtl"]) div.grid.one-half { float: left; } /* Featured hero grid + category ribbon → agnar's native LTR layout (in the site orange). The RTL tweak in layout.css mirrored these to the right/left; undo it so English uses the theme default: hero on the left, ribbon top-left, tail on the right. */ html:not([dir="rtl"]) .featured-item { float: left; margin: 4px 0 0 4px; } html:not([dir="rtl"]) .featured-item:nth-child(1) { margin-left: 0; } html:not([dir="rtl"]) .featured-category-title { right: auto; left: 10px; } html:not([dir="rtl"]) .featured-category-title span { padding: 15px 25px 15px 30px; } html:not([dir="rtl"]) .featured-category-title span:before { left: auto; right: -35px; border-left: 35px solid #dd9933; border-right: 35px solid transparent; border-top: 35px solid #dd9933; border-bottom: 35px solid #dd9933; } html:not([dir="rtl"]) .featured-category-title span:after { right: auto; left: -10px; border-left: 10px solid transparent; border-right: 10px solid #dd9933; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } /* Header utilities — mirror the Persian left-edge cluster to the RIGHT for English (desktop only; mobile already places them on the right via dark-mode.css). The search box sits inward at right:80px and its panel opens leftward into the header; the two toggles sit at the right edge so nothing overlaps the menu. */ @media (min-width: 769px) { html:not([dir="rtl"]) #header .container-inner .container { left: auto; right: 80px; } /* Open the panel leftward from just past the toggle (agnar's native 68px gap), so it never lands on top of the search button (the X). */ html:not([dir="rtl"]) .search-expand { left: auto; right: 68px; width: 340px; } html:not([dir="rtl"]) .zia-theme-toggle { left: auto; right: 24px; } html:not([dir="rtl"]) .zia-langswitch { left: auto; right: 64px; } }