/* ==========================================================================
   PI User Profiles — profile view (/user/[username])
   Recreates Profile.dc.html. Token values are copied from the design
   system's colors_and_type.css (source of truth). If the theme already
   declares these same --pi-* custom properties globally, this block is a
   harmless no-op duplicate — safe to delete once confirmed.
   ========================================================================== */

:root {
  --pi-accent: #7E3C3B;
  --pi-accent-dark: #683130;
  --pi-topic: #76403e;
  --pi-category: #2d3748;
  --pi-type: #917c55;

  --pi-status-publish-bg: #eef1ec;
  --pi-status-publish-fg: #4a6b55;
  --pi-status-pending-bg: #f4ecd9;
  --pi-status-pending-fg: #7a5a1f;
  --pi-status-draft-bg: #ece9e3;
  --pi-status-draft-fg: #5a544a;
  --pi-status-private-bg: #ECE0DF;
  --pi-status-private-fg: #7E3C3B;

  /* Warm sidebar card — mirrors the pi-topics topic view (.pi-topic-card). */
  --pi-warm-bg: #ECE0DF;
  --pi-warm-border: #ddc9c8;

  --pi-fg: #1a202c;
  --pi-fg-1: #111827;
  --pi-fg-3: #374151;
  --pi-fg-muted: #64748b;
  --pi-fg-placeholder: #9ca3af;

  --pi-border: #e2e8f0;
  --pi-border-strong: #cbd5e1;

  --pi-bg: #ffffff;
  --pi-bg-soft: #f8fafc;
  --pi-bg-muted: #f1f5f9;
  --pi-bg-mid: #e5e7eb;

  --pi-radius: 6px;
  --pi-radius-lg: 10px;
  --pi-radius-xl: 12px;
  --pi-radius-pill: 999px;

  --pi-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
  --pi-shadow-card: 0 8px 16px rgba(0, 0, 0, 0.08);

  --pi-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --pi-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --pi-transition: 0.15s ease;
}

.pi-up-page {
  min-height: 100vh;
  background: var(--pi-bg);
  font-family: var(--pi-font-sans);
  color: var(--pi-fg);
  padding: 32px 24px 72px;
}

.pi-up-page .dashicons {
  vertical-align: middle;
}

.pi-up-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pi-up-path {
  font-size: 12px;
  font-family: var(--pi-font-mono);
  color: var(--pi-fg-muted);
}

.pi-up-flash {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pi-status-publish-bg);
  color: var(--pi-status-publish-fg);
  border: 1px solid var(--pi-status-publish-fg);
  border-radius: var(--pi-radius);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}

a.pi-link {
  color: var(--pi-accent);
  text-decoration: none;
}
a.pi-link:hover {
  color: var(--pi-accent-dark);
  text-decoration: underline;
}

/* ---------- Header ---------- */

.pi-up-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--pi-border);
}

.pi-up-avatar {
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 50%;
  box-shadow: var(--pi-shadow-sm);
  object-fit: cover;
}

.pi-up-avatar--initials {
  background: linear-gradient(135deg, #b87c63, #4f2f24);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}

.pi-up-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  flex: 1;
}

.pi-up-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pi-up-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--pi-fg-1);
  line-height: 1.1;
}

.pi-up-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--pi-radius-pill);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pi-up-username {
  font-size: 15px;
  color: var(--pi-fg-muted);
}

.pi-up-header-actions {
  display: flex;
  gap: 10px;
}

.pi-up-edit-btn {
  background: var(--pi-bg-muted);
  color: var(--pi-fg-1);
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--pi-transition);
}
.pi-up-edit-btn:hover {
  background: var(--pi-bg-mid);
}

/* ---------- Body: sidebar + main ---------- */

.pi-up-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}

.pi-up-sidebar {
  background: var(--pi-warm-bg);
  border: 1px solid var(--pi-warm-border);
  border-radius: var(--pi-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pi-up-identity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pi-up-display-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--pi-fg-1);
  line-height: 1.2;
}

/* Location sits directly beneath the display name, above the bio. */
.pi-up-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pi-fg-3);
}
.pi-up-location .dashicons {
  color: var(--pi-fg-muted);
}

/* Divided sidebar section with a heading. Mirrors the section headers in the
   pi-topics topic-page sidebar (.pi-topic-card__content h2 — 15px). */
.pi-up-section {
  border-top: 1px solid var(--pi-warm-border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pi-up-section-heading {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--pi-fg-1);
  line-height: 1.3;
}

.pi-up-bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--pi-fg-3);
}

.pi-up-bio--empty {
  color: var(--pi-fg-muted);
  font-style: italic;
}

.pi-up-meta-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pi-up-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pi-fg-3);
}
.pi-up-meta-row .dashicons {
  color: var(--pi-fg-muted);
}

.pi-up-stats {
  display: flex;
  gap: 16px;
}

.pi-up-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pi-up-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--pi-fg-1);
}

.pi-up-stat-label {
  font-size: 11px;
}

