/*
Theme Name: Lucent Folio
Author: trushiv
Description: Lucent Folio is a clean, modern, accessible general-purpose theme suitable for blogs, portfolios, and small business sites. It features a responsive mobile-first layout, a hero section on the front page, widget-ready sidebar and footer areas, custom logo support, and full support for the block editor. Built following WordPress coding standards and accessibility guidelines.
Version: 1.0.1
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lucent-folio
Tags: blog, portfolio, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, footer-widgets, threaded-comments, translation-ready, block-styles, wide-blocks, editor-style

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Copyright 2026 trushiv

Lucent Folio is based on underlying WordPress core APIs and template structures that are
themselves licensed under the GPLv2 (or later). This theme's own original CSS, PHP and JS
are original work released under the GNU General Public License v2 or later.
*/

/* -----------------------------------------------------------------------
   0.0 CSS Custom Properties
------------------------------------------------------------------------ */
:root {
	--lf-color-text: #1d2327;
	--lf-color-text-light: #4a4f54;
	--lf-color-link: #0b4f6c;
	--lf-color-link-visited: #5c3a7c;
	--lf-color-background: #ffffff;
	--lf-color-surface: #f5f6f7;
	--lf-color-border: #d8dadd;
	--lf-color-accent: #0b4f6c;
	--lf-color-focus: #0b4f6c;
	--lf-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--lf-font-heading: Georgia, "Times New Roman", Times, serif;
	--lf-container-width: 1100px;
	--lf-radius: 4px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--lf-color-text: #e7e9ea;
		--lf-color-text-light: #b7bcc1;
		--lf-color-link: #7fc7e8;
		--lf-color-link-visited: #c9a6ec;
		--lf-color-background: #15181b;
		--lf-color-surface: #1d2125;
		--lf-color-border: #2c3236;
		--lf-color-accent: #7fc7e8;
		--lf-color-focus: #7fc7e8;
	}
}

/* -----------------------------------------------------------------------
   1.0 Reset / base
------------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--lf-color-background);
	color: var(--lf-color-text);
	font-family: var(--lf-font-body);
	font-size: 1rem;
	line-height: 1.6;
}

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

a {
	color: var(--lf-color-link);
}

a:visited {
	color: var(--lf-color-link-visited);
}

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
	outline: 3px solid var(--lf-color-focus);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--lf-font-heading);
	line-height: 1.25;
	margin: 1.4em 0 0.6em;
}

/* -----------------------------------------------------------------------
   2.0 Accessibility
------------------------------------------------------------------------ */
.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--lf-color-surface);
	border-radius: var(--lf-radius);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.4);
	clip: auto !important;
	clip-path: none;
	color: var(--lf-color-text);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	left: -9999px;
	position: absolute;
	top: 0;
	z-index: 999999;
}

.skip-link:focus {
	left: 6px;
	top: 6px;
}

