/* ════════════════════════════════════════════════════════════════════════
   WPConsults Person Cards — card styling (self-contained)
   Shipped by the plugin. Uses the site's --wpc-* tokens when present, with
   safe fallbacks so the card still looks right without the theme's master.css.
   ════════════════════════════════════════════════════════════════════════ */

/* Wrapper sits inline in the sentence */
.wpc-person {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

/* The visible, linked name = the trigger */
.wpc-person > a.wpc-person-name {
  color: var(--wpc-link, #673DE5);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.wpc-person > a.wpc-person-name:hover,
.wpc-person > a.wpc-person-name:focus { color: var(--wpc-link-hover, #5530C4); }

/* Hover/click affordance: a small circled-i after the name, with a brief hint pulse */
.wpc-person > a.wpc-person-name::after {
  content: "\24D8";
  margin-left: 2px;
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  color: var(--wpc-accent, #673DE5);
  animation: wpc-person-hint 1.8s ease-in-out 3;
}
.wpc-person:hover > a.wpc-person-name::after,
.wpc-person:focus-within > a.wpc-person-name::after { animation: none; opacity: 1; }
@keyframes wpc-person-hint {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

/* The card */
.wpc-person-card {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: var(--wpc-z-top, 9999);
  width: max-content;
  max-width: min(320px, 90vw);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  background: var(--wpc-bg-card, #ffffff);
  color: var(--wpc-text, #2D3748);
  border: 1px solid var(--wpc-border, rgba(103,61,229,0.18));
  border-radius: var(--wpc-radius-lg, 12px);
  box-shadow: var(--wpc-shadow-lg, 0 8px 32px rgba(103,61,229,.14));
  padding: var(--wpc-5, 20px);
  font-family: var(--wpc-font-body, 'Outfit', system-ui, -apple-system, sans-serif);
  font-size: var(--wpc-text-md, 14px);
  line-height: var(--wpc-leading-normal, 1.5);
  text-align: center;
  white-space: normal;
}

/* Caret */
.wpc-person-card::before {
  content: '';
  position: absolute;
  top: -6px; left: 22px;
  width: 11px; height: 11px;
  background: var(--wpc-bg-card, #ffffff);
  border-left: 1px solid var(--wpc-border, rgba(103,61,229,0.18));
  border-top: 1px solid var(--wpc-border, rgba(103,61,229,0.18));
  transform: rotate(45deg);
}

/* Invisible hover bridge across the 10px gap so the card stays open */
.wpc-person-card::after {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}

/* Reveal: desktop hover, keyboard focus, or tap (.is-open) */
.wpc-person:hover > .wpc-person-card,
.wpc-person:focus-within > .wpc-person-card,
.wpc-person.is-open > .wpc-person-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Header: photo on top, then name, then role (vertical, centered) */
.wpc-person-head { display: block; margin-bottom: var(--wpc-3, 12px); }
.wpc-person-head > span { display: block; }
.wpc-person-photo {
  display: block;
  width: 56px; height: 56px;
  border-radius: var(--wpc-radius-full, 9999px);
  object-fit: cover;
  margin: 0 auto var(--wpc-2, 8px);
  border: 1px solid var(--wpc-border, rgba(103,61,229,0.18));
}
.wpc-person-title {
  display: block;
  font-family: var(--wpc-font-display, 'Playfair Display', Georgia, serif);
  font-size: var(--wpc-text-xl, 16px);
  font-weight: var(--wpc-weight-bold, 700);
  color: var(--wpc-text-strong, #1A202C);
  line-height: var(--wpc-leading-tight, 1.15);
}
.wpc-person-role { display: block; font-size: var(--wpc-text-sm, 12px); color: var(--wpc-text-muted, #718096); margin-top: 2px; }

.wpc-person-bio {
  display: block;
  color: var(--wpc-text-muted, #718096);
  font-size: var(--wpc-text-md, 14px);
  line-height: var(--wpc-leading-relaxed, 1.65);
  margin: 0 0 var(--wpc-3, 12px);
}

/* Profile-link row (icons + optional labels, centered) */
.wpc-person-links { display: flex; flex-wrap: wrap; gap: var(--wpc-2, 8px); justify-content: center; }
.wpc-person-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--wpc-text-sm, 12px);
  font-weight: var(--wpc-weight-semi, 600);
  color: var(--wpc-link, #673DE5);
  text-decoration: none;
  border: 1px solid var(--wpc-border, rgba(103,61,229,0.18));
  border-radius: var(--wpc-radius-full, 9999px);
  padding: 3px 10px;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.wpc-person-links a:hover,
.wpc-person-links a:focus {
  border-color: var(--wpc-accent, #673DE5);
  color: var(--wpc-accent, #673DE5);
  background: var(--wpc-accent-dim, rgba(103,61,229,0.08));
}
.wpc-person-links svg { width: 14px; height: 14px; flex-shrink: 0; }
.wpc-person-links .wpc-link-label { display: inline; }
/* Icon-only chip (no label) becomes a circle */
.wpc-person-links a.is-icon-only { padding: 6px; border-radius: var(--wpc-radius-full, 9999px); }
.wpc-person-links a.is-icon-only svg { width: 15px; height: 15px; }

/* Mobile: pin the card so it can never run off-screen */
@media (max-width: 480px) {
  .wpc-person-card {
    position: fixed;
    left: 50%; right: auto;
    top: auto; bottom: 16px;
    transform: translateX(-50%) translateY(6px);
    max-width: 92vw;
  }
  .wpc-person:hover > .wpc-person-card,
  .wpc-person:focus-within > .wpc-person-card,
  .wpc-person.is-open > .wpc-person-card { transform: translateX(-50%) translateY(0); }
  .wpc-person-card::before { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wpc-person-card { transition: none; }
  .wpc-person > a.wpc-person-name::after { animation: none; }
}