/* ═══════════════════════════════════════════════════════════════
   LTR OVERRIDE — loaded only when html[dir="ltr"] (English locale)
   Reverses all RTL-specific rules from main.css
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. BASE DIRECTION ─────────────────────────────────────── */
html[dir="ltr"] body {
  direction: ltr;
  text-align: left;
}

/* Sections that hardcode direction: rtl */
html[dir="ltr"] #services,
html[dir="ltr"] .ctc-input,
html[dir="ltr"] .ctc-textarea {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .ctc-input::placeholder,
html[dir="ltr"] .ctc-textarea::placeholder {
  text-align: left;
}

/* ── 2. NAVBAR ─────────────────────────────────────────────── */

/* Chevron gap: flip from margin-right to margin-left */
html[dir="ltr"] .nav-item--has-drop>.main-nav__link::after {
  margin-right: 0;
  margin-left: 7px;
}

/* Dropdown panel: was right-anchored, now left-anchored */
html[dir="ltr"] .nav-dropdown {
  right: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
}

html[dir="ltr"] .nav-item--has-drop:hover>.nav-dropdown,
html[dir="ltr"] .nav-item--has-drop:focus-within>.nav-dropdown {
  transform: translateX(-50%) translateY(0);
}

/* Dropdown item icon: was on the right side, now left */
html[dir="ltr"] .nav-dropdown__item {
  flex-direction: row;
}

/* ── 3. BREADCRUMB SEPARATOR ───────────────────────────────── */
/* Flip the ← arrow to face right (→) */
html[dir="ltr"] .page-breadcrumb__sep {
  display: inline-block;
  transform: scaleX(-1);
}

/* ── 4. PAGE HERO ──────────────────────────────────────────── */
html[dir="ltr"] .page-hero__content {
  text-align: left;
}

/* ── 5. ABOUT / SERVICE SIDEBAR LAYOUT ────────────────────── */
/*
  Grid is: sidebar | content
  In RTL: sidebar appears RIGHT, content appears LEFT (grid flows RTL)
  In LTR: sidebar appears LEFT, content appears RIGHT (natural LTR order) ✓
  No override needed — direction change handles it automatically.

  However, the sidebar-nav CTA button and sidebar-card need text-align fix:
*/
html[dir="ltr"] .sidebar-card__title,
html[dir="ltr"] .sidebar-card--cta p,
html[dir="ltr"] .sidebar-card--cta h3 {
  text-align: left;
}

/* ── 6. ACTIVITY CARDS ─────────────────────────────────────── */
html[dir="ltr"] .act-card__content {
  text-align: left;
}

html[dir="ltr"] .act-card__footer {
  flex-direction: row;
}

/* ── 7. ACTIVITIES FILTER BAR ──────────────────────────────── */
html[dir="ltr"] .act-filter {
  flex-direction: row;
  justify-content: flex-start;
}

/* ── 8. SERVICES SECTION ───────────────────────────────────── */
html[dir="ltr"] .svc-header {
  text-align: center;
}

html[dir="ltr"] .svc-eyebrow {
  justify-content: center;
}



/* ── 10. HERO SECTION ─────────────────────────────────────── */
html[dir="ltr"] .hero-content,
html[dir="ltr"] .hero-tagline,
html[dir="ltr"] .hero-title,
html[dir="ltr"] .hero-description,
html[dir="ltr"] .hero-cta {
  text-align: left;
}

/* sc-container text wrapper — hardcoded text-align:right */
html[dir="ltr"] .sc-container>.container {
  text-align: left;
}

html[dir="ltr"] .hero-cta {
  align-self: flex-start;
}

/* ── 11. CONTACT SECTION ──────────────────────────────────── */
/* ctc-info-panel has border-right (separates it from form in RTL).
   In LTR, the panels order flips so the border should be on the right of the info panel.
   Since direction:ltr flips flex order, the border naturally stays correct */
html[dir="ltr"] .ctc-info-panel {
  border-right: none;
  border-left: 1px solid rgba(184, 144, 80, 0.15);
}


html[dir="ltr"] .ctc-header,
html[dir="ltr"] .ctc-title,
html[dir="ltr"] .ctc-subtitle,
html[dir="ltr"] .ctc-eyebrow,
html[dir="ltr"] .why-eyebrow,
html[dir="ltr"] .why-header,
html[dir="ltr"] .why-heading,
html[dir="ltr"] .why-sub {
  text-align: center;
}

html[dir="ltr"] .ctc-eyebrow {
  justify-content: flex-start;
}

html[dir="ltr"] .ctc-info-title::after {
  right: auto;
  left: 0;
  margin-right: 0;
}

html[dir="ltr"] .ctc-info-list {
  text-align: left;
}

/* ── 12. FOOTER ───────────────────────────────────────────── */
html[dir="ltr"] .footer-copy {
  text-align: center;
  /* stays centered */
}

html[dir="ltr"] .footer-inner {
  flex-direction: row;
}

/* ── 13. MOBILE MENU ──────────────────────────────────────── */
html[dir="ltr"] .mobile-menu__link {
  text-align: left;
}

html[dir="ltr"] .mobile-menu__lang {
  justify-content: flex-start;
}

/* ── 14. INNER PAGES — SHOW/DETAIL ────────────────────────── */
html[dir="ltr"] .about-content__body.prose,
html[dir="ltr"] .about-content__body.prose p,
html[dir="ltr"] .about-content__body.prose li {
  text-align: left;
  direction: ltr;
}

/* Activity show page */
html[dir="ltr"] .act-show-body,
html[dir="ltr"] .act-show-body p,
html[dir="ltr"] .act-show-body li {
  text-align: left;
  direction: ltr;
}

/* ── 15. PAGINATION ───────────────────────────────────────── */
html[dir="ltr"] .pagination-wrap nav {
  flex-direction: row;
}

/* ── 15b. ACTIVITY SHOW BREADCRUMB ────────────────────────── */
/* act-breadcrumb__sep uses an SVG left-chevron (<); flip to (>) in LTR */
html[dir="ltr"] .act-breadcrumb__sep svg {
  transform: scaleX(-1);
}

/* ── 15c. ACTIVITY SHOW BODY — list indent direction ─────── */
html[dir="ltr"] .act-show-body ul,
html[dir="ltr"] .act-show-body ol {
  padding-right: 0;
  padding-left: 1.5rem;
}

/* ── 16. LIGHTBOX ARROWS — flip prev/next sides ───────────── */
html[dir="ltr"] .lb-arrow--prev {
  right: auto;
  left: 1.2rem;
}

html[dir="ltr"] .lb-arrow--next {
  left: auto;
  right: 1.2rem;
}

html[dir="ltr"] .lb-close {
  left: auto;
  right: 1.2rem;
}

/* ── 17. SWIPER / CAROUSELS ───────────────────────────────── */
html[dir="ltr"] .swiper-wrapper {
  flex-direction: row;
}

/* ── 18. ANIMATIONS — tagline / description in hero ────────── */
/* Some animations use translateX with RTL assumptions — keep neutral */

/* ── 19. FORM ELEMENTS ────────────────────────────────────── */
html[dir="ltr"] input[type="text"],
html[dir="ltr"] input[type="email"],
html[dir="ltr"] input[type="tel"],
html[dir="ltr"] textarea,
html[dir="ltr"] select {
  direction: ltr;
  text-align: left;
}

/* ── 20. LANG SWITCHER ────────────────────────────────────── */
html[dir="ltr"] .lang-switcher-btn {
  /* already styled, just ensure correct layout */
}

/* ── 21. act-show sidebar (single activity page) ─────────── */
html[dir="ltr"] .act-sidebar {
  order: 0;
  /* sidebar stays before content in DOM, appears LEFT in LTR */
}

/* ── 22. General text elements that default text-align right ── */
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] h4,
html[dir="ltr"] h5,
html[dir="ltr"] p,
html[dir="ltr"] li,
html[dir="ltr"] span,
html[dir="ltr"] label {
  /* Let direction:ltr handle text-align naturally */
  text-align: unset;
}

/* But centered elements should stay centered */
html[dir="ltr"] .text-center,
html[dir="ltr"] [style*="text-align: center"] {
  text-align: center !important;
}