/* Import Roboto Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* Import Birthstone Font */
@import url('https://fonts.googleapis.com/css2?family=Birthstone&display=swap');

/* Birthstone Font Class */
.birthstone-font {
  font-family: 'Birthstone', cursive ;
  font-weight: 400 ;
  font-size: 2.5rem ;
}

/* Force navigation styling - high specificity to override any conflicts */
nav.site-navigation,
.site-navigation,
nav[class*="site-navigation"] {
  background: var(--bg-secondary) ;
  border-bottom: 1px solid var(--border-color) ;
  position: sticky ;
  top: 0 ;
  z-index: 1000 ;
  box-shadow: var(--shadow) ;
  width: 100% ;
  margin: 0 ;
  padding: 0 ;
  transition: background-color 0.3s ease, border-color 0.3s ease ;
}

/* Navigation container styling with high specificity */
nav.site-navigation .nav-container,
.site-navigation .nav-container,
.nav-container {
  max-width: 1200px ;
  margin: 0 auto ;
  padding: 0.75rem 2rem ;
  display: grid ;
  grid-template-columns: 1fr auto ;
  align-items: center ;
  gap: 2rem ;
  min-height: 70px ;
  box-sizing: border-box ;
}

/* Brand section styling */
nav.site-navigation .nav-brand,
.site-navigation .nav-brand,
.nav-brand {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-self: start;
  flex-wrap: nowrap;
}

nav.site-navigation .brand-link,
.site-navigation .brand-link,
.brand-link {
  text-decoration: none ;
  color: var(--text-primary) ;
}

/* Force Birthstone font for navigation brand - highest specificity */
nav.site-navigation .brand-link h1,
.site-navigation .brand-link h1,
.brand-link h1,
nav h1.birthstone-font {
  font-family: 'Birthstone', cursive ;
  font-weight: 400 ;
  font-size: 2.5rem ;
  color: var(--accent-primary) ;
  margin: 0 ;
  line-height: 1 ;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3) ;
}

/* Brand text styling with maximum specificity */
nav.site-navigation .brand-text,
.site-navigation .brand-text,
.brand-text,
nav.site-navigation h1.birthstone-font,
.site-navigation h1.birthstone-font,
h1.birthstone-font {
  font-size: 1.5rem ;
  font-weight: 400 ;
  color: var(--accent-primary) ;
  font-family: 'Birthstone', cursive ;
  letter-spacing: -0.025em ;
  line-height: 1 ;
  display: flex ;
  align-items: center ;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3) ;
  margin: 0 ;
  margin-bottom: 0.25rem ;
}

/* Navigation Links */
nav.site-navigation .nav-links,
.site-navigation .nav-links,
.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin-left: 2rem;
  flex-wrap: nowrap;
}

.nav-link {
  color: var(--text-primary) ;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-family: 'Roboto', sans-serif;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}

.nav-link:hover {
  background: var(--bg-card-hover);
  color: var(--accent-primary) ;
  text-decoration: none;
}

.nav-link.active {
  background: var(--accent-primary) ;
  color: #FFFFFF ;
}

.nav-link.admin-link {
  color: var(--admin) ;
  border: 1px solid var(--admin);
}

.nav-link.admin-link:hover {
  background: var(--admin) ;
  color: #FFFFFF ;
}

/* User Name Center */
.nav-center {
  justify-self: center;
  text-align: center;
  display: flex;
  align-items: center;
  height: 100%;
}

.user-name-center {
  font-weight: 600;
  color: var(--text-primary) ;
  font-size: 1.3rem;
  font-family: 'Roboto', sans-serif;
  line-height: 1;
}

/* User Section */
nav.site-navigation .nav-user,
.site-navigation .nav-user,
.nav-user {
  display: flex ;
  align-items: center ;
  gap: 1.5rem ;
  justify-self: end ;
}

nav.site-navigation .user-info,
.site-navigation .user-info,
.user-info {
  display: flex ;
  align-items: center ;
  gap: 0.75rem ;
}

.user-name {
  font-weight: 500;
  color: var(--text-primary) ;
  font-size: 0.9rem;
  font-family: 'Roboto', sans-serif;
}

/* Navigation status badge - high specificity to override global styles */
.site-navigation .status-badge {
  font-size: 0.75rem ;
  font-weight: 700;
  padding: 0.4rem 0.75rem ;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Roboto', sans-serif;
  display: inline-flex ;
  align-items: center ;
  white-space: nowrap ;
  line-height: 1 ;
  margin-bottom: 0 ;
  cursor: default ; /* Ensure no pointer cursor */
}

.site-navigation .status-badge.premium {
  background: var(--premium) ;
  color: #FFFFFF ;
}

.site-navigation .status-badge.free {
  background: transparent ;
  color: var(--text-muted) ;
  border: 1px solid var(--border-color) ;
}

/* Free status text (no border/background) */
.site-navigation .status-text.free {
  font-size: 0.75rem ;
  font-weight: 500 ;
  text-transform: uppercase ;
  letter-spacing: 0.5px ;
  color: var(--text-muted) ;
  font-family: 'Roboto', sans-serif ;
  display: inline-flex ;
  align-items: center ;
  white-space: nowrap ;
  line-height: 1 ;
  margin-bottom: 0 ;
}

/* Navigation Actions */
nav.site-navigation .nav-actions,
.site-navigation .nav-actions,
.nav-actions {
  display: flex ;
  gap: 0.75rem ;
  align-items: center ;
}

.nav-action-btn {
  padding: 0.4rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  border: 1px solid var(--border-color) ;
  background: var(--bg-card) ;
  color: var(--text-primary) ;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
}

.nav-action-btn:hover {
  background: var(--bg-card-hover) ;
  color: var(--text-primary) ;
  border-color: var(--border-color) ;
  text-decoration: none;
  transform: translateY(-1px);
}

.sign-out-btn:hover {
  background: var(--warning) ;
  border-color: var(--warning) ;
  color: #FFFFFF ;
}

/* Theme Toggle Button - moved to global application layout */

/* Mobile Responsive */
@media (max-width: 768px) {
  .site-navigation .nav-container {
    padding: 1rem;
    display: flex ;
    flex-direction: column;
    gap: 1rem;
    grid-template-columns: unset ;
  }
  
  .nav-brand {
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
  }
  
  .nav-links {
    margin-left: 0;
    justify-content: center;
    gap: 1rem;
  }
  
  .nav-center {
    order: -1;
    margin-bottom: 0.5rem;
  }
  
  .nav-user {
    gap: 1rem;
    justify-self: auto;
    justify-content: center;
  }
  
  .nav-actions {
    flex-direction: row;
    gap: 0.5rem;
  }
  
  .nav-action-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
}

@media (max-width: 480px) {
  .brand-text {
    font-size: 1rem;
  }
  
  .site-navigation .nav-container {
    padding: 0.75rem;
  }
  
  .nav-links {
    gap: 0.5rem;
  }
  
  .nav-link {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  }
}