/* ============================================
   CIVITAS PMN — Persistent Mobile Navigation
   Version: v1.0 (Frozen)
   Scope: Mobile only, UI infrastructure
   ============================================ */

/* --------------------------------------------
   Root PMN Container (AUTHORITATIVE)
   -------------------------------------------- */

.civitas-pmn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: 64px;
  background: #ffffff;

  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);

  /* IMPORTANT: above page chrome, below modals */
  z-index: 100000;

  user-select: none;
}

/* --------------------------------------------
   PMN List Layout
   -------------------------------------------- */

.civitas-pmn-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  margin: 0;
  padding: 0;
  list-style: none;

  height: 100%;
}

/* --------------------------------------------
   PMN Item
   -------------------------------------------- */

.civitas-pmn-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------
   PMN Link (Tap Target)
   -------------------------------------------- */

.civitas-pmn-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  text-decoration: none;
  color: #6b6f6d;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;

  transition: color 0.15s ease;
}

/* --------------------------------------------
   Icon Wrapper + SVG
   -------------------------------------------- */

.civitas-pmn-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 4px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.civitas-pmn-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

/* --------------------------------------------
   Label
   -------------------------------------------- */

.civitas-pmn-label {
  white-space: nowrap;
}

/* --------------------------------------------
   Hover / Focus (mobile-safe)
   -------------------------------------------- */

.civitas-pmn-link:hover,
.civitas-pmn-link:focus {
  color: #0f3f36;
}

/* --------------------------------------------
   Active State (JS-controlled)
   -------------------------------------------- */

.civitas-pmn-item.is-active .civitas-pmn-link {
  color: #0f3f36;
  font-weight: 600;
}

/* --------------------------------------------
   Accessibility — Focus Visible
   -------------------------------------------- */

.civitas-pmn-link:focus-visible {
  outline: 2px solid #0f3f36;
  outline-offset: -2px;
}

/* --------------------------------------------
   Content Safety Padding
   Prevent PMN overlap with content (Astra-safe)
   -------------------------------------------- */

html,
body {
  padding-bottom: 64px;
}

#page,
.site {
  padding-bottom: 64px;
}

/* --------------------------------------------
   Mobile-only Hard Guard
   -------------------------------------------- */

@media (min-width: 769px) {
  .civitas-pmn {
    display: none;
  }

  html,
  body,
  #page,
  .site {
    padding-bottom: 0;
  }
}
/* ============================================
   PMN VISUAL EMPHASIS — COLOR ONLY
   Scope: Active icon + label
   ============================================ */

/* Active icon stroke → red */
.civitas-pmn-item.is-active .civitas-pmn-icon svg {
  stroke: #c62828;
}

/* Active label text → red */
.civitas-pmn-item.is-active .civitas-pmn-label {
  color: #c62828;
}
/* ============================================
   PMN OUTLINE — COLOR ONLY (FIX)
   ============================================ */

/* Base outline (invisible, prevents layout shift) */
.civitas-pmn-link {
  border: 1px solid transparent;
  border-radius: 8px;
}

/* Active outline → red */
.civitas-pmn-item.is-active .civitas-pmn-link {
  border-color: #c62828;
}
/* ============================================
   PMN — Arena Engagement Highlight (UI-only)
   ============================================ */

.civitas-pmn-item[data-pmn="arena"] {
  position: relative;
}

/* Accent background ring */
.civitas-pmn-item[data-pmn="arena"]::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.12); /* violet engagement tone */
  z-index: 0;
}

/* Lift icon + label above background */
.civitas-pmn-item[data-pmn="arena"] .civitas-pmn-link {
  position: relative;
  z-index: 1;
}

/* Arena icon color */
.civitas-pmn-item[data-pmn="arena"] .civitas-pmn-icon {
  color: #7c3aed;
}

/* When Arena is active, intensify */
.civitas-pmn-item[data-pmn="arena"].is-active::before {
  background: rgba(124, 58, 237, 0.2);
}