/* ==========================================================
   SolidBase – RTL overrides
   Activated by <html dir="rtl"> (toggle in header).
   style.css already uses logical properties (inline-start/end),
   so only physical-direction details need to be fixed here.
   ========================================================== */

[dir="rtl"] { --dir: -1; }
[dir="rtl"] body { text-align: start; }

/* Animated underline grows from the right */
[dir="rtl"] .nav-link::after,
[dir="rtl"] .service-card::before { transform-origin: right center; }

/* Directional arrows point left */
[dir="rtl"] .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow,
[dir="rtl"] .link-arrow:hover .arrow { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .arrow.flip { transform: none; }

/* Marquee scrolls the other way */
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .marquee {
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(270deg, transparent, #000 6%, #000 94%, transparent);
}

/* Hero waves drift in the opposite direction */
[dir="rtl"] .wave-1 { animation-name: wave-rtl; }
[dir="rtl"] .wave-2 { animation-name: wave-rtl-rev; }
@keyframes wave-rtl { to { transform: translateX(50%); } }
@keyframes wave-rtl-rev { from { transform: translateX(50%); } to { transform: translateX(0); } }

/* Hero grid lines mask */
[dir="rtl"] .hero::before {
  -webkit-mask-image: radial-gradient(circle at 70% 40%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 70% 40%, #000, transparent 75%);
}

/* Select dropdown chevron */
[dir="rtl"] .field select { background-position: left 1rem center; }

/* Mobile drawer slides in from the left */
@media (max-width: 1100px) {
  [dir="rtl"] .main-nav { transform: translateX(-105%); box-shadow: 20px 0 60px rgba(0, 0, 0, .25); }
  [dir="rtl"] .main-nav.open { transform: none; }
  [dir="rtl"] .dd a { border-radius: 10px 0 0 10px; }
}

/* Dropdown hover nudge goes the other way automatically (padding-inline-start) */

/* Icon rotations keep a natural feel */
[dir="rtl"] .service-card:hover .service-icon,
[dir="rtl"] .mini-features li:hover .mf-icon,
[dir="rtl"] .problem:hover .p-icon { transform: rotate(8deg) scale(1.08); }
[dir="rtl"] .logo:hover .logo-mark { transform: rotate(8deg) scale(1.06); }

/* About illustration labels & before/after sliders stay left-to-right
   (they are visual diagrams; sliders carry dir="ltr" in the markup). */
[dir="rtl"] .cross-section svg { direction: ltr; }
[dir="rtl"] .cross-section .lbl text { direction: ltr; unicode-bidi: plaintext; }

/* Process line + counters */
[dir="rtl"] .counter { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .exp-badge strong { direction: ltr; unicode-bidi: isolate; }

/* Newsletter send icon */
[dir="rtl"] .newsletter button .icon { transform: scaleX(-1); }

/* Phone numbers and emails stay readable */
[dir="rtl"] a[href^="tel:"] span,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .topbar-info a { direction: ltr; }

/* Letter-spacing hurts connected scripts; remove it in RTL */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .eyebrow, [dir="rtl"] .logo-text small, [dir="rtl"] .offer-badge { letter-spacing: 0; }

/* ==========================================================
   Contact page (contact-us.html)
   ========================================================== */
/* Phone, email and ZIP values are always typed left-to-right */
[dir="rtl"] .field input[type="tel"],
[dir="rtl"] .field input[type="email"],
[dir="rtl"] .field input[type="date"] { direction: ltr; text-align: right; }
[dir="rtl"] .field input[type="tel"]::placeholder,
[dir="rtl"] .field input[type="email"]::placeholder { text-align: right; }

/* Breadcrumb separator arrow already flips via .arrow */

/* Step connector and tick mark follow the reading direction */
[dir="rtl"] .check input::after { transform: rotate(45deg) scale(0); }
[dir="rtl"] .check input:checked::after { transform: rotate(45deg) scale(1); }

/* The embedded map is a visual and keeps its own orientation */
[dir="rtl"] .map-card iframe { direction: ltr; }

/* Letter-spacing hurts connected scripts */
[dir="rtl"] .ha-badge, [dir="rtl"] .ha-phone { letter-spacing: 0; }
/* ==========================================================
   404 page (404.html)
   ========================================================== */
[dir="rtl"] .err-path code { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .err-svg { direction: ltr; }

/* ==========================================================
   About Us page (about-us.html)
   Timeline, founder note, team and cards use logical
   properties, so only letter-spacing needs a reset.
   ========================================================== */
[dir="rtl"] .team-exp, [dir="rtl"] .tl-year { letter-spacing: 0; }
[dir="rtl"] .meter-head span:last-child { direction: ltr; unicode-bidi: isolate; }

/* ==========================================================
   Coming Soon page (coming-soon.html)
   ========================================================== */
[dir="rtl"] .cd-num { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .cd-label, [dir="rtl"] .soon-social > span, [dir="rtl"] .sc-item small { letter-spacing: 0; }
[dir="rtl"] .notify-form .btn .icon { transform: scaleX(-1); }
[dir="rtl"] .notify-form input[type="email"] { direction: ltr; text-align: right; }
[dir="rtl"] .notify-form input[type="email"]::placeholder { text-align: right; }
[dir="rtl"] .sc-val { unicode-bidi: plaintext; }
/* ==========================================================
   Home 2 page (index-2.html)
   Layouts use logical properties and grid, so the timeline and
   columns mirror automatically; only details are fixed here.
   ========================================================== */
[dir="rtl"] .bp-sev, [dir="rtl"] .cmp-head,
[dir="rtl"] .sol-meta small, [dir="rtl"] .show-meta small { letter-spacing: 0; }
[dir="rtl"] .hv-stat strong, [dir="rtl"] .why-stat strong, [dir="rtl"] .rs-score strong { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .rs-row span:last-child { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .show-meta strong, [dir="rtl"] .sol-meta strong { unicode-bidi: plaintext; }
[dir="rtl"] .cta2-phone { letter-spacing: 0; }

@media (max-width: 1100px) {
  [dir="rtl"] .sol-tab { padding: .8rem .85rem .8rem 1.1rem; }
}
/* ==========================================================
   Services page (services.html)
   Grids, cards and the alternating layout use logical
   properties, so only the diagrams and numerals are fixed.
   ========================================================== */
[dir="rtl"] .svc-visual > svg { direction: ltr; }
[dir="rtl"] .svc-visual .sv-text { direction: ltr; unicode-bidi: plaintext; }
[dir="rtl"] .svc-num { direction: ltr; unicode-bidi: isolate; letter-spacing: 0; }
[dir="rtl"] .svc-badge, [dir="rtl"] .svc-meta small { letter-spacing: 0; }
[dir="rtl"] .svc-meta strong { unicode-bidi: plaintext; }
[dir="rtl"] .match-row > .arrow { transform: scaleX(-1); }
[dir="rtl"] .match-row:hover > .arrow { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .cta-formcard .btn .arrow { transform: scaleX(-1); }
/* ==========================================================
   Basement Waterproofing page (basement-waterproofing.html)
   Cards, steps and the sign checker use logical properties and
   flex/grid, so they mirror automatically; only numerals and
   the labelled diagram are fixed here.
   ========================================================== */
[dir="rtl"] .bw-result-count strong { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .bw-step-time { letter-spacing: 0; }
[dir="rtl"] .bw-call a { direction: ltr; unicode-bidi: isolate; }
/* ==========================================================
   Blog Details page (blog-details.html)
   Layout uses logical properties and grid, so it mirrors
   automatically; only the progress bar, numerals and small
   details are fixed here.
   ========================================================== */
[dir="rtl"] .read-progress span { transform-origin: right center; }
[dir="rtl"] .post-cat, [dir="rtl"] .post-info, [dir="rtl"] .post-nav small,
[dir="rtl"] .author-box .ab-role { letter-spacing: 0; }
[dir="rtl"] .cat-list a span { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .side-search input { text-align: start; }
[dir="rtl"] .diag-table thead th { white-space: normal; }/* ==========================================================
   Foundation Repair page (foundation-repair.html)
   Cards, tabs, timeline and CTA use logical properties and
   grid/flex, so they mirror automatically; only the decorative
   crack drawing is flipped here.
   ========================================================== */
[dir="rtl"] .fr-crack { transform: scaleX(-1); }
[dir="rtl"] .fr-legend li { letter-spacing: 0; }

/* ==========================================================
   Foundation Crack Repair page (foundation-crack-repair.html)
   Grids, cards and the checklist use logical properties, so
   only the gauge, diagrams and numerals are fixed here.
   ========================================================== */
[dir="rtl"] .fcr-method::before { transform-origin: right center; }
[dir="rtl"] .fcr-gauge-range,
[dir="rtl"] .fcr-gauge-view svg,
[dir="rtl"] .fcr-type-art svg { direction: ltr; }
[dir="rtl"] .fcr-gauge-val strong,
[dir="rtl"] .fcr-gauge-val span,
[dir="rtl"] .fcr-verdict-count strong,
[dir="rtl"] .fcr-ba-facts dd,
[dir="rtl"] .fcr-spec dd,
[dir="rtl"] .fcr-flow-num { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .fcr-gauge-val strong,
[dir="rtl"] .fcr-ba-facts dd { text-align: right; }
[dir="rtl"] .fcr-sev { letter-spacing: 0; }
[dir="rtl"] .fcr-form-note a { direction: ltr; unicode-bidi: isolate; }

/* ==========================================================
   Projects page (projects.html)
   Grids, cards, chips and the picker use logical properties,
   so only numerals, letter-spacing and the slider are fixed.
   ========================================================== */
[dir="rtl"] .pj-badge, [dir="rtl"] .pj-facts dt { letter-spacing: 0; }
[dir="rtl"] .pj-stat strong { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .pj-chip-n { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .pj-stage .ba-slider { direction: ltr; }
[dir="rtl"] .pj-view .arrow { transform: scaleX(-1); }
[dir="rtl"] .pj-card .link-arrow:hover .arrow { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .pj-pick:hover { transform: translateX(-4px); }
@media (max-width: 1100px) {
  [dir="rtl"] .pj-pick:hover { transform: translateY(-2px); }
}
/* ==========================================================================
   Completed Projects page (RTL)
   ========================================================================== */
[dir="rtl"] .cp-detail::before{transform-origin:right center}
[dir="rtl"] .cp-badge,[dir="rtl"] .cp-spec dt,[dir="rtl"] .cp-ps small,
[dir="rtl"] .cp-strip small,[dir="rtl"] .cp-flag,[dir="rtl"] .cp-lb-count{letter-spacing:0}
[dir="rtl"] .cp-chip-n,[dir="rtl"] .cp-bar-head span:last-child,
[dir="rtl"] .cp-snap strong,[dir="rtl"] .cp-lb-count{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .cp-feature-media .ba-slider{direction:ltr}
[dir="rtl"] .cp-thumb svg,[dir="rtl"] .cp-lb-stage svg{direction:ltr}
/* ==========================================================================
   Project Details page (RTL)
   Grids, cards and the timeline use logical properties; only the
   photo markers, numerals, slider and letter-spacing are fixed here.
   ========================================================================== */
[dir="rtl"] .pd-compare-media .ba-slider { direction: ltr; }
[dir="rtl"] .pd-glance-list dd,
[dir="rtl"] .pd-meter-head b,
[dir="rtl"] .pd-results-stats strong,
[dir="rtl"] .pd-table li span:not(:first-child) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .pd-table li span:not(:first-child) { text-align: right; }
[dir="rtl"] .pd-quote > .icon { transform: scaleX(-1); }
[dir="rtl"] .pd-flag, [dir="rtl"] .pd-table-head { letter-spacing: 0; }
/* ==========================================================================
   Blog page (RTL)
   Grids, cards and chips use logical properties; only the search
   field, numerals and letter-spacing are fixed here.
   ========================================================================== */
[dir="rtl"] .bl-chip-n,
[dir="rtl"] .bl-hero-facts strong,
[dir="rtl"] .bl-meta li { unicode-bidi: plaintext; }
[dir="rtl"] .bl-chip-n { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .bl-search input,
[dir="rtl"] .bl-news-form input { text-align: start; }
[dir="rtl"] .bl-news-form input[type="email"] { direction: ltr; text-align: right; }
[dir="rtl"] .bl-news-form input[type="email"]::placeholder { text-align: right; }
[dir="rtl"] .bl-badge, [dir="rtl"] .bl-flag, [dir="rtl"] .bl-tag { letter-spacing: 0; }