/* DevsDaily child theme styles. Loaded after GeneratePress and its Customizer CSS. */

/* ---------- Tokens ---------- */
:root {
	--dd-bg: #ffffff;
	--dd-bg-2: #f7f7f9;
	--dd-surface: #ffffff;
	--dd-border: #e6e6eb;
	--dd-text: #0b0b10;
	--dd-muted: #565663;
	--dd-accent: #2754f5;
	--dd-accent-hover: #1d43d1;
	--dd-on-accent: #ffffff;
	--dd-accent-soft: #eef2ff;
	--dd-chip: #f1f1f4;
	--dd-glow: rgba(39, 84, 245, 0.10);
	--dd-shadow: 0 12px 40px rgba(16, 24, 40, 0.10);
	--dd-code-bg: #0e1016;
	--dd-code-border: #22252e;
	--dd-code-text: #d7dae2;
	--dd-radius: 14px;
	--dd-radius-sm: 10px;
	--dd-font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
	--dd-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--dd-wrap: 1200px;

	/* Map GeneratePress global colors to ours, so plugin and core blocks follow the theme. */
	--contrast: var(--dd-text);
	--contrast-2: var(--dd-muted);
	--contrast-3: var(--dd-border);
	--base: var(--dd-chip);
	--base-2: var(--dd-bg-2);
	--base-3: var(--dd-bg);
	--accent: var(--dd-accent);
	color-scheme: light;
}

:root[data-theme="dark"] {
	--dd-bg: #0a0a0d;
	--dd-bg-2: #0f0f14;
	--dd-surface: #131319;
	--dd-border: #24242d;
	--dd-text: #ededf2;
	--dd-muted: #a2a2ae;
	--dd-accent: #7c9bff;
	--dd-accent-hover: #9cb4ff;
	--dd-on-accent: #0a0a0d;
	--dd-accent-soft: #161c33;
	--dd-chip: #1c1c24;
	--dd-glow: rgba(124, 155, 255, 0.14);
	--dd-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	--dd-code-border: #24242d;
	color-scheme: dark;
}

