/*
 * he-styles.css
 * RTL overrides for Hebrew /he/ pages on coreppc.com
 * Load this AFTER the main stylesheet on all /he/ pages.
 * Author: Ynon — 2026-04-27
 */

/* ── Document-level RTL ── */
html[lang="he"] {
  direction: rtl;
  text-align: right;
}

/* ── Hebrew font stack ── */
html[lang="he"] body {
  font-family: "Assistant", "Rubik", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

/* ── Navigation RTL ── */
html[lang="he"] .nav-in {
  flex-direction: row-reverse;
}
html[lang="he"] nav.nav-links {
  flex-direction: row-reverse;
}
html[lang="he"] .nav-cta {
  flex-direction: row-reverse;
}
/* Dropdown arrow flip */
html[lang="he"] .nav-dd > span::after {
  margin-right: 5px;
  margin-left: 0;
}
/* Mega dropdown inner grid: RTL-safe */
html[lang="he"] .mega-w {
  direction: rtl;
}
html[lang="he"] .mega-grid {
  direction: rtl;
}
html[lang="he"] .mega-item {
  flex-direction: row-reverse;
  text-align: right;
}
/* Mobile nav */
html[lang="he"] .mob {
  text-align: right;
}

/* ── Flex rows: reverse for RTL ── */
html[lang="he"] .flex-row,
html[lang="he"] [class*="flex-row"] {
  flex-direction: row-reverse;
}

/* ── Trust bar ── */
html[lang="he"] .trust-bar {
  flex-direction: row-reverse;
}
html[lang="he"] .trust-bar .trust-item {
  border-right: none;
  border-left: 1px solid rgba(12, 132, 254, 0.15);
}
html[lang="he"] .trust-bar .trust-item:last-child {
  border-left: none;
}

/* ── Hero section ── */
html[lang="he"] .hero {
  text-align: right;
}
html[lang="he"] .hero h1,
html[lang="he"] .hero p.hero-sub {
  text-align: right;
  margin-right: 0;
  margin-left: auto;
}
html[lang="he"] .hero-btns {
  justify-content: flex-start;
}
html[lang="he"] .hero-proof {
  flex-direction: row-reverse;
}

/* ── Section titles and labels ── */
html[lang="he"] .section-title,
html[lang="he"] .section-label {
  text-align: right;
}

/* ── Problem / approach / result cards ── */
html[lang="he"] .problem-card,
html[lang="he"] .approach-step,
html[lang="he"] .result-card {
  text-align: right;
}
html[lang="he"] .approach-step {
  padding-right: 0;
  padding-left: 0;
}
html[lang="he"] .step-num {
  margin-left: 0;
  margin-right: 0;
}

/* ── Checklist items: flip checkmark to right ── */
html[lang="he"] .includes-list li {
  flex-direction: row-reverse;
  text-align: right;
}
html[lang="he"] .includes-list li::before {
  margin-right: 0;
  margin-left: 10px;
}

/* ── FAQ ── */
html[lang="he"] .faq-q {
  flex-direction: row-reverse;
  text-align: right;
}
html[lang="he"] .faq-q svg {
  margin-left: 0;
  margin-right: auto;
}
html[lang="he"] .faq-a {
  text-align: right;
}

/* ── Case study ── */
html[lang="he"] .case-meta {
  direction: rtl;
}
html[lang="he"] .case-quote {
  border-left: none;
  border-right: 3px solid var(--accent, #ff4d00);
  padding-left: 0;
  padding-right: 20px;
}

/* ── CTA section ── */
html[lang="he"] .cta-section {
  text-align: right;
}
html[lang="he"] .cta-buttons {
  justify-content: flex-start;
}

/* ── Forms: labels and inputs ── */
html[lang="he"] label {
  display: block;
  text-align: right;
}
html[lang="he"] input,
html[lang="he"] textarea,
html[lang="he"] select {
  text-align: right;
  direction: rtl;
}

/* ── Footer ── */
html[lang="he"] .foot-in {
  flex-direction: row-reverse;
}
html[lang="he"] .foot-links {
  flex-direction: row-reverse;
}
html[lang="he"] .foot-col h4,
html[lang="he"] .foot-col a {
  text-align: right;
}
html[lang="he"] .foot-brand {
  text-align: right;
}

/* ── Placeholder main content styling ── */
html[lang="he"] .he-placeholder {
  direction: rtl;
  text-align: right;
  padding: 120px 24px 80px;
  max-width: 800px;
  margin: 0 auto;
}
html[lang="he"] .he-placeholder h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text, #1a1a1a);
  line-height: 1.4;
}
html[lang="he"] .he-placeholder p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
  color: var(--text-light, #6b6b6b);
}
html[lang="he"] .he-placeholder .placeholder-badge {
  display: inline-block;
  background: rgba(255, 200, 0, 0.15);
  border: 1px solid rgba(255, 200, 0, 0.4);
  color: #a07000;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}

/* ── Article shell: 2-col layout for guide/blog pages ── */
.he-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
  background: #f7f7f5;
}
.he-shell > * { min-width: 0; }

/* Sidebar wrapper */
.sidebar { align-self: stretch; min-width: 0; }
.sidebar-sticky {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-bottom: 8px;
}
.sidebar-sticky::-webkit-scrollbar { width: 6px; }
.sidebar-sticky::-webkit-scrollbar-thumb { background: rgba(11,18,32,0.2); border-radius: 3px; }

/* Primary CTA card */
.card-primary {
  background: rgba(12,132,254,0.06);
  border: 1px solid rgba(12,132,254,0.2);
  border-radius: 12px;
  padding: 22px;
  text-align: right;
}
.card-primary h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; color: #0b1220; }
.card-primary .sub { margin: 0 0 16px; font-size: 14px; color: #374151; }
.card-primary .btn-sidebar {
  display: block;
  width: 100%;
  text-align: center;
  background: #0c84fe;
  color: #fff !important;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  text-decoration: none;
}
.card-primary .btn-sidebar:hover { background: #0a70d9; text-decoration: none; color: #fff !important; }
.card-primary .micro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: #6b7280;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.card-primary .micro .dots { display: inline-flex; flex-direction: row-reverse; }
.card-primary .micro .dot-user {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0c84fe, #34d399);
  border: 2px solid rgba(12,132,254,0.06);
  margin-left: -6px;
}
.card-primary .micro .dot-user:last-child { margin-left: 0; }

/* Score ring animation */
.score-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 18px;
  position: relative;
}
.score-ring svg { width: 116px; height: 116px; display: block; }
.score-ring .ring-bg { fill: none; stroke: rgba(12,132,254,0.12); stroke-width: 10; }
.score-ring .ring-fg {
  fill: none;
  stroke: url(#scoreGradient);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 314.159;
  stroke-dashoffset: 314.159;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22,1,0.36,1);
  filter: drop-shadow(0 0 6px rgba(12,132,254,0.18));
}
.score-ring.in-view .ring-fg { stroke-dashoffset: var(--target-offset, 84.823); }
.score-ring .score-num {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.score-ring .score-num .num { font-size: 34px; line-height: 1; letter-spacing: -0.02em; font-weight: 800; color: #0b1220; font-variant-numeric: tabular-nums; }
.score-ring .score-num .slash { font-size: 12px; color: #6b7280; margin-top: 3px; letter-spacing: 0.04em; }
.score-ring .score-caption { margin-top: 14px; font-size: 13px; color: #6b7280; text-align: center; }
.score-ring .score-caption strong { color: #0c84fe; font-weight: 700; }
.score-ring .score-pulse {
  position: absolute;
  top: 8px; left: 50%;
  width: 100px; height: 100px;
  margin-left: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12,132,254,0.15) 0%, rgba(12,132,254,0) 70%);
  opacity: 0;
  transition: opacity .6s ease-out;
  pointer-events: none;
}
.score-ring.in-view .score-pulse { animation: scorePulse 2.4s ease-out .4s 1 both; }
@keyframes scorePulse {
  0% { opacity: 0; transform: scale(0.7); }
  40% { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .score-ring .ring-fg { transition: none; stroke-dashoffset: var(--target-offset, 84.823); }
  .score-ring.in-view .score-pulse { animation: none; }
}

/* Secondary card */
.card-secondary {
  background: #ffffff;
  border: 1px solid rgba(11,18,32,0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: right;
}
.card-secondary h4 { margin: 0 0 6px; font-size: 16px; color: #0b1220; }
.card-secondary p { margin: 0 0 12px; font-size: 14px; color: #6b7280; }
.card-secondary a.link { font-weight: 600; font-size: 14px; color: #0c84fe; }

/* Cluster card: related guides */
.card-cluster {
  background: #ffffff;
  border: 1px solid rgba(11,18,32,0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: right;
}
.card-cluster .label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; margin-bottom: 12px; }
.card-cluster ul { list-style: none; margin: 0; padding: 0; }
.card-cluster li { margin: 0; padding: 8px 0; border-top: 1px solid rgba(11,18,32,0.1); font-size: 14px; line-height: 1.4; }
.card-cluster li:first-child { border-top: none; padding-top: 0; }
.card-cluster a { color: #374151; }
.card-cluster a:hover { color: #0c84fe; }

/* Page hero image */
.page-hero {
  margin: 0 0 32px;
  border-radius: 12px;
  overflow: hidden;
  background: #e8edf2;
  border: 1px solid rgba(11,18,32,0.1);
}
.page-hero img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* Mobile sticky bar */
.mobile-sticky-bar { display: none; }

/* Tablet: stack sidebar below main */
@media (max-width: 1024px) {
  .he-shell {
    grid-template-columns: 1fr;
    max-width: 760px;
    padding: 28px 24px 64px;
    gap: 36px;
  }
  .sidebar { align-self: auto; min-width: 0; }
  .sidebar-sticky { position: static; max-height: none; overflow: visible; padding-bottom: 0; }
}

/* Mobile: sticky bottom bar, tighter layout */
@media (max-width: 640px) {
  .he-shell { padding: 20px 16px 96px; gap: 28px; }
  html[lang="he"] body { padding-bottom: 72px; }
  .mobile-sticky-bar {
    display: flex;
    position: fixed; bottom: 0; right: 0; left: 0;
    background: #ffffff;
    border-top: 1px solid rgba(11,18,32,0.1);
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    gap: 12px;
    align-items: center;
    z-index: 100;
    box-shadow: 0 -6px 20px rgba(11,18,32,0.06);
    flex-direction: row-reverse;
  }
  .mobile-sticky-bar .copy { flex: 1; font-size: 12px; line-height: 1.35; color: #374151; text-align: right; }
  .mobile-sticky-bar .copy strong { display: block; color: #0b1220; font-size: 13px; font-weight: 700; }
  .mobile-sticky-bar a.cta {
    background: #0c84fe;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
  }
  .mobile-sticky-bar a.cta:hover { background: #0a70d9; text-decoration: none; color: #fff; }
  .score-ring svg { width: 104px; height: 104px; }
  .score-ring .score-num { height: 104px; }
  .score-ring .score-num .num { font-size: 30px; }
}

/* ── Mobile RTL adjustments ── */
@media (max-width: 768px) {
  html[lang="he"] .hero h1 {
    font-size: 28px;
    text-align: right;
  }
  html[lang="he"] .hero-btns {
    flex-direction: column;
    align-items: flex-start;
  }
  html[lang="he"] .trust-bar {
    flex-direction: column;
  }
  html[lang="he"] .trust-bar .trust-item {
    border-left: none;
    border-bottom: 1px solid rgba(12, 132, 254, 0.1);
  }
}