/*
 * global.css — Site-wide readability improvements
 * Applied to all pages via <link rel="stylesheet" href="assets/global.css">
 *
 * Goals:
 *  1. Darken body/paragraph text to near-black for maximum contrast
 *  2. Slightly increase base font size of non-heading content
 *  3. Leave headings (h1-h6) untouched in SIZE but darken gray ones to near-black
 */

/* ─── Base body text ───────────────────────────────────────────────────── */
body {
    color: #111827;
    /* very dark gray — near black */
    font-size: 18px;
    line-height: 1.75;
}

/* ─── Paragraphs ────────────────────────────────────────────────────────── */
p {
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ─── List items ────────────────────────────────────────────────────────── */
li,
ul li,
ol li {
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ─── Spans used as body copy ────────────────────────────────────────────── */
p>span,
li>span {
    color: inherit;
}

/* ─── Override Tailwind gray text utilities — body content AND headings ──── */
.text-gray-400 {
    color: #374151 !important;
}

.text-gray-500 {
    color: #1f2937 !important;
}

.text-gray-600 {
    color: #111827 !important;
}

.text-gray-700 {
    color: #0d1117 !important;
}

.text-gray-800 {
    color: #0d1117 !important;
}

.text-gray-900 {
    color: #0d1117 !important;
}

/* ─── Headings: force near-black unless a brand color class is present ────── */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #0d1117;
    /* near-black — darker than body for hierarchy */
    line-height: 1.25;
    /* font-size intentionally NOT set — page-specific sizes are preserved */
}

/* ─── Preserve intentional brand colors on headings & all elements ───────── */
/* Tailwind color utility classes that should NOT be overridden */
[class*="text-teal"] {
    color: unset;
}

[class*="text-blue"] {
    color: unset;
}

[class*="text-green"] {
    color: unset;
}

[class*="text-red"] {
    color: unset;
}

[class*="text-purple"] {
    color: unset;
}

[class*="text-indigo"] {
    color: unset;
}

[class*="text-yellow"] {
    color: unset;
}

[class*="text-orange"] {
    color: unset;
}

[class*="text-pink"] {
    color: unset;
}

[class*="text-sky"] {
    color: unset;
}

/* ─── White text on dark backgrounds must stay white ────────────────────── */
.text-white {
    color: #ffffff !important;
}

/* ─── Nav links: keep their own colors ──────────────────────────────────── */
nav .text-gray-400,
nav .text-gray-500,
nav .text-gray-600,
nav .text-gray-700,
nav .text-gray-800 {
    color: unset;
}

/* ─── Footer: keep its own colors ───────────────────────────────────────── */
footer .text-gray-400,
footer .text-gray-500,
footer .text-gray-600,
footer .text-gray-700,
footer .text-gray-800 {
    color: unset;
}

/* ─── Italic / subtext still readable ───────────────────────────────────── */
.italic,
em {
    color: #1f2937;
}

/* ─── Small text / captions ─────────────────────────────────────────────── */
small,
.text-sm {
    font-size: 0.9rem;
    color: #1f2937;
}

/* ─── Blockquotes ───────────────────────────────────────────────────────── */
blockquote,
blockquote p {
    color: #111827;
    font-size: 1.05rem;
}