/*
 * Zivaro interaction affordances
 * One visual contract for links, buttons, clickable cards and static content.
 * Loaded after page-specific styles on every published page.
 */

:root {
  --zv-action-ink: #124e73;
  --zv-action-border: #aebce6;
  --zv-action-surface: #f5f7ff;
  --zv-action-surface-hover: #e9edff;
  --zv-action-shadow: #d4daf0;
  --zv-link-accent: #6556d8;
  --zv-static-border: rgb(51 84 118 / 16%);
  --zv-static-surface: rgb(242 247 251 / 82%);
}

/*
 * Compact navigation actions.
 * The doubled class keeps this shared layer stronger than page-level variants
 * without using !important.
 */
.zv-action-link.zv-action-link {
  width: fit-content;
  max-width: 100%;
  min-height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.52rem 0.85rem;
  border: 1px solid var(--zv-action-border);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, #ffffff, var(--zv-action-surface));
  box-shadow: 0 0.18rem 0 var(--zv-action-shadow);
  color: var(--zv-action-ink);
  font-size: max(0.84rem, 1em);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.zv-action-link.zv-action-link:focus-visible {
  outline: 0.2rem solid rgb(101 86 216 / 42%);
  outline-offset: 0.2rem;
}

/*
 * Links inside prose remain links rather than becoming buttons.
 * A permanent underline makes email, policy and explanatory links explicit.
 */
.zv-prose-link.zv-prose-link {
  color: #176481;
  font-weight: 850;
  text-decoration-line: underline;
  text-decoration-thickness: 0.1rem;
  text-decoration-color: #39a99c;
  text-underline-offset: 0.24rem;
  cursor: pointer;
}

.zv-prose-link.zv-prose-link:focus-visible {
  border-radius: 0.2rem;
  outline: 0.18rem solid rgb(101 86 216 / 38%);
  outline-offset: 0.18rem;
}

/*
 * Fully clickable cards receive a persistent action marker.
 * Static cards never receive this marker.
 */
.zv-link-card.zv-link-card {
  position: relative;
  cursor: pointer;
}

.zv-link-card.zv-link-card::after {
  content: "←";
  position: absolute;
  inset-block-start: 0.68rem;
  inset-inline-end: 0.68rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border: 1px solid rgb(101 86 216 / 24%);
  border-radius: 0.58rem;
  background: #f1efff;
  box-shadow: 0 0.16rem 0 rgb(101 86 216 / 14%);
  color: var(--zv-link-accent);
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

/*
 * Static information cards may retain the site's surfaces and illustrations,
 * but they must not imply clickability through the mouse cursor.
 */
.zv-static-card.zv-static-card {
  cursor: default;
}

/*
 * Card collections use the same centered reading axis at every viewport.
 * This promotes the previously mobile-only alignment without touching prose,
 * forms, FAQ rows, navigation, process layouts or standalone text sections.
 */
body.content-page #main-content :where(
  .zv-skill-card,
  .hub-card,
  .offer-card,
  .activity-method-card,
  .mechanic-card,
  .math-path-card,
  .logic-path-card,
  .hebrew-skill-card,
  .core-skill-card,
  .age-progress-card,
  .age-card
) {
  text-align: center;
}

body.content-page #main-content :where(
  .zv-skill-card,
  .hub-card,
  .offer-card,
  .activity-method-card,
  .mechanic-card,
  .math-path-card,
  .logic-path-card,
  .hebrew-skill-card,
  .core-skill-card,
  .age-progress-card,
  .age-card
) :where(h2, h3, p) {
  margin-inline: auto;
  text-align: center;
}

body.content-page #main-content :where(
  .zv-skill-card,
  .hub-card,
  .offer-card,
  .activity-method-card,
  .math-path-card
) :where(.zv-skill-icon, .hub-card-icon, .activity-method-icon, .math-path-icon) {
  align-self: center;
  margin-inline: auto;
}

body.content-page #main-content :where(
  .zv-skill-card,
  .hub-card,
  .offer-card,
  .activity-method-card,
  .mechanic-card,
  .math-path-card,
  .logic-path-card,
  .hebrew-skill-card,
  .core-skill-card,
  .age-progress-card,
  .age-card
) .zv-action-link {
  align-self: center;
  margin-inline: auto;
}

/*
 * A few older skill cards use a direct image rather than the shared icon
 * wrapper. Keep those illustrations on the same centered axis too.
 */
body.content-page #main-content :where(
  .logic-path-card,
  .hebrew-skill-card,
  .core-skill-card
) > img {
  margin-inline: auto;
}

/*
 * The mathematical-path list remains easy to scan from the RTL start edge,
 * while the list itself is centered inside its card at every viewport.
 */
body[data-page-id="K-02"] #math-map .math-path-card > ul {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: start;
}

/*
 * One numbered-step contract across the site.
 * Page styles previously positioned some badges at a physical left edge or
 * gave equivalent steps different sizes and surfaces. The ID in this shared
 * selector deliberately outranks those page-specific rules.
 */
body #main-content .zv-skill-step-number {
  position: static;
  inset: auto;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border: 0;
  border-radius: 50%;
  background: var(--zv-link-accent);
  box-shadow: 0 0.35rem 0.85rem rgb(101 86 216 / 22%);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  transform: none;
}

body #main-content :where(article, li) > .zv-skill-step-number:first-child {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
}

/*
 * Numbered lists must follow the same vertical step geometry as numbered
 * cards. This also clears legacy two-column grids that left the text stranded
 * in a narrow RTL column after the number badge was centered.
 */
