/* Custom Styles for Rainbow Ridge Horse Riding */

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #FAF5FF; /* Light pastel background */
    color: #0F172A;
    scroll-behavior: smooth;
}
.font-serif { 
    font-family: 'Cinzel', serif; 
}

/* Glassmorphism Components */
.glass-panel {
    background: rgba(191, 140, 38, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.glass-dark {
    background: rgba(17, 34, 22, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Custom Scrollbar */
::-webkit-scrollbar { 
    width: 6px; 
    height: 6px; 
}

::-webkit-scrollbar-track { 
    background: #F4EFE6; 
}

::-webkit-scrollbar-thumb { 
    background: #8C6747; 
    border-radius: 3px; 
}

/* Scrollbar Utility Overrides */
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.no-scrollbar { 
    -ms-overflow-style: none; 
}

@supports (scrollbar-width: none) {
    .no-scrollbar {
        scrollbar-width: none;
    }
}



/* WebGen Badge Styles */
.webgen-badge {
  margin-top: 10px;
  text-align: center;
}

.webgen-badge a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: #bbb;
  text-decoration: none;
  font-size: 12px;
  transition: all 0.3s ease;
}

/* Highlight WebGen text */
.webgen-badge strong {
  color: #00bcd4;
  font-weight: 600;
  margin-left: 4px;
}

/* Hover effect */
.webgen-badge a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.webgen-badge small {
  display: block;
  font-size: 10px;
  color: #777;
  margin-top: 4px;
}

.webgen-badge small {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5); /* Improved contrast on dark background */
  margin-top: 4px;
}

/* Legal Nav Button Styling */
.legal-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 245, 255, 0.7);
    transition: all 0.2s ease-in-out;
    text-align: left;
}

.legal-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #FAF5FF;
}

.legal-nav-btn.active {
    background-color: rgba(212, 175, 55, 0.15);
    color: #D4AF37; /* Gold Accent */
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* WebGen Footer Badge Styling */
.webgen-badge a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.webgen-badge a:hover {
    color: #D4AF37;
}