/* main.css */

:root {
	--viridian: #40826D;
	--viridian-light: #60C4A4;
	--bg-light: white;/*#f6fdf9;#E0E3E6;*/
	--bg-dark: #343837;
	--text-light: #222222;
	--text-dark: #fefefe;
	--form-bg-light:#efefef;
	--form-bg-dark:#e0e0e0;
	--link-hover: #2e5a50;
	--border-color:#77837c;
	--color-success:#155724;
	--color-error: #a51d2d;
	--color-secondary:#E1A982;
	--vertical-offset-sm:4.5rem;
	--vertical-offset:8rem;

	/* Viridian Variations (light to dark) */
	--viridian-000: #eefffa;
	--viridian-100: #D5F5EC;
	--viridian-200: #A8CFC1;
	--viridian-400: #40826D;
	--viridian-700: #265148;

	/* Desaturated Viridian Variations (light to dark) */
	--desat-viridian-100: #D3E7E1;
	--desat-viridian-200: #A0BFB8;
	--desat-viridian-400: #6B8C85;
	--desat-viridian-700: #42544F;

	/* Earthy Neutrals (light to dark) */
	--earthy-000: #FFFBF4;
	--earthy-100: #F5E9D3;
	--earthy-200: #E5D3B3;
	--earthy-400: #CBB994;
	--earthy-700: #A08350;

	/* Complementary (Muted Peach/Coral, light to dark) */
	--comp-100: #FFE9D6;
	--comp-200: #EFCDB8;
	--comp-400: #E1A982;
	--comp-700: #B87C4B;

	/* Gray Palette (light to dark) */
	--gray-100: #F5F6F7;
	--gray-200: #E0E3E6;
	--gray-400: #A0A4A8;
	--gray-700: #575d5b;
	--gray-900: #343837;

	--padding-inline: 2rem;
	--content-max-width: 1024px;/*70ch;*/
	--breakout-max-width: 1200px;/*85ch;*/
	--breakout-size: calc( (var(--breakout-max-width) - var(--content-max-width) ) / 2);
	--sidebar-width: 200px;
	--sidebar-gap: 4ch;
	--feature-width: 200px;
	--feature-gap: 4ch;

}
[data-theme='dark'] {
	--bg-light: var(--bg-dark);
	--text-light: var(--text-dark);
	--form-bg-light: var(--form-bg-dark);
	--link-hover: var(--desat-viridian-200);
}


