/*
Theme Name: Datacake
Theme URI: https://example.com/datacake
Author: Your Name
Author URI: https://example.com
Description: A minimal, single-column black theme. No top bar — just an optional uploaded image, site title, and a plain-text menu. Defaults to dark (black) mode with a light/auto option and a floating toggle. Blog posts have no card/outline styling. A configurable-column dark-grey plugin bar sits above the footer for widgets/plugins.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: datacake
Tags: blog, one-column, dark-mode, custom-logo, custom-menu, custom-colors, translation-ready

Datacake is distributed under the terms of the GNU GPL.
*/

/* -----------------------------------------------------------
   0. Design tokens
----------------------------------------------------------- */
:root {
	--dc-max-width: 58rem;
	--dc-footer-columns: 3;

	/* Datacake is black by default; the bottom plugin panel uses a
	   distinct dark grey so it reads as a separate surface. */
	--dc-color-bg: #000000;
	--dc-color-panel: #1c1c1e;
	--dc-color-panel-border: #2c2c2e;
	--dc-color-surface: #000000;
	--dc-color-text: #ececec;
	--dc-color-text-muted: #9a9a9a;
	--dc-color-accent: #ff8a5c;
	--dc-color-accent-dark: #ffb08a;
	--dc-color-border: #2a2a2a;
	--dc-color-link: var(--dc-color-accent);

	--dc-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
	--dc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--dc-font-mono: "JetBrains Mono", Menlo, Consolas, monospace;

	--dc-radius: 14px;
	--dc-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.32);
	--dc-space: clamp(1rem, 1.5vw, 1.75rem);
}

/* Explicit light mode — applied when the Customizer default is "light" or the
   visitor toggles light mode with the header switch (persisted in localStorage). */
html.dc-theme-light {
	color-scheme: light;
	--dc-color-bg: #f7f5f2;
	--dc-color-panel: #ffffff;
	--dc-color-panel-border: #e7e2db;
	--dc-color-surface: #ffffff;
	--dc-color-text: #23211f;
	--dc-color-text-muted: #6b6560;
	--dc-color-accent: #e0522d;
	--dc-color-accent-dark: #b83f20;
	--dc-color-border: #e7e2db;
	--dc-shadow: 0 1px 2px rgba(20, 16, 10, 0.04), 0 8px 24px rgba(20, 16, 10, 0.06);
}

html.dc-theme-dark {
	color-scheme: dark;
}

/* "Auto" scheme (Customizer option): follow the OS preference until the
   visitor makes an explicit choice with the toggle (which adds dc-theme-*). */
@media (prefers-color-scheme: light) {
	html.dc-theme-auto {
		color-scheme: light;
		--dc-color-bg: #f7f5f2;
		--dc-color-panel: #ffffff;
		--dc-color-panel-border: #e7e2db;
		--dc-color-surface: #ffffff;
		--dc-color-text: #23211f;
		--dc-color-text-muted: #6b6560;
		--dc-color-accent: #e0522d;
		--dc-color-accent-dark: #b83f20;
		--dc-color-border: #e7e2db;
		--dc-shadow: 0 1px 2px rgba(20, 16, 10, 0.04), 0 8px 24px rgba(20, 16, 10, 0.06);
	}
}

