/* ═══════════════════════════════════════════════════════════
   BRIGHT CANDLE AESTHETIC — OBSIDIAN PUBLISH CUSTOM CSS
   REVISION 4: Nuclear Link Override + Hidden Site Title
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── */
/* 1. GOOGLE FONTS IMPORT */
/* ─────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ─────────────────────────────────────────────────────────── */
/* 2. OVERRIDE OBSIDIAN'S CSS VARIABLES FIRST */
/* ─────────────────────────────────────────────────────────── */

:root,
body,
.theme-light,
.theme-dark {
  /* Override Obsidian's link color variables */
  --link-color: #B8723F !important;
  --link-color-hover: #D4A056 !important;
  --link-unresolved-color: #B8723F !important;
  --link-external-color: #B8723F !important;
  --text-accent: #B8723F !important;
  --text-accent-hover: #D4A056 !important;
  --interactive-accent: #B8723F !important;
  --interactive-accent-hover: #D4A056 !important;
  
  /* Warm Cozy Backgrounds */
  --bg-primary: #F9F5F0;
  --bg-secondary: #FFF8F0;
  --bg-gradient-top: #FFF8F0;
  --bg-gradient-bottom: #FFEEE0;
  
  /* Text Colors */
  --text-primary: #3A3028;
  --text-secondary: #5A5048;
  --text-muted: #7A6F65;
  
  /* Candlelight Accents */
  --accent-gold: #D4A056;
  --accent-copper: #B8723F;
  --accent-warm: #E8B86D;
  --accent-glow: #FFE8D6;
  
  /* Shadows & Glows */
  --shadow-warm: 0 8px 32px rgba(212, 160, 86, 0.12);
  --glow-subtle: 0 0 20px rgba(232, 184, 109, 0.15);
  --glow-focus: 0 0 30px rgba(232, 184, 109, 0.25);
  
  /* Typography */
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --font-heading: 'Crimson Text', 'Baskerville', Georgia, serif;
  --font-size-base: 16px;
  --line-height-base: 1.65;
  
  /* Layout */
  --reading-width: 1400px;
  --content-padding: 3rem;
}

/* ─────────────────────────────────────────────────────────── */
/* 3. AGGRESSIVE FONT OVERRIDE */
/* ─────────────────────────────────────────────────────────── */

body,
.markdown-preview-view,
.markdown-rendered,
.publish-article-page,
.mod-root,
p, li, td, th, blockquote, 
.site-body, .page-content,
.markdown-preview-section {
  font-family: 'Lora', Georgia, 'Times New Roman', serif !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-base) !important;
  color: var(--text-primary) !important;
}

/* ─────────────────────────────────────────────────────────── */
/* 4. BASE STYLES */
/* ─────────────────────────────────────────────────────────── */