body #main-content li:has(> .zv-skill-step-number:first-child),
body #main-content article:has(> .zv-skill-step-number:first-child) {
  display: flex;
  flex-direction: column;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

body #main-content li:has(> .zv-skill-step-number:first-child) > :where(
  div,
  h3,
  strong,
  p,
  a
),
body #main-content article:has(> .zv-skill-step-number:first-child) > :where(
  div,
  h3,
  strong,
  p,
  a
) {
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

/*
 * Section-heading contract: a thematic icon always sits above its heading.
 * Several older page styles changed these wrappers to a row only on desktop,
 * which made the icon look offset in RTL. Keep one vertical reading axis at
 * every viewport instead.
 */
body #main-content :where(
  .about-boundary,
  .activity-answer-heading,
  .activity-methods-intro,
  .creativity-answer-heading,
  .logic-answer-heading,
  .logic-play-together,
  .logic-process-heading,
  .math-answer-heading,
  .math-section-heading-block,
  .motor-answer-heading,
  .play-formats-heading,
  .science-answer-heading,
  .skillx-answer-heading,
  .skill-card-heading
) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body #main-content :where(
  .about-boundary,
  .activity-answer-heading,
  .activity-methods-intro,
  .creativity-answer-heading,
  .logic-answer-heading,
  .logic-play-together,
  .logic-process-heading,
  .math-answer-heading,
  .math-section-heading-block,
  .motor-answer-heading,
  .play-formats-heading,
  .science-answer-heading,
  .skillx-answer-heading,
  .skill-card-heading
) > :where(span, img):first-child {
  align-self: center;
  margin-inline: auto;
}

body #main-content :where(
  .about-boundary,
  .activity-answer-heading,
  .activity-methods-intro,
  .creativity-answer-heading,
  .logic-answer-heading,
  .logic-play-together,
  .logic-process-heading,
  .math-answer-heading,
  .math-section-heading-block,
  .motor-answer-heading,
  .play-formats-heading,
  .science-answer-heading,
  .skillx-answer-heading,
  .skill-card-heading
) > div {
  width: 100%;
  text-align: center;
}

body #main-content :where(
  .about-boundary,
  .activity-answer-heading,
  .activity-methods-intro,
  .creativity-answer-heading,
  .logic-answer-heading,
  .logic-play-together,
  .logic-process-heading,
  .math-answer-heading,
  .math-section-heading-block,
  .motor-answer-heading,
  .play-formats-heading,
  .science-answer-heading,
  .skillx-answer-heading,
  .skill-card-heading
) :where(h2, h3, p) {
  margin-inline: auto;
  text-align: center;
}

body.content-page #main-content :where(
  .zv-skill-card,
  .hub-card,
  .activity-method-card
) :where(.world-skill-tags, .activity-method-tags) {
  justify-content: center;
}

body.content-page #main-content .offer-card > ul {
  padding-inline: 0;
  list-style-position: inside;
  text-align: center;
}

/* The skills hub uses a nested icon/title row; stack it on the same axis too. */
body[data-page-id="K-00"] #main-content .skill-card-heading {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

body[data-page-id="K-00"] #main-content .skill-card-heading > div {
  width: 100%;
  text-align: center;
}

/*
 * Facts and taxonomy labels are deliberately quieter and less button-like.
 * They remain readable but lose the plastic button shadow/active appearance.
 */
.zv-static-meta-group.zv-static-meta-group > :where(span, li) {
  border: 1px solid var(--zv-static-border);
  border-radius: 0.7rem;
  background: var(--zv-static-surface);
  box-shadow: none;
  color: #50647a;
  cursor: default;
  transform: none;
}

/* Known static cards that previously moved like links. */
.activity-moment-card.activity-moment-card:hover {
  border-color: color-mix(in srgb, var(--activity-accent) 30%, white);
  box-shadow: 0 0.55rem 1.4rem rgb(41 57 92 / 9%);
  transform: none;
}

.activity-method-card.activity-method-card:hover {
  box-shadow: 0 0.8rem 2rem rgb(24 52 86 / 8%);
  transform: none;
}

/* Breadcrumbs stay quiet, but reveal their link state on interaction. */
.breadcrumbs a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.08rem;
  text-underline-offset: 0.22rem;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.breadcrumbs a:focus-visible {
  color: var(--zv-action-ink);
  text-decoration-color: currentColor;
}

@media (hover: hover) {
  .zv-action-link.zv-action-link:hover {
    border-color: #887ae1;
    background: var(--zv-action-surface-hover);
    box-shadow: 0 0.25rem 0 #bfc6e6, 0 0.65rem 1.25rem rgb(72 65 145 / 12%);
    color: #3f349f;
    transform: translateY(-0.1rem);
  }

  .zv-prose-link.zv-prose-link:hover {
    color: #3f349f;
    text-decoration-color: currentColor;
  }

  .zv-link-card.zv-link-card:hover::after {
    border-color: #6556d8;
    background: #6556d8;
    color: #ffffff;
    transform: translateX(-0.08rem);
  }

  .breadcrumbs a:hover {
    color: var(--zv-action-ink);
    text-decoration-color: currentColor;
  }
}

@media (max-width: 42rem) {
  .zv-action-link.zv-action-link {
    min-height: 2.85rem;
    padding-inline: 0.8rem;
  }

  .zv-link-card.zv-link-card::after {
    width: 1.72rem;
    height: 1.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zv-action-link.zv-action-link,
  .zv-link-card.zv-link-card::after,
  .breadcrumbs a {
    transition: none;
  }
}