/* ---------- Base ---------- */
html body {
	background: var(--dd-bg);
	color: var(--dd-text);
	font-family: var(--dd-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body .site,
body .site.container,
body.one-container .container,
body.separate-containers .inside-article,
body .site-content {
	background: transparent;
}

/* Full-bleed sections stretch to the viewport; clip the few pixels a scrollbar adds. */
html body {
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--dd-text);
	font-family: var(--dd-font);
	letter-spacing: -0.02em;
}

a {
	color: var(--dd-accent);
}

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

:focus-visible {
	outline: 2px solid var(--dd-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection {
	background: var(--dd-accent-soft);
	color: var(--dd-text);
}

.dd-wrap {
	max-width: var(--dd-wrap);
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.dd-full {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.dd-muted {
	color: var(--dd-muted);
}

.dd-accent {
	color: var(--dd-accent);
}

.dd-eyebrow {
	font-family: var(--dd-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dd-muted);
}

.dd-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--dd-accent-soft);
	color: var(--dd-accent);
	font-family: var(--dd-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.5;
}

a.dd-pill:hover {
	text-decoration: underline;
}

.dd-badge {
	min-width: 44px;
	height: 32px;
	padding: 0 8px;
	box-sizing: border-box;
	border-radius: 8px;
	background: var(--dd-accent-soft);
	color: var(--dd-accent);
	font-family: var(--dd-mono);
	font-size: 12px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.dd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border-radius: var(--dd-radius-sm);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	box-sizing: border-box;
}

.dd-btn-lg {
	height: 44px;
	padding: 0 20px;
	font-size: 15px;
}

body .dd-btn-accent,
body .dd-btn-accent:hover,
body .dd-btn-accent:focus {
	background: var(--dd-accent);
	color: var(--dd-on-accent);
	text-decoration: none;
}

body .dd-btn-accent:hover {
	background: var(--dd-accent-hover);
}

body .dd-btn-contrast,
body .dd-btn-contrast:hover,
body .dd-btn-contrast:focus {
	background: var(--dd-text);
	color: var(--dd-bg);
	text-decoration: none;
}

.dd-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius);
	background: var(--dd-surface);
	color: var(--dd-text);
	box-sizing: border-box;
	min-width: 0;
}

.dd-card p {
	margin: 0;
	color: var(--dd-muted);
	font-size: 15px;
}

.dd-card-title {
	font-weight: 600;
}

.dd-card-soft {
	background: var(--dd-accent-soft);
}

.dd-avatar {
	border-radius: 999px;
	flex: none;
}

.dd-icon {
	flex: none;
}

/* ---------- Header and navigation ---------- */
body .site-header {
	background: var(--dd-bg);
	color: var(--dd-text);
	border-bottom: 1px solid var(--dd-border);
}

body .inside-header {
	padding-top: 12px;
	padding-bottom: 12px;
}

body .main-title {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

body .main-title a,
body .main-title a:hover {
	color: var(--dd-text);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

body .main-title a::before {
	content: "";
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: var(--dd-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 10l4 4-4 4M15 18h5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px no-repeat;
	flex: none;
}

:root[data-theme="dark"] body .main-title a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 10l4 4-4 4M15 18h5' stroke='%230a0a0d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body .site-description {
	display: none;
}

body .main-navigation,
body .main-navigation ul ul {
	background: var(--dd-bg);
}

body .main-navigation .main-nav ul li a,
body .main-navigation .menu-toggle,
body .main-navigation .menu-bar-items {
	color: var(--dd-muted);
	font-size: 14px;
	font-weight: 500;
}

body .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
body .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
body .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
body .main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--dd-text);
	background: transparent;
}

body .main-navigation .main-nav ul ul {
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-sm);
	box-shadow: var(--dd-shadow);
}

body .menu-bar-items {
	gap: 8px;
	align-items: center;
}

body .menu-bar-item > a {
	color: var(--dd-text);
}

.dd-bar-item {
	display: inline-flex;
	align-items: center;
	padding: 0 2px;
}

.dd-theme-toggle {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-sm);
	background: var(--dd-bg);
	color: var(--dd-text);
	cursor: pointer;
}

body .dd-theme-toggle:hover,
body .dd-theme-toggle:focus {
	background: var(--dd-bg-2);
	color: var(--dd-text);
}

.dd-icon-sun,
:root[data-theme="dark"] .dd-icon-moon {
	display: none;
}

:root[data-theme="dark"] .dd-icon-sun {
	display: block;
}

body .main-navigation .menu-bar-items .menu-bar-item > a.dd-btn,
body .main-navigation .menu-bar-items .menu-bar-item > a.dd-btn:hover,
body .main-navigation .menu-bar-items .menu-bar-item > a.dd-btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	line-height: 1;
	padding: 0 16px;
	background: var(--dd-text);
	color: var(--dd-bg);
	border-radius: var(--dd-radius-sm);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

body .navigation-search:not(.nav-search-active) {
	display: none;
}

body .navigation-search input[type="search"],
body .navigation-search input[type="search"]:focus {
	background: var(--dd-bg);
	color: var(--dd-text);
	border: 1px solid var(--dd-border);
}

/* Line the header up with the content column. */
body .inside-header.grid-container,
body .inside-navigation.grid-container {
	max-width: var(--dd-wrap);
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* Back to top */
body a.generate-back-to-top,
body a.generate-back-to-top:hover,
body a.generate-back-to-top:focus {
	background: var(--dd-surface);
	color: var(--dd-text);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-sm);
	box-shadow: var(--dd-shadow);
}

/* ---------- Content containers ---------- */
body.one-container .site-content {
	padding: 40px 24px 64px;
}

body.home .site-content,
body.category .site-content {
	padding: 0;
}

.dd-home,
.dd-hub {
	flex: 1 1 100%;
	min-width: 0;
}

/* Breadcrumbs */
.dd-breadcrumbs {
	font-size: 14px;
	color: var(--dd-muted);
	margin-bottom: 24px;
}

.dd-breadcrumbs a {
	color: var(--dd-muted);
	text-decoration: none;
}

.dd-breadcrumbs a:hover {
	color: var(--dd-text);
	text-decoration: underline;
}

/* ---------- Single post ---------- */
/* Order: breadcrumbs, title, byline, featured image, content, tags. */
.single-post .inside-article {
	display: flex;
	flex-direction: column;
}

.single-post .inside-article > * {
	order: 5;
	min-width: 0;
}

.single-post .inside-article > .dd-breadcrumbs { order: 0; }
.single-post .inside-article > .entry-header { order: 1; }
.single-post .inside-article > .dd-meta { order: 2; }
.single-post .inside-article > .featured-image,
.single-post .inside-article > .post-image { order: 3; }
.single-post .inside-article > .entry-content { order: 4; }
.single-post .inside-article > footer.entry-meta { order: 6; }

.single-post .entry-header {
	max-width: 820px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 20px;
}

.single-post .entry-header .entry-meta {
	display: none;
}

.single-post .entry-title {
	margin: 0;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.025em;
	font-weight: 700;
}

.dd-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-size: 14px;
	color: var(--dd-muted);
	margin-bottom: 36px;
	max-width: 820px;
}