/* Primary content grid: Desktop-first approach*/
.content-grid{
	display:grid;
	grid-template-columns:
	[full-width-start]
		minmax(var(--padding-inline),1fr)
	[breakout-start]
		minmax(0, var(--breakout-size))
	[content-start]
		minmax(0, min(calc(100% - (var(--sidebar-width) - var(--padding-inline)) * 2), var(--content-max-width)))
	[content-end]
		minmax(0, var(--breakout-size))
	[breakout-end]
		minmax(var(--padding-inline),1fr)
	[full-width-end];
}
/* sidebar and feature are mirrored 2-column grid */
.sidebar-grid{
	display:grid;
	grid-template-columns:
	[full-width-start]
		minmax(var(--padding-inline),1fr)
	[sidebar-start]
		var(--sidebar-width)
	[sidebar-end]
		var(--padding-inline)
	[sidebar-page-start]
		minmax(0, min(calc(100% - (var(--sidebar-width) - var(--padding-inline)) * 2), var(--content-max-width)))
	[sidebar-page-end]
		minmax(var(--padding-inline),1fr)
	[full-width-end];
}
.feature-grid{
	display:grid;
	grid-template-columns:
	[full-width-start]
		minmax(var(--padding-inline),1fr)
	[feature-page-start]
		minmax(0, min(calc(100% - (var(--sidebar-width) - var(--padding-inline) * 2)), var(--content-max-width)))
	[feature-page-end]
		var(--padding-inline)
	[side-feature-start]
		var(--feature-width)
	[side-feature-end]
		minmax(var(--padding-inline),1fr)
	[full-width-end];
}
.content-grid > * {
	grid-column: content;
}
.content-grid > .breakout {
	grid-column: breakout;
}
.content-grid > .full-width {
	grid-column: full-width;
	display: grid;
	grid-template-columns: inherit;
}
.sidebar,.side-feature {
  display: block;
}
.sidebar-grid > * {
	grid-column: sidebar-page;
}
.sidebar-grid > .table-of-contents {
	grid-column: sidebar;
}
.feature-grid > * {
	grid-column: feature-page;
}
.feature-grid > .news-related, .feature-grid > .forum-related, .feature-grid > .tag-related {
	grid-column: side-feature;
}
.table-of-contents {
	grid-column: sidebar;
	position: sticky;
	top:0;
}
.doc-content {
	grid-column: sidebar-page;
}
.topic-grid{
	display:grid;
	grid-template-columns: 48px 1fr 48px;
	grid-template-areas:
	"topic-title topic-title topic-title"
	"author-avatar author-name topic-options";
	margin-bottom: 2rem;
}
.topic-title {
	grid-area: topic-title;
}
.author-avatar {
	grid-area: author-avatar;
}
.author-name {
	grid-area: author-name;
}
.topic-options {
	grid-area: topic-options;
}
.topic-options {
	grid-area: topic-options;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.doc-page-image {
	width: auto;
	height: auto;
	max-width: 800px;
}
.doc-chapter-image {
	max-width: 100%;
}

figure{
	display: inline-block;
}
figure img{
	max-width: 100%;
}
figcaption{
	font-weight: 600;
	font-size: .9rem;
	contain: inline-size;
}


/* Follow dropdown styling */
.follow-dropdown {
	position: relative;
	display: inline-block;
}
.dropdown-toggle {
	background-color: var(--viridian-200);
	color:var(--viridian-700);
	border: none;
	border-radius: 4px;
	padding: 6px 12px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.dropdown-toggle:hover {
	background-color: var(--viridian);
	color: white;
}
.follow-status {
	font-weight: 500;
}
.follower-count {
	font-size: 0.9em;
	opacity: 0.8;
}
.dropdown-arrow {
	font-size: 0.7em;
	margin-left: 4px;
}
.dropdown-menu {
	display: none;
	position: absolute;
	right: 0;
	min-width: 200px;
	background-color: white;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	border: 1px solid #ddd;
	border-radius: 4px;
	z-index: 1000;
	margin-top: 5px;
}
.dropdown-menu.show {
	display: block;
}
.dropdown-item {
	display: block;
	padding: 8px 16px;
	color: #333;
	text-decoration: none;
	border-bottom: 1px solid #eee;
}
.dropdown-item:last-child {
	border-bottom: none;
}
.dropdown-item:hover {
	background-color: #f5f5f5;
}

/* Followed topics list styling */
.followed-topics-list {
	margin: 20px 0;
}
.followed-topic-item {
	padding: 15px;
	border: 1px solid #e0e0e0;
	margin-bottom: 15px;
	border-radius: 5px;
	background-color: #fff;
	transition: opacity 0.3s ease;
}
.followed-topic-item h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.4em;
}
.topic-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	font-size: 0.9em;
	color: #666;
	margin-bottom: 10px;
}
.topic-actions {
	margin-top: 10px;
	text-align: right;
}
.unfollow-button {
	display: inline-block;
	padding: 5px 10px;
	background-color: var(--viridian-200);
	border: none;
	border-radius: 3px;
	color: var(--viridian-700);
	text-decoration: none;
	font-size: 0.9em;
}
.unfollow-button:hover {
	background-color: var(--viridian);
	color: white;
}