body {
  background: linear-gradient(
    to bottom,
    var(--bg-gradient-top) 0%,
    var(--bg-gradient-bottom) 100%
  ) !important;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────── */
/* 5. MAXIMUM WIDTH LAYOUT */
/* ─────────────────────────────────────────────────────────── */

.published-container,
.markdown-preview-view,
.site-body-center-column,
.site-body,
.mod-root,
.publish-article-page,
.page-content,
.markdown-reading-view,
.markdown-source-view {
  max-width: var(--reading-width) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: var(--content-padding) !important;
  background: var(--bg-secondary) !important;
  box-shadow: var(--shadow-warm);
  border-radius: 8px;
}

.markdown-preview-sizer,
.cm-sizer,
.cm-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────── */
/* 6. TYPOGRAPHY — Headings */
/* ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4 {
  font-family: 'Crimson Text', 'Baskerville', Georgia, serif !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.01em;
  margin-top: 2em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}

h1, .markdown-preview-view h1 {
  font-size: 2.25em !important;
  font-weight: 700 !important;
  color: var(--accent-copper) !important;
  margin-top: 0;
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--accent-gold);
  text-align: center;
}

h2, .markdown-preview-view h2 {
  font-size: 1.75em !important;
  color: var(--accent-copper) !important;
  position: relative;
  padding-left: 1rem;
}

h2::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--accent-gold);
  font-size: 0.7em;
  top: 0.3em;
}

h3, .markdown-preview-view h3 {
  font-size: 1.35em !important;
  color: var(--text-primary) !important;
}

h4, .markdown-preview-view h4 {
  font-size: 1.15em !important;
  font-weight: 600 !important;
  font-style: italic;
}

p {
  margin-bottom: 1.25em;
}

/* ─────────────────────────────────────────────────────────── */
/* 7. NUCLEAR LINK OVERRIDE — EVERY POSSIBLE SELECTOR */
/* ─────────────────────────────────────────────────────────── */

/* Base link styles - override EVERYTHING */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus,
.markdown-preview-view a,
.markdown-preview-view a:link,
.markdown-preview-view a:visited,
.markdown-preview-view a:hover,
.internal-link,
.external-link,
.cm-link,
.cm-hmd-internal-link,
.markdown-rendered a,
.mod-root a,
.publish-article-page a,
a[href],
a[href^="http"],
a[href^="https"],
a[href^="mailto"],
a.tag,
.outgoing-link-item,
.tree-item-inner,
a.tree-item-inner {
  color: #B8723F !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

/* Hover states */
a:hover,
a:focus,
.markdown-preview-view a:hover,
.internal-link:hover,
.external-link:hover,
a[href]:hover {
  color: #D4A056 !important;
  border-bottom-color: #D4A056 !important;
  text-shadow: var(--glow-subtle);
}

/* Visited - also copper */
a:visited,
.markdown-preview-view a:visited,
a[href]:visited {
  color: #A0654A !important;
}

/* Active state */
a:active {
  color: #B8723F !important;
}

/* Override theme defaults */
.theme-light a,
.theme-light .internal-link,
.theme-light .external-link,
.theme-dark a,
.theme-dark .internal-link,
.theme-dark .external-link {
  color: #B8723F !important;
}

/* Specific Obsidian Publish overrides */
.published-container a,
.site-body a,
.page-content a {
  color: #B8723F !important;
}

/* Links in specific contexts */
p a,
li a,
td a,
th a,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
blockquote a,
strong a,
em a,
b a,
i a {
  color: #B8723F !important;
}

/* ─────────────────────────────────────────────────────────── */
/* 8. NAVIGATION */
/* ─────────────────────────────────────────────────────────── */

.site-header,
.publish-navbar,
.navbar {
  background: var(--bg-secondary) !important;
  border-bottom: 3px solid var(--accent-gold);
  box-shadow: var(--shadow-warm);
  padding: 1.25rem 2rem;
  max-width: 100% !important;
}

.site-header a,
.publish-navbar a,
.navbar a {
  color: var(--text-primary) !important;
  font-family: 'Crimson Text', 'Baskerville', Georgia, serif !important;
  font-weight: 600;
  font-size: 1em;
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}

.site-header a:hover,
.publish-navbar a:hover {
  color: var(--accent-copper) !important;
  background: var(--accent-glow);
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────── */
/* 9. LISTS */
/* ─────────────────────────────────────────────────────────── */

ul, ol {
  padding-left: 2em;
  margin-bottom: 1.25em;
}

li {
  margin-bottom: 0.5em;
  color: var(--text-primary);
}

ul li::marker {
  color: var(--accent-gold);
  font-size: 1.1em;
}

ol li::marker {
  color: var(--accent-copper);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────── */
/* 10. BLOCKQUOTES */
/* ─────────────────────────────────────────────────────────── */

blockquote,
.markdown-preview-view blockquote {
  border-left: 4px solid var(--accent-gold) !important;
  background: var(--accent-glow) !important;
  padding: 1.25rem 1.75rem !important;
  margin: 1.5rem 0 !important;
  font-style: italic;
  color: var(--text-secondary) !important;
  box-shadow: var(--glow-subtle);
  border-radius: 0 4px 4px 0;
}

/* ─────────────────────────────────────────────────────────── */
/* 11. TABLES */
/* ─────────────────────────────────────────────────────────── */

table {
  width: 100% !important;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9em;
  background: white;
  box-shadow: var(--shadow-warm);
  border-radius: 6px;
  overflow: hidden;
}

thead {
  background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-copper) 100%) !important;
  color: white !important;
}

th {
  padding: 0.875rem !important;
  text-align: left;
  font-family: 'Crimson Text', 'Baskerville', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85em;
  color: white !important;
}

td {
  padding: 0.875rem !important;
  border-bottom: 1px solid var(--accent-glow);
  font-family: 'Lora', Georgia, serif !important;
}

/* Force link colors in tables */
td a,
td a:link,
td a:visited,
th a,
th a:link,
th a:visited {
  color: #B8723F !important;
}

td a:hover,
th a:hover {
  color: #D4A056 !important;
}

tr:hover {
  background: var(--accent-glow) !important;
  transition: background 0.2s ease;
}

tr:last-child td {
  border-bottom: none;
}

/* ─────────────────────────────────────────────────────────── */
/* 12. CODE BLOCKS */
/* ─────────────────────────────────────────────────────────── */

code {
  font-family: 'Courier New', Courier, monospace !important;
  background: var(--accent-glow) !important;
  color: var(--accent-copper) !important;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.875em;
}

pre {
  background: var(--bg-primary) !important;
  border: 1px solid var(--accent-gold);
  border-radius: 6px;
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

pre code {
  background: none !important;
  padding: 0;
  color: var(--text-primary) !important;
}

/* ─────────────────────────────────────────────────────────── */
/* 13. HORIZONTAL RULES */
/* ─────────────────────────────────────────────────────────── */

hr {
  border: none !important;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--accent-gold) 50%,
    transparent 100%
  ) !important;
  margin: 2.5rem auto;
  width: 60%;
  opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────── */
/* 14. SIDEBAR & FILE TREE */
/* ─────────────────────────────────────────────────────────── */

.site-sidebar,
.nav-folder,
.nav-file,
.tree-item {
  background: var(--bg-secondary) !important;
  font-family: 'Lora', Georgia, serif !important;
}

.nav-file-title,
.nav-folder-title,
.tree-item-self {
  color: var(--text-secondary) !important;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
  font-family: 'Lora', Georgia, serif !important;
}

.nav-file-title:hover,
.nav-folder-title:hover {
  background: var(--accent-glow) !important;
  color: var(--accent-copper) !important;
}

.nav-file-title.is-active {
  background: var(--accent-gold) !important;
  color: white !important;
  font-weight: 600;
  border-left: 4px solid var(--accent-copper);
}

/* ─────────────────────────────────────────────────────────── */
/* 15. TAGS */
/* ─────────────────────────────────────────────────────────── */

.tag,
a.tag {
  background: var(--accent-glow) !important;
  color: var(--accent-copper) !important;
  border-radius: 12px;
  padding: 0.25em 0.75em;
  font-size: 0.825em;
  font-weight: 500;
  transition: all 0.2s ease;
}

.tag:hover {
  background: var(--accent-gold) !important;
  color: white !important;
  box-shadow: var(--glow-subtle);
}

/* ─────────────────────────────────────────────────────────── */
/* 16. RESPONSIVE */
/* ─────────────────────────────────────────────────────────── */

@media (max-width: 1500px) {
  :root {
    --reading-width: 90%;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-base: 15px;
    --reading-width: 100%;
    --content-padding: 1.5rem;
  }
  
  .published-container,
  .markdown-preview-view,
  .site-body-center-column {
    padding: 1.5rem !important;
    border-radius: 0;
  }
  
  h1 {
    font-size: 1.85em !important;
  }
  
  h2 {
    font-size: 1.5em !important;
  }
}

/* ─────────────────────────────────────────────────────────── */
/* 17. HIDE SITE TITLE */
/* ─────────────────────────────────────────────────────────── */

/* Hide the "sarahgambito" site title at the top */
.site-header-text,
.site-title,
.publish-site-title,
.site-name,
.site-header .site-name,
.navbar-brand,
.site-header h1,
.site-header-content,
.site-body-left-column-site-name {
  display: none !important;
}

/* If the header becomes empty, reduce its padding */
.site-header:empty,
.publish-navbar:empty {
  padding: 0.5rem 2rem !important;
  min-height: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   END — BRIGHT CANDLE AESTHETIC WITH HIDDEN SITE TITLE
   ═══════════════════════════════════════════════════════════ */