/*
Theme Name: HeadlessNext
Theme URI: https://github.com/Siyana158/headlessnext
Author: Aarudh NextGen AI
Author URI: https://aarudhnextgen.com/
Description: A clean, modern, general-purpose block-ready theme with minimal typography and generous whitespace. Works great as a standalone blog or business site, and pairs with the free HeadlessNext Connector plugin if you ever want to point a decoupled front end at this same WordPress install.
Version: 1.0.6
Requires at least: 6.4
Tested up to: 7.0
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: headlessnext
Tags: blog, e-commerce, one-column, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready, block-patterns, wide-blocks

Copyright (C) 2026 HeadlessNext

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.

HeadlessNext is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program. If not, see https://www.gnu.org/licenses/gpl-2.0.html.
*/

/* -----------------------------------------------------------------------
   0. Design tokens
   -------------------------------------------------------------------- */
:root {
	--hn-color-bg: #ffffff;
	--hn-color-surface: #f7f7f8;
	--hn-color-border: #e4e4e7;
	--hn-color-text: #1c1c1e;
	--hn-color-text-muted: #5b5b60;
	--hn-color-accent: #2f5fff;
	--hn-color-accent-hover: #1f45cc;
	--hn-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--hn-font-heading: Georgia, "Times New Roman", Times, serif;
	--hn-container-width: 46rem;
	--hn-container-wide: 64rem;
	--hn-radius: 6px;
	--hn-space-1: 0.5rem;
	--hn-space-2: 1rem;
	--hn-space-3: 1.5rem;
	--hn-space-4: 2.5rem;
	--hn-space-5: 4rem;
}

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

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

body {
	margin: 0;
	background: var(--hn-color-bg);
	color: var(--hn-color-text);
	font-family: var(--hn-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--hn-color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hn-font-heading);
	line-height: 1.25;
	margin: 0 0 var(--hn-space-2);
}

p {
	margin: 0 0 var(--hn-space-2);
}

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

blockquote {
	margin: var(--hn-space-3) 0;
	padding: var(--hn-space-1) var(--hn-space-3);
	border-left: 3px solid var(--hn-color-accent);
	color: var(--hn-color-text-muted);
	font-style: italic;
}

code, pre {
	font-family: Menlo, Consolas, Monaco, monospace;
	font-size: 0.9em;
}

pre {
	background: var(--hn-color-surface);
	padding: var(--hn-space-2);
	border-radius: var(--hn-radius);
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--hn-space-3) 0;
}

th, td {
	border: 1px solid var(--hn-color-border);
	padding: var(--hn-space-1);
	text-align: left;
}

hr {
	border: none;
	border-top: 1px solid var(--hn-color-border);
	margin: var(--hn-space-4) 0;
}

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

.screen-reader-text:focus {
	background-color: var(--hn-color-bg);
	border-radius: var(--hn-radius);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
	clip: auto !important;
	clip-path: none;
	color: var(--hn-color-text);
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: var(--hn-space-2);
	line-height: normal;
	padding: var(--hn-space-1) var(--hn-space-2);
	text-decoration: none;
	top: var(--hn-space-2);
	width: auto;
	z-index: 100000;
}

:focus-visible {
	outline: 2px solid var(--hn-color-accent);
	outline-offset: 2px;
}

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

.site-content {
	flex: 1 0 auto;
	padding: var(--hn-space-4) var(--hn-space-2);
}

.hn-container {
	width: 100%;
	max-width: var(--hn-container-width);
	margin-inline: auto;
}

.hn-container--wide {
	max-width: var(--hn-container-wide);
}

/* -----------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------- */
.site-header {
	border-bottom: 1px solid var(--hn-color-border);
	padding: var(--hn-space-3) var(--hn-space-2);
}

.site-header-inner {
	max-width: var(--hn-container-wide);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hn-space-2);
}

.site-branding .site-title {
	margin: 0;
	font-size: 1.5rem;
	overflow-wrap: anywhere;
	word-break: break-word;
	max-width: 100%;
}

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

.site-branding .site-description {
	margin: 0.25rem 0 0;
	color: var(--hn-color-text-muted);
	font-size: 0.9rem;
	font-family: var(--hn-font-body);
}

.custom-logo-link img {
	max-height: 48px;
	width: auto;
}

.main-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--hn-space-3);
	margin: 0;
	padding: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	color: var(--hn-color-text);
	text-decoration: none;
	font-size: 0.95rem;
}

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

.main-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	min-width: 12rem;
	margin: 0;
	padding: var(--hn-space-1) 0;
	background: var(--hn-color-bg);
	border: 1px solid var(--hn-color-border);
	border-radius: var(--hn-radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	flex-direction: column;
	gap: 0;
}

.main-navigation .sub-menu a {
	display: block;
	padding: var(--hn-space-1) var(--hn-space-2);
}

/* Keyboard + hover: keep submenu open while any item inside the parent li has focus. */
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	display: flex;
}

/* -----------------------------------------------------------------------
   4. Posts / archives
   -------------------------------------------------------------------- */
.hn-entry {
	margin-bottom: var(--hn-space-5);
}

.hn-entry-header {
	margin-bottom: var(--hn-space-2);
}

.hn-entry-title {
	font-size: 1.75rem;
	overflow-wrap: anywhere;
	word-break: break-word;
	max-width: 100%;
}

.hn-entry-title a {
	color: var(--hn-color-text);
	text-decoration: none;
}

.hn-entry-meta {
	color: var(--hn-color-text-muted);
	font-size: 0.875rem;
	font-family: var(--hn-font-body);
}

.hn-entry-meta a {
	color: inherit;
}

.hn-entry-thumbnail {
	margin: var(--hn-space-2) 0;
	border-radius: var(--hn-radius);
	overflow: hidden;
}