@media (max-width: 959px) {
	.content-grid{
		grid-template-columns:
		[full-width-start]
		minmax(var(--padding-inline),1fr)
		[breakout-start content-start]
		min(100% - (var(--padding-inline) * 2), var(--content-max-width))
		[content-end breakout-end]
		minmax(var(--padding-inline),1fr)
		[full-width-end];
	}
	.sidebar-grid {
	grid-template-columns:
		[full-width-start]
		minmax(var(--padding-inline), 1fr)
		[sidebar-start sidebar-page-start]
		min(100% - (var(--padding-inline) * 2), var(--content-max-width))
		[sidebar-page-end sidebar-end]
		minmax(var(--padding-inline), 1fr)
		[full-width-end];
	}
	.feature-grid {
	grid-template-columns:
		[full-width-start]
		minmax(var(--padding-inline), 1fr)
		[feature-page-start side-feature-start]
		min(100% - (var(--padding-inline) * 2), var(--content-max-width))
		[side-feature-end feature-page-end]
		minmax(var(--padding-inline), 1fr)
		[full-width-end];
	}
	/* Hide sidebar on small screens */
	.sidebar,.table-of-contents,
	.side-feature,.news-related,.forum-related {
		display: none;
	}
}
/* END grid layouts */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
	margin:0;
}
body {
	margin: 0;
	font-family: system-ui, sans-serif;
	background: var(--bg-light);
	color: var(--text-light);
}

.primary-header,.primary-footer {
	padding-block: .5rem;
	background: transparent;/*var(--viridian);*/
	color: var(--viridian);
}
.primary-header{
	border-bottom:1px solid var(--viridian-100);
}
.primary-footer{
	border-top:1px solid var(--viridian-200);
	margin-top:4rem;
}
.primary-header-breadcrumb {
	padding-block:.375rem;
	padding-inline: .5rem;
	margin-block-end: 2rem;
	gap:.5rem;
	background: transparent;/*var(--desat-viridian-100);*/
	color: var(--text-light);
	border-bottom:1px solid var(--viridian-200);
}
.primary-header__layout,.primary-footer__layout,.search-form {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.search-form {
	flex-wrap: nowrap;
	gap:.5rem;
}
.breadcrumb a {
	color: var(--viridian);
	text-decoration: none;
}
.breadcrumb a:hover {
	text-decoration: underline;
}
.breadcrumb .sep {
	opacity: 0.5;
}
.breadcrumb .current {
	font-weight: bold;
	color: var(--text-light);
}
/* Search container styles */
.search-container {
	position: relative;
	display: flex;
	align-items: center;
}

/* Always show search toggle button */
.search-toggle {
	display: block;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	color: var(--text-color);
}

.search-toggle:hover {
	background-color: var(--highlight-color);
}

/* Search popup styling */
.search-popup {
	display: none; /* Hidden by default */
	position: absolute;
	top: 100%;
	right: 0;
	background: white;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	padding: 1rem;
	border-radius: 4px;
	z-index: 100;
	width: 300px;
	margin-top: 0.5rem;
}

.search-popup.active {
	display: block; /* Show when active class is added */
}

.search-popup-content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.search-popup-input-wrapper {
	display: flex;
	position: relative;
}

.search-popup-input-wrapper input {
	flex: 1;
	padding: 8px;
	padding-right: 40px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
}

.search-popup-input-wrapper button {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background: none;
	border: none;
	padding: 0 12px;
	cursor: pointer;
	color: var(--text-color);
}

.avatar{
	max-width: 128px;
	width:100%;
	height:auto;
}
.small,.forum{
	font-size: .85rem;
	color: var(--text-light);
	text-align: left;
}
.small-center {
	font-size: .85rem;
	color: var(--text-light);
	text-align: center;
}
.icon24{
	width:24px;
	height:auto;
}
.icon36{
	width:36px;
	height:auto;
}
.notices{
	/* notification icons */
	width:0;
	height: auto;
}

.logo img {
	display: block;
	height: 64px;
	width: auto;
}
.user-auth .user-link {
	color: #fff;
	text-decoration: none;
	padding: .25rem .5rem;
}
a { color: var(--viridian); text-decoration: none; }
a:hover { color: var(--link-hover); }
a.footer-link{
	color:var(--viridian-700);
}
/* Breadcrumb styles */
.breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: var(--text-light);
	margin: 0;
	padding: 0;
}
.breadcrumb a {
	color: var(--viridian);
	text-decoration: none;
}
.breadcrumb a:hover {
	text-decoration: underline;
}
.breadcrumb .sep {
	opacity: 0.5;
}
.breadcrumb .current {
	font-weight: bold;
	color: var(--text-light);
}

