/* DocuQueue Blog — Custom Theme Override
   Overrides jekyll-theme-architect to match modern SaaS blog styling */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Reset Architect defaults ── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #1a1a2e !important;
  background: #f8f9fc !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Header ── */
header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  border-bottom: none !important;
  padding: 50px 0 45px !important;
  position: relative;
  overflow: hidden;
}

header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

header .inner {
  position: relative;
  z-index: 1;
}

header h1 {
  font-family: 'Inter', sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  margin-bottom: 0.15em !important;
  width: auto !important;
}

header h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  width: auto !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  max-width: 500px;
}

header a.button {
  display: none !important;
}

/* ── Main Content Container ── */
#content-wrapper {
  padding-top: 40px !important;
  border-top: none !important;
}

.inner {
  max-width: 740px !important;
  width: auto !important;
  padding: 0 24px;
}

/* ── Headings — clean, no // prefixes ── */
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6 {
  font-family: 'Inter', sans-serif !important;
  color: #1a1a2e !important;
  letter-spacing: -0.02em !important;
}

#main-content h1 {
  font-size: 2.2em !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  line-height: 1.2 !important;
}

#main-content h2 {
  font-size: 1.5em !important;
  font-weight: 600 !important;
  margin-top: 40px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e5e7eb !important;
  color: #1a1a2e !important;
}

#main-content h3 {
  font-size: 1.2em !important;
  font-weight: 600 !important;
  margin-top: 32px !important;
  margin-bottom: 8px !important;
  color: #374151 !important;
}

/* Remove the // heading prefixes */
#main-content h1:before,
#main-content h2:before,
#main-content h3:before,
#main-content h4:before,
#main-content h5:before,
#main-content h6:before {
  content: none !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  color: transparent !important;
}

/* ── Paragraphs ── */
p {
  margin-bottom: 20px !important;
  color: #374151 !important;
}

/* ── Links ── */
a {
  color: #6366f1 !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

a:hover {
  color: #4f46e5 !important;
  text-decoration: underline !important;
}

p a {
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.3);
}

p a:hover {
  border-bottom-color: #6366f1;
}

/* ── Code Blocks — dark, modern ── */
pre {
  background: #1e1e2e !important;
  border: 1px solid #313244 !important;
  border-radius: 10px !important;
  padding: 20px 24px !important;
  margin-bottom: 24px !important;
  overflow-x: auto !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #cdd6f4 !important;
}

pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #cdd6f4 !important;
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace !important;
  font-size: inherit !important;
}

code {
  background: #eef2ff !important;
  border: 1px solid #e0e7ff !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 0.88em !important;
  color: #6366f1 !important;
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace !important;
}

/* Syntax highlighting — Catppuccin-inspired */
.highlight .cm,
.highlight .c1,
.highlight .c,
.highlight .cd { color: #6c7086 !important; font-style: italic; }
.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr { color: #cba6f7 !important; }
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .sh,
.highlight .si,
.highlight .sx { color: #a6e3a1 !important; }
.highlight .nf,
.highlight .nb,
.highlight .nc { color: #89b4fa !important; }
.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .mb,
.highlight .mx { color: #fab387 !important; }
.highlight .na { color: #89dceb !important; }
.highlight .o { color: #f38ba8 !important; }
.highlight .nt { color: #f9e2af !important; }
.highlight .nn { color: #9399b2 !important; }
.highlight .nx { color: #cdd6f4 !important; }

/* ── Tables — clean, minimal ── */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 24px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  font-size: 14px !important;
}

thead {
  background: #f1f5f9 !important;
}

th {
  font-weight: 600 !important;
  text-align: left !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid #e5e7eb !important;
  color: #1e293b !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  text-align: left !important;
  font-weight: 400 !important;
  color: #475569 !important;
}

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

tr:hover {
  background: #f8fafc !important;
}

/* ── Lists ── */
ul, ol {
  padding-left: 24px !important;
  margin-bottom: 20px !important;
}

li {
  margin-bottom: 6px !important;
  color: #374151 !important;
}

li strong {
  color: #1a1a2e !important;
}

/* ── Horizontal Rules — hidden ── */
hr {
  display: none !important;
}

/* ── Blockquotes ── */
blockquote {
  border-left: 3px solid #6366f1 !important;
  padding-left: 20px !important;
  margin-left: 0 !important;
  color: #6b7280 !important;
  font-style: italic !important;
}

/* ── Section spacing — tighter ── */
#main-content > *:first-child {
  margin-top: 0 !important;
}

#main-content > *:last-child {
  margin-bottom: 0 !important;
}

/* ── Mobile responsive ── */
@media only screen and (max-width: 767px) {
  header {
    padding: 30px 0 !important;
  }

  header h1 {
    font-size: 28px !important;
  }

  header h2 {
    font-size: 15px !important;
  }

  .inner {
    padding: 0 16px;
  }

  pre {
    padding: 16px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
  }

  table {
    font-size: 12.5px !important;
  }

  th, td {
    padding: 8px 10px !important;
  }
}