/**
 * RTL (Right-to-Left) CSS for Hebrew language support
 * This file contains all RTL-specific overrides for the Magshimim Next website
 */

/* ===================================
   HEBREW FONT IMPORTS
   =================================== */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* ===================================
   ROOT RTL DIRECTION AND TYPOGRAPHY
   =================================== */

[dir="rtl"] {
  font-family: "Noto Sans Hebrew", "David", "Arial", sans-serif;
  text-align: right;
  direction: rtl;
}

[dir="rtl"] body {
  font-family: "Noto Sans Hebrew", "David", "Arial", sans-serif;
  line-height: 1.6; /* Increased line-height for Hebrew readability */
}

/* ===================================
   TOP BAR RTL ADJUSTMENTS
   =================================== */


/* Remove flex-direction: row-reverse so .top-bar stays row in all directions */
[dir="rtl"] .top-bar {
  direction: ltr !important;
  flex-direction: row !important;
}

[dir="rtl"] .top-bar .logo {
  justify-content: flex-start !important;
  order: 0 !important;
}

[dir="rtl"] .actions {
  justify-content: flex-end !important;
  order: 1 !important;
  flex-direction: row !important;
}

[dir="rtl"] .actions.left-aligned {
  justify-content: flex-end; /* Flipped from flex-start */
}

/* ===================================
   HERO SECTION RTL ADJUSTMENTS
   =================================== */

[dir="rtl"] #hero-section {
  background: linear-gradient(to left, #a5d6d8, #81a7a9); /* Flipped gradient */
  flex-direction: row-reverse;
}

[dir="rtl"] #hero-section .text-block {
  text-align: right;
}

[dir="rtl"] #hero-section .actions {
  justify-content: flex-end; /* Align to right for Hebrew */
}

[dir="rtl"] #hero-section .image-box {
  order: 0; /* Image appears on left in RTL */
}

[dir="rtl"] #hero-section .text-block {
  order: 1; /* Text appears on right in RTL */
}

/* ===================================
   SECTIONS RTL LAYOUT
   =================================== */

[dir="rtl"] section {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .text-block {
  text-align: right;
}

[dir="rtl"] .text-block.centered {
  text-align: center; /* Keep centered elements centered */
}

[dir="rtl"] .center-text {
  text-align: center; /* Keep explicitly centered text centered */
}

/* ===================================
   DONATION SECTION RTL
   =================================== */

[dir="rtl"] .donation-box {
  text-align: center; /* Keep donation box centered */
}

[dir="rtl"] .donation-button {
  flex-direction: row-reverse; /* Icon on right side in Hebrew */
}

/* ===================================
   STATISTICS CARDS RTL
   =================================== */

[dir="rtl"] .Statistics-cards-container {
  direction: rtl;
}

[dir="rtl"] .card-background {
  text-align: center; /* Keep cards centered */
}

/* ===================================
   MEMBERS SECTION RTL
   =================================== */

[dir="rtl"] #members-container {
  direction: rtl;
}

[dir="rtl"] .carousel-wrapper {
  flex-direction: row;
  justify-content: space-between !important;
}
[dir="rtl"] .carousel-btn.carousel-prev {
  order: 2 !important;
}
[dir="rtl"] .carousel-container {
  order: 1 !important;
}
[dir="rtl"] .carousel-btn.carousel-next {
  order: 0 !important;
}
[dir="rtl"] .carousel-btn svg {
  transform: scaleX(-1);
}
[dir="rtl"] .carousel-track {
  flex-direction: row-reverse;
}
}

[dir="rtl"] .carousel-btn.carousel-prev {
  order: 2;
}
[dir="rtl"] .carousel-container {
  order: 1;
}
[dir="rtl"] .carousel-btn.carousel-next {
  order: 0;
}
}

[dir="rtl"] .carousel-btn.carousel-prev {
  order: 0;
}
[dir="rtl"] .carousel-container {
  order: 1;
}
[dir="rtl"] .carousel-btn.carousel-next {
  order: 2;
}
}

/* Only set order for carousel-container, not for buttons */
[dir="rtl"] .carousel-container {
  order: 1;
}
[dir="rtl"] .carousel-btn.carousel-prev,
[dir="rtl"] .carousel-btn.carousel-next {
  order: unset;
}
}

[dir="rtl"] .carousel-btn.carousel-prev {
  order: 2;
}
[dir="rtl"] .carousel-container {
  order: 1;
}
[dir="rtl"] .carousel-btn.carousel-next {
  order: 0;
}
}

[dir="rtl"] .carousel-container {
  order: 2;
}