.site-nav {
	text-align: center;
}
.site-nav ul {
	display: inline-flex;
	gap: 4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav a {
	color: #fff;
	text-decoration: none;
	padding:.5rem;
}
.site-nav a:hover {
	color:var(--viridian-700);
	background-color: var(--viridian-200);
	text-decoration: none;
	padding:.5rem;
	border-radius: 4px;
}
.nav-toggle {
	display: none;
	font-size: 1.5rem;
	background: none;
	border: none;
	color: var(--viridian);
}

@media (max-width: 960px) { /* Mobile nav: hide site-nav, show hamburger */
	.site-nav {
		display: none !important;
	}
	.nav-toggle {
		display: block !important;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}

input,
button,
select,
textarea {
	font:inherit;
	box-sizing: border-box;
}

/* MOBILE OVERLAY */
.mobile-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.8);
	overflow-y: auto;
	z-index: 2000;
}
.mobile-content {
	background: var(--bg-light);
	max-width: 300px;
	width: 100%;
	height: 100%;
	padding: 1rem;
}
.mobile-content h2 {
	margin-top: 0;
}
.mobile-nav, .mobile-toc {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}
.mobile-nav li, .mobile-toc li {
	margin-bottom: .75rem;
}
.mobile-nav a, .mobile-toc a {
	color: var(--text-light);
	text-decoration: none;
	font-size: 1rem;
}
.mobile-nav a:hover, .mobile-toc a:hover {
	text-decoration: none;
}
.mobile-toc li {
	position: relative;
	padding-left: 1.2rem;
}
.mobile-toc li::before {
	content: '🍃';
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}
.mobile-toc li.active::before {
	opacity: 1;
}


/* Navigation */
.site-nav ul {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav a {
	color: var(--viridian-700);
	text-decoration: none;
	font-weight: 600;
}
.site-nav a:hover {
	text-decoration: none;
}
/* User Dropdown */
.user-dropdown {
	position: relative;
	cursor: pointer;
}
hr.sep{
	color: var(--gray-200);
	width: auto;
	margin-inline: 2rem;
}
.user-dropdown .user-label {
	color: var(--viridian-700);
	padding: .25rem .5rem;
	display: block;
}
.user-dropdown .dropdown-menu {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	background: var(--bg-light);
	min-width: 180px;
	border: 1px solid var(--viridian-200);
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	z-index: 1001;
}
.user-dropdown .dropdown-menu a {
	display: block;
	padding: .5rem;
	color: var(--viridian-700);
	text-decoration: none;
}
.user-dropdown .dropdown-menu a:hover {
	background: #f0f0f0;
}
.user-dropdown.open .dropdown-menu {
	display: block;
}
/* Dark theme override */
[data-theme="dark"] .dropdown-menu {
	background: var(--bg-light);
	color: var(--text-light);
	border: 1px solid #444;
}

[data-theme="dark"] .dropdown-menu a {
	color: #ddd;
}

[data-theme="dark"] .dropdown-menu a:hover {
	background: #333;
	color: var(--viridian);
}

img.full-width {
	width: 100%;
	max-height: 40vh;
	object-fit: cover;
}

/* Heading levels */
h1 { font-size: 2rem; font-weight: bold; color: var(--viridian); }
h2 { font-size: 1.5rem; margin-top: 2rem; color: var(--viridian); }
h3 { font-size: 1.25rem; margin-top: 1.5rem; color: var(--viridian); }
h4 { font-size: 1.125rem; font-weight: bold; margin-top: 1.5rem; color: var(--viridian); }

/* Feature grid */
.home-features {
	padding: 2rem 0;
}
.home-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
}
.home-feature {
	background: var(--desat-viridian-100);
	color: var(--text-light);
	border-radius: 6px;
	border: 0 solid transparent;
	padding: 1rem;
	transition: background 0.3s ease, color 0.3s ease;
}

