/* ============================================================================
   custom.css - project-specific overrides, loaded AFTER the theme stylesheets.
   Keep all local tweaks here so the vendor theme files stay untouched.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) Slider captions
   The caption text sits directly on top of a photo, which made it hard to read
   in both languages. A translucent panel + text shadow restores contrast
   without changing the theme's colour classes (text-white / text-gray).
   ------------------------------------------------------------------------- */
.swiper-slide-caption .shell {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 10px;
    padding: 22px 30px;
}

.swiper-slide-caption .shell h2,
.swiper-slide-caption .shell h3,
.swiper-slide-caption .shell p,
.swiper-slide-caption .shell a {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

/* The grey caption text is too dim once it is over a photo. */
.swiper-slide-caption .shell .text-gray,
.swiper-slide-caption .shell p {
    color: #f1f1f1;
}

/* ---------------------------------------------------------------------------
   2) Top contact bar in RTL (Persian) - was clipped by the hero image
   Root cause: the static navbar (nav row + top panel) is taller than the
   wrapper the theme reserves for it, so the address / opening-hours lines
   overflowed downward and the hero <section> (position:relative; z-index:1)
   that follows painted on top of them.
   Fix: give the RTL navbar its own stacking context above the hero so the
   whole white top panel (and all of its text) renders in front of the image.
   Scoped to dir="rtl" - the English (LTR) header already lays out correctly.
   ------------------------------------------------------------------------- */
[dir="rtl"] .rd-navbar-wrap {
    position: relative;
    z-index: 15;
}

/* Let the address / opening-hours wrap freely instead of being forced onto a
   single clipped line. */
[dir="rtl"] .rd-navbar-top-panel-inner {
    align-items: center;
    flex-wrap: wrap;
}

[dir="rtl"] .rd-navbar-top-panel .contact-info,
[dir="rtl"] .rd-navbar-top-panel .contact-info ul,
[dir="rtl"] .rd-navbar-top-panel .contact-info li,
[dir="rtl"] .rd-navbar-top-panel .contact-info .unit,
[dir="rtl"] .rd-navbar-top-panel .contact-info .unit__body,
[dir="rtl"] .rd-navbar-top-panel .contact-info .p {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

[dir="rtl"] .rd-navbar-top-panel .contact-info .p {
    line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   3) English (LTR) body typography
   The theme's body font is "Merriweather" (a serif that is never actually
   loaded - the Google Fonts request only fetches "Merriweather Sans"), so
   Latin body text fell back to Times New Roman and clashed with the
   Montserrat headings. Align body copy with the headings' sans-serif stack.
   Scoped to dir="ltr" so the Persian IRANSans text is untouched.
   ------------------------------------------------------------------------- */
[dir="ltr"] body,
[dir="ltr"] p,
[dir="ltr"] .p,
[dir="ltr"] li,
[dir="ltr"] td,
[dir="ltr"] address,
[dir="ltr"] blockquote,
[dir="ltr"] input,
[dir="ltr"] textarea,
[dir="ltr"] button,
[dir="ltr"] .biger,
[dir="ltr"] .text-italic,
[dir="ltr"] .page .text-family-base,
[dir="ltr"] .contact-info a span,
[dir="ltr"] .contact-info p span,
[dir="ltr"] .list-marked-dark li span,
[dir="ltr"] h5.title-typography,
[dir="ltr"] .heading-5.title-typography,
[dir="ltr"] .rdc-table_has-events li,
[dir="ltr"] .tooltip-custom .tooltip {
    font-family: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   4) Profile / services section over the busy photo
   The left column's headings and paragraphs sat directly on the (dark, busy)
   background image with no scrim, so the body copy was almost unreadable.
   Add a translucent overlay behind the content and lift the text contrast.
   The right-hand counter box keeps its own darker panel on top of this.
   ------------------------------------------------------------------------- */
.section-lg.bg-image {
    position: relative;
}

.section-lg.bg-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.section-lg.bg-image > .shell {
    position: relative;
    z-index: 2;
}

.section-lg.bg-image h2,
.section-lg.bg-image .box-content p,
.section-lg.bg-image p {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.section-lg.bg-image h4 {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* ---------------------------------------------------------------------------
   5) Footer contact details - long email / Instagram handle overflowed the
   narrow column and was clipped at the edge. Allow it to wrap.
   ------------------------------------------------------------------------- */
.footer-default .contact-info a,
.footer-default .contact-info .p,
.footer-default .contact-info p {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   6) Language switch button spacing
   ------------------------------------------------------------------------- */
.lang-switch {
    margin-left: 8px;
    margin-right: 8px;
    padding: 5px 10px 3px 10px;
}

/* ---------------------------------------------------------------------------
   7) Mobile off-canvas menu in RTL (Persian)
   a) The theme hides the fixed-layout nav panel with translateX(-120%). That
      is correct for the LTR panel (anchored left:0), but in RTL styleFa the
      panel is anchored to the RIGHT (right:0), so a negative (leftward) shift
      leaves ~51px of it peeking on the LEFT edge when "closed". Push it off the
      RIGHT instead so it is completely hidden until opened.
   b) When the menu opens, the theme morphs the hamburger into a chevron/arrow.
      That arrow renders correctly in LTR (English), but styleFa anchors the
      toggle's bars to the RIGHT (right:0) instead of the left, which moves the
      rotation pivot into the middle and produces a mis-shapen arrow. Restore
      the LTR anchoring (left:0) for the active state so the Persian arrow looks
      exactly like the (correct) English one.
   Scoped to dir="rtl"; the English (LTR) mobile menu already works correctly.
   ------------------------------------------------------------------------- */
[dir="rtl"] .rd-navbar-fixed .rd-navbar-nav-wrap {
    transform: translateX(120%);
}

[dir="rtl"] .rd-navbar-fixed .rd-navbar-nav-wrap.active {
    transform: translateX(0);
}

/* Fix the open-menu arrow: first anchor the bars to the left (as in the English
   theme) so the chevron keeps its shape instead of collapsing in the middle... */
[dir="rtl"] .rd-navbar-toggle.active span:before,
[dir="rtl"] .rd-navbar-toggle.active span:after {
    right: auto;
    left: 0;
}

/* ...then mirror the whole icon so the arrow points the RTL-correct way
   (rightwards) instead of matching the LTR (leftwards) direction. */
[dir="rtl"] .rd-navbar-toggle.active span {
    transform: scaleX(-1);
}