/*
Theme Name:   Writers Blogily Child - DarkVamp
Theme URI:    https://www.darkvamp.de/
Description:  Child Theme für DarkVamps Blog, basierend auf Writers Blogily. Dunkles Layout mit Blutrot/Purple-Akzenten.
Author:       Ralf Kraus
Author URI:   https://www.darkvamp.de/
Template:     writers-blogily
Version:      1.0.0
Text Domain:  writers-blogily-child
*/

/* ==========================================================================
   1. Farb-Variablen
   ========================================================================== */
:root {
	--dv-bg: #14121a;
	--dv-bg-elevated: #1c1a24;
	--dv-bg-card: #201d29;
	--dv-text: #e6e2ea;
	--dv-text-muted: #a89fb0;
	--dv-accent: #b0163f;       /* Blutrot */
	--dv-accent-hover: #d61f4f;
	--dv-accent-2: #7c3aed;     /* Purple, für zweite Akzente */
	--dv-border: #322c3d;
	--dv-link: #ff4d6d;
}

/* ==========================================================================
   2. Grundlayout & Typografie
   ========================================================================== */
body {
	background-color: var(--dv-bg);
	color: var(--dv-text);
}

body.single-post,
body.blog,
body.archive {
	background-color: var(--dv-bg);
}

a {
	color: var(--dv-link);
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--dv-accent-hover);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--dv-text);
	letter-spacing: 0.2px;
}

::selection {
	background: var(--dv-accent);
	color: #fff;
}

/* ==========================================================================
   3. Header / Navigation
   ========================================================================== */
#masthead,
.site-header,
header.site-header {
	background-color: var(--dv-bg-elevated);
	border-bottom: 2px solid var(--dv-accent);
}

.site-title a,
.site-title a:visited {
	color: var(--dv-text);
	font-weight: 700;
}

.site-description {
	color: var(--dv-text-muted);
}

nav.main-navigation,
.main-navigation ul {
	background-color: transparent;
}

.main-navigation a {
	color: var(--dv-text);
}

.main-navigation a:hover,
.main-navigation li.current-menu-item > a {
	color: var(--dv-accent-hover);
}

.main-navigation ul ul {
	background-color: var(--dv-bg-card);
	border: 1px solid var(--dv-border);
}

/* ==========================================================================
   4. Content-Bereich / Beiträge
   ========================================================================== */
#content,
.site-content,
main#main {
	background-color: var(--dv-bg);
}

article.post,
article.type-post,
.hentry {
	background-color: var(--dv-bg-card);
	border: 1px solid var(--dv-border);
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 32px;
}

.entry-title a {
	color: var(--dv-text);
}

.entry-title a:hover {
	color: var(--dv-accent-hover);
}

.entry-meta,
.posted-on,
.byline,
.cat-links {
	color: var(--dv-text-muted);
}

.entry-content {
	color: var(--dv-text);
	line-height: 1.75;
}

.entry-content blockquote {
	border-left: 4px solid var(--dv-accent);
	background-color: var(--dv-bg-elevated);
	padding: 12px 20px;
	color: var(--dv-text-muted);
	font-style: italic;
}

.entry-content pre,
.entry-content code {
	background-color: #0e0d13;
	color: #c9f56b;
	border: 1px solid var(--dv-border);
	border-radius: 4px;
}

.entry-content pre {
	padding: 16px;
	overflow-x: auto;
}

.entry-content img {
	border-radius: 6px;
	border: 1px solid var(--dv-border);
}

/* "Weiterlesen" / Read-more Buttons */
.more-link,
.btn,
button,
input[type="submit"] {
	background-color: var(--dv-accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 8px 18px;
	transition: background-color 0.2s ease;
}

.more-link:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
	background-color: var(--dv-accent-hover);
	color: #fff;
}

/* ==========================================================================
   5. Sidebar / Widgets
   ========================================================================== */
#secondary,
.widget-area {
	color: var(--dv-text);
}

.widget {
	background-color: var(--dv-bg-card);
	border: 1px solid var(--dv-border);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 24px;
}

.widget-title,
.widget h2,
.widget h3 {
	color: var(--dv-accent-hover);
	border-bottom: 1px solid var(--dv-border);
	padding-bottom: 8px;
	margin-bottom: 12px;
	text-transform: uppercase;
	font-size: 0.9em;
	letter-spacing: 1px;
}

.widget a {
	color: var(--dv-text);
}

.widget a:hover {
	color: var(--dv-accent-hover);
}

/* ==========================================================================
   6. Footer
   ========================================================================== */
#colophon,
.site-footer,
footer.site-footer {
	background-color: var(--dv-bg-elevated);
	border-top: 2px solid var(--dv-accent);
	color: var(--dv-text-muted);
}

#colophon a,
.site-footer a {
	color: var(--dv-text);
}

#colophon a:hover,
.site-footer a:hover {
	color: var(--dv-accent-hover);
}

/* ==========================================================================
   7. Kommentare
   ========================================================================== */
.comment-content {
	background-color: var(--dv-bg-card);
	border: 1px solid var(--dv-border);
	border-radius: 6px;
	padding: 16px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	background-color: var(--dv-bg-elevated);
	color: var(--dv-text);
	border: 1px solid var(--dv-border);
	border-radius: 4px;
}

/* ==========================================================================
   8. Responsive Feintuning
   ========================================================================== */
@media (max-width: 768px) {
	article.post,
	article.type-post,
	.hentry,
	.widget {
		padding: 16px;
	}
}