/* Documentation */
.table-of-contents ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.table-of-contents li {
	margin-bottom: 0.5rem;
}
.table-of-contents li > ul {
	margin-top:.25rem;
	margin-left: 1.5rem;
}
.table-of-contents li > a {
	display: block;
	position: relative;
	padding-left: 1.5rem;
	color: var(--veridian);
	text-decoration: none;
	font-weight: normal;
}
.table-of-contents li.active > a::before,
.table-of-contents li > a:hover::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	position: absolute;
	left: 0;
	top: 0.15em;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none"><path d="M34 4C26 6 18 14 14 23s-2 20 6 26c6 4 14 4 20-2 4-4 6-8 6-14 0-8-6-16-12-20z" fill="%2340826D" stroke="%23888" stroke-width="2"/><path d="M28 32c4 4 4 10 4 18" stroke="%23000" stroke-width="2" stroke-linecap="round"/></svg>');
}
.table-of-contents li > a:hover {
	color: var(--viridian-400);
}
.table-of-contents li.active {
	color: var(--viridian-400);
}
.table-of-contents li.active > a{
	font-weight: bold;
}
.doc-body {
	line-height: 1.6;
}
.doc-body ul {
	padding-left: 1.5rem;
	list-style-type: none;
}
.doc-body li {
	margin-bottom: 0.5rem;
}

dl, dt, dd {
	line-height: 1.25; /* Adjust line spacing */
}
dt {
	font-weight: bold; /* Make terms bold */
	margin-top: .5rem; /* Add space above terms */
}
dd {
	margin: 0 0 1rem 2rem; /* Indent descriptions and add bottom margin */
}
pre {
	background-color: var(--desat-viridian-100);
	padding-inline: 2rem;
	font-family: 'Courier New', Courier, monospace;
	font-weight: 600;
}
pre code {
	white-space: pre-wrap;
}

/* News */
.news-excerpt {
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--gray-200);
	padding-bottom: 1.5rem;
}
.news-thumb {
	max-width: 100%;
	margin: 1rem 0;
	border-radius: 4px;
}
.read-more {
	color: var(--viridian);
	font-weight: bold;
	font-size: .9rem;
}
.news-archive {
	list-style: none;
	padding: 0;
}
.news-archive > li {
	margin-bottom: 1rem;
}
.news-archive ul {
	list-style: none;
	padding-left: 1rem;
}
.news-archive a {
	color: var(--text-light);
	text-decoration: none;
}
.news-archive a:hover {
	text-decoration: none;
	color: var(--viridian);
}
/* Blog Aside: Archive Leaf Marker */
.news-related .news-archive {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.news-related .news-archive > li {
	margin-bottom: 1rem;
}
.news-related .news-archive > li > strong {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}
.news-related .news-archive ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.news-related .news-archive ul li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.25rem;
}
/* Only show leaf on hover or active */
.news-related .news-archive ul li::before {
	content: none; /* hide by default */
}
.news-related .news-archive ul li:hover::before,
.news-related .news-archive ul li.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1em;
	height: 1em;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none"><path d="M34 4C26 6 18 14 14 23s-2 20 6 26c6 4 14 4 20-2 4-4 6-8 6-14 0-8-6-16-12-20z" fill="%2340826D" stroke="%23888" stroke-width="2"/><path d="M28 32c4 4 4 10 4 18" stroke="%23000" stroke-width="2" stroke-linecap="round"/></svg>');
}


 /* Tag Cloud */