.pi-up-since {
  font-size: 13px;
  color: var(--pi-fg-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Per-topic moderator / verified-contributor lists. The whole block (and its
   dividing rule) is only rendered when the user holds at least one of these
   permissions — see profile-content.php. */
.pi-up-topic-perms {
  border-top: 1px solid var(--pi-warm-border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pi-up-topic-perm-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pi-up-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ---------- Tabs ---------- */

.pi-up-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--pi-border);
}

/* The tabs are <button>s, so the active theme's global button styling (Kadence
   gives buttons a filled background, padding, radius and its own hover/focus
   colors) would otherwise bleed in and render them as solid brown blocks. The
   rules below neutralize every one of those button defaults — across the
   :hover / :focus / :active / :focus-visible states — so the tabs stay flat
   underline-style tabs regardless of theme. !important is used deliberately to
   win over the theme's own button selectors. */
.pi-up-tabs .pi-up-tab,
.pi-up-tabs .pi-up-tab:hover,
.pi-up-tabs .pi-up-tab:focus,
.pi-up-tabs .pi-up-tab:active,
.pi-up-tabs .pi-up-tab:focus-visible {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none;
  border-radius: 0 !important;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  outline: none;
}

.pi-up-tab {
  cursor: pointer;
  padding: 8px 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pi-fg-muted);
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  font-family: inherit;
  line-height: 1.4;
  transition: color var(--pi-transition), border-color var(--pi-transition);
}

.pi-up-tabs .pi-up-tab:hover,
.pi-up-tabs .pi-up-tab:focus {
  color: var(--pi-fg-1);
}

.pi-up-tabs .pi-up-tab:focus-visible {
  outline: 2px solid var(--pi-accent);
  outline-offset: 3px;
}

.pi-up-tabs .pi-up-tab.is-active,
.pi-up-tabs .pi-up-tab.is-active:hover,
.pi-up-tabs .pi-up-tab.is-active:focus {
  color: var(--pi-accent);
  border-bottom-color: var(--pi-accent) !important;
}

.pi-up-panel {
  display: none;
}
.pi-up-panel.is-active {
  display: block;
}

.pi-up-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Chips ---------- */

.pi-up-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pi-up-chip {
  color: #fff;
  padding: 3px 8px;
  border-radius: 14px;
  font-size: 11px;
}
.pi-up-chip--topic { background: var(--pi-topic); }
.pi-up-chip--category { background: var(--pi-category); }
.pi-up-chip--type { background: var(--pi-type); }

/* Clickable topic chip (comments section) — links to the topic archive,
   mirroring the single event view. Raised above the card's stretched link. */
a.pi-up-chip-link,
a.pi-up-chip-link:visited,
a.pi-up-chip-link:hover,
a.pi-up-chip-link:focus {
  color: #fff;
  text-decoration: none;
  position: relative;
  z-index: 1;
}
a.pi-up-chip-link:hover { opacity: 0.9; }

/* ---------- Comments ---------- */

.pi-up-comment-card {
  position: relative;
  background: var(--pi-bg);
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--pi-shadow-sm);
  text-decoration: none;
  color: inherit;
}

/* Stretched link — makes the whole card navigate to the event while leaving
   the topic chip (raised above via z-index) independently clickable. */
.pi-up-comment-card-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

.pi-up-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pi-up-comment-head .pi-up-chip {
  padding: 3px 9px;
  font-weight: 600;
}

.pi-up-comment-event {
  font-size: 13px;
  font-weight: 600;
  color: var(--pi-fg-1);
}

.pi-up-comment-date {
  font-size: 12px;
  color: var(--pi-fg-muted);
}

.pi-up-comment-text {
  font-size: 14px;
  color: var(--pi-fg-3);
  line-height: 1.5;
}

/* ---------- Submitted events ---------- */

.pi-up-event-card {
  background: var(--pi-bg);
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius-xl);
  padding: 14px;
  display: flex;
  gap: 16px;
  box-shadow: var(--pi-shadow-sm);
  text-decoration: none;
  color: inherit;
}

.pi-up-event-image {
  width: 88px;
  height: 88px;
  min-width: 88px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

.pi-up-event-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pi-up-event-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pi-up-event-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--pi-fg-1);
  line-height: 1.3;
}

.pi-up-status-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--pi-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pi-up-event-dates {
  font-size: 12px;
  color: var(--pi-fg-muted);
}

/* ---------- Pagination (Submitted events) ---------- */

.pi-up-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.pi-up-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  background: var(--pi-bg);
  color: var(--pi-fg-3);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--pi-transition), border-color var(--pi-transition), color var(--pi-transition);
}

a.pi-up-page-link:hover {
  background: var(--pi-bg-muted);
  border-color: var(--pi-border-strong);
  color: var(--pi-fg-1);
}

.pi-up-page-link.is-active {
  background: var(--pi-accent);
  border-color: var(--pi-accent);
  color: #fff;
  cursor: default;
}

.pi-up-page-link.is-disabled {
  opacity: 0.5;
  cursor: default;
}

.pi-up-page-ellipsis {
  padding: 0 4px;
  color: var(--pi-fg-muted);
}

/* ---------- Empty states ---------- */

.pi-up-empty {
  background: var(--pi-bg);
  border: 1px dashed var(--pi-border-strong);
  border-radius: var(--pi-radius-lg);
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.pi-up-empty .dashicons {
  color: var(--pi-fg-placeholder);
}

.pi-up-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pi-fg-3);
}

.pi-up-empty-sub {
  font-size: 13px;
  color: var(--pi-fg-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .pi-up-page {
    padding: 20px 16px 60px;
  }
  .pi-up-body {
    grid-template-columns: 1fr;
  }
}