/* TK Dark Post — inverted palette for lesson single-post pages.
   Brand palette echoes wp-tk-lock thaikids design + lock screen watermark. */

body.tk-dark {
	--tk-bg:       #0f0a14;
	--tk-bg-soft:  #1a1a2e;
	--tk-surface:  #221525;
	--tk-text:     #f5e9d3;
	--tk-muted:    #c8b89d;
	--tk-accent:   #c9a14a;   /* gold */
	--tk-warm:     #b9742a;   /* warm brown */
	--tk-red:      #a31a1f;
	--tk-red-deep: #7a0e12;

	background: var(--tk-bg);
	color: var(--tk-text);
}

/* :has selectors paint the html element when body has .tk-dark — eliminates
   white margins around the centered content container that Astra leaves on
   wider viewports. */
html:has(body.tk-dark) {
	background: var(--tk-bg, #0f0a14) !important;
}

/* Kill stray theme backgrounds on every common Astra wrapper, plus generic
   classical-theme wrappers. The list is deliberately exhaustive — Astra ships
   multiple nested wrappers per page region, especially in the footer. */
body.tk-dark,
body.tk-dark .site,
body.tk-dark #page,
body.tk-dark .hfeed,
body.tk-dark .ast-container,
body.tk-dark .ast-container-fluid,
body.tk-dark .ast-row,
body.tk-dark .ast-grid-common-col,
body.tk-dark .ast-article-single,
body.tk-dark .ast-article-post,
body.tk-dark .ast-primary-header-bar,
body.tk-dark .ast-primary-header-bar-wrap,
body.tk-dark .entry-content,
body.tk-dark .site-content,
body.tk-dark #content,
body.tk-dark .single-post,
body.tk-dark main,
body.tk-dark #primary,
body.tk-dark .ast-content {
	background: var(--tk-bg) !important;
	color: var(--tk-text) !important;
}

/* Header / nav — keep readable on dark */
body.tk-dark .site-header,
body.tk-dark #masthead,
body.tk-dark .ast-primary-header-bar,
body.tk-dark .ast-builder-grid-row {
	background: var(--tk-bg-soft) !important;
	color: var(--tk-text) !important;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.tk-dark .site-title a,
body.tk-dark .site-title,
body.tk-dark .site-description,
body.tk-dark .ast-site-identity * { color: var(--tk-text) !important; }

/* Headings */
body.tk-dark h1, body.tk-dark h2, body.tk-dark h3,
body.tk-dark h4, body.tk-dark h5, body.tk-dark h6,
body.tk-dark .entry-title,
body.tk-dark .entry-content h1,
body.tk-dark .entry-content h2,
body.tk-dark .entry-content h3,
body.tk-dark .entry-content h4 {
	color: var(--tk-accent) !important;
}

/* Body copy */
body.tk-dark p,
body.tk-dark li,
body.tk-dark td,
body.tk-dark .entry-content,
body.tk-dark .entry-summary { color: var(--tk-text) !important; }

/* Links */
body.tk-dark a,
body.tk-dark .entry-content a { color: var(--tk-accent) !important; }
body.tk-dark a:hover,
body.tk-dark .entry-content a:hover { color: #ffd54a !important; }

/* Inline code / pre */
body.tk-dark code,
body.tk-dark pre,
body.tk-dark kbd,
body.tk-dark samp {
	background: var(--tk-surface) !important;
	color: var(--tk-text) !important;
	border: 1px solid rgba(255,255,255,0.08);
}

/* Blockquotes */
body.tk-dark blockquote,
body.tk-dark .wp-block-quote {
	background: var(--tk-bg-soft) !important;
	color: var(--tk-text) !important;
	border-left: 4px solid var(--tk-red) !important;
	padding: 14px 20px;
	border-radius: 6px;
}

/* Tables */
body.tk-dark table,
body.tk-dark th,
body.tk-dark td {
	border-color: rgba(255,255,255,0.12) !important;
	color: var(--tk-text) !important;
}
body.tk-dark thead { background: var(--tk-red-deep) !important; }

/* Featured image wrapper / hero on single posts */
body.tk-dark .post-thumb,
body.tk-dark .wp-block-post-featured-image img,
body.tk-dark .ast-blog-featured-section {
	border-radius: 12px;
	box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

/* Buttons */
body.tk-dark .wp-block-button__link,
body.tk-dark .button,
body.tk-dark button[type="submit"],
body.tk-dark input[type="submit"] {
	background: var(--tk-red) !important;
	color: #fff !important;
	border: 0 !important;
}
body.tk-dark .wp-block-button__link:hover,
body.tk-dark .button:hover { background: var(--tk-red-deep) !important; }

/* Forms */
body.tk-dark input[type="text"],
body.tk-dark input[type="email"],
body.tk-dark input[type="url"],
body.tk-dark input[type="password"],
body.tk-dark input[type="search"],
body.tk-dark textarea,
body.tk-dark select {
	background: var(--tk-surface) !important;
	color: var(--tk-text) !important;
	border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Comments */
body.tk-dark .comment-list .comment,
body.tk-dark #comments .comment {
	background: var(--tk-bg-soft) !important;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 8px;
	padding: 14px 16px;
}

/* Cards / separators */
body.tk-dark hr,
body.tk-dark .wp-block-separator { border-color: rgba(255,255,255,0.12) !important; }

/* Footer — Astra ships up to FIVE nested footer wrappers. Paint them all. */
body.tk-dark .site-footer,
body.tk-dark #colophon,
body.tk-dark .ast-footer-overlay,
body.tk-dark .site-below-footer-wrap,
body.tk-dark .ast-below-footer-wrap,
body.tk-dark .ast-below-footer-section-1,
body.tk-dark .ast-below-footer-section-2,
body.tk-dark .ast-builder-footer-grid-row,
body.tk-dark .ast-builder-footer-grid-columns,
body.tk-dark .ast-builder-footer-grid-row-container,
body.tk-dark .ast-builder-footer-grid-row-container-inner,
body.tk-dark .footer-widget-area,
body.tk-dark .site-footer-section {
	background: var(--tk-bg-soft) !important;
	color: var(--tk-muted) !important;
	border-top: 1px solid rgba(255,255,255,0.08);
}
body.tk-dark .site-footer a,
body.tk-dark .ast-builder-footer-grid-row a { color: var(--tk-accent) !important; }

/* Astra scroll-to-top widget often sits on a white surface — recolor. */
body.tk-dark #ast-scroll-top {
	background: var(--tk-red) !important;
	color: #fff !important;
}

/* Selection */
body.tk-dark ::selection { background: var(--tk-red); color: #fff; }

/* Reduced motion respect (matches lock-screen pattern) */
@media (prefers-reduced-motion: reduce) {
	body.tk-dark * { transition: none !important; animation: none !important; }
}