.dd-meta-author {
	color: var(--dd-text);
	font-weight: 500;
	text-decoration: none;
}

.single-post .featured-image,
.single-post .post-image {
	margin-bottom: 32px;
}

.single-post .featured-image img {
	border-radius: var(--dd-radius);
	border: 1px solid var(--dd-border);
}

.single-post .entry-content {
	margin-top: 0;
	border-top: 1px solid var(--dd-border);
	padding-top: 40px;
}

.dd-post-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
}

.dd-post-body {
	flex: 999 1 600px;
	min-width: 0;
	max-width: 740px;
	font-size: 18px;
	line-height: 1.75;
}

.dd-post-aside {
	flex: 1 1 240px;
	min-width: 0;
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	font-size: 14px;
}

.admin-bar .dd-post-aside {
	top: 56px;
}

.dd-toc .dd-eyebrow {
	margin-bottom: 12px;
}

.dd-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dd-toc li {
	margin: 0;
}

.dd-toc a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	color: var(--dd-muted);
	text-decoration: none;
	line-height: 1.4;
}

.dd-toc a::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--dd-border);
	flex: none;
}

.dd-toc a:hover,
.dd-toc a.is-active {
	color: var(--dd-accent);
}

.dd-toc a.is-active {
	font-weight: 600;
}

.dd-toc a.is-active::before {
	background: var(--dd-accent);
}

.dd-aside-subscribe .dd-btn {
	margin-top: 4px;
}

/* Article typography */
.dd-post-body > * {
	margin-top: 0;
}

.dd-post-body p,
.dd-post-body ul,
.dd-post-body ol,
.dd-post-body blockquote,
.dd-post-body figure,
.dd-post-body table {
	margin-bottom: 24px;
}

.dd-post-body h2 {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 600;
	margin: 48px 0 12px;
	scroll-margin-top: 24px;
}

.dd-post-body h3 {
	font-size: 21px;
	line-height: 1.3;
	font-weight: 600;
	margin: 32px 0 10px;
	scroll-margin-top: 24px;
}

.dd-post-body a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.dd-post-body img {
	border-radius: 12px;
	height: auto;
}

.dd-post-body figcaption {
	font-size: 14px;
	color: var(--dd-muted);
	text-align: center;
}

.dd-post-body blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 16px 20px;
	border: 0;
	border-radius: 12px;
	background: var(--dd-accent-soft);
	font-style: normal;
	font-size: 17px;
}

.dd-post-body blockquote p:last-child {
	margin-bottom: 0;
}

.dd-post-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
	display: block;
	overflow-x: auto;
	border: 1px solid var(--dd-border);
	border-radius: 12px;
}

.dd-post-body th,
.dd-post-body td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--dd-border);
	text-align: left;
}

