/* ===================================
   ELVENSONG CAMPAIGN - PUBLISH CSS
   Custom styles for Obsidian Publish
   =================================== */

/* ===== ROOT VARIABLES ===== */
:root {
  --card-bg: rgba(var(--mono-rgb-100), 0.05);
  --card-border: rgba(var(--mono-rgb-100), 0.1);
  --card-hover-bg: rgba(var(--mono-rgb-100), 0.08);
  --card-radius: 8px;
  --accent-glow: rgba(var(--color-accent-rgb), 0.15);
}

/* ===== CALLOUT IMPROVEMENTS ===== */

/* Make callouts more visually distinct */
.callout {
  border-radius: var(--card-radius);
  margin: 1.5em 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.callout-title {
  font-weight: 600;
  font-size: 1em;
}

/* Custom callout - Quick Facts */
.callout[data-callout="quickfacts"],
.callout[data-callout="stats"] {
  background: linear-gradient(135deg, var(--card-bg), transparent);
  border-left-width: 4px;
}

/* Danger callout styling */
.callout[data-callout="danger"] {
  background: rgba(255, 100, 100, 0.05);
}

/* Warning callout styling */
.callout[data-callout="warning"] {
  background: rgba(255, 200, 100, 0.05);
}

/* Map callout styling */
.callout[data-callout="map"] {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), transparent);
  border-left-color: #2ecc71;
}

.callout[data-callout="map"] .callout-title {
  color: #2ecc71;
}

/* ===== CARD LAYOUTS ===== */

/* Cards class for hub pages - turns lists into card grids */
.cssclass-cards .markdown-preview-view ul:not(.contains-task-list) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.cssclass-cards .markdown-preview-view ul:not(.contains-task-list) > li {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1rem;
  transition: all 0.2s ease;
}

.cssclass-cards .markdown-preview-view ul:not(.contains-task-list) > li:hover {
  background: var(--card-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===== TABLE IMPROVEMENTS ===== */

/* Better table styling */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

th {
  background: var(--card-bg);
  font-weight: 600;
  text-align: left;
}

th, td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--card-border);
}

tr:hover td {
  background: var(--card-hover-bg);
}

/* Centered tables (for party member displays) */
table:has(td:only-child) td {
  text-align: center;
}

/* ===== NAVIGATION IMPROVEMENTS ===== */

/* Breadcrumb-style links at top of notes */
.frontmatter-container {
  display: none;
}

/* Back to parent styling */
.markdown-preview-view > p:first-child a[href*="Homepage"],
.markdown-preview-view > p:first-child a[href*="Back"] {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--card-bg);
  border-radius: 20px;
  font-size: 0.9em;
  text-decoration: none;
  margin-bottom: 1rem;
}

.markdown-preview-view > p:first-child a[href*="Homepage"]:hover,
.markdown-preview-view > p:first-child a[href*="Back"]:hover {
  background: var(--card-hover-bg);
}

/* ===== HEADINGS ===== */

h1 {
  border-bottom: 2px solid var(--card-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

h2 {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--card-border);
}

/* First h2 doesn't need top border */
h1 + h2,
h1 + hr + h2,
.callout + h2 {
  border-top: none;
  padding-top: 0;
}

/* ===== LINKS ===== */

/* Internal links */
a.internal-link {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

a.internal-link:hover {
  border-bottom-style: solid;
  color: var(--text-accent-hover);
}

/* Unresolved links */
a.internal-link.is-unresolved {
  opacity: 0.6;
  font-style: italic;
}

/* ===== IMAGES ===== */

/* Image styling */
img {
  border-radius: var(--card-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  max-width: 100%;
}

/* Token/avatar images (small) */
img[alt*="token"],
img[alt*="avatar"],
img[src*="token"] {
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ===== BLOCKQUOTES ===== */

blockquote {
  border-left: 3px solid var(--text-accent);
  background: var(--card-bg);
  padding: 1rem 1.5rem;
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
  font-style: italic;
}

blockquote p {
  margin: 0;
}

/* ===== HORIZONTAL RULES ===== */

hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-border), transparent);
  margin: 2rem 0;
}

/* ===== TAG STYLING ===== */

a.tag {
  background: var(--card-bg);
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.85em;
  text-decoration: none;
}

a.tag:hover {
  background: var(--accent-glow);
}

/* ===== MOBILE RESPONSIVENESS ===== */

@media (max-width: 768px) {
  .cssclass-cards .markdown-preview-view ul:not(.contains-task-list) {
    grid-template-columns: 1fr;
  }

  table {
    font-size: 0.9em;
  }

  th, td {
    padding: 0.5rem;
  }
}

/* ===== SPECIAL PAGE STYLES ===== */

/* For Players page specific styles */
.page-for-players h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Quest Dashboard styling */
.page-quest-dashboard .callout[data-callout="warning"] {
  border-left-color: #f0a030;
}

/* ===== PRINT STYLES ===== */

@media print {
  .callout {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  table {
    break-inside: avoid;
  }

  a.internal-link::after {
    content: " [" attr(href) "]";
    font-size: 0.8em;
    opacity: 0.7;
  }
}