/* -----------------------------------------------------------
   1. Reset & base
----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; scroll-behavior: smooth; height: 100%; }

body {
	margin: 0;
	background: var(--dc-color-bg);
	color: var(--dc-color-text);
	font-family: var(--dc-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--dc-color-link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--dc-color-accent-dark); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dc-font-heading);
	line-height: 1.2;
	margin: 1.6em 0 0.6em;
	letter-spacing: -0.01em;
}

p { margin: 0 0 1.4em; }

blockquote {
	margin: 1.6em 0;
	padding: 0.2em 1.4em;
	border-left: 4px solid var(--dc-color-accent);
	color: var(--dc-color-text-muted);
	font-style: italic;
}

code, kbd, pre, samp { font-family: var(--dc-font-mono); font-size: 0.92em; }
pre {
	background: var(--dc-color-surface);
	border: 1px solid var(--dc-color-border);
	border-radius: var(--dc-radius);
	padding: 1.25em;
	overflow-x: auto;
}

hr { border: none; border-top: 1px solid var(--dc-color-border); margin: 2.5em 0; }

table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
th, td { padding: 0.6em 0.8em; border-bottom: 1px solid var(--dc-color-border); text-align: left; }

/* -----------------------------------------------------------
   2. Layout — single centered column
----------------------------------------------------------- */
.dc-skip-link {
	position: absolute;
	left: -999px;
	top: auto;
	background: var(--dc-color-accent);
	color: #fff;
	padding: 0.75em 1.25em;
	z-index: 999;
	border-radius: 0 0 8px 0;
}
.dc-skip-link:focus { left: 0; top: 0; }

.dc-wrap {
	max-width: var(--dc-max-width);
	margin-inline: auto;
	padding-inline: var(--dc-space);
}

/* Simple header — just an optional uploaded image, site title, tagline, and
   a plain-text primary menu. No colored bar/banner. Title sits on the left;
   search sits on the top right. */
.dc-header {
	padding-block: calc(var(--dc-space) * 1.5) 0;
	flex-shrink: 0;
}

.dc-header-inner {
	width: 80%;
	max-width: 90rem;
	margin-inline: auto;
	padding-inline: var(--dc-space);
}

.dc-header > .dc-header-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.dc-site-branding { position: relative; }

.dc-custom-logo-link { display: inline-block; margin-bottom: 0.6rem; }
.dc-custom-logo-link img {
	max-height: 72px;
	width: auto;
}

.dc-title-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.dc-site-title {
	font-family: var(--dc-font-heading);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 700;
	margin: 0;
	color: var(--dc-color-text);
	line-height: 1.05;
}
.dc-site-title a { color: inherit; text-decoration: none; }

.dc-site-description {
	margin: 0;
	font-size: clamp(0.7rem, 0.85vw, 0.8rem);
	color: var(--dc-color-text-muted);
	font-weight: 400;
}

/* Search bar + dark mode switch, both anchored top right of the page */
.dc-header-search {
	flex: 0 0 auto;
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.dc-search-form {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.dc-search-form .search-field {
	width: clamp(140px, 16vw, 220px);
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--dc-color-border);
	border-radius: 999px;
	background: var(--dc-color-panel);
	color: var(--dc-color-text);
	font: inherit;
	font-size: 0.88rem;
}
.dc-search-form .search-field::placeholder { color: var(--dc-color-text-muted); }

/* Higher-specificity element+class selector so this always wins over the
   generic `button` reset further down the stylesheet — the search submit
   should read as a plain magnifying-glass image, never as a button. */
button.dc-search-submit,
.dc-search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	color: var(--dc-color-text-muted);
	cursor: pointer;
	transition: color 0.15s ease;
}
button.dc-search-submit:hover,
.dc-search-submit:hover {
	color: var(--dc-color-text);
	background: none;
	transform: none;
}
.dc-search-icon { display: block; width: 1.1rem; height: 1.1rem; }

/* Plain-text primary menu — no bar, no background. */
.dc-nav {
	margin-top: 1.25rem;
}

.dc-nav .dc-header-inner {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dc-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}

