/* themes.css — page-designer thematic motifs. Layered on top of Design A base. */

/* chain_journey — for roadmap-like sequential pages */
body.theme-chain main::before {
  content: ""; position: fixed; top: 96px; left: 24px; bottom: 24px; width: 3px;
  background: repeating-linear-gradient(to bottom, #c14a2b 0 12px, transparent 12px 20px);
  opacity: .35; pointer-events: none; z-index: 1;
}

/* ─── wayfinding-stones (v2 — actually rendering) ────────────────────────
 * Six laterite footpath markers. Inline stone rendered as ::before flex-child
 * because h2.sect is display:flex — absolute positioning was getting eaten. */

body.theme-wayfinding-stones .hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(193,74,43,.10), transparent 55%),
    radial-gradient(circle at 12% 90%, rgba(122,43,9,.08),  transparent 45%);
  position: relative;
}

/* Cluster of five stones under the hero intro */
body.theme-wayfinding-stones .hero::after {
  content: "";
  display: block;
  width: 240px; height: 72px;
  margin: 28px auto 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'><g fill='%23c14a2b' opacity='0.85'><ellipse cx='20' cy='42' rx='9' ry='6' transform='rotate(-8 20 42)'/><ellipse cx='55' cy='36' rx='8' ry='5.5' transform='rotate(12 55 36)'/><ellipse cx='95' cy='44' rx='10' ry='6.5' transform='rotate(-4 95 44)'/><ellipse cx='140' cy='38' rx='8.5' ry='5' transform='rotate(7 140 38)'/><ellipse cx='180' cy='45' rx='9.5' ry='6' transform='rotate(-10 180 45)'/></g><g stroke='%235a3a1a' stroke-width='0.8' fill='none' stroke-dasharray='2 4' opacity='0.55'><path d='M28 41 Q40 30 47 36'/><path d='M63 35 Q76 40 87 42'/><path d='M105 43 Q120 32 132 38'/><path d='M148 38 Q160 45 172 44'/></g></svg>") center/contain no-repeat;
  opacity: .95;
}

/* Stone marker prefixed to each section heading. h2.sect is display:flex so
 * we make the stone a real inline flex child, not an absolute pseudo. */
body.theme-wayfinding-stones h2.sect { margin-top: 3em; align-items: center; }

body.theme-wayfinding-stones h2.sect::before {
  content: attr(data-step);
  flex: 0 0 auto;
  order: -1;
  width: 2em; height: 2em;
  display: grid; place-items: center;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 12px; font-weight: 500;
  color: #fff;
  background:
    radial-gradient(ellipse at 42% 35%, #d15a3c 0 55%, #c14a2b 60%, #a03818 100%);
  box-shadow:
    inset -2px -3px 6px rgba(90,30,10,.35),
    inset 2px 2px 4px rgba(255,220,200,.25),
    2px 3px 0 rgba(122,43,9,.15);
  border-radius: 62% 38% 55% 45% / 48% 52% 46% 54%;
  margin-right: 4px;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  will-change: transform;
}
/* Touch / hover — the stone tips, wobbles, then settles. Individual per-nth
   rotations below already give it a resting tilt; hover adds a playful nudge. */
body.theme-wayfinding-stones h2.sect:hover::before,
body.theme-wayfinding-stones h2.sect:focus-within::before,
body.theme-wayfinding-stones h2.sect:active::before,
body.theme-wayfinding-stones h2.sect.stone-tap::before {
  animation: stone-tumble .7s cubic-bezier(.34,1.56,.64,1);
  box-shadow:
    inset -2px -3px 6px rgba(90,30,10,.4),
    inset 2px 2px 4px rgba(255,220,200,.3),
    4px 6px 12px rgba(122,43,9,.35);
}
@keyframes stone-tumble {
  0%   { transform: rotate(0) scale(1); }
  25%  { transform: rotate(-18deg) scale(1.08) translateY(-3px); }
  55%  { transform: rotate(22deg) scale(1.05) translateY(-1px); }
  80%  { transform: rotate(-6deg) scale(1.02); }
  100% { transform: rotate(0) scale(1); }
}

/* Hero cluster — the five stones drift when you hover the hero */
body.theme-wayfinding-stones .hero::after {
  transition: transform .8s ease, opacity .4s ease;
}
body.theme-wayfinding-stones .hero:hover::after {
  transform: translateX(2px) rotate(1.5deg);
  opacity: 1;
}

/* Make the section headings tappable-looking on mobile so the interaction is discoverable */
body.theme-wayfinding-stones h2.sect { user-select: none; }
body.theme-wayfinding-stones h2.sect:nth-of-type(2n)::before {
  border-radius: 40% 60% 48% 52% / 55% 42% 58% 45%;
  transform: rotate(8deg);
}
body.theme-wayfinding-stones h2.sect:nth-of-type(3n)::before {
  border-radius: 55% 45% 62% 38% / 42% 58% 45% 55%;
  transform: rotate(-6deg);
}
body.theme-wayfinding-stones h2.sect:nth-of-type(4n)::before {
  border-radius: 48% 52% 40% 60% / 58% 42% 55% 45%;
  transform: rotate(4deg);
}
body.theme-wayfinding-stones h2.sect:nth-of-type(5n)::before {
  border-radius: 58% 42% 50% 50% / 45% 55% 42% 58%;
  transform: rotate(-9deg);
}

/* Dashed footpath connecting each stone to the previous section */
body.theme-wayfinding-stones h2.sect { position: relative; }
body.theme-wayfinding-stones h2.sect::after {
  content: "";
  position: absolute;
  left: 1em; top: -2.4em; height: 2em; width: 2px;
  background: repeating-linear-gradient(to bottom, #5a3a1a 0 4px, transparent 4px 9px);
  opacity: .55;
}
body.theme-wayfinding-stones h2.sect:first-of-type::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  body.theme-wayfinding-stones h2.sect::before { transform: none !important; animation: none !important; transition: none !important; }
  body.theme-wayfinding-stones .hero::after { transition: none !important; }
}



/* ═══ BEGIN theme:legible-meta ═══ */  /* page:sessions.html */
.theme-legible-meta{--ink-3:#6e6052}
@media (prefers-color-scheme:dark){.theme-legible-meta{--ink-3:#8a7f6d}}
/* ═══ END   theme:legible-meta ═══ */

/* ═══ BEGIN theme:exam-slip-stamp ═══ */  /* page:index.html */
.theme-exam-slip-stamp main {
  background-color: #f5f0e6;
  background-image: radial-gradient(circle at 10% 20%, rgba(193, 74, 43, 0.03) 2px, transparent 2px),
                    radial-gradient(circle at 90% 80%, rgba(193, 74, 43, 0.03) 1px, transparent 1px);
}
.theme-exam-slip-stamp h1,
.theme-exam-slip-stamp h2.sect {
  position: relative;
}
.theme-exam-slip-stamp h2.sect::after {
  content: '';
  position: absolute;
  bottom: -0.35em;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
  background-size: 8px 1px;
  opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
  .theme-exam-slip-stamp h2.sect::after {
    background-size: 4px 1px;
  }
}
/* ═══ END   theme:exam-slip-stamp ═══ */