/* ==========================================================================
   Rogabot RTL (Right-to-Left) Stylesheet (rtl.css)
   Full support for Hebrew (עברית) - תקן ישראלי 5568 & WCAG 2.1/2.2 AA
   Typography: Rubik & Heebo alongside JetBrains Mono
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=Rubik:wght@400;500;600;700;800&display=swap');

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

  /* Hebrew Optimized Typography System */
  --font-display: 'Rubik', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Heebo', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-sans: var(--font-body);
}

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-family: var(--font-body);
}

/* Enforce RTL on all text containers, headings, and cards */
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] div,
html[dir="rtl"] article,
html[dir="rtl"] section,
html[dir="rtl"] li,
html[dir="rtl"] .stat-card,
html[dir="rtl"] .feature-card,
html[dir="rtl"] .four-q-card,
html[dir="rtl"] .dashboard-metric-box,
html[dir="rtl"] .calc-breakdown,
html[dir="rtl"] .calc-item,
html[dir="rtl"] .modal-card,
html[dir="rtl"] .modal-card--nav,
html[dir="rtl"] .step-card,
html[dir="rtl"] .step-card-header,
html[dir="rtl"] .step-body-text,
html[dir="rtl"] .deliverable-item,
html[dir="rtl"] .deliverable-content,
html[dir="rtl"] .pricing-card,
html[dir="rtl"] .pricing-header,
html[dir="rtl"] .card-header,
html[dir="rtl"] .accordion-item,
html[dir="rtl"] .accordion-trigger,
html[dir="rtl"] .accordion-content {
  direction: rtl;
  text-align: right;
}

/* Legal Header Centering in RTL */
html[dir="rtl"] .legal-header,
html[dir="rtl"] .legal-header .section-subtitle,
html[dir="rtl"] .legal-header h1,
html[dir="rtl"] .legal-header .legal-meta {
  text-align: center !important;
}


/* Headings font inheritance */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .nav-logo-text {
  font-family: var(--font-display);
  letter-spacing: normal;
}

/* Navigation RTL Layout */
html[dir="rtl"] .nav-inner {
  flex-direction: row;
}

html[dir="rtl"] .nav-brand {
  margin-right: 0;
  margin-left: clamp(1.5rem, 3.5vw, 3.5rem);
  text-align: right;
  justify-content: flex-start;
  align-self: center;
}

html[dir="rtl"] .modal-nav-header .nav-brand,
html[dir="rtl"] .footer-brand-col .nav-brand {
  margin-right: 0;
  margin-left: 0;
}

html[dir="rtl"] .nav-links {
  margin-right: var(--space-lg, 2rem);
  margin-left: 0;
}

html[dir="rtl"] .nav-actions {
  margin-right: auto;
  margin-left: 0;
}

html[dir="rtl"] .lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  min-height: 44px;
  min-width: 44px;
}

html[dir="rtl"] .lang-switch-btn:hover {
  border-color: var(--accent-cyan);
  background: var(--bg-card-hover);
  color: var(--accent-cyan);
}

/* Icons mirroring & orientation */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .feature-link svg,
html[dir="rtl"] .inline-link svg {
  transform: scaleX(-1);
}

/* Modal and Drawer Close Buttons */
html[dir="rtl"] .modal-close {
  left: 20px;
  right: auto;
}

html[dir="rtl"] .modal-badge-row {
  justify-content: flex-start;
}

/* Form Inputs and Labels */
html[dir="rtl"] .form-label,
html[dir="rtl"] .input-field,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .input-field[type="email"],
html[dir="rtl"] .input-field[type="url"],
html[dir="rtl"] .input-field[type="tel"],
html[dir="rtl"] code,
html[dir="rtl"] pre {
  direction: ltr;
  text-align: left;
}

/* Select icon positioning */
html[dir="rtl"] .select-wrapper::after {
  left: 16px;
  right: auto;
}

/* Hero & Badges */
html[dir="rtl"] .hero-badge,
html[dir="rtl"] .section-badge,
html[dir="rtl"] .pill-badge {
  flex-direction: row;
}

html[dir="rtl"] .badge-dot,
html[dir="rtl"] .pulse-dot {
  margin-left: 8px;
  margin-right: 0;
}

/* Lists and Checkmarks */
html[dir="rtl"] .feature-item svg,
html[dir="rtl"] .pricing-feature svg,
html[dir="rtl"] .checklist-item svg {
  margin-left: 10px;
  margin-right: 0;
}

