/* OnlyWorlds Worldbuilding Documentation Styles */

/* Material Symbols Icons - sizing for nav and content */
.material-symbols-outlined {
  font-size: 1.25rem;
  vertical-align: middle;
  margin-right: 0.25rem;
}

/* Smaller icons in sidebar navigation - match text size */
.nav-list-link .material-symbols-outlined {
  font-size: 0.875rem;
  vertical-align: text-bottom;
  margin-right: 0.35rem;
}

/* Add icons to nav links via CSS */
.nav-list-link[href*="/ability.html"]::before { content: "auto_fix_normal"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/character.html"]::before { content: "person_4"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/collective.html"]::before { content: "groups_3"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/construct.html"]::before { content: "api"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/creature.html"]::before { content: "bug_report"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/event.html"]::before { content: "saved_search"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/family.html"]::before { content: "supervisor_account"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/institution.html"]::before { content: "business"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/language.html"]::before { content: "edit_road"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/law.html"]::before { content: "gpp_bad"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/location.html"]::before { content: "castle"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/map.html"]::before { content: "map"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/marker.html"]::before { content: "brush"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/narrative.html"]::before { content: "book"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/object.html"]::before { content: "webhook"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/phenomenon.html"]::before { content: "thunderstorm"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/pin.html"]::before { content: "location_pin"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/relation.html"]::before { content: "link"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/species.html"]::before { content: "crib"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/title.html"]::before { content: "military_tech"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/trait.html"]::before { content: "flaky"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }
.nav-list-link[href*="/zone.html"]::before { content: "architecture"; font-family: 'Material Symbols Outlined'; margin-right: 0.35rem; }

.ow-story-box {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  padding: 2.5rem;
  border-radius: 8px;
  line-height: 1.8;
  font-family: Georgia, serif;
  margin: 2rem 0;
  color: #e2e8f0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.ow-story-box .attribution {
  text-align: right;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  font-style: italic;
  color: #a0aec0;
}

.ow-element-label {
  margin-bottom: 1.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid #4299e1;
  font-size: 0.9rem;
  color: #90cdf4;
  font-family: monospace;
}

.ow-highlight {
  background: rgba(251, 191, 36, 0.25);
  padding: 0.1rem 0;
  border-bottom: 2px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.15);
}

.ow-screenshot {
  text-align: center;
  margin-top: 2rem;
}

.ow-screenshot img {
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.ow-screenshot-caption {
  font-size: 0.85rem;
  color: #a0aec0;
  margin-top: 0.5rem;
  font-style: italic;
}

.ow-intro {
  margin: 1.5rem 0;
  font-size: 1.1rem;
  line-height: 1.6;
}