.dc-menu li a {
	display: block;
	padding: 0.5rem 0.9rem;
	color: var(--dc-color-text-muted);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.92rem;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.dc-menu li a:hover,
.dc-menu li.current-menu-item > a {
	color: var(--dc-color-text);
	border-color: var(--dc-color-accent);
}

/* Mobile nav toggle */
.dc-nav-toggle {
	display: none;
	background: transparent;
	border: none;
	color: var(--dc-color-text-muted);
	font-size: 0.92rem;
	padding: 0.5rem 0;
	cursor: pointer;
}

@media (max-width: 640px) {
	.dc-header-inner { width: 100%; }
	.dc-header > .dc-header-inner { flex-direction: column; align-items: flex-start; }
	.dc-header-search { width: 100%; }
	.dc-search-form { flex: 1; }
	.dc-search-form .search-field { width: 100%; flex: 1; }
	/* Primary nav (toggle button + menu) is hidden on mobile. */
	.dc-nav { display: none; }
}

/* Dark/light mode switch — sits inline next to the search bar. */
.dc-theme-switch {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--dc-color-panel);
	border: 1px solid var(--dc-color-panel-border);
	color: var(--dc-color-text);
	border-radius: 999px;
	cursor: pointer;
	line-height: 1;
	transition: background 0.15s ease;
}
.dc-theme-switch:hover { background: var(--dc-color-border); }
.dc-theme-switch .dc-theme-icon { font-size: 1.05rem; }
.dc-theme-switch .dc-theme-icon-dark { display: none; }
html.dc-theme-light .dc-theme-switch .dc-theme-icon-light { display: none; }
html.dc-theme-light .dc-theme-switch .dc-theme-icon-dark { display: inline; }
@media (prefers-color-scheme: light) {
	html.dc-theme-auto .dc-theme-switch .dc-theme-icon-light { display: none; }
	html.dc-theme-auto .dc-theme-switch .dc-theme-icon-dark { display: inline; }
}

/* Main content column */
.dc-content {
	flex: 1 0 auto;
	padding-block: calc(var(--dc-space) * 2);
}

.dc-entry,
.dc-page {
	padding-block: clamp(1.25rem, 3vw, 2rem);
	margin-bottom: calc(var(--dc-space) * 1);
}

/* Divider between posts in a loop — not a box outline, just a subtle
   separator so consecutive entries remain readable on a black background. */
.dc-content .dc-entry:not(:last-child) {
	border-bottom: 1px solid var(--dc-color-border);
	padding-bottom: calc(var(--dc-space) * 1.5);
}

.dc-entry-header { margin-bottom: 1.25rem; }

.dc-entry-title {
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	margin-top: 0;
}
.dc-entry-title a { color: var(--dc-color-text); text-decoration: none; }
.dc-entry-title a:hover { color: var(--dc-color-accent); }

.dc-entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	color: var(--dc-color-text-muted);
	font-size: 0.9rem;
	margin-top: 0.4rem;
}
.dc-entry-meta a { color: inherit; }
.dc-entry-meta a:hover { color: var(--dc-color-accent); }

.dc-entry-thumbnail {
	margin: 0 0 1.5rem;
	border-radius: calc(var(--dc-radius) - 4px);
	overflow: hidden;
}

.dc-entry-content > *:last-child { margin-bottom: 0; }

.dc-entry-footer {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--dc-color-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	font-size: 0.9rem;
	color: var(--dc-color-text-muted);
}
.dc-entry-footer a { color: inherit; }
.dc-entry-footer a:hover { color: var(--dc-color-accent); }

.dc-more-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: 600;
}

