/**
 * GC Theme — Single Post Typography
 *
 * Body content typography for single news/guide posts:
 * h2, h3, paragraphs, lists, links, and image borders.
 *
 * @package GC_Theme
 */

/* ── Post Image Border ── */
.wp-block-image img {
    border-radius: 10px;
    margin-bottom:15px;
}

/* ── Single Post Typography ── */
.gc-single-title {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: var(--gc-text) !important;
    line-height: 1.1em !important;
    letter-spacing: -0.2px !important;
	margin-top:18px !important;
}

@media (max-width: 768px) {
    .gc-single-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
        margin-top: 16px !important;
    }
	.gc-single-wrap > .gc-single-content {
        padding-right: 0 !important;
    }
}

.gc-single-body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--gc-text) !important;
    line-height: 1.75 !important;
}

.gc-single-body p {
    color: var(--gc-text) !important;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

.gc-single-body h2,
.gc-single-body h3,
.gc-single-body h4,
.gc-single-body h5,
.gc-single-body h6 {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    letter-spacing: -0.2px !important;
    color: var(--gc-text) !important;
    position: relative !important;
    padding-left: 14px !important;
    margin-top: 28px !important;
    margin-bottom: 12px !important;
}

.gc-single-body h2::before,
.gc-single-body h3::before,
.gc-single-body h4::before,
.gc-single-body h5::before,
.gc-single-body h6::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: var(--gc-primary) !important;
    border-radius: 4px !important;
}

.gc-single-body blockquote {
    background: rgba(0, 198, 174, 0.08) !important;
    border-left: none !important;
    border-radius: 8px !important;
    padding: 22px 24px !important;
    margin: 24px 0 !important;
    position: relative !important;
}

.gc-single-body blockquote::before {
    content: '"' !important;
    position: absolute !important;
    top: -8px !important;
    left: 7px !important;
    font-size: 50px !important;
    color: var(--gc-primary) !important;
    opacity: 0.3 !important;
    font-family: Georgia, serif !important;
    line-height: 1 !important;
}

.gc-single-body blockquote p {
    color: var(--gc-navy) !important;
    font-style: italic !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}
/* ── Lists ────────────────────────────────────────────────────────
   Bullets/numbers were sitting in the browser's default ~40px outer
   padding, so they hung to the LEFT of the content edge (and the menu
   line). Pull the list in so markers align with the text column, and
   keep the marker just inside the edge rather than overhanging. */
.gc-single-body ul,
.gc-single-body ol {
    margin: 0 0 20px !important;
    padding-left: 22px !important;
    list-style-position: outside !important;
}

.gc-single-body ul { list-style-type: disc !important; }
.gc-single-body ol { list-style-type: decimal !important; }

.gc-single-body li {
    color: var(--gc-text) !important;
    line-height: 1.75 !important;
    margin-bottom: 8px !important;
    padding-left: 4px !important;
}

.gc-single-body li::marker {
    color: var(--gc-primary) !important;
}

/* Nested lists: tighter, no double bottom gap */
.gc-single-body li > ul,
.gc-single-body li > ol {
    margin: 8px 0 0 !important;
}

.gc-single-body li:last-child {
    margin-bottom: 0 !important;
}
/* ── Dark mode: body copy slightly softer than pure heading white ── */
[data-theme="dark"] .gc-single-body p,
[data-theme="dark"] .gc-single-body li {
	color: rgba(255, 255, 255, 0.75) !important;
}