/*------------------------------------------------------------------
[LTR Overrides — English version (/en/)]
Loaded ONLY by en/index.html, after style.css and the Helvetica font
mappings. Mirrors every direction-sensitive rule of the RTL theme so
the English site renders fully left-to-right without touching the
Persian version.
-------------------------------------------------------------------*/

/* 1) Base direction ------------------------------------------------*/
body {
    direction: ltr;
    /* The shipped bootstrap.min.css is a custom RTL build that sets
       body{text-align:right} — restore standard LTR alignment */
    text-align: left;
}

/* Un-swap the RTL-build bootstrap utilities (they are inverted) */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }

/* 2) Latin typography ------------------------------------------------
   System UI font stack: real Latin digits, native rendering on every OS
   (the self-hosted 'helvetica-neue' pack is an Iranian-market font that
   substitutes Persian digit glyphs, so we bypass 'primary-font'). */
body,
h1, h2, h3, h4, h5, h6,
.primary-font,
.secondary-font {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* Latin typography rhythm (Persian line-heights are too airy for Latin) */
body {
    line-height: 1.6;
}

p {
    line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.35;
}

/* 2) Layout mirroring ----------------------------------------------*/
/* Content area: sidebar sits on the LEFT in LTR (was: right: 250px) */
@media (min-width: 1200px) {
    .main-left {
        left: 250px;
        right: auto;
    }
}

/* Decorative circle behind the sidebar avatar (was: right: -50px) */
.header-left .hl-top:after {
    left: -50px;
    right: 0;
}

/* Sidebar menu ------------------------------------------------------
   Two fixes:
   1) The custom RTL bootstrap build zeroes only padding-RIGHT on .nav,
      so the browser default padding-inline-start (40px on the LEFT in
      LTR) leaks through and shifts every item right / squeezes labels.
   2) Icon + label use a flex row so the English text stays perfectly
      aligned (and vertically centered) next to its icon. */
.header-left .nav-menu {
    padding-left: 0;
    padding-right: 0;
}

.header-left .nav-menu li .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    font-size: 13px;
}

.header-left .nav-menu li .nav-link i {
    flex: 0 0 auto;
    width: 20px;
    margin: 0;
    text-align: center;
}

.header-left .nav-menu li .nav-link span {
    margin: 0;
}

/* Compact sidebar rhythm (desktop): English labels + avatar + 8 items
   are taller than the Persian ones — tighten so the whole menu fits the
   viewport height and never needs to scroll internally. */
@media (min-width: 1200px) {
    .header-left .hl-top {
        padding: 40px 25px 18px;
    }

    .header-left .hl-top .img {
        width: 110px;
        height: 110px;
    }

    .header-left .hl-top h5 {
        margin: 40px 0 0;
    }

    .header-left .hl-top .lang-switch {
        margin-top: 10px;
    }

    .header-left .nav-menu {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* Sidebar social icons spacing (was: margin-left) */
.header-left .social-icons a {
    margin-left: 0;
    margin-right: 17px;
}

.header-left .social-icons a:last-child {
    margin-right: 0;
}

/* Mobile drawer slides in from the LEFT (was: right: -300px) */
@media (max-width: 1199.98px) {
    .header-left {
        left: -300px;
        right: auto;
    }

    .header-left.menu-open {
        left: 0;
        right: auto;
    }
}

/* Hamburger button pinned to the right edge on mobile
   (was: margin: -5px auto -5px 0) */
.toggler-menu {
    margin: -5px 0 -5px auto;
}

/* pagepiling section dots: hug the right edge in LTR (standard look) */
#pp-nav {
    margin-left: 0;
    margin-right: 15px;
}

#pp-nav ul {
    background: rgba(11, 11, 19, 0.35);
    border-radius: 20px;
    padding: 6px 3px;
}

/* 3) Resume boxes ---------------------------------------------------*/
/* Separator between logo column and text column (was: border-left) */
@media (min-width: 768px) {
    .resume-row .rb-left {
        border-left: none;
        border-right: 1px solid rgba(255, 255, 255, 0.05);
    }

    .theme-light .resume-row .rb-left {
        border-right: 1px solid rgba(11, 11, 19, 0.05);
    }
}

@media (max-width: 767.98px) {
    .resume-row .rb-left {
        text-align: left;
    }
}

/* Date badge: the RTL theme pins it absolutely at the top-left corner of
   the text column (harmless beside right-aligned Persian titles, but it
   covers left-aligned English ones). Flow it as an in-line meta pill
   under the subtitle — it can never overlap the title at any width. */
.resume-row .rb-time {
    position: static;
    display: block;
    width: fit-content;
    margin: 0 0 10px;
}

/* Contact form inputs (theme RTL rule: .contact-form .form-control) */
.contact-form .form-control {
    text-align: left;
}

/* 4) Work / project cards ------------------------------------------*/
@media (max-width: 991.98px) {
    .blog-grid .blog-info {
        margin-right: 0;
        margin-left: 40px;
    }
}

@media (max-width: 767.98px) {
    .blog-grid .blog-info {
        margin-left: 25px;
    }
}

/* 5) Small direction-sensitive details ------------------------------*/
/* Green underline of <mark> (was: 100% bottom = right edge) */
mark {
    background-position: 0% bottom;
}

/* Press card "read more" arrow sits after the text in LTR */
.press-card .press-more i {
    margin-right: 0;
    margin-left: 3px;
}

/* Fun-fact paragraph (English page) */
.fun-fact {
    font-style: italic;
    color: rgba(255, 255, 255, 0.65);
}

.theme-light .fun-fact {
    color: rgba(11, 11, 19, 0.65);
}