.dd-post-body th {
	background: var(--dd-bg-2);
	font-weight: 600;
}

.dd-post-body tr:last-child td {
	border-bottom: 0;
}

/* Inline code */
.entry-content :not(pre) > code,
.dd-post-body :not(pre) > code {
	font-family: var(--dd-mono);
	font-size: 0.88em;
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--dd-chip);
	color: var(--dd-text);
}

/* Code blocks (works with Prismatic, core Code block and plain pre) */
.entry-content pre,
.dd-post-body pre,
body pre[class*="language-"] {
	margin: 0 0 24px;
	padding: 18px 20px;
	background: var(--dd-code-bg) !important;
	color: var(--dd-code-text);
	border: 1px solid var(--dd-code-border);
	border-radius: 12px;
	font-family: var(--dd-mono);
	font-size: 14px;
	line-height: 1.7;
	overflow-x: auto;
	tab-size: 4;
	text-shadow: none;
}

.entry-content pre code,
body pre[class*="language-"] code {
	background: transparent !important;
	color: inherit;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	text-shadow: none;
}

.dd-code {
	position: relative;
	margin-bottom: 24px;
}

/* Prismatic toolbar (language label and Copy) on the dark panel */
body div.code-toolbar {
	margin-bottom: 24px;
}

body div.code-toolbar > pre {
	margin-bottom: 0;
}

body div.code-toolbar > .toolbar {
	top: 8px;
	right: 8px;
}

body div.code-toolbar > .toolbar .toolbar-item > button,
body div.code-toolbar > .toolbar .toolbar-item > a,
body div.code-toolbar > .toolbar .toolbar-item > span {
	height: 28px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--dd-code-border);
	border-radius: 8px;
	background: #171a22;
	color: #c9cdd6;
	box-shadow: none;
	font-family: var(--dd-mono);
	font-size: 12px;
	font-weight: 400;
}

body div.code-toolbar > .toolbar .toolbar-item > button:hover {
	color: #ffffff;
}

body pre[class*="language-"].line-numbers {
	padding-left: 3.8em;
}

body .line-numbers .line-numbers-rows {
	border-right-color: var(--dd-code-border);
}

body .line-numbers-rows > span::before {
	color: #5c6270;
}

.dd-code pre {
	margin-bottom: 0 !important;
}

.dd-copy {
	position: absolute;
	top: 8px;
	right: 8px;
	height: 28px;
	padding: 0 10px;
	border: 1px solid var(--dd-code-border);
	border-radius: 8px;
	background: #171a22;
	color: #c9cdd6;
	font-family: var(--dd-mono);
	font-size: 12px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s;
}

.dd-code:hover .dd-copy,
.dd-copy:focus-visible,
.dd-copy.is-done {
	opacity: 1;
}

@media (hover: none) {
	.dd-copy {
		opacity: 1;
	}
}

