/* Home Angels — Brain Tour
   Scoped entirely to .hab so it cannot leak into Divi's styles or vice versa. */

.hab,
.hab *,
.hab *::before,
.hab *::after { box-sizing: border-box; }

.hab {
  --hab-accent: #0C7264;
  --hab-accent-dark: #08544A;
  --hab-accent-soft: rgba(12, 114, 100, 0.28);
  --hab-hover: rgba(12, 114, 100, 0.30);
  --hab-hover-line: #08544A;
  --hab-ink: #1F2A2E;
  --hab-body: #42525A;
  --hab-muted: #6B7A80;
  --hab-line: #DFE5E3;
  --hab-sand: #F6F2EC;

  color: var(--hab-body);
  font-size: 18px;
  line-height: 1.7;
  max-width: 940px;
  margin-inline: auto;
  padding: 0 4px 8px;
  text-align: center;
}

/* ---------- prompt ---------- */

.hab__top { margin: 0 auto 26px; }

.hab__prompt {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--hab-ink);
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- figure ---------- */

.hab__figure {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

.hab__img { display: block; width: 100%; height: auto; }

.hab__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hab-hot {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  cursor: pointer;
  transition: fill .16s ease, stroke .16s ease;
  outline: none;
}

.hab-hot:hover {
  fill: var(--hab-hover);
  stroke: var(--hab-hover-line);
  stroke-width: 2.5;
}

/* Keyboard focus must be visible against a busy illustration, so it is heavier than hover
   rather than the same treatment. */
.hab-hot:focus-visible {
  fill: var(--hab-hover);
  stroke: var(--hab-hover-line);
  stroke-width: 4;
  stroke-dasharray: 6 3;
}

/* ---------- hotspot tooltip ---------- */

.hab__tip {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  margin-top: -10px;
  padding: 7px 12px;
  border-radius: 7px;
  background: var(--hab-ink);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease;
}

.hab__tip.is-on { opacity: 1; visibility: visible; }

/* The pointer. Sits under the pill and inherits its colour. */
.hab__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--hab-ink);
}

/* ---------- function icons ---------- */

/* site.css styles lists inside a Divi text module, `.et_pb_text ul { margin: 0 0 18px }`
   and a green dot `::before` on each `li` with a 30px indent to clear it. This component
   renders inside such a module, so the icon row inherited all of it: a stray dot beside
   every icon, and `margin: 0` replacing the `auto` side margins, which left the row stuck
   against the left edge of the container instead of centred.

   Every selector here carries the extra `.hab` class deliberately: `.et_pb_text ul` and
   `.et_pb_text ul li::before` would otherwise outweigh a bare `.hab__icons`. Fixed in this
   component's own stylesheet rather than in site.css, so ordinary copy lists keep bullets. */
.hab .hab__icons {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2px, 1vw, 12px);
  max-width: 100%;

  /* Pulled up under the illustration. The brain artwork sits on a head silhouette with a
     lot of empty neck below it, so without this the row floats miles from the diagram. */
  margin: -120px auto 0;

  /* The row overlaps the lower part of the figure, and the hotspot polygons live in there.
     Nothing in this list is interactive, so it is taken out of hit-testing entirely rather
     than sitting on top of the diagram swallowing clicks near the cerebellum. */
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.hab .hab-icon {
  padding-left: 0;
  margin-bottom: 0;
}

.hab .hab-icon::before { content: none; }

/* Only the functions belonging to the selected region are shown. Inactive icons leave the
   flow entirely rather than sitting there greyed out, so the row reads as a statement about
   this region instead of a legend with most of it switched off. The intro and cerebrum
   panels both list all nine, so the default state still shows the complete set, on one line,
   and the intro icons are marked is-on server-side so this works without JavaScript. */
.hab-icon { display: none; }

.hab-icon.is-on {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: clamp(62px, 9.6vw, 95px);
  font-size: clamp(.6rem, 1.05vw, .72rem);
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  color: var(--hab-accent);
  animation: hab-icon-in .28s ease both;
}

.hab-icon img {
  width: clamp(42px, 6.6vw, 68px);
  height: auto;
}

/* Softens the reflow when switching regions changes how many icons are on. */
@keyframes hab-icon-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- panels ---------- */

.hab__panel { margin-top: 34px; }

.hab-section { display: none; }
.hab-section.is-active { display: block; }
.hab-section:focus { outline: none; }

.hab-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--hab-accent);
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 26px;
}

.hab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85em;
  height: 1.85em;
  flex: none;
  border-radius: 50%;
  background: var(--hab-accent);
  color: #fff;
  font-size: .62em;
  font-weight: 700;
}

.hab-one {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.hab-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0;
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}

.hab-col { padding: 0 32px; }
.hab-col:first-child { border-right: 1px solid var(--hab-accent-soft); }

.hab-colhead {
  margin: 0 0 18px;
  padding-bottom: 12px;
  text-align: center;
  color: var(--hab-ink);
  text-transform: none;
  letter-spacing: .05em;
  font-size: .95rem;
  font-weight: 700;
  border-bottom: 2px solid var(--hab-accent);
}

.hab-col p,
.hab-one p {
  margin: 0 0 18px;
  color: var(--hab-body);
}

.hab-col p:last-child,
.hab-one p:last-child { margin-bottom: 0; }

.hab-lead {
  color: var(--hab-ink) !important;
  font-weight: 600;
}

/* ---------- sources ---------- */

.hab__sources {
  max-width: 700px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--hab-line);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--hab-muted);
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .hab-cols { grid-template-columns: 1fr; gap: 30px; }
  .hab-col { padding: 0; }
  .hab-col:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--hab-accent-soft);
    padding-bottom: 30px;
  }
}

/* Nine icons across a phone works out at roughly 38px each with unreadable labels, so the
   single line is a desktop and tablet arrangement only. The pull-up is eased off to match
   the smaller illustration. */
@media (max-width: 700px) {
  .hab .hab__icons {
    flex-wrap: wrap;
    gap: 14px 6px;
    margin-top: -60px;
    max-width: 460px;
  }
  .hab-icon.is-on { width: clamp(62px, 16.5vw, 88px); font-size: .69rem; }
  .hab-icon img { width: clamp(46px, 12vw, 58px); }
}

@media (max-width: 520px) {
  .hab { font-size: 17px; }
  .hab .hab__icons { margin-top: -40px; }
}

@media (prefers-reduced-motion: reduce) {
  .hab *,
  .hab *::before,
  .hab *::after {
    transition: none !important;
    animation: none !important;
  }
}