/*
Theme Name: Lucid Reader
Theme URI: https://example.com/lucid-reader
Author: Your Name
Author URI: https://example.com
Description: A lightweight, Astra-inspired standalone theme built for readability. Clean white background, restrained blue accents, moderate-sized body text, a magazine-style drop cap on the first paragraph of every post, relative "last updated" and "posted" timestamps, and estimated reading time. No external fonts, no build step, no bloat.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lucid-reader
*/

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #ffffff;
	color: #232323;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

a { color: #2563eb; text-decoration: none; }
a:hover, a:focus { color: #1741a6; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700;
	line-height: 1.3;
	color: #171717;
	margin: 1.4em 0 0.6em;
}

h1 { font-size: 2.1em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.35em; }

p { margin: 0 0 1.3em; }

ul, ol { padding-left: 1.4em; }

blockquote {
	margin: 1.6em 0;
	padding: 0.4em 0 0.4em 1.2em;
	border-left: 3px solid #2563eb;
	color: #444;
	font-style: italic;
}

code, pre {
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
	background: #f4f6f9;
	border-radius: 4px;
}

code { padding: 0.15em 0.4em; font-size: 0.9em; }
pre { padding: 1em; overflow-x: auto; }
pre code { background: none; padding: 0; }

hr {
	border: none;
	border-top: 1px solid #e6e9ee;
	margin: 2.5em 0;
}

table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
th, td { border: 1px solid #e6e9ee; padding: 0.6em 0.8em; text-align: left; }
th { background: #f4f6f9; }

/* Skip link (accessibility) */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #2563eb;
	color: #fff;
	padding: 10px 16px;
	z-index: 100000;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ==========================================================================
   1. Layout
   ========================================================================== */
.lr-container {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

.lr-content-width {
	max-width: 700px;
	margin: 0 auto;
}

/* ==========================================================================
   2b. Top category links bar — sits above the site header
   ========================================================================== */
.lr-top-category-bar {
	background: #fafbfd;
	border-bottom: 1px solid #eaedf1;
	padding: 10px 0;
}

.lr-top-category-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
}

.lr-top-category-menu a {
	font-size: 13px;
	font-weight: 600;
	color: #2563eb;
}

.lr-top-category-menu a:hover { text-decoration: underline; }

/* ==========================================================================
   2. Header
   ========================================================================== */
.lr-site-header {
	border-bottom: 1px solid #eaedf1;
	background: #ffffff;
}

.lr-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding: 18px 0;
}

.lr-branding { display: flex; align-items: center; gap: 12px; }

.lr-site-title {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 38px;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.2px;
}

.lr-site-title a { color: #171717; }
.lr-site-title a:hover { color: #2563eb; text-decoration: none; }

.lr-site-description {
	font-size: 13px;
	color: #7a7a7a;
	margin: 2px 0 0;
}

.custom-logo { max-height: 64px; width: auto; }

/* Primary nav */
.lr-primary-nav ul {
	list-style: none;
	display: flex;
	gap: 26px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.lr-primary-nav a {
	color: #232323;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}

.lr-primary-nav a:hover,
.lr-primary-nav .current-menu-item > a {
	color: #2563eb;
	border-bottom-color: #2563eb;
}

.lr-nav-toggle {
	display: none;
	background: none;
	border: 1px solid #d8dee7;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 14px;
	cursor: pointer;
}

/* Search bar in header */
.lr-header-search { display: flex; align-items: center; }
.lr-header-search .search-form { display: flex; }
.lr-header-search .search-field {
	border: 1px solid #d8dee7;
	border-radius: 6px 0 0 6px;
	padding: 8px 12px;
	font-size: 14px;
	width: 170px;
}
.lr-header-search .search-field:focus { outline: none; border-color: #2563eb; }
.lr-header-search .search-submit {
	border: 1px solid #2563eb;
	background: #2563eb;
	color: #fff;
	border-radius: 0 6px 6px 0;
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
}
.lr-header-search .search-submit:hover { background: #1741a6; border-color: #1741a6; }

@media (max-width: 780px) {
	.lr-nav-toggle { display: inline-block; }
	.lr-primary-nav { width: 100%; display: none; }
	.lr-primary-nav.is-open { display: block; }
	.lr-primary-nav ul { flex-direction: column; gap: 4px; }
	.lr-header-search .search-field { width: 130px; }
}

/* ==========================================================================
   3. Buttons / forms (general)
   ========================================================================== */
.lr-btn,
button,
input[type="submit"] {
	display: inline-block;
	background: #ffffff;
	color: #2563eb;
	border: 1px solid #2563eb;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.lr-btn:hover,
button:hover,
input[type="submit"]:hover {
	background: #2563eb;
	color: #ffffff;
	text-decoration: none;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
	border: 1px solid #d8dee7;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 15px;
	width: 100%;
	font-family: inherit;
}

input:focus, textarea:focus { outline: none; border-color: #2563eb; }

/* ==========================================================================
   4. Post cards (index / archive / search results)
   ========================================================================== */
.lr-main { padding: 44px 0 60px; }

.lr-post-list { max-width: 760px; margin: 0 auto; }

.lr-card {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding: 28px 0;
	border-bottom: 1px solid #eef1f5;
}
.lr-card:first-child { padding-top: 0; }

.lr-card-image {
	flex: 0 0 220px;
	display: block;
	border-radius: 8px;
	overflow: hidden;
}
.lr-card-image img {
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.lr-card-body { flex: 1; min-width: 0; }

.lr-card-categories { margin-bottom: 8px; }
.lr-card-categories a {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: #2563eb;
	background: #eef4ff;
	border-radius: 999px;
	padding: 3px 10px;
	margin: 0 6px 6px 0;
}
.lr-card-categories a:hover { background: #2563eb; color: #fff; text-decoration: none; }

.lr-card-title { font-size: 24px; margin: 0 0 8px; }
.lr-card-title a { color: #171717; }
.lr-card-title a:hover { color: #2563eb; }

.lr-card-excerpt { color: #444; margin: 0 0 10px; }

.lr-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #8a8a8a;
}

.lr-byline {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #eef4ff;
	border-radius: 999px;
	padding: 4px 4px 4px 14px;
}
.lr-byline img {
	border-radius: 50%;
	width: 38px;
	height: 38px;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 2px #2563eb;
}
.lr-byline a.lr-author-name {
	font-weight: 800;
	font-size: 16px;
	color: #2563eb;
	letter-spacing: 0.2px;
	text-decoration: none;
}
.lr-byline a.lr-author-name:hover { text-decoration: underline; }

.lr-meta .lr-dot::before { content: "\2022"; margin: 0 8px; color: #ccc; }

.lr-badge {
	display: inline-block;
	font-size: 12px;
	color: #2563eb;
	background: #eef4ff;
	border-radius: 999px;
	padding: 3px 10px;
}

.lr-pagination { margin: 30px auto 0; max-width: 760px; text-align: center; }
.lr-pagination .page-numbers {
	display: inline-block;
	margin: 0 4px;
	padding: 8px 13px;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
	color: #232323;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.lr-pagination .page-numbers.current,
.lr-pagination .page-numbers:hover {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

/* ==========================================================================
   5. Single post / page
   ========================================================================== */
.lr-article-header { max-width: 760px; margin: 0 auto 24px; }

.lr-article-title {
	font-size: 2.3em;
	line-height: 1.2;
	margin: 0.2em 0 0.4em;
}

.lr-article-thumbnail { margin: 24px auto 34px; max-width: 900px; }
.lr-article-thumbnail img { border-radius: 8px; }

.entry-content { max-width: 700px; margin: 0 auto; }
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content h2,
.entry-content h3,
.entry-content figure { max-width: 100%; }

/* Drop cap — big first letter of the first paragraph of the post content */
.entry-content > p:first-of-type::first-letter {
	float: left;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.4em;
	line-height: 0.85;
	font-weight: 700;
	padding: 4px 10px 0 0;
	margin-top: 2px;
	color: #2563eb;
}

.lr-tags { max-width: 700px; margin: 34px auto 0; }
.lr-tags a {
	display: inline-block;
	font-size: 13px;
	color: #2563eb;
	background: #eef4ff;
	border-radius: 999px;
	padding: 4px 12px;
	margin: 0 6px 6px 0;
}
.lr-tags a:hover { background: #2563eb; color: #fff; text-decoration: none; }

/* ==========================================================================
   6. Comments
   ========================================================================== */
.lr-comments { max-width: 700px; margin: 50px auto 0; }
.lr-comments-title { font-size: 1.3em; margin-bottom: 20px; }

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; padding-left: 28px; }

.comment-body {
	border-bottom: 1px solid #eef1f5;
	padding: 18px 0;
}

.comment-author { font-weight: 700; font-size: 14px; }
.comment-metadata { font-size: 12px; color: #999; margin-bottom: 8px; }
.comment-metadata a { color: #999; }
.comment-reply-link {
	font-size: 12px;
	color: #2563eb;
	border: 1px solid #2563eb;
	border-radius: 999px;
	padding: 2px 10px;
}

.comment-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.comment-form p { margin-bottom: 16px; }

/* ==========================================================================
   7. Footer
   ========================================================================== */
.lr-site-footer {
	border-top: 1px solid #eaedf1;
	margin-top: 60px;
	padding: 26px 0;
	background: #fafbfd;
}
.lr-footer-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
	color: #8a8a8a;
}
.lr-footer-inner a { color: #8a8a8a; }
.lr-footer-inner a:hover { color: #2563eb; }

.lr-footer-secondary-nav {
	background: #fafbfd;
	border-top: 1px solid #eaedf1;
	padding: 18px 0;
}

.lr-footer-secondary-menu {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 26px;
	margin: 0;
	padding: 0;
}

.lr-footer-secondary-menu a {
	color: #2563eb;
	font-size: 14px;
	font-weight: 600;
}
.lr-footer-secondary-menu a:hover { text-decoration: underline; }

/* ==========================================================================
   8. 404 / no results
   ========================================================================== */
.lr-not-found {
	max-width: 600px;
	margin: 60px auto;
	text-align: center;
}
.lr-not-found h1 { font-size: 2.4em; }

/* ==========================================================================
   9. Alignment helpers (Gutenberg)
   ========================================================================== */
.alignwide { max-width: 900px; margin-left: calc(50% - 450px); width: 900px; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: 100vw; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.alignleft { float: left; margin: 0.4em 1.4em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.4em; }

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width: 600px) {
	body { font-size: 16.5px; }
	.lr-article-title { font-size: 1.8em; }
	.entry-content > p:first-of-type::first-letter { font-size: 3.4em; }
	.lr-card { flex-direction: column; gap: 14px; }
	.lr-card-image { flex-basis: auto; width: 100%; }
	.lr-card-image img { height: 190px; }
	.lr-site-title { font-size: 28px; }
}