/* ============================================================
   Alex Talbott - Obsidian Publish Portfolio
   Clean, modern, professional. Dark-mode friendly.
   ============================================================ */

/* --- Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- CSS Variables - Light Mode (default) --- */
:root {
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  --color-bg: #fafaf9;
  --color-bg-secondary: #f5f5f4;
  --color-surface: #ffffff;
  --color-border: #e7e5e4;
  --color-border-light: #f0eeec;

  --color-text: #1c1917;
  --color-text-secondary: #57534e;
  --color-text-muted: #a8a29e;

  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-subtle: #dbeafe;

  --color-heading: #0f172a;

  --color-code-bg: #f5f5f4;
  --color-code-text: #d946ef;

  --color-callout-bg: #ffffff;
  --color-callout-border: #e2e8f0;
  --color-callout-shadow: rgba(0, 0, 0, 0.04);

  --color-table-header-bg: #f8fafc;
  --color-table-alt-row: #fafaf9;
  --color-table-border: #e2e8f0;

  --color-tag-bg: #f0f9ff;
  --color-tag-text: #0369a1;
  --color-tag-border: #bae6fd;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);

  --content-width: 760px;
  --spacing-unit: 1rem;
}

/* --- Dark Mode --- */
.theme-dark {
  --color-bg: #0f0f0f;
  --color-bg-secondary: #1a1a1a;
  --color-surface: #1e1e1e;
  --color-border: #2e2e2e;
  --color-border-light: #252525;

  --color-text: #e7e5e4;
  --color-text-secondary: #a8a29e;
  --color-text-muted: #78716c;

  --color-accent: #60a5fa;
  --color-accent-hover: #93bbfd;
  --color-accent-subtle: #1e3a5f;

  --color-heading: #f5f5f4;

  --color-code-bg: #1a1a1a;
  --color-code-text: #e879f9;

  --color-callout-bg: #1a1a1a;
  --color-callout-border: #2e2e2e;
  --color-callout-shadow: rgba(0, 0, 0, 0.2);

  --color-table-header-bg: #1a1a1a;
  --color-table-alt-row: #151515;
  --color-table-border: #2e2e2e;

  --color-tag-bg: #1e293b;
  --color-tag-text: #7dd3fc;
  --color-tag-border: #334155;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* ============================================================
   GLOBAL TYPOGRAPHY
   ============================================================ */

.markdown-preview-view,
.published-container {
  font-family: var(--font-text);
  color: var(--color-text);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Content width */
.markdown-preview-view {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* Headings */
.markdown-preview-view h1 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 2.25rem;
  color: var(--color-heading);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

.markdown-preview-view h2 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-heading);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-border-light);
}

.markdown-preview-view h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* Paragraphs */
.markdown-preview-view p {
  color: var(--color-text);
  margin-bottom: 1.2em;
}

/* Bold */
.markdown-preview-view strong {
  font-weight: 600;
  color: var(--color-heading);
}

/* Horizontal rules - subtle dividers */
.markdown-preview-view hr {
  border: none;
  height: 1px;
  background: var(--color-border);
  margin: 2.5rem 0;
}


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

.markdown-preview-view a,
.markdown-preview-view .internal-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease, border-color 0.15s ease;
  border-bottom: 1px solid transparent;
}

.markdown-preview-view a:hover,
.markdown-preview-view .internal-link:hover {
  color: var(--color-accent-hover);
  border-bottom-color: var(--color-accent-hover);
}


/* ============================================================
   LISTS
   ============================================================ */

.markdown-preview-view ul,
.markdown-preview-view ol {
  padding-left: 1.5em;
  margin-bottom: 1.2em;
}

.markdown-preview-view li {
  margin-bottom: 0.4em;
  line-height: 1.65;
}

.markdown-preview-view li strong {
  color: var(--color-heading);
}


/* ============================================================
   CODE
   ============================================================ */

/* Inline code */
.markdown-preview-view code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

/* Code blocks */
.markdown-preview-view pre {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-sm);
}

.markdown-preview-view pre code {
  background: transparent;
  color: var(--color-text);
  padding: 0;
  font-size: 0.85em;
  line-height: 1.6;
}


/* ============================================================
   TABLES
   ============================================================ */

.markdown-preview-view table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-table-border);
  font-size: 0.92em;
}

.markdown-preview-view th {
  background: var(--color-table-header-bg);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  color: var(--color-heading);
  border-bottom: 2px solid var(--color-table-border);
}

.markdown-preview-view td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}

.markdown-preview-view tr:last-child td {
  border-bottom: none;
}

.markdown-preview-view tbody tr:nth-child(even) {
  background: var(--color-table-alt-row);
}


/* ============================================================
   CALLOUTS - Card Styling
   ============================================================ */