/* -----------------------------------------------------------------------
   3.0 Layout
------------------------------------------------------------------------ */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.container {
	width: 100%;
	max-width: var(--lf-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.site-content {
	flex: 1 0 auto;
	padding: 2rem 0 3rem;
}

.content-area {
	min-width: 0;
}

.has-sidebar .content-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.has-sidebar .content-area {
	flex: 1 1 60%;
}

.widget-area {
	flex: 1 1 260px;
	max-width: 320px;
}

@media (max-width: 700px) {
	.has-sidebar .content-wrap {
		flex-direction: column;
	}

	.widget-area {
		max-width: none;
	}
}

/* -----------------------------------------------------------------------
   4.0 Header
------------------------------------------------------------------------ */
.site-header {
	border-bottom: 1px solid var(--lf-color-border);
	padding: 1.25rem 0;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.custom-logo-link img {
	display: block;
	max-height: 64px;
	width: auto;
}

.site-title {
	font-size: 1.5rem;
	margin: 0;
}

.site-title a {
	text-decoration: none;
	color: var(--lf-color-text);
}

.site-description {
	margin: 0.15rem 0 0;
	color: var(--lf-color-text-light);
	font-size: 0.95rem;
}

/* Primary navigation */
.main-navigation {
	margin-top: 1rem;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: inline-block;
	padding: 0.4rem 0.1rem;
	text-decoration: none;
	color: var(--lf-color-text);
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--lf-color-accent);
}

.main-navigation ul ul {
	display: none;
	flex-direction: column;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--lf-color-background);
	border: 1px solid var(--lf-color-border);
	padding: 0.5rem;
	min-width: 180px;
	z-index: 10;
}

.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul {
	display: flex;
}

.menu-toggle {
	display: none;
	background: var(--lf-color-surface);
	border: 1px solid var(--lf-color-border);
	border-radius: var(--lf-radius);
	padding: 0.5rem 0.9rem;
	font-size: 1rem;
	cursor: pointer;
}

@media (max-width: 700px) {
	.menu-toggle {
		display: inline-block;
	}

	.main-navigation ul {
		display: none;
		flex-direction: column;
	}

	.main-navigation.toggled ul {
		display: flex;
	}

	.main-navigation ul ul {
		position: static;
		border: none;
		padding-left: 1rem;
	}
}

/* -----------------------------------------------------------------------
   5.0 Hero (front page only)
------------------------------------------------------------------------ */
.hero {
	background-color: var(--lf-color-surface);
	padding: 3rem 0;
	text-align: center;
}

.hero h1 {
	margin-top: 0;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.hero p {
	color: var(--lf-color-text-light);
	max-width: 42rem;
	margin: 0 auto;
}

/* -----------------------------------------------------------------------
   6.0 Posts / Archive
------------------------------------------------------------------------ */
.post,
.page {
	margin-bottom: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--lf-color-border);
}

.post:last-child {
	border-bottom: none;
}

.entry-title {
	margin-top: 0;
}

.entry-title a {
	text-decoration: none;
}

.entry-meta {
	color: var(--lf-color-text-light);
	font-size: 0.9rem;
	margin-bottom: 0.75rem;
}

.entry-meta a {
	color: inherit;
}

.post-thumbnail img {
	border-radius: var(--lf-radius);
	margin-bottom: 1rem;
}

.entry-content > * + * {
	margin-top: 1em;
}

.entry-footer {
	margin-top: 1rem;
	font-size: 0.9rem;
	color: var(--lf-color-text-light);
}

/* -----------------------------------------------------------------------
   7.0 Pagination
------------------------------------------------------------------------ */
.pagination,
.post-navigation,
.comment-navigation {
	margin: 2rem 0;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	margin: 0 0.15rem;
	border: 1px solid var(--lf-color-border);
	border-radius: var(--lf-radius);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--lf-color-accent);
	color: #fff;
	border-color: var(--lf-color-accent);
}

/* -----------------------------------------------------------------------
   8.0 Comments
------------------------------------------------------------------------ */
.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	margin: 0 0 0 1.5rem;
	padding: 0;
}

.comment-body {
	border: 1px solid var(--lf-color-border);
	border-radius: var(--lf-radius);
	padding: 1rem;
	margin-bottom: 1rem;
}

.comment-author img {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 0.5rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 480px;
	padding: 0.5rem;
	border: 1px solid var(--lf-color-border);
	border-radius: var(--lf-radius);
	font: inherit;
	background: var(--lf-color-background);
	color: var(--lf-color-text);
}

.comment-form label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

.comment-form p {
	margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------
   9.0 Buttons / forms
------------------------------------------------------------------------ */
button,
input[type="submit"],
.wp-block-button__link {
	background-color: var(--lf-color-accent);
	color: #fff;
	border: 1px solid var(--lf-color-accent);
	border-radius: var(--lf-radius);
	padding: 0.55rem 1.1rem;
	font: inherit;
	cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
	opacity: 0.9;
}

.search-form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.search-form label {
	flex: 1 1 auto;
}

.search-form .search-field {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid var(--lf-color-border);
	border-radius: var(--lf-radius);
	font: inherit;
}

/* -----------------------------------------------------------------------
   10.0 Widgets / Sidebar / Footer
------------------------------------------------------------------------ */
.widget {
	margin-bottom: 2rem;
}

.widget-title {
	font-size: 1.1rem;
	border-bottom: 1px solid var(--lf-color-border);
	padding-bottom: 0.4rem;
	margin-bottom: 0.75rem;
}

.widget ul {
	margin: 0;
	padding-left: 1.1rem;
}

.site-footer {
	border-top: 1px solid var(--lf-color-border);
	background: var(--lf-color-surface);
	padding: 2rem 0 1.25rem;
	font-size: 0.9rem;
	color: var(--lf-color-text-light);
}

.footer-widgets {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: 1.5rem;
}

.footer-widgets .widget-area {
	flex: 1 1 220px;
	max-width: none;
}

.site-info {
	text-align: center;
	border-top: 1px solid var(--lf-color-border);
	padding-top: 1rem;
}

/* -----------------------------------------------------------------------
   11.0 Alignment (block editor support)
------------------------------------------------------------------------ */
.alignleft {
	float: left;
	margin: 0.4rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.4rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	max-width: calc(var(--lf-container-width) + 4rem);
}

.alignfull {
	max-width: 100%;
}

/* -----------------------------------------------------------------------
   12.0 Utility
------------------------------------------------------------------------ */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}