/*
 * Minecraft-Inspired Theme for Dokka HTML Documentation
 * Lorekeeper Mod - 4everCraft
 *
 * Color Palette:
 * Greens:
 *   - Grassfield: #477A1E (dark)
 *   - Matcha: #70B237 (medium)
 *   - Young Green: #8FCA5C (light)
 * Browns:
 *   - Solid Brown: #61371F (dark)
 *   - Burma Teak: #854F2B (medium)
 *   - Milk Tea: #C28340 (light)
 */

/* ============================================================================
   CSS VARIABLES
   ============================================================================ */

:root {
	/* Greens */
	--mc-green-dark: #477a1e;
	--mc-green: #70b237;
	--mc-green-light: #8fca5c;

	/* Browns */
	--mc-brown-dark: #61371f;
	--mc-brown: #854f2b;
	--mc-brown-light: #c28340;

	/* Override Dokka's navigation background */
	--color-background-nav: var(--mc-brown-dark) !important;

	/* Override active tab/selection color */
	--color-key-blue: var(--mc-green) !important;
	--color-key-blue-hover: var(--mc-green-light) !important;
	--active-tab-border-color: var(--mc-green) !important;
	--sidemenu-section-active-color: var(--mc-green) !important;
}

.theme-dark {
	--color-background-nav-dt: var(--mc-brown-dark) !important;
}

/* ============================================================================
   NAVIGATION BAR
   ============================================================================ */

/* Top navigation bar background */
.navigation {
	background-color: var(--mc-brown-dark) !important;
	border-bottom: 3px solid var(--mc-green);
}

.theme-dark .navigation {
	background-color: var(--mc-brown-dark) !important;
}

/* Library name styling with animated icon */
.library-name--link {
	color: #ffffff !important;
}

/* Add animated crafting table icon before library name */
.library-name--link::before {
	content: "";
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-right: 8px;
	vertical-align: middle;
	background-image: url("../images/icon.gif");
	background-size: contain;
	background-repeat: no-repeat;
}

/* ============================================================================
   SIDEBAR
   ============================================================================ */

/* Active item in sidebar - use green instead of blue */
.toc--part[data-active] > .toc--row .toc--button,
.toc--part[data-active] > .toc--row .toc--link {
	background-color: var(--mc-green) !important;
}

.toc--part[data-active] > .toc--row .toc--link:hover {
	background-color: var(--mc-green-light) !important;
}

/* ============================================================================
   MAIN CONTENT - HEADINGS
   ============================================================================ */

.main-content h1 {
	color: var(--mc-brown-dark) !important;
	border-bottom: 2px solid var(--mc-green) !important;
	padding-bottom: 0.5rem !important;
}

.theme-dark .main-content h1 {
	color: var(--mc-brown-light) !important;
}

.main-content h2 {
	color: var(--mc-brown) !important;
	border-left: 4px solid var(--mc-green) !important;
	padding-left: 0.75rem !important;
}

.theme-dark .main-content h2 {
	color: var(--mc-brown-light) !important;
}

/* ============================================================================
   LINKS
   ============================================================================ */

.main-content a:not([data-name]) {
	color: var(--mc-green-dark) !important;
	border-bottom-color: var(--mc-green-dark) !important;
}

.main-content a:not([data-name]):hover {
	color: var(--mc-green) !important;
	border-bottom-color: var(--mc-green) !important;
}

.theme-dark .main-content a:not([data-name]) {
	color: var(--mc-green-light) !important;
	border-bottom-color: var(--mc-green-light) !important;
}

.theme-dark .main-content a:not([data-name]):hover {
	color: var(--mc-green) !important;
	border-bottom-color: var(--mc-green) !important;
}

/* ============================================================================
   CODE
   ============================================================================ */

/* Inline code */
code:not(.block) {
	background: rgba(71, 122, 30, 0.1) !important;
}

.theme-dark code:not(.block) {
	background: rgba(143, 202, 92, 0.15) !important;
}

/* Code blocks - add green accent border */
.symbol:not(.token):not(.wrapped),
code.block {
	border-left: 4px solid var(--mc-green) !important;
}

/* ============================================================================
   TABLES
   ============================================================================ */

th {
	background-color: var(--mc-green-dark) !important;
	color: #ffffff !important;
}

.theme-dark th {
	background-color: var(--mc-green-dark) !important;
}

/* ============================================================================
   PLATFORM TAGS (JVM badges)
   ============================================================================ */

.platform-tag.jvm-like {
	--platform-tag-color: var(--mc-green) !important;
}

.filter-section .platform-tag.jvm-like[data-active] {
	background-color: var(--mc-green) !important;
}

/* ============================================================================
   TABS
   ============================================================================ */

.section-tab[data-active=""] {
	border-bottom-color: var(--mc-green) !important;
}

.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=""] {
	border-bottom-color: var(--mc-green) !important;
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.footer {
	background-color: var(--mc-brown-dark) !important;
	border-top: 3px solid var(--mc-green) !important;
}

.theme-dark .footer {
	background-color: var(--mc-brown-dark) !important;
}

/* Footer text color - ensure readability */
.footer,
.footer span {
	color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer link (Dokka) - keep white with underline */
.footer--link {
	color: var(--mc-green-light) !important;
	border-bottom-color: var(--mc-green-light) !important;
}

.footer--link:hover {
	color: #ffffff !important;
	border-bottom-color: #ffffff !important;
}

/* Go to top button - ensure icon stays visible (white) */
.footer--button {
	filter: none !important;
}

.footer--button_go-to-top {
	/* The icon is white SVG, invert for light backgrounds but we have dark footer */
	filter: none !important;
}

/* ============================================================================
   SCROLLBAR
   ============================================================================ */

::-webkit-scrollbar-thumb {
	background: var(--mc-brown-light) !important;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--mc-brown) !important;
}

/* ============================================================================
   FOCUS STATES - Use green instead of blue
   ============================================================================ */

*:focus-visible {
	outline-color: var(--mc-green) !important;
}

.main-content a:not([data-name]):focus-visible {
	box-shadow: 0 0 0 4px rgba(112, 178, 55, 0.5) !important;
}