.tag-cloud ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	line-height: 2;
}
.tag-cloud li {
	font-size: 0.85rem;
}
.tag-cloud a {
	color: var(--viridian-700);
	background-color: var(--viridian-100);
  	padding: 0.3rem 0.5rem;
	border-radius: 4px;
	text-decoration: none;
}
.tag-cloud a:hover {
	background: var(--viridian);
	color: white;
}

/* Forums */
.forum-list,.category-list,.topic-list {
	display:grid;
	grid-template-columns: 48px 1fr 48px 48px minmax(120px,15%);
	grid-auto-rows: auto;
	gap:.5rem;
	padding:.5rem;
	border:1px solid var(--gray-200);
	border-radius: 6px;
	margin-bottom:2rem;
	background: white;
}
.followed-list{
	display:grid;
	grid-template-columns: 48px 1fr minmax(120px,15%);
	grid-auto-rows: auto;
	align-items: start;
	gap:.5rem;
	padding:.5rem;
	border:1px solid var(--gray-200);
	border-radius: 6px;
	margin-bottom:2rem;
	background: white;
}
.forum-list h3,.followed-list h3 {
	margin:0;
}
.category-main > h3{
	margin:0;
}
.bookmark-list{
	display:grid;
	grid-template-columns: 1fr minmax(120px,15%);
	grid-auto-rows: auto;
	align-items: start;
	gap:.5rem;
	padding:.5rem;
	border:1px solid var(--gray-200);
	border-radius: 6px;
	margin-bottom:2rem;
	background: white;
}
.bookmark-list h3 {
	margin:0;
}

/* News Section */




/* Buttons */
.btn {
	padding: 14px 28px;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease;
	width:160px;
	align-self: flex-start;
}
.btn-primary {
	background-color: var(--viridian);
	color: white;
}
.btn-primary:hover {
	background-color: var(--link-hover);
}
.btn-secondary {
	background-color: var(--color-secondary);
	color: var(--veridian);
}
.btn-secondary:hover {
	background-color: #E0E3E6;
}

/* Forms Section */
/** FORM section
*/
.auth-wrapper {
	max-width: 600px;
	margin: 4rem auto;

	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.5);
	overflow: hidden;
}
.auth-form {
	padding-inline: 2rem;
}
.auth-form h2{
	text-align: center;
}
.auth-form p {
	margin-bottom: 20px;
	color: var(--text-light);
}
.auth-form-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.form-field {
	display: flex;
	flex-direction: column;
}
.form-field.full-width {
	grid-column: 1 / -1;
}
.form-field label {
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--text-light);
	font-size: .9rem;
}
.form-field input:not(.toggle),
.form-field textarea,
.form-field select {
	width:100%;
	padding: .375rem;
	border: 2px solid var(--desat-viridian-400);
	border-radius: 6px;
	font-size: 16px;
	transition: border-color 0.3s ease;
}
.form-field textarea{
	resize:vertical;
}

/* (keep your focus styling too) */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	border-color: var(--viridian);
	outline: none;
}
.form-field input:not(.toggle),
.form-field input:not([read-only]):not(:disabled),
.form-field textarea:not([read-only]):not(:disabled),
.form-field select:not(:disabled) {
	background-color: white;
	border-color: var(--viridian);
}
.form-field input[type="text"]:read-only,
.form-field input[type="email"]:read-only,
.form-field input[type="number"]:read-only,
.form-field textarea:read-only,
.form-field select:disabled {
	border-color: var(--desat-viridian-400);
	background-color: var(--gray-100);
	color: var(--gray-700);
}
.form-actions {
	margin-top: 10px;
}

/* Checkbox Toggle  */
.toggle-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.toggle {
	appearance: none;
	-webkit-appearance: none;
	width: 3rem;
	height: 1.5rem;
	background: #ccc;
	border-radius: 1rem !important;
	border: 2px solid var(--viridian);
	position: relative;
	transition: background 0.3s;
	cursor: pointer;
	flex-shrink: 0;
}
.toggle::before {
	content: "";
	position: absolute;
	width: 1.2rem;
	height: 1.2rem;
	top: 0.015rem;
	left: 0.15rem;
	background-color: var(--desat-viridian-200);
	border-radius: 50%;
	transition: transform 0.3s;
	z-index: 1;
}
.toggle:checked {
	background: var(--viridian);
}
.toggle:checked::before {
	transform: translateX(1.5rem);
	background: var(--viridian);
}