[dir="rtl"] .carousel-btn.carousel-prev {
  order: 1;
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .carousel-btn.carousel-next {
  order: 0;
  margin-right: 0;
  margin-left: auto;
}

[dir="rtl"] .carousel-btn.carousel-prev {
  order: 1;
}

[dir="rtl"] .carousel-btn.carousel-next {
  order: 0;
}

/* Flip carousel arrows for RTL */
[dir="rtl"] .carousel-btn svg {
  transform: scaleX(-1);
}

[dir="rtl"] .carousel-track {
  flex-direction: row-reverse;
}

[dir="rtl"] .member-card-content {
  text-align: center; /* Keep member cards centered */
}

[dir="rtl"] .member-role-container {
  flex-direction: row-reverse; /* Icon on right side */
}

[dir="rtl"] .member-achievement {
  flex-direction: row-reverse; /* Icon on right side */
}

/* ===================================
   COMMUNITY GRAPHS RTL
   =================================== */

[dir="rtl"] .community-graphs {
  /* Charts remain LTR for data readability - only container direction changes */
  direction: ltr;
}

[dir="rtl"] .community-graphs canvas {
  direction: ltr; /* Keep chart data LTR */
}

/* ===================================
   SVG WRAPPER RTL
   =================================== */

[dir="rtl"] .svg-wrapper .svg-layer.bg {
  transform: scaleX(-1); /* Flip only decorative background SVGs */
}

/* Don't flip logo SVGs */
[dir="rtl"] .svg-wrapper .svg-layer.fg {
  transform: scaleX(1); /* Keep logo in correct orientation */
}

/* ===================================
   LANGUAGE SWITCHER RTL ADJUSTMENTS
   =================================== */

[dir="rtl"] .language-switcher-container {
  flex-direction: row-reverse;
}

[dir="rtl"] .language-options {
  flex-direction: row-reverse;
}

/* ===================================
   MOBILE RTL RESPONSIVENESS
   =================================== */

@media (max-width: 768px) {
  [dir="rtl"] .top-bar {
    flex-direction: row-reverse;
    padding-right: 15px;
    padding-left: 15px;
  }

  [dir="rtl"] section {
    flex-direction: column;
    text-align: right;
  }

  [dir="rtl"] .text-block {
    text-align: right;
    max-width: 100%;
    width: 100%;
  }

  [dir="rtl"] .text-block.centered {
    text-align: center;
  }

  /* Hero section mobile RTL */
  [dir="rtl"] #hero-section .actions {
    justify-content: flex-end;
    margin-top: 20px;
  }

  /* Statistics cards mobile RTL */
  [dir="rtl"] .Statistics-cards-container {
    direction: rtl;
    grid-template-columns: 1fr 1fr;
  }

  /* Members mobile RTL */
  [dir="rtl"] .carousel-wrapper {
    flex-direction: row-reverse;
  }

  /* Community graphs mobile */
  [dir="rtl"] .community-graphs {
    direction: ltr; /* Keep charts LTR on mobile too */
  }

  /* Donation box mobile */
  [dir="rtl"] .donation-box {
    text-align: center;
  }
}

@media (max-width: 480px) {
  [dir="rtl"] .top-bar {
    padding: 8px 12px;
  }

  [dir="rtl"] .actions {
    gap: 10px;
  }

  /* Single column stats on small mobile */
  [dir="rtl"] .Statistics-cards-container {
    grid-template-columns: 1fr;
    direction: rtl;
  }

  [dir="rtl"] .carousel-btn svg {
    transform: scaleX(-1);
  }
}

/* ===================================
   HEBREW TEXT IMPROVEMENTS
   =================================== */

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: "Noto Sans Hebrew", "David", "Arial", sans-serif;
  line-height: 1.4;
  font-weight: 700;
}

[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"]
  div:not(.member-card-content):not(.Statistics-cards-container):not(
    .carousel-container
  ) {
  font-family: "Noto Sans Hebrew", "David", "Arial", sans-serif;
  line-height: 1.6;
}

/* ===================================
   LINKS AND BUTTONS RTL
   =================================== */

[dir="rtl"] .links-logos {
  /* Keep social media links visually the same */
}

[dir="rtl"] a {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] a[href^="http"] {
  /* External links maintain their direction */
  direction: ltr;
  display: inline-block;
}

/* ===================================
   FORM ELEMENTS RTL (if any added later)
   =================================== */

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
  direction: ltr; /* Keep email/URL fields LTR */
  text-align: left;
}

/* ===================================
   ACCESSIBILITY RTL IMPROVEMENTS
   =================================== */

[dir="rtl"] [aria-label] {
  /* Ensure proper RTL handling for screen readers */
}

[dir="rtl"] .sr-only {
  /* Screen reader only text */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================
   GRADIENTS AND BACKGROUNDS RTL
   =================================== */

[dir="rtl"] .donation-button {
  background: linear-gradient(
    135deg,
    #8098c6 0%,
    #457b9d 100%
  ); /* Keep same gradient */
}

[dir="rtl"] .donation-button:hover {
  background: linear-gradient(
    135deg,
    #457b9d 0%,
    #0b4870 100%
  ); /* Keep same gradient */
}

/* ===================================
   ANIMATION ADJUSTMENTS FOR RTL
   =================================== */

[dir="rtl"] .card-background:hover {
  transform: translateY(-10px); /* Keep same hover effect */
}

[dir="rtl"] .carousel-btn:hover {
  transform: scale(1.1); /* Keep same hover effect */
}

[dir="rtl"] .donation-button:hover {
  transform: translateY(-2px); /* Keep same hover effect */
}

/* ===================================
   UTILITY CLASSES FOR RTL
   =================================== */

[dir="rtl"] .rtl-hidden {
  display: none;
}

[dir="ltr"] .ltr-hidden {
  display: none;
}

[dir="rtl"] .rtl-only {
  display: block;
}

[dir="ltr"] .rtl-only {
  display: none;
}

[dir="ltr"] .ltr-only {
  display: block;
}

[dir="rtl"] .ltr-only {
  display: none;
}

/* ===================================
   CHART.JS RTL SPECIFIC ADJUSTMENTS
   =================================== */

[dir="rtl"] .community-graphs .chartjs-tooltip {
  direction: rtl;
  text-align: right;
}

/* Keep chart canvas itself LTR for proper data visualization */
[dir="rtl"] .community-graphs canvas {
  direction: ltr !important;
}

/* ===================================
   DEBUGGING HELPERS (remove in production)
   =================================== */

/*
[dir="rtl"] * {
  outline: 1px solid red;
}
*/