/* ============================================
   JAVA VERSION COLOR SYSTEM
   ============================================ */

:root {
  --java-8-color: #5382a1;
  --java-11-color: #f89820;
  --java-17-color: #ed8b00;
  --java-21-color: #7b42bc;
  --java-25-color: #00875a;
}

/* ============================================
   VERSION BADGES
   ============================================ */

.java-8 {
  background: linear-gradient(135deg, var(--java-8-color), #3a5d7a);
  color: white;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85em;
}

.java-11 {
  background: linear-gradient(135deg, var(--java-11-color), #d4790a);
  color: white;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85em;
}

.java-17 {
  background: linear-gradient(135deg, var(--java-17-color), #cc7700);
  color: white;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85em;
}

.java-21 {
  background: linear-gradient(135deg, var(--java-21-color), #5a2d91);
  color: white;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85em;
}

.java-25 {
  background: linear-gradient(135deg, var(--java-25-color), #006644);
  color: white;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85em;
}

/* ============================================
   FEATURE CARDS
   ============================================ */

.feature-card {
  border-left: 4px solid var(--md-primary-fg-color);
  padding: 1rem;
  margin: 1rem 0;
  background: var(--md-code-bg-color);
  border-radius: 0 8px 8px 0;
}

.feature-card.java-8 { border-left-color: var(--java-8-color); }
.feature-card.java-11 { border-left-color: var(--java-11-color); }
.feature-card.java-17 { border-left-color: var(--java-17-color); }
.feature-card.java-21 { border-left-color: var(--java-21-color); }
.feature-card.java-25 { border-left-color: var(--java-25-color); }

/* ============================================
   CODE TABS STYLING
   ============================================ */

.md-typeset .tabbed-labels > label {
  font-weight: 600;
}

/* ============================================
   INTERVIEW CALLOUTS
   ============================================ */

.interview-tip {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

.interview-tip::before {
  content: 'Interview Tip';
  display: block;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
  text-align: center;
  padding: 2rem 0;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.hero h2 {
  font-weight: 400;
  opacity: 0.8;
  margin-top: 0;
}

/* ============================================
   GRID CARDS ENHANCEMENTS
   ============================================ */

.md-typeset .grid.cards > ul > li {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}