/* ============================================================
   Shared styles — Assignment Tracker Pro blog
   Used by all blog article pages and the blog index page.
   Loaded via: <link rel="stylesheet" href="/assets/styles.css">
   ============================================================ */

/* --- Base -------------------------------------------------- */
body { font-family: 'Lexend', sans-serif; }
.fill-1 { font-variation-settings: 'FILL' 1; }

/* --- Article body typography ------------------------------- */
.article-body h2 { font-size: 1.75rem; font-weight: 800; color: #111418; margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.2; }
.article-body h3 { font-size: 1.25rem; font-weight: 700; color: #111418; margin-top: 1.75rem; margin-bottom: 0.75rem; line-height: 1.3; }
.article-body p { color: #374151; font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.25rem; }
.article-body ul, .article-body ol { color: #374151; font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.25rem; padding-left: 1.5rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body strong { color: #111418; }

/* --- Article body links ------------------------------------ */
.article-body a { color: #0d7ff2; text-decoration: underline; font-weight: 500; }
.article-body a:hover { color: #0b6bd4; }
.article-body a.cta-btn, .article-body a.cta-btn:hover { color: white; text-decoration: none; }
.article-body a.cta-secondary { color: #0d7ff2; text-decoration: none; }
.article-body a.cta-secondary:hover { color: white; text-decoration: none; }

/* --- Article body block elements --------------------------- */
.article-body blockquote { border-left: 4px solid #0d7ff2; padding-left: 1.25rem; margin: 1.5rem 0; color: #60758a; font-style: italic; }
.article-body hr { border: none; border-top: 1px solid #e5e7eb; margin: 2.5rem 0; }

/* --- Article body tables ----------------------------------- */
.article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.article-body thead th { background: #f5f7f8; color: #111418; font-weight: 700; text-align: left; padding: 0.75rem 1rem; border-bottom: 2px solid #dbe0e6; }
.article-body tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid #f0f2f5; color: #374151; }
.article-body tbody tr:hover { background: #f9fafb; }

/* --- Article body code blocks ------------------------------ */
/* Included here so the style is available on all blog pages.
   Only the how-to-make article currently uses code blocks,
   but these rules are harmless on pages that don't. */
.article-body pre { background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.6; }
.article-body code { font-family: 'Courier New', monospace; }

/* --- CTA buttons ------------------------------------------- */
.cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 2rem; border-radius: 0.75rem; background: #0d7ff2; color: white; font-weight: 700; font-size: 1rem; text-decoration: none; box-shadow: 0 10px 25px -5px rgba(13, 127, 242, 0.3); transition: all 0.2s; }
.cta-btn:hover { background: #0b6bd4; transform: translateY(-1px); }
.cta-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 0.75rem; border: 2px solid #0d7ff2; color: #0d7ff2; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.2s; }
.cta-secondary:hover { background: #0d7ff2; color: white; }