/* Light Theme (Default) */
:root {
	--bg-primary: #ffffff;
	--bg-secondary: #f5f5f5;
	--text-primary: #212121;
	--text-secondary: #757575;
	--text-white: #ffffff;
	--card-bg: #424242;
	--card-border: #ffffff;
	--inline-code-bg: #444444;
	--inline-code-text: #EFEFEF;
	--nav-gradient-start: #9c27b0;
	--nav-gradient-end: #ff5722;
}

/* Dark Theme */
[theme="dark"] {
	--bg-primary: #121212;
	--bg-secondary: #1e1e1e;
	--text-primary: #e0e0e0;
	--text-secondary: #b0b0b0;
	--text-white: #ffffff;
	--card-bg: #2d2d2d;
	--card-border: #444444;
	--inline-code-bg: #2d2d2d;
	--inline-code-text: #e0e0e0;
	--nav-gradient-start: #7b1fa2;
	--nav-gradient-end: #d84315;
}

body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	transition: background-color 0.3s ease, color 0.3s ease;
}

main {
	flex: 1 0 auto;
}

/* Cards */
[theme="dark"] .card {
	background-color: var(--card-bg);
	color: var(--text-primary);
}

[theme="dark"] .card .card-content {
	color: var(--text-primary);
}

[theme="dark"] .card .card-action {
	border-top: 1px solid var(--card-border);
}

/* Tables */
[theme="dark"] table {
	color: var(--text-primary);
}

[theme="dark"] table.striped tbody tr:nth-child(odd) {
	background-color: var(--bg-secondary);
}

/* Code blocks */
[theme="dark"] .inline-code {
	background-color: var(--inline-code-bg);
	color: var(--inline-code-text);
}

/* Links */
[theme="dark"] a {
	color: #64b5f6;
}

[theme="dark"] a:hover {
	color: #90caf9;
}

/* Keep navbar links white in dark mode */
[theme="dark"] nav a,
[theme="dark"] nav .brand-logo,
[theme="dark"] nav ul li a {
	color: #ffffff;
}

[theme="dark"] nav a:hover,
[theme="dark"] nav ul li a:hover {
	color: #ffffff;
}

/* Table of contents */
[theme="dark"] .table-of-contents a {
	color: var(--text-secondary);
	border-left: 2px solid #444444;
}

[theme="dark"] .table-of-contents a:hover {
	color: var(--text-primary);
	border-left-color: #64b5f6;
}

[theme="dark"] .table-of-contents a.active {
	color: #64b5f6;
	border-left-color: #64b5f6;
}

/* Force navbar to always be 64px high, even on small screens */
nav {
	line-height: 64px !important;
	height: 64px !important;
}

nav .nav-wrapper {
	height: 64px !important;
}

nav .brand-logo {
	line-height: 64px !important;
	height: 64px !important;
}

nav ul a {
	line-height: 64px !important;
	height: 64px !important;
}

.navbar-fixed {
	height: 64px !important;
}

/* Override Materialize's small screen media query */
@media only screen and (max-width: 600px) {
	nav {
		line-height: 64px !important;
		height: 64px !important;
	}
	
	nav .nav-wrapper {
		height: 64px !important;
	}
	
	nav .brand-logo {
		line-height: 64px !important;
		height: 64px !important;
	}
	
	nav ul a {
		line-height: 64px !important;
		height: 64px !important;
	}
	
	.navbar-fixed {
		height: 64px !important;
	}
}

/* Style the theme toggle button */
.theme-toggle-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 0 15px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.theme-toggle-btn:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle-btn i {
	font-size: 24px;
	color: #ffffff;
	line-height: 64px;
}

/* Style the mobile hamburger menu button */
.dropdown-trigger {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 0 15px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.dropdown-trigger:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-trigger i {
	font-size: 24px;
	color: #ffffff;
	line-height: 64px;
}

.navfeature {
	background: linear-gradient(45deg, var(--nav-gradient-start), var(--nav-gradient-end));
}

.calltoaction {
	margin-top: 20px;
}

.page-footer {
	padding-top: 0px;
	margin-top: 3rem;
}

.card .card-action {
	border-top: 1px solid var(--card-border);
}

.footer-link {
	margin-bottom: 4px;
}

.section-title {
	margin: 1rem;
}

.header-offset {
	margin-top: 40px;
}

.inline-code {
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 3px;
	padding-right: 3px;
	background-color: var(--inline-code-bg);
	color: var(--inline-code-text);
	border-radius: 5px;
}

.doc-li {
	list-style-type: none;
	margin-bottom: 4px;
}