/* Catppuccin Frappé - Purple Accent */
:root {
  /* Base Colors (Frappé) */
  --color-body: #303446;
  --color-text: #c6d0f5;
  --color-primary-text: #303446;
  
  /* Surface Colors */
  --color-header-wrapper: #292c3c;
  --color-nav-bg: #292c3c;
  --color-card: #414559;
  --color-box-body: #414559;
  --color-box-header: #292c3c;
  --color-input-background: #292c3c;
  --color-input-border: #626880;
  --color-input-focus-border: #8caaee;
  
  /* Accent Colors (Purple/Mauve) */
  --color-primary: #cba6f7;
  --color-primary-hover: #b7bdf8;
  --color-primary-alpha-10: #cba6f71a;
  --color-primary-alpha-20: #cba6f733;
  --color-primary-alpha-30: #cba6f74d;
  --color-primary-alpha-40: #cba6f766;
  --color-primary-alpha-50: #cba6f780;
  --color-primary-alpha-60: #cba6f799;
  --color-primary-alpha-70: #cba6f7b3;
  --color-primary-alpha-80: #cba6f7cc;
  
  /* Secondary Accents */
  --color-secondary: #8caaee;
  --color-red: #e78284;
  --color-green: #a6d189;
  --color-yellow: #e5c890;
  
  /* Code/Console */
  --color-code-bg: #292c3c;
  --color-console-fg: #c6d0f5;
  --color-console-bg: #232634;
}


.ui.menu.navbar, 
#navbar {
  background-color: var(--color-body) !important;
  border-bottom: 1px solid var(--color-box-header) !important;
}

/* Force header text color */
.ui.menu.navbar .item, 
#navbar .item {
  color: var(--color-text) !important;
}

/* Force header hover color */
.ui.menu.navbar .item:hover, 
#navbar .item:hover {
  background-color: var(--color-card) !important;
  color: var(--color-primary) !important;
}

/* Fix secondary header bars */
.repository .header-wrapper, 
.ui.segment.attached {
  background-color: var(--color-header-wrapper) !important;
  color: var(--color-text) !important;
  border-color: var(--color-box-header) !important;
}

/* 🧹 Scope reset to isolate from Semantic UI */
.custom-home-wrapper {
  all: initial;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-body);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* 🏠 Content wrapper */
.custom-home-content {
  max-width: 900px;
  width: 100%;
  text-align: center;
}

/* 🔝 Header */
.custom-home-header {
  margin-bottom: 3rem;
}
.custom-logo {
  font-size: 4rem;
  margin-bottom: 1rem;
  display: block;
  color: var(--color-primary);
}
.custom-title {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}
.custom-subtitle {
  font-size: 1.25rem;
  color: var(--color-text);
  margin: 0;
  opacity: 0.8;
}

/* 🎯 Buttons */
.custom-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}
.custom-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}
.custom-btn-primary {
  background: var(--color-primary);
  color: var(--color-body);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.custom-btn-primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-body);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.custom-btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-input-border);
}
.custom-btn-secondary:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-alpha-10);
}

/* 📦 Feature Cards */
.custom-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  text-align: left;
}
.custom-feature-card {
  background: var(--color-card);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid var(--color-box-header);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.custom-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: var(--color-primary-alpha-30);
}
.custom-icon {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  display: block;
  color: var(--color-primary);
}
.custom-feature-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--color-text);
}
.custom-feature-card p {
  margin: 0;
  color: var(--color-text);
  opacity: 0.8;
  font-size: 0.95rem;
}

/* 🛑 Override Forgejo's Semantic UI styles */
.custom-home-wrapper .ui.container,
.custom-home-wrapper .ui.segment {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 🎨 Match Catppuccin theme colors */
.custom-home-wrapper .ui.menu.navbar, 
.custom-home-wrapper #navbar {
  background-color: var(--color-body) !important;
  border-bottom: 1px solid var(--color-box-header) !important;
}

.custom-home-wrapper .ui.menu.navbar .item, 
.custom-home-wrapper #navbar .item {
  color: var(--color-text) !important;
}

.custom-home-wrapper .ui.menu.navbar .item:hover, 
.custom-home-wrapper #navbar .item:hover {
  background-color: var(--color-card) !important;
  color: var(--color-primary) !important;
}

/* Repository header styling */
.custom-home-wrapper .repository .header-wrapper, 
.custom-home-wrapper .ui.segment.attached {
  background-color: var(--color-header-wrapper) !important;
  color: var(--color-text) !important;
  border-color: var(--color-box-header) !important;
}