/* ============================================================
   ltr.css — English / left-to-right overrides
   Loaded AFTER app.css. Nothing in app.css is edited, so the
   Persian site's stylesheet can still be rebuilt from the same
   Tailwind source without conflict.
   ============================================================ */

/* ------------------------------------------------------------
   1. Type
   The Persian build sets font-family: "Yekan …" in hundreds of
   places — utility classes, scoped <style> blocks, CKEditor
   content. Rather than rewrite every one, each Yekan family is
   redefined here as Archivo (a variable font, one file for all
   weights). Every existing class keeps working and lands on the
   right weight.
   Weight ranges are deliberate: the lower bound is the weight
   the name implies, so an element that ALSO carries Tailwind's
   font-bold still steps up instead of being clamped flat.
   ------------------------------------------------------------ */
@font-face{font-family:"Yekan Light";src:url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format("woff2");font-weight:300 400;font-display:swap}
@font-face{font-family:"Yekan";src:url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Yekan Regular";src:url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Yekan Medium";src:url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Yekan Bold";src:url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Yekan ExtraBold";src:url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format("woff2");font-weight:700 900;font-display:swap}

/* Latin copy sits tighter than Persian did — the Yekan metrics
   left headings looking airy once the Arabic ascenders went. */
html body h1,html body h2,html body h3{letter-spacing:-.015em}

/* ------------------------------------------------------------
   2. Direction
   ------------------------------------------------------------ */
html{direction:ltr}

.blog-content{direction:ltr;text-align:left}
.fx,.vx,.dmz{direction:ltr !important}

/* Persian justified text reads well; English justified text
   opens rivers of white space at these column widths. */
html body .text-justify{text-align:left}

/* ------------------------------------------------------------
   3. Mirrored layout
   Rows the Persian build reversed so they read right-to-left
   need to run the normal way round again.
   ------------------------------------------------------------ */
html body #header .menu ul,
html body .ft .ft-cols,
html body .flex-row-reverse.ltr-flip{flex-direction:row}

/* Header nav: underline grows from the left */
html body #header .menu ul li a::after{right:auto;left:0}
html body #header .menu ul li.active a::after{left:0;right:auto}

/* Logo spacing was mirrored. The Tailwind ml-* classes moved onto the
   partnership lockup's <a>, where they are already correct for LTR, so
   the two images inside it want no margin of their own. */
html body .hd-logo{margin-left:0;margin-right:0}
html body #header .menu ul{margin-right:0;margin-left:2.5rem}

/* ------------------------------------------------------------
   4. Mobile menu — slides in from the left
   ------------------------------------------------------------ */
html body .mobile-menu{
  left:0 !important;right:auto !important;
  transform:translateX(-105%);
  border-left:0;border-right:1px solid #17305933;
  box-shadow:18px 0 40px rgba(0,0,0,.45);
}
html body .mobile-menu.open{transform:translateX(0)}
html body .mobile-menu ul li{text-align:left !important}
html body .mobile-menu ul li a::before{right:auto;left:0}
html body .mobile-menu ul li a:hover,
html body .mobile-menu ul li a:active{padding-right:20px;padding-left:26px}

/* ------------------------------------------------------------
   5. Scroll-in animations, mirrored
   ------------------------------------------------------------ */
html body .anim-ready [data-anim="right"]{transform:translateX(-34px)}
html body .anim-ready [data-anim="left"]{transform:translateX(34px)}
html body .anim-ready [data-anim].in{transform:none}

/* ------------------------------------------------------------
   6. Numbers
   The Persian build renders figures and prices in Persian
   numerals via a template filter. English pages use Latin
   digits, so the tabular alignment needs restating.
   ------------------------------------------------------------ */
html body .fx-spec-val,
html body .fx-table td,
html body .fx-table th{font-variant-numeric:tabular-nums;letter-spacing:0}

/* ------------------------------------------------------------
   7. Quote call-to-action
   Replaces the price column on product pages.
   ------------------------------------------------------------ */
