/*
  Smart General Typography
  Elegant, modern styling for generic content elements: headings, tables,
  code blocks, lists, links, blockquotes, images, and equations.

  Design notes:
  - --smart-primary is the site's ACTUAL brand color. It is overridden per-site
    via an inline <style> block injected in qoreta.php (from the plugin
    settings), so nothing here should hardcode a brand color.
  - Many WordPress themes (especially Elementor-based ones) apply very
    aggressive, high-specificity color rules to plain tags like <p>, <li>,
    <h2>, <h3>, <td> — sometimes with !important. To guarantee the content
    Qoreta publishes is always readable regardless of theme, the rules below
    use !important on the properties that most commonly get clobbered
    (color, background, list-style, borders). Layout/spacing/animation
    properties are left alone so themes can still influence rhythm if needed.
  - We deliberately do NOT force a font-family on body text or headings.
    Doing so is what caused headings to look "ugly and separate" from the
    rest of the site before — the theme's real heading font never got a
    chance to apply. Leaving font-family unset means normal CSS inheritance
    kicks in and Qoreta content automatically matches the site's typography.
*/

:root {
  /* Fallback values — actual site colors are injected inline by the plugin */
  --smart-text: #1f2937;
  --smart-text-muted: #4b5563;
  --smart-bg: #ffffff;
  --smart-primary: #4f46e5;
  --smart-primary-light: #e0e7ff;
  --smart-primary-dark: #4338ca;
  --smart-border: #e5e7eb;
  --smart-code-bg: #1e1e1e;
  --smart-code-text: #f8f8f2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --smart-text: #f3f4f6;
    --smart-text-muted: #d1d5db;
    --smart-bg: #111827;
    --smart-primary-light: rgba(129, 140, 248, 0.15);
    --smart-border: #374151;
  }
}

/* =========================================================
   Base text — forced legible regardless of theme resets
   ========================================================= */
.smart-content {
  color: var(--smart-text) !important;
  line-height: 1.75;
}

.smart-content p,
.smart-content li,
.smart-content span,
.smart-content strong,
.smart-content b,
.smart-content em,
.smart-content i,
.smart-content td,
.smart-content th,
.smart-content figcaption,
.smart-content label {
  color: var(--smart-text) !important;
}

.smart-content p {
  margin: 0 0 1.35rem 0;
  font-size: 1.05rem;
}

.smart-content strong,
.smart-content b {
  font-weight: 700;
  color: var(--smart-text) !important;
}

/* =========================================================
   Headings — clear, distinct hierarchy
   ========================================================= */
.smart-content h1,
.smart-content h2,
.smart-content h3,
.smart-content h4,
.smart-content h5,
.smart-content h6 {
  line-height: 1.3;
  margin-top: 2.75rem;
  margin-bottom: 1.1rem;
  position: relative;
  clear: both;
}

.smart-content h1 {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--smart-text) !important;
}

.smart-content h2 {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--smart-primary) !important;
  display: inline-block;
  padding-bottom: 0.4rem;
  margin-bottom: 1.6rem;
}

/* Bold underline accent bar for H2 — uses the real site color, no SVG needed */
.smart-content h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--smart-primary) 0%, var(--smart-primary) 60%, transparent 100%);
  opacity: 0.9;
}

.smart-content h3 {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: var(--smart-text) !important;
  padding-left: 0.9rem;
  border-left: 4px solid var(--smart-primary);
}

.smart-content h4 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--smart-text) !important;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.smart-content h5,
.smart-content h6 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--smart-text) !important;
}

/* =========================================================
   Tables — modern, responsive, always legible
   ========================================================= */
