/* PB Pillars — Whole Person interactive wheel — [pb_pillars]
   Fonts inherit from the theme (Flink body, P22 Mackinac headings).
   Navy/mulberry map to the Beaver Builder global colour variables with
   hex fallbacks; segment colours are baked into the SVG (brand values). */

.pb-wheel {
  --pbw-navy: var(--ds-color-navy, #23375A);
  --pbw-mulberry: var(--ds-color-mulberry, #835263);
  container-type: inline-size;
  margin: 8px 0;
  color: var(--pbw-navy);
}

.pb-wheel .pbw-model {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
/* Side by side only when there is room for the panel to breathe: at the
   page's full width. Any narrower and the panel drops below (Paul, 13 Oct). */
@container (min-width: 720px) {
  .pb-wheel .pbw-model { grid-template-columns: minmax(280px, 360px) 1fr; gap: 32px; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1200px) {
    .pb-wheel .pbw-model { grid-template-columns: minmax(280px, 360px) 1fr; gap: 32px; }
  }
}

/* --- Diagram --- */
.pb-wheel .pbw-diagram { position: relative; width: 100%; max-width: 400px; margin: 0 auto; aspect-ratio: 1/1; }
.pb-wheel .pbw-diagram svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pb-wheel .pbw-seg { cursor: pointer; transition: opacity .25s ease, transform .25s ease; transform-origin: 200px 200px; }
.pb-wheel .pbw-seg path { transition: fill .25s ease, stroke-width .2s ease; }
.pb-wheel .pbw-seg text { transition: fill .25s ease; }
.pb-wheel .pbw-diagram.pbw-has-active .pbw-seg { opacity: .42; }
.pb-wheel .pbw-diagram.pbw-has-active .pbw-seg.pbw-is-active { opacity: 1; transform: scale(1.035); }
.pb-wheel .pbw-seg:focus { outline: none; }
/* Keyboard focus: the segments already carry a white edge on a white page,
   so a white focus stroke was invisible. Navy, 30 September 2026. */
.pb-wheel .pbw-seg:focus-visible path { stroke: var(--ds-color-navy, #23375A); stroke-width: 5; }
.pb-wheel .pbw-core { cursor: pointer; }
.pb-wheel .pbw-seg-label {
  font-family: inherit; font-weight: 800; font-size: 19px; letter-spacing: .02em;
  pointer-events: none; dominant-baseline: middle;
}
@media (prefers-reduced-motion: reduce) {
  .pb-wheel .pbw-seg { transition: opacity .25s ease; }
  .pb-wheel .pbw-diagram.pbw-has-active .pbw-seg.pbw-is-active { transform: none; }
}

/* --- Detail panel --- */
.pb-wheel .pbw-panel { min-width: 0; }
.pb-wheel .pbw-panel h3 {
  font-size: 30px; line-height: 1.15; color: var(--pbw-navy);
  margin: 0 0 14px; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 14px;
}
.pb-wheel .pbw-h-ico { width: 38px; height: 38px; flex: none; }
.pb-wheel .pbw-panel p { font-size: 1em; line-height: 1.6; color: var(--pbw-navy); margin: 0 0 18px; }
.pb-wheel .pbw-panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pb-wheel .pbw-panel li {
  position: relative; padding-left: 28px;
  font-size: 0.85em; line-height: 1.5; color: var(--pbw-navy);
}
.pb-wheel .pbw-panel li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--pbw-seg, var(--pbw-mulberry));
}
.pb-wheel .pbw-hint {
  font-size: 0.75em; color: var(--pbw-navy); opacity: .55; margin-top: 22px;
  display: flex; align-items: center; gap: 8px;
}
.pb-wheel .pbw-hint svg { width: 15px; height: 15px; flex: none; }


/* ---------- typography ruling ---------- */

/* The segment labels are UI, not running text, and the panel heading is a
   heading. Both were inheriting Mackinac at weights it does not carry. */
.pb-wheel .pbw-seg text{font-family:var(--ds-font-heading,'Flink',system-ui,Arial,sans-serif);font-weight:800;}
.pb-wheel .pbw-panel h3{font-family:var(--ds-font-heading,'Flink',system-ui,Arial,sans-serif);font-weight:800;}

/* The outer ring (PRE-042). Smaller, spaced capitals so it reads as the
   setting around the four areas rather than a fifth one. */
.pb-wheel .pbw-seg.pbw-ring .pbw-ring-label{font-size:15px;letter-spacing:.08em;text-transform:uppercase;}
.pb-wheel .pbw-diagram.pbw-has-active .pbw-seg.pbw-ring{opacity:.6;}
.pb-wheel .pbw-diagram.pbw-has-active .pbw-seg.pbw-ring.pbw-is-active{opacity:1;}
/* The viewBox now starts at -40 to make room for the ring, so scale each
   segment about its own box rather than a fixed point. */
.pb-wheel .pbw-seg{transform-box:fill-box;transform-origin:center;}

/* Same for the wheel's panel. */
body.fl-ds-page .inner-content .pb-wheel .pbw-panel li{margin:0;line-height:1.45;}