/* Drag & Drop Image Upload */
.drop-zone {
	position: relative;
	padding: 1em;
	border: 2px dashed var(--viridian);
	border-radius: 8px;
	text-align: center;
	cursor: pointer;
}
.drop-zone.dragover {
	background: #f0f0f0;
}
.drop-zone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

/** Account Avatar */
.grid-wrapper{
	display:grid;
	gap:1rem;
	width: 100%;
	box-sizing: border-box;
	align-items: start;
}
.grid-fixed-right{
	grid-template-columns: 1fr 128px;
}
.grid-fixed-right-lg{
	grid-template-columns: 1fr 256px;
}


/* Pagination styles */
.pager {
	list-style: none;
	padding: 0;
	margin: 2rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}
.pager li {
	display: inline-block;
}
.pager a,
.pager .active {
	display: block;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--viridian);
	border-radius: 4px;
	color: var(--viridian);
	text-decoration: none;
}
.pager a:hover {
	background-color: var(--viridian);
	color: white;
}
.pager .active {
	background-color: var(--viridian);
	color: white;
	font-weight: bold;
	pointer-events: none;
}

[data-theme='dark'] .pager a,
[data-theme='dark'] .pager .active {
	border-color: var(--viridian-200);
}
[data-theme='dark'] .pager a:hover {
	background: var(--viridian-200);
	color: var(--viridian-700);
}

/* Search Results */
.search-highlight {
	background-color: #ffff99;
	padding: 0 2px;
	font-weight: bold;
}
.search-page-form {
	margin-bottom: 2rem;
	padding: 1rem;
	background-color: var(--background-alt);
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}
.search-result-item {
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}
.search-result-item h2 {
	margin-bottom: 0.5rem;
	font-size: 1.4rem;
}
.search-result-summary {
	font-style: italic;
	margin-bottom: 0.5rem;
	color: var(--text-muted);
}
.search-result-excerpt {
	margin-bottom: 0.5rem;
	line-height: 1.5;
}
.search-result-meta {
	font-size: 0.9rem;
	color: var(--text-muted);
	display: flex;
	gap: 1rem;
}
.search-result-type {
	padding: 2px 6px;
	background-color: var(--gray-200);
	border-radius: 4px;
	font-size: 0.8rem;
}
.search-pagination {
	margin-top: 2rem;
}
.pagination {
	display: flex;
	list-style: none;
	padding: 0;
	gap: 0.5rem;
}
.pagination li {
	border: 2px solid var(--viridian);
	border-radius: 4px;
	padding: 0.5rem 1rem;
	display: block;
}
.pagination li a {
	text-decoration: none;
}
.pagination li.active {
	background-color: var(--desat-viridian-100);
}
.pagination li:hover{
	background-color: var(--desat-viridian-200);
}
.no-results {
	padding: 2rem;
	background-color: var(--background-alt);
	border-radius: 4px;
}
.no-results h3 {
	margin-top: 1rem;
}
/* Debug styles */
.debug-output {
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	padding: 1rem;
	margin-bottom: 2rem;
	font-family: monospace;
	font-size: 0.9rem;
	overflow-x: auto;
}

.debug-output pre {
	margin: 0;
}



/*  Display trick for sticky footer */
.site-wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
main,.spacer {
	flex: 1;
}

/*  END Display trick for sticky footer */


/* Footer */
.site-footer {
	background: var(--viridian);
	color: white;
	padding: 1rem;
}
.footer-flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 1400px;
}
.site-footer a {
	color:#ffffff;
	text-decoration: none;
}