/* Additive-only RTL overrides for Farsi. Never edit main.css's LTR rules
   here — this file only overrides the physical (non-logical) properties
   that don't auto-mirror under dir="rtl" flexbox layout. */

/* Kalameh (loaded by assets/styles/font.css, imported from main.css) is the
   Farsi typeface. Every font-family rule in main.css resolves through these two
   custom properties, so redefining them here swaps the whole RTL tree. */
[dir="rtl"] {
  --font_regular: "Kalameh", Tahoma, "Segoe UI", sans-serif;
  --font_bold: "Kalameh", Tahoma, "Segoe UI", sans-serif;
  font-family: "Kalameh", Tahoma, "Segoe UI", sans-serif;
}

/* ABCDiatype ships bold as a separate family, so main.css carries weight in the
   family name alone (strong even sets font-weight: normal). Kalameh is one
   family with nine weights, so the --font_bold selectors need a real weight. */
[dir="rtl"] h4,
[dir="rtl"] strong {
  font-weight: 700;
}

@media (hover: hover) {
  [dir="rtl"] #page-about #intro .contact #social-media a:hover,
  [dir="rtl"]
    .post-type-archive-project
    #archive-project
    #projects-container
    .projects
    a:hover,
  [dir="rtl"]
    .post-type-archive-project
    #archive-project
    #projects-container
    .projects
    a.hover {
    font-weight: 700;
  }
}

/* Nav items are separated by an absolutely-positioned "," pseudo-element pinned
   to the right of each link, with matching right-side padding to make room for
   it. Neither mirrors on its own, so both move to the left edge under RTL. */
[dir="rtl"] nav .nav-container ul li {
  margin: 0 0 0 8px;
}

[dir="rtl"] nav .nav-container ul li a {
  padding-right: 0;
  padding-left: 6px;
  font-weight: 300;
}

/* Sits in the same flex row as the links above, so it takes the same weight. */
[dir="rtl"] .lang-switch {
  font-weight: 300;
}

[dir="rtl"] nav .nav-container ul li a:after {
  content: "،";
  right: auto;
  left: 0;
}

/* main.css drops the separator after the final item, but that rule ties this
   file's on specificity and loses on source order — so it has to be restated. */
[dir="rtl"] nav .nav-container ul li:last-of-type a:after {
  content: none;
}

/* Below 1024px main.css drops the comma and its padding; media queries add no
   specificity, so the rules above have to be undone explicitly here. */
@media only screen and (max-device-width: 1024px),
  only screen and (max-width: 1024px) {
  [dir="rtl"] nav .nav-container ul li a {
    padding-left: 0;
  }

  [dir="rtl"] nav .nav-container ul li a:after {
    content: none;
  }
}

[dir="rtl"] .post-type-archive-project #archive-project #projects-container {
  float: left;
}

[dir="rtl"]
  .post-type-archive-project
  #archive-project
  #projects-container
  .headers
  h4:last-of-type,
[dir="rtl"]
  .post-type-archive-project
  #archive-project
  #projects-container
  .projects
  a
  p:last-of-type {
  text-align: left;
}