/* ============================================================
 * Talordata Blog — main.css
 * Globals only. Navbar lives in nav.css, footer in footer.css.
 * Color/spacing tokens replicate talor-webui-blog.
 * ============================================================ */

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-light.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-semibold.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--td-color-text: #1c1d1f;
	--td-color-text-muted: #59616d;
	--td-color-text-soft: #6f7988;
	--td-color-link: #266fef;
	--td-color-border: #e5e7ed;
	--td-color-border-soft: #dfdfdf;
	--td-color-bg: #ffffff;
	--td-color-bg-soft: #f6f6f6;
	--td-color-bg-hover: #fafafa;
	--td-color-bg-dark: #090b0f;
	--td-color-text-dark: #9ca3af;
	--td-radius-sm: 6px;
	--td-radius-md: 8px;
	--td-radius-lg: 10px;
	--td-font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	--td-header-height: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--td-font-family);
	color: var(--td-color-text);
	background: var(--td-color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

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

.view-w {
	max-width: 1391px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.site-main {
	padding-top: var(--td-header-height);
	min-height: calc(100vh - var(--td-header-height));
}

/* Generic button hover utilities used by the reference project markup. */
.btn-hover-h:hover { opacity: 0.92; }
.btn-hover-b:hover { background: #fafafa !important; }

/* ----- Archive (used by index.php / archive.php) ----- */
.archive { padding: 40px 0; }
.archive__title { font-size: 32px; margin: 0 0 24px; }
.archive__list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}
.archive__item { border: 1px solid var(--td-color-border); border-radius: var(--td-radius-md); overflow: hidden; transition: box-shadow .15s; }
.archive__item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.archive__link { display: block; padding: 16px; }
.archive__link img { border-radius: var(--td-radius-sm); margin-bottom: 12px; }
.archive__item-title { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.archive__item-excerpt { font-size: 14px; color: var(--td-color-text-soft); margin: 0; }

/* ----- 404 / Page ----- */
.error-404 { padding: 120px 0; text-align: center; }
.error-404__title { font-size: 72px; margin: 0 0 16px; color: var(--td-color-text); }
.error-404__desc { color: var(--td-color-text-soft); margin: 0 0 24px; }
.error-404__link {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var(--td-radius-md);
	background: var(--td-color-text);
	color: #fff;
}
.error-404__link:hover { background: var(--td-color-link); }

.page-article { padding: 40px 0; }
.page-article__title { font-size: 32px; margin: 0 0 24px; }