/* Custom styling for TagFinder Documentation */

:root {
  /* Branding Colors */
  --md-primary-fg-color: #0D1117;
  --md-primary-fg-color--light: #0D1117;
  --md-primary-fg-color--dark: #000000;
  --md-accent-fg-color: #00D4FF;
  /* TagFinder Electric Cyan */

  /* Background colors for deep immersion */
  --md-default-bg-color: #0D1117;
  --md-default-bg-color--light: #0D1117;
  --md-default-bg-color--lighter: #0D1117;
  --md-default-bg-color--lightest: #0D1117;
}

/* Base Body and Elements */
body,
.md-main,
.md-container {
  background-color: #0D1117 !important;
}

/* Match Header & Navigation Tabs to the deep black background */
.md-header,
.md-tabs {
  background-color: #0D1117 !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ensure sidebar and TOC are also black */
.md-sidebar {
  background-color: #0D1117 !important;
}

/* Make headers distinct */
.md-typeset h1,
.md-typeset h2 {
  color: white;
  font-weight: 700;
}

/* Style the grids for landing page */
.grid.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1.5rem;
  margin: 2rem 0;
}

.grid.cards>ul {
  display: contents;
}

.grid.cards>ul>li {
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s ease-in-out;
  list-style: none;
  /* Remove list bullets */
}

/* App-style colorful cards mimicking the staging dashboard */

/* Card 1: Track Assets (Teal/Green) */
.grid.cards>ul>li:nth-child(1) {
  background-color: rgba(0, 150, 136, 0.08);
  /* Faint teal background */
  border: 1px solid rgba(0, 150, 136, 0.3);
}

.grid.cards>ul>li:nth-child(1):hover {
  background-color: rgba(0, 150, 136, 0.15);
  border-color: rgba(0, 150, 136, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 150, 136, 0.2);
}

.grid.cards>ul>li:nth-child(1) .twemoji {
  color: #00BFA5;
  /* Bright Teal Icon */
}

/* Card 2: Monitor Temperature (Blue/Cyan) */
.grid.cards>ul>li:nth-child(2) {
  background-color: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.grid.cards>ul>li:nth-child(2):hover {
  background-color: rgba(0, 212, 255, 0.15);
  border-color: rgba(0, 212, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);
}

.grid.cards>ul>li:nth-child(2) .twemoji {
  color: #00D4FF;
  /* Bright Blue Icon */
}

/* Card 3: Log Cold Chain (Orange/Brown) */
.grid.cards>ul>li:nth-child(3) {
  background-color: rgba(255, 111, 0, 0.08);
  border: 1px solid rgba(255, 111, 0, 0.3);
}

.grid.cards>ul>li:nth-child(3):hover {
  background-color: rgba(255, 111, 0, 0.15);
  border-color: rgba(255, 111, 0, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 111, 0, 0.2);
}

.grid.cards>ul>li:nth-child(3) .twemoji {
  color: #FF8F00;
  /* Orange Icon */
}

/* Card 4: Instant Alerts (Red/Rose) */
.grid.cards>ul>li:nth-child(4) {
  background-color: rgba(244, 67, 54, 0.08);
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.grid.cards>ul>li:nth-child(4):hover {
  background-color: rgba(244, 67, 54, 0.15);
  border-color: rgba(244, 67, 54, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(244, 67, 54, 0.2);
}

.grid.cards>ul>li:nth-child(4) .twemoji {
  color: #EF5350;
  /* Red Icon */
}

.grid.cards>ul>li hr {
  margin: 1rem 0;
  border-color: rgba(255, 255, 255, 0.05);
}

/* Screenshots */
img.screenshot {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  max-width: 100%;
  margin: 1rem 0;
}

/* Hide broken image placeholders gracefully */
img[src*="screenshots"]:not([src$=".png"]):not([src$=".jpg"]) {
  display: none;
}

/* Beautiful Hero Section */
.hero-section {
  text-align: center;
  padding: 4rem 1rem;
  background-color: #0D1117;
  color: white;
  margin-bottom: 2rem;
}

.hero-section h1 {
  color: white !important;
  font-size: 3em;
  margin-bottom: 0.5em;
  font-weight: 800;
  line-height: 1.2;
}

.hero-section p {
  font-size: 1.2em;
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto 2rem auto;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.md-button {
  font-weight: bold;
  border-radius: 6px;
  padding: 0.8em 2em;
}

/* Primary Button (TagFinder Cyan) */
.md-button--primary {
  background-color: #00D4FF !important;
  border-color: #00D4FF !important;
  color: #0A142F !important;
}

.md-button--primary:hover {
  background-color: #33DDFF !important;
  border-color: #33DDFF !important;
}

/* Orange Gradient CTA (Hero First Button) */
:not(.md-typeset) .hero-buttons .md-button--primary:first-child,
.hero-buttons>.md-button--primary:first-child {
  background: linear-gradient(to right, #FF6B2C, #FF8C52) !important;
  border: none !important;
  color: white !important;
}

.hero-buttons>.md-button--primary:first-child:hover {
  background: linear-gradient(to right, #E65A20, #E67A42) !important;
  box-shadow: 0 4px 12px rgba(255, 107, 44, 0.3);
}