/* Token colors for the dark code panel (Prism and highlight.js class names) */
.token.comment, .token.prolog, .token.doctype, .token.cdata, .hljs-comment, .hljs-quote { color: #7a8090; }
.token.keyword, .token.boolean, .token.important, .hljs-keyword, .hljs-literal, .hljs-built_in { color: #c4a7ff; }
.token.string, .token.char, .token.attr-value, .token.regex, .hljs-string, .hljs-regexp { color: #7ee0b5; }
.token.class-name, .token.function, .token.property, .token.tag, .hljs-title, .hljs-type, .hljs-attr, .hljs-name { color: #8ab4ff; }
.token.number, .token.constant, .token.symbol, .hljs-number, .hljs-symbol { color: #ffb58a; }
.token.punctuation, .token.operator { color: #9aa0ae; background: none; }

/* Author box */
.dd-author {
	margin-top: 48px;
	padding: 24px;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 16px 20px;
	align-items: flex-start;
	font-size: 16px;
	line-height: 1.6;
}

.dd-author-body {
	flex: 1 1 300px;
	min-width: 0;
}

.dd-author-name {
	font-weight: 600;
	font-size: 17px;
}

.dd-author p {
	margin: 4px 0 10px;
	color: var(--dd-muted);
}

.dd-author-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 14px;
	font-weight: 500;
}

.dd-post-body .dd-author a {
	text-decoration: none;
}

/* Post footer meta (tags) and post navigation */
.single-post footer.entry-meta {
	max-width: 740px;
	font-size: 14px;
	color: var(--dd-muted);
}

.single-post footer.entry-meta a {
	color: var(--dd-muted);
}

/* Related posts */
.dd-related {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--dd-border);
}

.dd-related h2 {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 20px;
}

/* ---------- Cards grid ---------- */
.dd-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 20px;
}

body a.dd-post-card,
body a.dd-post-card:hover {
	color: var(--dd-text);
	text-decoration: none;
}

a.dd-post-card {
	transition: border-color 0.15s, box-shadow 0.15s;
}

a.dd-post-card:hover {
	border-color: var(--dd-accent);
	box-shadow: var(--dd-shadow);
}

.dd-post-card-title {
	font-size: 19px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.dd-post-card-excerpt {
	font-size: 15px;
	color: var(--dd-muted);
}

.dd-post-card-date {
	margin-top: auto;
	font-size: 13px;
	color: var(--dd-muted);
}

/* ---------- Homepage ---------- */
.dd-hero {
	background: radial-gradient(900px circle at 85% 0%, var(--dd-glow), transparent 60%);
	border-bottom: 1px solid var(--dd-border);
}

.dd-hero-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
	padding-top: 72px;
	padding-bottom: 64px;
}

.dd-hero-text {
	flex: 1 1 460px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dd-hero-eyebrow {
	display: flex;
	gap: 10px;
	align-items: center;
}

.dd-hero-eyebrow .dd-eyebrow {
	text-decoration: none;
}

.dd-hero-title {
	margin: 0;
	font-size: 46px;
	line-height: 1.08;
	letter-spacing: -0.025em;
	font-weight: 700;
}

.dd-hero-title a,
.dd-hero-title a:hover {
	color: var(--dd-text);
	text-decoration: none;
}

.dd-hero-excerpt {
	margin: 0;
	font-size: 18px;
	color: var(--dd-muted);
	max-width: 560px;
}

.dd-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-size: 14px;
	color: var(--dd-muted);
}

.dd-hero-media {
	flex: 1 1 420px;
	min-width: 0;
	display: block;
	border-radius: var(--dd-radius);
	border: 1px solid var(--dd-border);
	box-shadow: var(--dd-shadow);
	overflow: hidden;
	background: var(--dd-code-bg);
	aspect-ratio: 16 / 10;
}

.dd-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dd-hero-fallback {
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding: 28px;
	box-sizing: border-box;
	font-family: var(--dd-mono);
	font-size: 14px;
	color: #9aa0ae;
}

.dd-section {
	padding: 64px 24px 24px;
	max-width: var(--dd-wrap);
	margin: 0 auto;
	box-sizing: border-box;
}

.dd-section-tight {
	padding-top: 24px;
	padding-bottom: 64px;
}

.dd-section-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 24px;
}

.dd-section-head h2,
.dd-topics h2,
.dd-newsletter h2 {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
}

.dd-section-head a {
	font-size: 15px;
	font-weight: 500;
}

.dd-author-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	padding: 20px 24px;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius);
}

.dd-author-strip-text {
	flex: 1 1 360px;
	min-width: 0;
}

.dd-author-strip p {
	margin: 0;
	font-size: 15px;
	color: var(--dd-muted);
}

.dd-topics {
	background: var(--dd-bg-2);
	border-top: 1px solid var(--dd-border);
	border-bottom: 1px solid var(--dd-border);
	padding: 64px 0;
}

.dd-lead {
	margin: 8px 0 32px;
	color: var(--dd-muted);
	font-size: 17px;
}

.dd-topic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: 20px;
}

.dd-topic {
	gap: 14px;
}

.dd-topic-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dd-topic-head h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.dd-topic-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dd-border);
}