.hn-entry-summary,
.hn-entry-content {
	font-size: 1.0625rem;
}

.hn-entry-footer {
	margin-top: var(--hn-space-2);
	font-size: 0.875rem;
	color: var(--hn-color-text-muted);
}

.hn-read-more {
	display: inline-block;
	margin-top: var(--hn-space-1);
	font-weight: 600;
}

.hn-page-title,
.hn-archive-title {
	font-size: 2rem;
	margin-bottom: var(--hn-space-1);
	overflow-wrap: anywhere;
	word-break: break-word;
	max-width: 100%;
}

.hn-post-navigation .nav-title {
	overflow-wrap: anywhere;
	word-break: break-word;
	max-width: 100%;
}

.hn-archive-description {
	color: var(--hn-color-text-muted);
	margin-bottom: var(--hn-space-3);
}

/* -----------------------------------------------------------------------
   4b. WordPress core content classes
   -------------------------------------------------------------------- */
.wp-caption {
	max-width: 100%;
	margin-bottom: var(--hn-space-2);
}

.wp-caption img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--hn-radius);
}

.wp-caption-text {
	margin-top: var(--hn-space-1);
	font-size: 0.875rem;
	color: var(--hn-color-text-muted);
	text-align: center;
}

.gallery-caption {
	font-size: 0.875rem;
	color: var(--hn-color-text-muted);
}

.sticky {
	border-left: 3px solid var(--hn-color-accent);
	padding-left: var(--hn-space-2);
}

.bypostauthor {
	position: relative;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--hn-color-accent);
	border: 2px solid var(--hn-color-accent);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--hn-color-accent);
	color: #fff;
}

/* -----------------------------------------------------------------------
   5. Pagination
   -------------------------------------------------------------------- */
.hn-pagination {
	display: flex;
	justify-content: space-between;
	gap: var(--hn-space-2);
	margin-top: var(--hn-space-4);
	padding-top: var(--hn-space-3);
	border-top: 1px solid var(--hn-color-border);
	font-size: 0.9rem;
}

.hn-pagination a {
	text-decoration: none;
}

/* -----------------------------------------------------------------------
   6. Search form
   -------------------------------------------------------------------- */
.hn-search-form {
	display: flex;
	gap: var(--hn-space-1);
	margin: var(--hn-space-2) 0;
}

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

.hn-search-form .search-field {
	width: 100%;
	padding: 0.6em 0.8em;
	border: 1px solid var(--hn-color-border);
	border-radius: var(--hn-radius);
	font-size: 1rem;
	font-family: inherit;
}

.hn-search-form .search-submit {
	padding: 0.6em 1.2em;
	border: 1px solid var(--hn-color-accent);
	background: var(--hn-color-accent);
	color: #fff;
	border-radius: var(--hn-radius);
	cursor: pointer;
	font-size: 1rem;
}

.hn-search-form .search-submit:hover,
.hn-search-form .search-submit:focus {
	background: var(--hn-color-accent-hover);
	border-color: var(--hn-color-accent-hover);
}

/* -----------------------------------------------------------------------
   7. 404 / no results
   -------------------------------------------------------------------- */
.hn-error-404 .hn-page-title {
	font-size: 2.5rem;
}

.hn-no-results {
	padding: var(--hn-space-3);
	background: var(--hn-color-surface);
	border-radius: var(--hn-radius);
}

/* -----------------------------------------------------------------------
   8. Comments
   -------------------------------------------------------------------- */
.hn-comments {
	margin-top: var(--hn-space-5);
	padding-top: var(--hn-space-3);
	border-top: 1px solid var(--hn-color-border);
}

.hn-comments ol.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hn-comments .comment-body {
	padding: var(--hn-space-2) 0;
	border-bottom: 1px solid var(--hn-color-border);
}

.hn-comments .comment-author {
	font-weight: 600;
	font-size: 0.95rem;
}

.hn-comments .comment-metadata {
	font-size: 0.8rem;
	color: var(--hn-color-text-muted);
}

.hn-comments .children {
	list-style: none;
	margin: 0 0 0 var(--hn-space-3);
	padding: 0;
}

/* -----------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------- */
.site-footer {
	border-top: 1px solid var(--hn-color-border);
	padding: var(--hn-space-3) var(--hn-space-2);
	background: var(--hn-color-surface);
}

.site-footer-inner {
	max-width: var(--hn-container-wide);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--hn-space-2);
	color: var(--hn-color-text-muted);
	font-size: 0.875rem;
}

.footer-widgets {
	max-width: var(--hn-container-wide);
	margin: 0 auto var(--hn-space-3);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--hn-space-3);
}

.footer-widgets .widget {
	font-size: 0.9rem;
}

.footer-widgets .widget-title {
	font-size: 1rem;
	margin-bottom: var(--hn-space-1);
}

/* -----------------------------------------------------------------------
   10. Alignment utilities (block editor support)
   -------------------------------------------------------------------- */
.alignwide {
	max-width: var(--hn-container-wide);
	margin-left: calc(50% - var(--hn-container-wide) / 2);
	margin-right: calc(50% - var(--hn-container-wide) / 2);
}

.alignfull {
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.alignleft {
	float: left;
	margin-right: var(--hn-space-2);
}

.alignright {
	float: right;
	margin-left: var(--hn-space-2);
}

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

/* -----------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------- */
@media (max-width: 600px) {
	.hn-entry-title {
		font-size: 1.375rem;
	}

	.hn-page-title,
	.hn-archive-title {
		font-size: 1.5rem;
	}

	.site-header-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.main-navigation .sub-menu {
		position: static;
		border: none;
		box-shadow: none;
		padding-left: var(--hn-space-2);
		min-width: 0;
	}
}