/* Pagination */
.dc-pagination {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem 0;
}
.dc-pagination a, .dc-pagination span.current {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	border: 1px solid var(--dc-color-panel-border);
	background: var(--dc-color-panel);
	text-decoration: none;
	color: var(--dc-color-text);
	font-size: 0.9rem;
}
.dc-pagination a:hover { border-color: var(--dc-color-accent); color: var(--dc-color-accent); }
.dc-pagination span.current { background: var(--dc-color-accent); border-color: var(--dc-color-accent); color: #fff; }
.dc-pagination-next:only-child { margin-left: auto; }

/* Comments */
.dc-comments {
	background: var(--dc-color-panel);
	border: 1px solid var(--dc-color-panel-border);
	border-radius: var(--dc-radius);
	padding: clamp(1.25rem, 3vw, 2.5rem);
	margin-bottom: calc(var(--dc-space) * 1.5);
}
.dc-comments ol.comment-list { list-style: none; margin: 0; padding: 0; }
.dc-comments .comment { border-top: 1px solid var(--dc-color-border); padding: 1.25rem 0; }
.dc-comments .comment:first-child { border-top: none; padding-top: 0; }
.dc-comments .comment-author { font-weight: 600; }
.dc-comments .comment-metadata { font-size: 0.85rem; color: var(--dc-color-text-muted); margin-bottom: 0.5rem; }
.dc-comments ol.children { list-style: none; margin: 0 0 0 1.5rem; padding: 0; }

.dc-comment-form p { margin-bottom: 1rem; }
.dc-comment-form input[type="text"],
.dc-comment-form input[type="email"],
.dc-comment-form input[type="url"],
.dc-comment-form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--dc-color-border);
	border-radius: 10px;
	background: var(--dc-color-bg);
	color: var(--dc-color-text);
	font: inherit;
}
.dc-comment-form textarea { min-height: 120px; }

/* Buttons */
.dc-button,
.dc-comment-form input[type="submit"],
input[type="submit"],
button {
	display: inline-block;
	background: var(--dc-color-accent);
	color: #fff;
	border: none;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}
.dc-button:hover, .dc-comment-form input[type="submit"]:hover, input[type="submit"]:hover, button:hover {
	background: var(--dc-color-accent-dark);
	transform: translateY(-1px);
}

/* Plugin bar — the configurable-column bottom panel, in dark grey to stand
   out from the black page background. Any plugin/widget dropped into
   "Plugin Bar 1..6" areas lays out here.
   Column count is controlled from Customize → Plugin Bar → Columns. */
/* Plugin bar — the configurable-column bottom panel, in dark grey to stand
   out from the black page background. It's the last element on the page and
   flexes to sit flush against the bottom of the viewport (see body flex
   rules above). Any plugin/widget dropped into "Plugin Bar 1..6" areas lays
   out here; each column stacks as many widgets as are assigned to it. */
.dc-plugin-bar {
	flex-shrink: 0;
	background: var(--dc-color-panel);
	border-top: 1px solid var(--dc-color-panel-border);
	padding-block: var(--dc-space);
}
.dc-plugin-bar-grid {
	display: grid;
	grid-template-columns: repeat(var(--dc-footer-columns, 3), minmax(0, 1fr));
	gap: calc(var(--dc-space) * 1);
	width: 80%;
	max-width: 66rem;
	margin-inline: auto;
	padding-inline: calc(var(--dc-space) * 1.5);
}
.dc-plugin-bar-column {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
}
.dc-plugin-bar .widget {
	font-size: 0.75rem;
	line-height: 1.4;
}
.dc-plugin-bar .widget-title {
	font-family: var(--dc-font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0 0 0.3rem;
	color: var(--dc-color-text);
}
.dc-plugin-bar ul { list-style: none; padding: 0; margin: 0; }
.dc-plugin-bar li { padding: 0.25rem 0; }

.dc-footer-nav {
	margin-top: var(--dc-space);
	padding-top: var(--dc-space);
	border-top: 1px solid var(--dc-color-panel-border);
}
.dc-footer-nav .dc-menu { justify-content: center; }

@media (max-width: 640px) {
	.dc-plugin-bar-grid { grid-template-columns: 1fr; width: 100%; padding-inline: var(--dc-space); }
}

/* 404 / search-no-results */
.dc-none { text-align: center; padding: 3rem 1rem; }

/* Hide the redundant "updated" timestamp in post meta; only show it
   when the post's modified date differs from the published date, and
   it is nested after the .published time (see datacake_posted_on()). */
.posted-on .updated:not(.published) {
	display: none;
}
.posted-on .updated.published {
	display: inherit;
}

/* Screen-reader text */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

/* Alignment support (block editor) */
.alignwide { max-width: calc(var(--dc-max-width) + 6rem); margin-inline: auto; }
.alignfull { max-width: none; }
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: 0.4em 1.4em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.4em; }