/* ==========================================================================
   Topic hub — /<topic>
   ========================================================================== */

.hub-block + .hub-block {
  margin-top: var(--cds-spacing-10);
}

.hub-block .section-header a {
  white-space: nowrap;
}

.hub-path {
  display: grid;
  gap: var(--cds-spacing-06);
}

.hub-path__levels {
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--cds-border-subtle);
  border: 1px solid var(--cds-border-subtle);
}

.hub-path__levels .level-nav__link {
  gap: var(--cds-spacing-03);
}

.hub-path__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-04) var(--cds-spacing-06);
}

@media (min-width: 42rem) {
  .hub-path__levels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Fun facts — comic sticky notes: taped to the page at a slight tilt, chunky ink outline,
   hard offset shadow, a cartoon reaction face with a speech bubble, and a "Mind blown?"
   button that makes the note boing. Colours are local tokens so dark mode can swap them. */
.fun-facts {
  --ff-ink: var(--cds-gray-100);
  --ff-tape: rgba(255, 255, 255, 0.55);
  --ff-note-1: #fff3a8; /* lemon */
  --ff-note-2: #c9f2ff; /* sky */
  --ff-note-3: #ffd6e7; /* bubblegum */
  list-style: none;
  margin: 0;
  padding: var(--cds-spacing-05) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cds-spacing-07) var(--cds-spacing-06);
}
.fun-fact {
  --ff-note: var(--ff-note-1);
  --ff-tilt: -1.6deg;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-04);
  margin: 0;
  padding: var(--cds-spacing-07) var(--cds-spacing-06) var(--cds-spacing-05);
  background: var(--ff-note);
  color: var(--ff-ink);
  border: 3px solid var(--ff-ink);
  border-radius: var(--cds-radius); /* square, like the rest of the site (Carbon) */
  box-shadow: 6px 6px 0 var(--ff-ink);
  transform: rotate(var(--ff-tilt));
  transition:
    transform var(--cds-duration-moderate) var(--cds-ease-expressive),
    box-shadow var(--cds-duration-moderate) var(--cds-ease-expressive);
}
.fun-fact:nth-child(3n + 2) { --ff-note: var(--ff-note-2); --ff-tilt: 1.2deg; }
.fun-fact:nth-child(3n + 3) { --ff-note: var(--ff-note-3); --ff-tilt: -0.8deg; }
.fun-fact:hover,
.fun-fact:focus-within {
  transform: rotate(0deg) translate(-3px, -4px);
  box-shadow: 10px 10px 0 var(--ff-ink);
}

/* A strip of washi tape holding the note on. */
.fun-fact__tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 92px;
  height: 26px;
  background: var(--ff-tape);
  border: 1px dashed rgba(22, 22, 22, 0.25);
  transform: translateX(-50%) rotate(-4deg);
  backdrop-filter: blur(1px);
}
.fun-fact:nth-child(3n + 2) .fun-fact__tape { transform: translateX(-50%) rotate(5deg); }

.fun-fact__head {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-04);
}
.fun-fact__face {
  flex: none;
  width: 56px;
  height: 56px;
  color: var(--ff-ink);
  transform-origin: 50% 80%;
}
.fun-fact__face svg { display: block; width: 100%; height: 100%; }
.fun-fact:hover .fun-fact__face { animation: ff-wobble 0.6s ease-in-out; }

/* Speech bubble with a little tail pointing back at the face. */
.fun-fact__bubble {
  position: relative;
  padding: 6px 12px;
  background: var(--cds-white);
  color: var(--ff-ink);
  border: 2.5px solid var(--ff-ink);
  border-radius: var(--cds-radius);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  transform: rotate(-2deg);
}
.fun-fact__bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--cds-white);
  border-left: 2.5px solid var(--ff-ink);
  border-bottom: 2.5px solid var(--ff-ink);
  transform: translateY(-50%) rotate(45deg);
}

.fun-fact__text {
  flex: 1;
  margin: 0;
  color: var(--ff-ink);
  font-size: 1rem;
  line-height: 1.55;
}

