/* ==========================================================================
   Zparks — post content and Gutenberg block styles (dark theme)
   Also covers classic markup from imported posts (wp-caption, alignleft…).
   ========================================================================== */

.entry-content {
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--body);
	overflow-wrap: break-word;
}
.entry-content > * + * { margin-top: 1.25em; }
.entry-content::after { content: ""; display: block; clear: both; }

/* Headings */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 { color: var(--text); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.entry-content h2 { font-size: 1.75rem; margin-top: 1.9em; letter-spacing: -0.025em; }
.entry-content h3 { font-size: 1.35rem; margin-top: 1.7em; }
.entry-content h4 { font-size: 1.15rem; margin-top: 1.5em; }
.entry-content h5,
.entry-content h6 { font-size: 1rem; margin-top: 1.5em; }

/* Text */
.entry-content strong, .entry-content b { color: var(--text); font-weight: 600; }
.entry-content a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.entry-content a:hover { color: var(--text); }
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: .4em; }
.entry-content li::marker { color: var(--faint); }
.entry-content mark { background: rgba(138,180,255,.25); color: var(--text); padding: 0 .2em; border-radius: 4px; }

/* Quotes */
.entry-content blockquote,
.wp-block-quote {
	border-left: 3px solid var(--accent);
	padding-left: 1.2em;
	font-size: 1.22rem;
	line-height: 1.55;
	color: var(--text);
}
.entry-content blockquote cite,
.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block; margin-top: .6em;
	font-family: var(--font-mono); font-size: .8rem; font-style: normal; color: var(--faint);
}
.wp-block-pullquote {
	border-top: 1px solid rgba(255,255,255,.12);
	border-bottom: 1px solid rgba(255,255,255,.12);
	padding: 1.6em 0; text-align: center;
}
.wp-block-pullquote blockquote { border: 0; padding: 0; font-size: 1.5rem; letter-spacing: -0.02em; }

/* Media */
.entry-content img { border-radius: 14px; height: auto; }
.entry-content figure { margin-left: auto; margin-right: auto; }
.entry-content figcaption,
.wp-caption-text,
.wp-element-caption {
	margin-top: .6em;
	font-size: .85rem; line-height: 1.5; color: var(--faint); text-align: center;
}
.wp-caption { max-width: 100%; } /* classic captions carry an inline width */
/* Old centred photos with captions (mostly 1024px reportage) widen past the text column */
.entry-content > .wp-caption.aligncenter { max-width: min(960px, 100%); }
.entry-content iframe,
.entry-content video,
.entry-content embed { max-width: 100%; }
.wp-block-embed iframe { border-radius: 14px; }

/* Alignments */
.alignleft { float: left; margin: .3em 1.5em 1em 0; max-width: 50%; }
.alignright { float: right; margin: .3em 0 1em 1.5em; max-width: 50%; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; text-align: center; }
.entry-content > .alignwide { max-width: min(960px, 100%); }
/* full width = edge to edge of the reading card (--card-pad is set in main.css) */
.entry-content > .alignfull { max-width: none; margin-left: calc(-1 * var(--card-pad, 20px)); margin-right: calc(-1 * var(--card-pad, 20px)); }
.entry-content > .alignfull img { border-radius: 0; }
@media (max-width: 600px) {
	.alignleft, .alignright { float: none; margin: 1em auto; max-width: 100%; }
}

/* Galleries */
.wp-block-gallery { gap: 12px; }
.wp-block-gallery img { border-radius: 12px; }

/* Code */
.entry-content code,
.entry-content kbd {
	font-family: var(--font-mono); font-size: .88em;
	background: rgba(255,255,255,.08); padding: .15em .4em; border-radius: 6px;
}
.entry-content pre,
.wp-block-code {
	font-family: var(--font-mono); font-size: .9rem; line-height: 1.6;
	background: rgba(0,0,0,.35); padding: 1.1em 1.3em; border-radius: 14px;
	overflow-x: auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.entry-content pre code { background: none; padding: 0; }

/* Tables */
.entry-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.entry-content th,
.entry-content td { padding: .65em .8em; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; vertical-align: top; }
.entry-content th { color: var(--text); font-weight: 600; }
.wp-block-table { overflow-x: auto; }

/* Separator */
.entry-content hr,
.wp-block-separator {
	border: 0; height: 1px; background: rgba(255,255,255,.14);
	margin-top: 2.2em; margin-bottom: 2.2em;
}

/* Buttons */
.wp-block-button__link {
	display: inline-block; padding: 12px 22px; border-radius: 999px;
	background: rgba(255,255,255,.92); color: #0b1020 !important;
	text-decoration: none !important; font-weight: 500; font-size: 1rem;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--text) !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}

/* Multi-page posts */
.page-links { margin-top: 2em; font-family: var(--font-mono); font-size: .85rem; color: var(--faint); display: flex; gap: 10px; flex-wrap: wrap; }
.page-links a { color: var(--accent); }

/* ==========================================================================
   Reader light mode — the switch on single posts adds .zp-reader-light to
   <html>. Only the reading card changes: its colour variables are redefined,
   and the few rules that use white-on-dark lines get dark equivalents.
   ========================================================================== */
.zp-reader-light .single-article {
	--text: #0f172a;
	--body: #1e293b;
	--muted: #475569;
	--faint: #64748b;
	--accent: #1d4ed8;
	background: rgba(246, 248, 252, .96);
}
.zp-reader-light .single-article::before { opacity: .4; }
.zp-reader-light .entry-content mark { background: rgba(29, 78, 216, .14); }
.zp-reader-light .wp-block-pullquote { border-color: rgba(15, 23, 42, .14); }
.zp-reader-light .entry-content code,
.zp-reader-light .entry-content kbd { background: rgba(15, 23, 42, .07); }
.zp-reader-light .entry-content pre,
.zp-reader-light .wp-block-code { background: rgba(15, 23, 42, .05); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1); }
.zp-reader-light .entry-content th,
.zp-reader-light .entry-content td { border-bottom-color: rgba(15, 23, 42, .12); }
.zp-reader-light .entry-content hr,
.zp-reader-light .wp-block-separator { background: rgba(15, 23, 42, .14); }
.zp-reader-light .wp-block-button__link { background: #0f172a; color: #fff !important; }
.zp-reader-light .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--text) !important; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .35);
}
.zp-reader-light .single-foot { border-top-color: rgba(15, 23, 42, .1); }
.zp-reader-light .post-tags a { background: rgba(15, 23, 42, .05); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); }
.zp-reader-light .post-tags a:hover { background: rgba(15, 23, 42, .1); }