/* Grid Cards & Alignment */
html[dir="rtl"] .card-header,
html[dir="rtl"] .pricing-header,
/* FAQ Alignment */
html[dir="rtl"] .faq-item,
html[dir="rtl"] .faq-trigger,
html[dir="rtl"] .faq-content,
html[dir="rtl"] .faq-inner,
html[dir="rtl"] .faq-panel,
html[dir="rtl"] .faq-panel p,
html[dir="rtl"] .faq-inner p {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .faq-trigger {
  flex-direction: row;
  justify-content: space-between;
  text-align: right;
}

html[dir="rtl"] .faq-icon {
  margin-left: 0;
  margin-right: auto;
  flex-shrink: 0;
}

/* Footer layout */
html[dir="rtl"] .footer-grid {
  text-align: right;
}

html[dir="rtl"] .footer-bottom-bar {
  flex-direction: row-reverse;
}

/* Risk Calculator & Metric Sliders */
html[dir="rtl"] .calc-slider-header {
  flex-direction: row;
  justify-content: space-between;
}

html[dir="rtl"] .risk-meter-labels {
  flex-direction: row-reverse;
}

/* Code Diff Blocks */
html[dir="rtl"] .audit-diff-block,
html[dir="rtl"] .code-preview-window,
html[dir="rtl"] .cli-box {
  direction: ltr;
  text-align: left;
}

/* Accessibility Hub Layout */
html[dir="rtl"] .article-sidebar {
  border-left: 1px solid var(--border-subtle);
  border-right: none;
}

html[dir="rtl"] .hub-search-input {
  padding: 1rem 3rem 1rem 1.25rem;
  text-align: right;
}

html[dir="rtl"] .hub-search-icon {
  right: 1.25rem;
  left: auto;
}

/* Tables and Responsive Wrappers in RTL */
html[dir="rtl"] .table-responsive-wrapper,
html[dir="rtl"] .matrix-overflow-wrap {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .article-table,
html[dir="rtl"] .matrix-table {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .article-table th,
html[dir="rtl"] .article-table td,
html[dir="rtl"] .matrix-table th,
html[dir="rtl"] .matrix-table td {
  text-align: right;
}

@media (max-width: 768px) {
  html[dir="rtl"] .site-header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  html[dir="rtl"] .site-header .container {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  html[dir="rtl"] .nav-inner {
    flex-direction: row;
    gap: 0.5rem;
  }

  html[dir="rtl"] .nav-brand {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 10px;
    flex-shrink: 1;
    min-width: 0;
  }

  html[dir="rtl"] .nav-actions {
    margin-left: 0 !important;
    margin-right: auto !important;
    gap: 8px;
    flex-shrink: 0;
  }

  html[dir="rtl"] .mobile-nav-icon {
    margin-left: 10px;
    margin-right: 0;
  }

  html[dir="rtl"] .mobile-nav-link {
    text-align: right;
    justify-content: flex-start;
  }

  html[dir="rtl"] .article-table td {
    text-align: right;
    align-items: flex-start;
  }

  html[dir="rtl"] .article-table td:nth-child(2)::before {
    content: "בדיקת Rogabot (קוד מקור):";
  }

  html[dir="rtl"] .article-table td:nth-child(3)::before {
    content: "סרגלי נגישות ותוספים:";
  }

  html[dir="rtl"] .article-table td .badge-success,
  html[dir="rtl"] .article-table td .badge-danger {
    text-align: right;
  }
}

@media (max-width: 580px) {
  html[dir="rtl"] .site-header .container {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  html[dir="rtl"] .nav-inner {
    gap: 0.35rem;
  }

  html[dir="rtl"] .nav-brand {
    gap: 8px;
  }

  html[dir="rtl"] .nav-actions {
    gap: 6px;
  }
}

@media (max-width: 360px) {
  html[dir="rtl"] .site-header .container {
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  }

  html[dir="rtl"] .nav-inner {
    gap: 0.25rem;
  }

  html[dir="rtl"] .nav-brand {
    gap: 6px;
  }

  html[dir="rtl"] .nav-actions {
    gap: 4px;
  }
}

/* ==========================================================================
   Inspector Workbench & Tab Navigation in RTL
   ========================================================================== */
html[dir="rtl"] .inspector-workbench {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .inspector-nav {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .inspector-tab-btn {
  direction: rtl;
  text-align: right;
  justify-content: flex-start;
  flex-direction: row;
}

html[dir="rtl"] .inspector-tab-text {
  text-align: right;
}

html[dir="rtl"] .inspector-wcag-badge {
  margin-right: auto;
  margin-left: 0;
}

html[dir="rtl"] .inspector-detail-card {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .inspector-detail-header,
html[dir="rtl"] .inspector-rule-meta,
html[dir="rtl"] .inspector-detail-desc,
html[dir="rtl"] .inspector-legal-note {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .inspector-legal-note {
  border-left: none;
  border-right: 3px solid #10b981;
}

html[dir="rtl"] .diff-box,
html[dir="rtl"] .diff-code-block,
html[dir="rtl"] .diff-code,
html[dir="rtl"] .diff-code-line {
  direction: ltr;
  text-align: left;
}

/* ==========================================================================
   AI Transformation Showcase RTL
   ========================================================================== */
html[dir="rtl"] .ai-transform-showcase {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .ai-transform-browser-frame {
  transform: perspective(1000px) rotateY(4deg) rotateX(2deg);
}

html[dir="rtl"] .ai-transform-browser-frame:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

html[dir="rtl"] .browser-url-pill {
  direction: ltr;
  text-align: left;
}