.fun-fact__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-04);
  padding-top: var(--cds-spacing-04);
  border-top: 2px dashed rgba(22, 22, 22, 0.3);
}
.fun-fact__num {
  font-family: var(--cds-font-mono);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ff-ink);
  opacity: 0.45;
}
.fun-fact__react {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ff-ink);
  background: var(--cds-white);
  border: 2.5px solid var(--ff-ink);
  border-radius: var(--cds-radius);
  box-shadow: 3px 3px 0 var(--ff-ink);
  cursor: pointer;
  transition:
    transform var(--cds-duration-fast) var(--cds-ease-productive),
    box-shadow var(--cds-duration-fast) var(--cds-ease-productive);
}
.fun-fact__react:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ff-ink); }
.fun-fact__react:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ff-ink); }
.fun-fact__react:focus-visible { outline: 3px solid var(--cds-blue-60); outline-offset: 2px; }
.fun-fact__react[aria-pressed="true"] { background: var(--cds-yellow-30); }
.fun-fact__react-icon { display: inline-flex; width: 18px; height: 18px; }
.fun-fact__react-icon svg { width: 100%; height: 100%; }
.fun-fact__react[aria-pressed="true"] .fun-fact__react-icon { color: var(--cds-red-60); }
.fun-fact__react[aria-pressed="true"] .fun-fact__react-icon svg { fill: currentColor; fill-opacity: 0.25; }

.fun-fact.is-popping { animation: ff-boing 0.55s var(--cds-ease-expressive); }
.fun-fact.is-popping .fun-fact__face { animation: ff-blown 0.55s ease-out; }

@keyframes ff-wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-6deg); }
}
@keyframes ff-boing {
  0% { transform: rotate(var(--ff-tilt)) scale(1); }
  30% { transform: rotate(-3deg) scale(1.06); }
  55% { transform: rotate(2deg) scale(0.97); }
  80% { transform: rotate(-1deg) scale(1.02); }
  100% { transform: rotate(var(--ff-tilt)) scale(1); }
}
@keyframes ff-blown {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(-10deg); }
  100% { transform: scale(1); }
}

/* Dark mode: deeper, glowing notes; ink stays dark on the note for contrast, shadow goes light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fun-facts {
    --ff-note-1: #f5e27a;
    --ff-note-2: #9fe1f7;
    --ff-note-3: #f8b8d3;
  }
  :root:not([data-theme="light"]) .fun-fact,
  :root:not([data-theme="light"]) .fun-fact:hover { box-shadow: 6px 6px 0 var(--cds-gray-60); }
}
:root[data-theme="dark"] .fun-facts {
  --ff-note-1: #f5e27a;
  --ff-note-2: #9fe1f7;
  --ff-note-3: #f8b8d3;
}
:root[data-theme="dark"] .fun-fact,
:root[data-theme="dark"] .fun-fact:hover { box-shadow: 6px 6px 0 var(--cds-gray-60); }

@media (max-width: 800px) {
  .fun-facts { grid-template-columns: minmax(0, 1fr); gap: var(--cds-spacing-08); }
}

/* Carousel (more than three facts; topic.js). One row that scrolls sideways and snaps to cards;
   padding leaves room for the tape, the tilt and the hard shadow, which overflow would clip. */
.is-carousel .fun-facts {
  display: flex;
  gap: var(--cds-spacing-06);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--cds-spacing-03);
  scroll-behavior: smooth;
  padding: var(--cds-spacing-07) var(--cds-spacing-03) var(--cds-spacing-06);
  scrollbar-width: thin;
  scrollbar-color: var(--cds-border-strong) transparent;
}
.is-carousel .fun-facts:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}
.is-carousel .fun-fact {
  flex: 0 0 calc((100% - 2 * var(--cds-spacing-06)) / 3);
  scroll-snap-align: start;
}
@media (max-width: 800px) {
  .is-carousel .fun-fact { flex-basis: 85%; } /* one card and a peek of the next */
}

/* Prev / pause-play / next: square comic buttons that match the notes. */
.fun-facts__controls {
  display: flex;
  gap: var(--cds-spacing-03);
}
.fun-facts__btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--cds-text-primary);
  background: var(--cds-layer);
  border: 2px solid var(--cds-text-primary);
  border-radius: var(--cds-radius);
  box-shadow: 3px 3px 0 var(--cds-text-primary);
  cursor: pointer;
  transition:
    transform var(--cds-duration-fast) var(--cds-ease-productive),
    box-shadow var(--cds-duration-fast) var(--cds-ease-productive);
}
.fun-facts__btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--cds-text-primary); }
.fun-facts__btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--cds-text-primary); }
.fun-facts__btn:focus-visible { outline: 3px solid var(--cds-focus); outline-offset: 2px; }
.fun-facts__icon { display: inline-flex; width: 1rem; height: 1rem; }
.fun-facts__icon svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .is-carousel .fun-facts { scroll-behavior: auto; }
  .fun-facts__btn,
  .fun-facts__btn:hover,
  .fun-facts__btn:active { transform: none; transition: none; }
  .fun-fact,
  .fun-fact:hover,
  .fun-fact:focus-within { transform: none; transition: none; }
  .fun-fact:hover .fun-fact__face,
  .fun-fact.is-popping,
  .fun-fact.is-popping .fun-fact__face { animation: none; }
}