.smart-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2.5rem 0;
  border-radius: 12px;
  border: 1px solid var(--smart-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.smart-content thead {
  background-color: var(--smart-primary-light) !important;
}

.smart-content th {
  padding: 0.9rem 1.25rem;
  text-align: left;
  font-weight: 700;
  color: var(--smart-primary) !important;
  border-bottom: 2px solid var(--smart-border);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.smart-content td {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--smart-border);
  line-height: 1.6;
  font-size: 0.98rem;
}

.smart-content tbody tr:nth-child(even) {
  background-color: rgba(127, 127, 127, 0.035);
}

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

.smart-content tbody tr {
  transition: background-color 0.2s ease;
}
.smart-content tbody tr:hover {
  background-color: var(--smart-primary-light) !important;
}

@media (max-width: 640px) {
  .smart-content th,
  .smart-content td {
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
  }
}

/* =========================================================
   Code blocks
   ========================================================= */
.smart-content pre {
  background-color: var(--smart-code-bg) !important;
  color: var(--smart-code-text) !important;
  padding: 1.5rem;
  border-radius: 12px;
  overflow-x: auto;
  margin: 2rem 0;
  font-family: "Fira Code", "Cascadia Code", Consolas, Monaco, monospace;
  font-size: 0.92rem;
  line-height: 1.6;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.smart-content code {
  font-family: "Fira Code", "Cascadia Code", Consolas, Monaco, monospace;
  background-color: var(--smart-primary-light) !important;
  color: var(--smart-primary) !important;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  font-size: 0.9em;
}

.smart-content pre code {
  background-color: transparent !important;
  color: inherit !important;
  padding: 0;
}

/* =========================================================
   Lists — CSS-only markers tied to the real primary color
   ========================================================= */
.smart-content ul,
.smart-content ol {
  padding-left: 0.25rem;
  margin: 1.5rem 0;
}

.smart-content ul {
  list-style: none !important;
}

.smart-content ul li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: 0.75rem;
  line-height: 1.65;
}

/* Checkmark drawn with borders — always matches --smart-primary, no SVG color to fight */
.smart-content ul li::before {
  content: "" !important;
  position: absolute;
  left: 0.1rem;
  top: 0.45rem;
  width: 7px;
  height: 12px;
  border-right: 2.5px solid var(--smart-primary) !important;
  border-bottom: 2.5px solid var(--smart-primary) !important;
  background: none !important;
  transform: rotate(40deg);
}

.smart-content ol {
  list-style: none !important;
  counter-reset: smart-ol;
}

.smart-content ol li {
  position: relative;
  counter-increment: smart-ol;
  padding-left: 2.5rem;
  margin-bottom: 0.9rem;
  line-height: 1.65;
}

.smart-content ol li::before {
  content: counter(smart-ol) !important;
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background-color: var(--smart-primary) !important;
  color: #ffffff !important;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smart-content ul ul,
.smart-content ol ol,
.smart-content ul ol,
.smart-content ol ul {
  margin: 0.6rem 0 0.9rem 0;
}

/* =========================================================
   Blockquotes
   ========================================================= */
.smart-content blockquote {
  margin: 2rem 0;
  padding: 1.1rem 1.5rem;
  border-left: 4px solid var(--smart-primary);
  background-color: var(--smart-primary-light) !important;
  border-radius: 0 10px 10px 0;
  font-style: italic;
}

.smart-content blockquote p {
  color: var(--smart-text) !important;
  margin: 0;
  font-size: 1.05rem;
}

/* =========================================================
   Horizontal rule
   ========================================================= */
.smart-content hr {
  border: none;
  height: 1px;
  background-color: var(--smart-border);
  margin: 3rem 0;
}

/* =========================================================
   Anchor tags
   ========================================================= */
.smart-content a {
  color: var(--smart-primary) !important;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: color 0.2s ease;
}
.smart-content a::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -1px;
  left: 0;
  background-color: var(--smart-primary);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.smart-content a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* =========================================================
   Images
   ========================================================= */
.smart-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin: 2rem 0;
  display: block;
}

.smart-content figure {
  margin: 2rem 0;
}
.smart-content figure img {
  margin: 0 0 0.75rem 0;
}
.smart-content figcaption {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* =========================================================
   Equations (rendered by KaTeX — see assets/js/smart-math.js)
   ========================================================= */
.smart-content .katex-display {
  margin: 2rem 0 !important;
  padding: 1rem 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
}
.smart-content .katex {
  color: var(--smart-text) !important;
  font-size: 1.08em;
}
/* Hide raw LaTeX source briefly while KaTeX loads, to avoid a flash of "$$...$$" */
.smart-content.smart-math-loading [data-smart-math-pending] {
  visibility: hidden;
}