/* ===================================================================
   Unit 2 — Page 1: בעלות התפקידים בתוכנית
   Global tokens, header, footer, and sequential nav from theme.css.
   =================================================================== */

.ata-unit-page {
  max-width: var(--content);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.ata-unit-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: right;
}

.ata-unit-title-index,
.ata-unit-title-name {
  color: var(--teal);
}

.ata-unit-title-divider {
  color: var(--rose);
  padding: 0 0.625rem;
}

#athalta-unit2-page {
  width: 100%;
  direction: rtl;
  text-align: right;
  color: var(--navy);
}

.athalta-intro-section {
  width: 100%;
  margin: 0 0 2.5rem;
}

.athalta-intro-title {
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0;
  color: var(--teal);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  direction: rtl;
  text-align: right;
}

.athalta-intro-text,
.athalta-body-text,
.athalta-list-intro {
  width: 100%;
  max-width: var(--prose-measure);
  margin: 0;
  color: var(--navy);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.02em;
  direction: rtl;
  text-align: right;
  text-wrap: pretty;
}

.athalta-intro-text strong,
.athalta-body-text strong {
  font-weight: 700;
}

.athalta-instruction {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: 100%;
  margin: 1rem 0 0;
  margin-inline-end: auto;
  color: var(--teal);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.5;
  direction: rtl;
  text-align: right;
}

.athalta-click-icon {
  display: block;
  width: 3.125rem;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.athalta-roles-container {
  width: 100%;
  margin: 0 0 1.5rem;
  direction: rtl;
  text-align: right;
}

.athalta-timeline-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem 1rem;
  width: 100%;
  margin: 0 0 2.75rem;
  direction: rtl;
}

.athalta-timeline {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.athalta-step {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.3s ease;
}

.athalta-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  transition: all 0.3s ease;
}

.athalta-circle svg {
  display: block;
  width: 1rem;
  height: auto;
  flex-shrink: 0;
}

.athalta-divider {
  display: block;
  width: 4rem;
  height: 0;
  margin: 0 0.5rem;
  border-top: 0.1875rem solid var(--rose);
  flex-shrink: 0;
}

.athalta-step-text {
  display: none;
  margin-inline-start: 0.75rem;
  color: var(--rose);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.3;
  direction: rtl;
  text-align: right;
}

.is-pending .athalta-circle,
.is-completed .athalta-circle {
  background: #ccebec;
  color: var(--navy);
}

.is-active .athalta-circle {
  background: var(--rose);
  color: var(--white);
}

.is-active .athalta-step-text {
  display: block;
}

.athalta-inner-dot {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #feece9;
}

.athalta-role-stage {
  width: 100%;
}

.athalta-content-wrapper {
  width: 100%;
  min-width: 0;
}

.athalta-role-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0.35rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.athalta-role-nav-icon {
  display: block;
  width: 2.25rem;
  max-width: 2.25rem;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.athalta-role-nav-icon-prev {
  transform: scaleX(-1);
}

.athalta-role-nav:hover:not(:disabled) .athalta-role-nav-icon {
  transform: translateX(-0.18rem);
}

.athalta-role-nav-prev:hover:not(:disabled) .athalta-role-nav-icon-prev {
  transform: scaleX(-1) translateX(-0.18rem);
}

.athalta-role-nav:focus-visible {
  border-radius: 0.5rem;
}

.athalta-role-nav:disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.athalta-content-section {
  display: none;
  opacity: 0;
  direction: rtl;
  text-align: right;
}

.athalta-content-section.active-content {
  display: block;
  opacity: 1;
  animation: athaltaUnit2FadeIn 0.4s ease;
}

.athalta-title {
  display: inline;
  margin: 0 0 1.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: 0.7rem;
  background: #ccebec;
  color: var(--navy);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.5;
  direction: rtl;
  text-align: right;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.athalta-content-section.active-content .athalta-title {
  display: inline-block;
  margin-bottom: 1.25rem;
}

.athalta-list-intro {
  margin-top: 0.75rem;
}

.athalta-role-list {
  max-width: var(--prose-measure);
  margin: 0.6rem 0 1rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 0;
  color: var(--navy);
  font-size: var(--text-body);
  line-height: 1.7;
  direction: rtl;
  text-align: right;
}

.athalta-role-list li {
  margin-bottom: 0.25rem;
}

.athalta-body-text + .athalta-body-text {
  margin-top: 0.75rem;
}

@keyframes athaltaUnit2FadeIn {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 64rem) {
  .athalta-timeline {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    min-width: 0;
    flex: 1 1 auto;
  }

  .athalta-timeline::-webkit-scrollbar {
    display: none;
  }

  .athalta-step {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .athalta-step-text {
    margin-inline-start: 0.5rem;
    white-space: nowrap;
  }

  .athalta-divider {
    width: 2.5rem;
    margin: 0 0.35rem;
  }
}

@media (max-width: 47.9375rem) {
  .athalta-timeline-row {
    margin-bottom: 1.75rem;
    gap: 0.4rem 0.65rem;
  }

  .athalta-timeline {
    margin-bottom: 0;
  }

  .athalta-divider {
    width: 0.7rem;
    margin: 0 0.1rem;
  }

  .athalta-circle {
    width: 1.65rem;
    min-width: 1.65rem;
    font-size: 0.75rem;
  }

  .athalta-step-text {
    font-size: 0.8125rem;
    line-height: 1.25;
    margin-inline-start: 0.3rem;
    white-space: normal;
    max-width: 6.75rem;
  }

  .athalta-timeline {
    overflow: visible;
    gap: 0.2rem;
  }

  .athalta-role-nav {
    padding: 0.2rem;
  }

  .athalta-role-nav-icon {
    width: 1.5rem;
    max-width: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .athalta-step,
  .athalta-circle,
  .athalta-role-nav,
  .athalta-role-nav-icon,
  .athalta-content-section.active-content {
    transition: none;
    animation: none;
  }
}

html,
body {
  background-color: #ffffff;
  background-image: none;
}

.page-bg {
  display: none;
  background-image: none;
}

.u2p1-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: hidden;
  background-color: #ffffff;
  background-image: none;
}

.u2p1-pipes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.u2p1-pipe {
  position: absolute;
  z-index: 0;
  display: block;
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
}

.u2p1-pipe-side {
  top: 0.35rem;
  left: -0.55rem;
  width: 11.5rem;
}

.u2p1-pipe-bottom {
  left: 0.5rem;
  bottom: -9rem;
  width: 54rem;
}

.site-header,
.site-footer {
  position: relative;
  z-index: 10;
  background-color: #ffffff;
  background-image: none;
}

.ata-unit-title,
.athalta-intro-section,
.athalta-roles-container,
.athalta-timeline-row,
.athalta-role-stage,
.ata-sequential-nav,
.ata-nav-prev,
.ata-nav-next {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .u2p1-pipe-side {
    top: 0.25rem;
    left: -1.5rem;
    width: 9rem;
  }

  .u2p1-pipe-bottom {
    left: -1rem;
    bottom: 0;
    width: 22rem;
  }
}