/* Base Material Theme Styling */

/* Dark theme header background color */
[data-md-color-scheme="slate"] .md-header {
  background-color: #14151B !important;
}

/* Light theme header background color */
[data-md-color-scheme="default"] .md-header {
  background-color: #14151B !important;
}

/* Header layout adjustments */
.md-header {
  height: auto !important;
}

/* Logo text styling */
.md-logo {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* Header nav outer container - full width background */
.header-nav-outer {
  width: 100% !important;
}

/* Light theme background */
[data-md-color-scheme="default"] .header-nav-outer {
  background-color: #14151B !important;
  color: #ffffff !important;
}

/* Dark theme background */
[data-md-color-scheme="slate"] .header-nav-outer {
  background-color: #14151B !important;
}

/* Header nav inner wrapper - 61rem width */
.header-nav-wrapper {
  width: 61rem !important;
  margin: 0 auto !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  box-sizing: border-box !important;
}

/* Custom header navigation styling */
.header-nav {
  display: flex !important;
  gap: 1.5rem !important;
  align-items: center !important;
  flex-direction: row !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.75rem !important;
  margin: 0 !important;
}

.header-nav-link {
  color: inherit !important;
  text-decoration: none !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  transition: opacity 0.2s ease !important;
  white-space: nowrap !important;
}

.header-nav-link:hover {
  opacity: 0.7 !important;
}

/* Hide header nav on smaller screens when sidebar disappears */
@media (max-width: 1219px) {
  .header-nav-wrapper {
    display: none !important;
  }
}

/* Navigation links padding */
.md-nav a, .md-nav__title {
  /* padding-bottom: 20px !important; */
}

/* Global: Style h4 headings to look like h3 (excludes from TOC) */
.md-content h4 {
  font-size: 1.2857142857em !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

/* Light theme h1: bold and black */
[data-md-color-scheme="default"] .md-content h1 {
  font-weight: 700 !important;
  color: #000000 !important;
}

/* Dark theme h1: bold and white */
[data-md-color-scheme="slate"] .md-content h1 {
  font-weight: 700 !important;
  color: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-nav__title{
  color: #ffffff !important;
  font-weight: 600 !important;
}

[data-md-color-scheme="default"] .md-nav__title{
  color: #000000 !important;
  font-weight: 600 !important;
}

.md-nav__link--active{
  font-weight: 600 !important;
}

hr{
  border-color: #999 !important;
  padding-top: 30px !important;
}

.admonition p, .admonition td, .admonition th, .md-typeset table, .admonition ul, .admonition ol{
  font-size: .75rem !important;
}

.admonition ul li{
  list-style-type: none !important;
  margin-left: 0 !important;
}

ul li{
  /* list-style-type: none !important; */
  margin-left: .25rem !important;
}

.grid li{
  font-size: .75rem !important;
}

h2, h3{
  font-weight: 600 !important;
}

.grid.cards{
  margin-top: 40px !important;
  margin-bottom: 20px !important;
}

.grid.cards li {
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Light theme hover */
[data-md-color-scheme="default"] .grid.cards li:hover {
  background-color: #14151B !important;
  color: #ffffff !important;
}

/* Dark theme hover */
[data-md-color-scheme="slate"] .grid.cards li:hover {
  background-color: #f0f0f0 !important;
  color: #000000 !important;
}

.md-typeset__scrollwrap {
  overflow-x: visible !important;
  width: 100% !important;
}

.md-typeset__table {
  width: 100% !important;
  overflow-x: visible !important;
}

table {
  width: 100% !important;
  max-width: 100% !important;
  display: table !important;
  box-sizing: border-box !important;
}

.md-typeset table {
  width: 100% !important;
  max-width: 100% !important;
}

.md-content table {
  width: 100% !important;
  max-width: 100% !important;
}

/* Table row hover effects matching card hover colors */

/* Light theme table row hover */
[data-md-color-scheme="default"] tbody tr:hover {
  background-color: #14151B !important;
  color: #ffffff !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Dark theme table row hover */
[data-md-color-scheme="slate"] tbody tr:hover {
  background-color: #f0f0f0 !important;
  color: #000000 !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Ensure links in table rows are readable on hover */
[data-md-color-scheme="default"] tbody tr:hover a {
  color: #ffffff !important;
}

[data-md-color-scheme="slate"] tbody tr:hover a {
  color: #000000 !important;
}

/* Text selection colors for cards and tables - Light theme */
[data-md-color-scheme="default"] .grid.cards li::selection,
[data-md-color-scheme="default"] tbody tr::selection,
[data-md-color-scheme="default"] td::selection,
[data-md-color-scheme="default"] th::selection {
  background-color: #667eea !important;
  color: #ffffff !important;
}

[data-md-color-scheme="default"] .grid.cards li *::selection,
[data-md-color-scheme="default"] tbody tr *::selection,
[data-md-color-scheme="default"] td *::selection,
[data-md-color-scheme="default"] th *::selection {
  background-color: #667eea !important;
  color: #ffffff !important;
}

/* Text selection colors for cards and tables - Dark theme */
[data-md-color-scheme="slate"] .grid.cards li::selection,
[data-md-color-scheme="slate"] tbody tr::selection,
[data-md-color-scheme="slate"] td::selection,
[data-md-color-scheme="slate"] th::selection {
  background-color: #667eea !important;
  color: #ffffff !important;
}

[data-md-color-scheme="slate"] .grid.cards li *::selection,
[data-md-color-scheme="slate"] tbody tr *::selection,
[data-md-color-scheme="slate"] td *::selection,
[data-md-color-scheme="slate"] th *::selection {
  background-color: #667eea !important;
  color: #ffffff !important;
}

/* Hide the navigation tabs while keeping the context-aware left menu */
.md-tabs {
  display: none !important;
}

/* Adjust the main content area to account for hidden tabs */
.md-main__inner {
  margin-top: 0 !important;
}

/* Style learning objectives list with checkmarks */
.md-content h2#learning-objectives ~ ul, ol {
  list-style-type: none !important;
  margin-left: 0 !important;
}

.md-content h2#learning-objectives ~ ul li {
  position: relative !important;
  padding-left: 1.5rem !important;
}

.md-content h2#learning-objectives ~ ul li:before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: #4CAF50 !important;
  font-weight: bold !important;
}

/* Remove margin-left from How to Use This Guide list items */
.md-content h2#how-to-use-this-guide ~ ol li {
  margin-left: 0 !important;
}

/* Style About This Guide sections with green checkmarks */
.md-content h2#about-this-guide ~ ul {
  list-style-type: none !important;
}

.md-content h2#about-this-guide ~ ul li {
  position: relative !important;
  padding-left: 1.5rem !important;
}

.md-content h2#about-this-guide ~ ul li:before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: #4CAF50 !important;
  font-weight: bold !important;
}

/* Style About LCS Playbook section with green checkmarks */
.md-content h2#about-lcs-playbook ~ ul {
  list-style-type: none !important;
  margin-left: 0 !important;
}

.md-content h2#about-lcs-playbook ~ ul li {
  position: relative !important;
  padding-left: 1.5rem !important;
}

.md-content h2#about-lcs-playbook ~ ul li:before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: #4CAF50 !important;
  font-weight: bold !important;
}

/* Hide empty table headers (for states of mind tables) */
.md-content table thead th:empty {
  display: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.md-content table thead:has(th:empty) {
  display: none !important;
}

/* Module 5: full-width images */
.md-content img.full-width {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 1.5em 0 !important;
}