.quote-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
  background:#061b3e;border:2px solid #896e65;border-radius:32px;
  padding:28px 32px;margin:32px 0;
}
.quote-cta__text{flex:1 1 320px;min-width:0}
.quote-cta__title{
  font-family:"Yekan Bold",sans-serif;color:#fff;font-size:20px;
  margin:0 0 6px;line-height:1.3;
}
.quote-cta__sub{color:#8fa3b8;font-size:14.5px;line-height:1.6;margin:0}
.quote-cta__btn{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:9px;
  background:#6ecff6;color:#04142c;
  font-family:"Yekan Bold",sans-serif;font-size:15px;
  padding:13px 26px;border-radius:999px;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.quote-cta__btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px #6ecff6}
.quote-cta__btn svg{width:18px;height:18px}

@media(max-width:630px){
  .quote-cta{padding:22px;border-radius:24px}
  .quote-cta__btn{width:100%;justify-content:center}
}

/* ------------------------------------------------------------
   8. Family accent colours — unchanged from the Persian site
   BSP #896e65 · TUPYPRES #6ecff6 · NPT #236fa3
   Restated here so the English build carries the same rule.
   ------------------------------------------------------------ */
:root{--fam-bsp:#896e65;--fam-pres:#6ecff6;--fam-npt:#236fa3}

/* ------------------------------------------------------------
   9. Gold - Amini Building Materials Trading
   The Amini logo is gold and the site carries the partnership, so
   gold is the second accent here. It is used sparingly and only
   where it signals the partnership or a call to action. Light blue
   keeps its job of identifying the TUPYPRES family, so the two
   never compete for the same meaning.
   Some rules carry "html body" because the footer style block
   loads after this sheet.
   ------------------------------------------------------------ */
:root{--gold:#c9a227;--gold-lt:#e6c46e;--gold-dk:#a8782d}

/* Header: the nav underline sits on the same line as the lockup rule,
   so it takes the same gold. */
html body #header .menu ul li a::after{background:var(--gold)}
html body #header .menu ul li a:hover{color:var(--gold-lt)}
html body #header .menu ul li.active a{color:var(--gold-lt)}

/* Mobile drawer, same treatment */
html body .mobile-menu ul li a::before{background:var(--gold)}
html body .mobile-menu ul li.active a{color:var(--gold-lt)}
html body .mobile-menu .mobile-menu-close:hover{color:var(--gold-lt)}

/* Footer */
html body .ft{border-top:1px solid #33290f}
html body .ft-h4:after{background:var(--gold)}
html body .ft-list a:hover{color:var(--gold-lt)}
html body .ft-ct a:hover{color:var(--gold-lt)}

/* Request a quote - the one button on the site that should read as
   the partnership rather than as TUPY. */
.quote-cta{border-color:var(--gold)}
.quote-cta__btn{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#1a1305}
.quote-cta__btn:hover{box-shadow:0 10px 26px -12px var(--gold)}

/* A hairline any template can drop in */
.gold-rule{border:0;height:2px;width:56px;border-radius:2px;background:var(--gold);margin:18px 0}

/* ------------------------------------------------------------
   10. Header fit
   The lockup made the logo block wider and the nav carries eleven
   items. Without flex:0 0 auto the images shrink instead of the bar
   wrapping, which is what made them overlap the menu. The rest is
   buying width back as the viewport narrows.
   ------------------------------------------------------------ */
html body #header .logo,
html body #header .hd-logo-link,
html body #header .hd-logo,
html body #header .hd-logo-amini,
html body #header .lockup-rule{flex:0 0 auto}

@media(max-width:1850px){
  html body #header .hd-logo-link{margin-left:24px}
  html body #header .menu ul{margin-left:24px}
}

@media(max-width:1550px){
  html body #header .menu ul{gap:15px}
  html body #header .menu ul li a{font-size:14px}
}