.markdown-preview-view .callout {
  background: var(--color-callout-bg);
  border: 1px solid var(--color-callout-border);
  border-radius: var(--radius-lg);
  padding: 0;
  margin: 1rem 0;
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.markdown-preview-view .callout:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.markdown-preview-view .callout-title {
  padding: 1rem 1.25rem 0.25rem;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-heading);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.markdown-preview-view .callout-content {
  padding: 0.25rem 1.25rem 1rem;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.markdown-preview-view .callout-content p:last-child {
  margin-bottom: 0;
}

/* --- Callout type accents --- */

/* Abstract / project cards - blue accent */
.markdown-preview-view .callout[data-callout="abstract"] {
  border-left: 3px solid var(--color-accent);
}
.markdown-preview-view .callout[data-callout="abstract"] .callout-icon {
  color: var(--color-accent);
}

/* Example - teal accent (for writing) */
.markdown-preview-view .callout[data-callout="example"] {
  border-left: 3px solid #0d9488;
}
.theme-dark .markdown-preview-view .callout[data-callout="example"] {
  border-left-color: #2dd4bf;
}
.markdown-preview-view .callout[data-callout="example"] .callout-icon {
  color: #0d9488;
}
.theme-dark .markdown-preview-view .callout[data-callout="example"] .callout-icon {
  color: #2dd4bf;
}

/* Info - slate accent (for skills/tools) */
.markdown-preview-view .callout[data-callout="info"] {
  border-left: 3px solid #6366f1;
}
.theme-dark .markdown-preview-view .callout[data-callout="info"] {
  border-left-color: #a5b4fc;
}
.markdown-preview-view .callout[data-callout="info"] .callout-icon {
  color: #6366f1;
}
.theme-dark .markdown-preview-view .callout[data-callout="info"] .callout-icon {
  color: #a5b4fc;
}

/* Tip - green accent (for nav/explore) */
.markdown-preview-view .callout[data-callout="tip"] {
  border-left: 3px solid #16a34a;
}
.theme-dark .markdown-preview-view .callout[data-callout="tip"] {
  border-left-color: #4ade80;
}
.markdown-preview-view .callout[data-callout="tip"] .callout-icon {
  color: #16a34a;
}
.theme-dark .markdown-preview-view .callout[data-callout="tip"] .callout-icon {
  color: #4ade80;
}

/* Quote - warm accent (for About/philosophy) */
.markdown-preview-view .callout[data-callout="quote"] {
  border-left: 3px solid #d97706;
  background: var(--color-callout-bg);
}
.theme-dark .markdown-preview-view .callout[data-callout="quote"] {
  border-left-color: #fbbf24;
}

/* Hide callout fold icon by default for cleaner cards */
.markdown-preview-view .callout-fold {
  display: none;
}


/* ============================================================
   HOME PAGE / HERO STYLING
   ============================================================ */

/* Page title (Publish auto-generated from filename) gets hero treatment */
.page-header .page-title,
.inline-title {
  font-family: var(--font-text);
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 0.25rem;
  background: linear-gradient(135deg, var(--color-heading) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle (first paragraph in content, e.g. tagline on Welcome page) */
.markdown-preview-view > p:first-child {
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  font-weight: 400;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}


/* ============================================================
   NAVIGATION / SIDEBAR
   ============================================================ */

.site-body-left-column {
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
}

.nav-view-outer {
  font-family: var(--font-text);
  padding: 1rem 0.5rem;
}

.tree-item-inner {
  font-size: 0.9rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

.tree-item-inner:hover {
  background: var(--color-bg-secondary);
}

.tree-item-self.is-active .tree-item-inner {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 600;
}

/* Site title in nav */
.site-body-left-column-site-name {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  padding: 1rem 1.25rem 0.5rem;
  color: var(--color-heading);
}


/* ============================================================
   BLOCKQUOTES (non-callout)
   ============================================================ */

.markdown-preview-view blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 0.5rem 1rem;
  margin: 1.5rem 0;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}


/* ============================================================
   VIDEO EMBEDS
   ============================================================ */

.markdown-preview-view iframe[src*="youtube"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin: 1rem 0 1.5rem;
}


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

.markdown-preview-view img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin: 1.5rem 0;
  max-width: 100%;
}


/* ============================================================
   TAGS / BADGES (inline code as tags)
   ============================================================ */

/* Style for tags that appear as #tag */
.markdown-preview-view .tag {
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  border: 1px solid var(--color-tag-border);
  padding: 0.15em 0.6em;
  border-radius: 9999px;
  font-size: 0.8em;
  font-weight: 500;
  text-decoration: none;
}


/* ============================================================
   FOOTER / PAGE BOTTOM
   ============================================================ */

.published-container .page-footer {
  border-top: 1px solid var(--color-border);
  margin-top: 3rem;
  padding-top: 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Hide "Powered by Obsidian Publish" */
.site-footer {
  display: none !important;
}

/* ============================================================
   LAYOUT - Hide right sidebar, full-width content
   ============================================================ */

.site-body-right-column {
  display: none;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .markdown-preview-view {
    padding: 1.5rem 1rem 3rem;
    font-size: 16px;
  }

  .page-header .page-title,
  .inline-title {
    font-size: 2rem;
  }

  .markdown-preview-view h2 {
    font-size: 1.3rem;
  }

  .markdown-preview-view .callout {
    margin: 0.75rem 0;
  }
}


/* ============================================================
   TRANSITIONS & POLISH
   ============================================================ */

/* Smooth transitions for theme switching */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Selection color */
::selection {
  background: var(--color-accent-subtle);
  color: var(--color-heading);
}

/* Scrollbar styling (webkit) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}