.dd-topic-list li {
	margin: 0;
	border-bottom: 1px solid var(--dd-border);
}

.dd-topic-list a {
	display: block;
	padding: 10px 0;
	color: var(--dd-text);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
}

.dd-topic-list a:hover {
	color: var(--dd-accent);
}

.dd-topic-more {
	font-size: 14px;
	font-weight: 500;
}

.dd-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: center;
	padding: 40px;
	border-radius: 18px;
	background: var(--dd-accent-soft);
	border: 1px solid var(--dd-border);
}

.dd-newsletter-text {
	flex: 1 1 380px;
	min-width: 0;
}

.dd-newsletter-text p {
	margin: 8px 0 0;
	color: var(--dd-muted);
}

.dd-newsletter-form {
	flex: 1 1 380px;
	min-width: 0;
}

/* ---------- Topic hub (category) ---------- */
.dd-hub-hero {
	background: radial-gradient(900px circle at 90% 0%, var(--dd-glow), transparent 60%);
	border-bottom: 1px solid var(--dd-border);
	padding: 40px 0 48px;
}

.dd-hub-hero .dd-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.dd-hub-hero .dd-breadcrumbs {
	margin-bottom: 0;
}

.dd-hub-title {
	margin: 0;
	font-size: 48px;
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 700;
}

.dd-hub-desc {
	margin: 0;
	max-width: 680px;
	font-size: 19px;
	color: var(--dd-muted);
}

.dd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 8px;
}

.dd-chip {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--dd-border);
	background: var(--dd-bg);
	color: var(--dd-text);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

body .dd-chip:hover {
	border-color: var(--dd-text);
	color: var(--dd-text);
}

body .dd-chip.is-active {
	background: var(--dd-text);
	border-color: var(--dd-text);
	color: var(--dd-bg);
}

.dd-hub-grid {
	max-width: var(--dd-wrap);
	margin: 0 auto;
	padding: 48px 24px 64px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
}

.dd-hub-main {
	flex: 999 1 600px;
	min-width: 0;
}

.dd-hub-aside {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dd-aside-link {
	font-size: 15px;
}

body a.dd-start,
body a.dd-start:hover {
	color: var(--dd-text);
	text-decoration: none;
}

.dd-start {
	padding: 28px;
	margin-bottom: 32px;
	box-shadow: var(--dd-shadow);
	align-items: flex-start;
}

.dd-start-title {
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.dd-start-excerpt {
	color: var(--dd-muted);
}

.dd-hub-main .dd-section-head h2 {
	font-size: 22px;
}

.dd-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dd-border);
}

.dd-rows li {
	margin: 0;
	border-bottom: 1px solid var(--dd-border);
}

.dd-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	padding: 20px 0;
	color: var(--dd-text);
	text-decoration: none;
	align-items: baseline;
}

body .dd-row:hover {
	color: var(--dd-text);
	text-decoration: none;
}

.dd-row:hover .dd-row-title {
	color: var(--dd-accent);
}

.dd-row-date {
	flex: 0 0 110px;
	font-family: var(--dd-mono);
	font-size: 13px;
	color: var(--dd-muted);
}

.dd-row-main {
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dd-row-title {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 600;
}

.dd-row-excerpt {
	font-size: 15px;
	color: var(--dd-muted);
}

.dd-row-time {
	flex: 0 0 auto;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--dd-chip);
	color: var(--dd-muted);
	font-family: var(--dd-mono);
	font-size: 12px;
}

/* ---------- Other archives (blog page 2+, tags, author, search) ---------- */
body.blog .site-main > article,
body.archive:not(.category) .site-main > article,
body.search .site-main > article {
	border-bottom: 1px solid var(--dd-border);
	padding-bottom: 32px;
	margin-bottom: 32px;
}

body.blog .entry-title a,
body.archive .entry-title a,
body.search .entry-title a {
	color: var(--dd-text);
	text-decoration: none;
}

body.blog .entry-title a:hover,
body.archive .entry-title a:hover,
body.search .entry-title a:hover {
	color: var(--dd-accent);
}

body .entry-meta,
body .entry-meta a {
	color: var(--dd-muted);
}

body .page-header {
	margin-bottom: 40px;
}

/* Pagination */
body .paging-navigation .nav-links,
body .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

body .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-sm);
	color: var(--dd-text);
	text-decoration: none;
	box-sizing: border-box;
}

body .nav-links .page-numbers.current {
	background: var(--dd-text);
	border-color: var(--dd-text);
	color: var(--dd-bg);
}

/* ---------- Forms (comments, search, newsletter shortcodes) ---------- */
body input[type="text"],
body input[type="email"],
body input[type="url"],
body input[type="password"],
body input[type="search"],
body textarea,
body select {
	background: var(--dd-surface);
	color: var(--dd-text);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-sm);
	padding: 10px 14px;
	font-family: var(--dd-font);
	font-size: 15px;
}

body input:focus,
body textarea:focus,
body select:focus {
	border-color: var(--dd-accent);
	background: var(--dd-surface);
	color: var(--dd-text);
}

body button,
body input[type="submit"],
body input[type="button"],
body .button,
body .wp-block-button__link {
	background: var(--dd-accent);
	color: var(--dd-on-accent);
	border-radius: var(--dd-radius-sm);
	font-weight: 600;
}

body button:hover,
body input[type="submit"]:hover,
body .button:hover {
	background: var(--dd-accent-hover);
	color: var(--dd-on-accent);
}

body .menu-toggle,
body .dd-theme-toggle,
body .dd-copy,
body .search-item button,
body .menu-bar-item button:not(.dd-theme-toggle) {
	background: transparent;
	color: inherit;
}

body .dd-theme-toggle {
	background: var(--dd-bg);
	color: var(--dd-text);
}

body .dd-copy {
	background: #171a22;
	color: #c9cdd6;
}

/* Comments */
body .comments-area {
	max-width: 740px;
	margin-top: 48px;
}

body .comment-content,
body .comment-meta {
	color: var(--dd-text);
}

body .comment-meta a,
body .comment-metadata a {
	color: var(--dd-muted);
}

/* ---------- Footer ---------- */
body .site-footer {
	display: none;
}

.dd-footer {
	border-top: 1px solid var(--dd-border);
	background: var(--dd-bg);
	color: var(--dd-text);
	font-size: 14px;
}

.dd-footer-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 64px;
	padding-top: 48px;
	padding-bottom: 32px;
}

.dd-footer-brand {
	flex: 2 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dd-footer-name {
	font-weight: 600;
	font-size: 16px;
}

.dd-footer-brand p {
	margin: 0;
	color: var(--dd-muted);
	max-width: 320px;
}

.dd-footer-col {
	flex: 1 1 160px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dd-footer-heading {
	font-weight: 600;
}

.dd-footer-col a {
	color: var(--dd-muted);
	text-decoration: none;
}

.dd-footer-col a:hover {
	color: var(--dd-text);
	text-decoration: underline;
}

.dd-footer-bottom {
	flex: 1 1 100%;
	padding-top: 24px;
	border-top: 1px solid var(--dd-border);
	color: var(--dd-muted);
	font-size: 13px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.dd-toc {
		display: none;
	}

	.dd-post-aside {
		position: static;
	}
}

@media (max-width: 768px) {
	body.one-container .site-content {
		padding: 24px 16px 48px;
	}

	.dd-wrap,
	.dd-section,
	.dd-hub-grid {
		padding-left: 16px;
		padding-right: 16px;
	}

	.dd-hero-grid {
		padding-top: 40px;
		padding-bottom: 40px;
		gap: 32px;
	}

	.dd-hero-title,
	.single-post .entry-title {
		font-size: 32px;
	}

	.dd-hub-title {
		font-size: 36px;
	}

	.dd-post-body {
		font-size: 17px;
	}

	.dd-newsletter {
		padding: 28px 20px;
	}

	.dd-subscribe-item {
		display: none;
	}

	.dd-row-date {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
}