/* ========================================================================
   Ulandy — Landing Overrides
   Scope: landing navbar + drawer + landing sections (hero, features, stats, cta)
   Load AFTER blue_theme_landing.css
   ======================================================================== */

/* ===== Landing navbar (scoped) ===== */
.navbar--landing{
  position: fixed; top: 0; left: 0; width: 100%;
  background: linear-gradient(90deg, #0b3a56, #062438);
  color: #fff; padding: 16px 0; z-index: 1000;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.navbar--landing .navbar-brand,
.navbar--landing .navbar-brand span,
.navbar--landing .menu-toggle,
.navbar--landing .nav-link { color: #fff !important; }

.navbar--landing .navbar-brand i { color: #60a5fa !important; }
.navbar--landing .nav-link { opacity: .95; }

.navbar--landing .nav-link:hover,
.navbar--landing .nav-link.active { color: #cfe4ff !important; }

.navbar--landing .nav-link::after { background: #93c5fd !important; }

.navbar--landing .nav-cta {
  background: #fff !important; color: #0b3a56 !important;
  padding: .5rem 1rem; border-radius: 8px; font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.username-display { color: #e2e8f0; }

/* ===== Mobile drawer (scoped) ===== */
.mobile-menu--landing{
  background: #0b3a56 !important; color: #fff !important;
}

.mobile-menu--landing .nav-link {
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding: .75rem .25rem;
}

.mobile-menu--landing .nav-link:hover { background: rgba(255,255,255,.10); }

.mobile-menu--landing .nav-cta {
  background: #fff !important; color: #0b3a56 !important;
  font-weight: 700; text-align: center; margin-top: .25rem;
}

/* ===== Overlay & drawer transitions ===== */
#overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: .25s;
}

#overlay.open { opacity: 1; pointer-events: auto; z-index: 999; }

#mobileMenu {
  position: fixed; top: 0; right: 0; width: 80%; max-width: 360px; height: 100%;
  transform: translateX(100%); opacity: 0; pointer-events: none; transition: .25s; z-index: 1000;
  padding: 1rem; display: flex; flex-direction: column; gap: .5rem;
}

#mobileMenu.open { transform: translateX(0); opacity: 1; pointer-events: auto; }

/* ========================================================================
   Contrast upgrades (landing sections only)
   ======================================================================== */

/* Hero copy (dark bg) */
.hero h1 { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.hero p { color: #e6edf8; }

/* Section headings on light surfaces */
.section-header h2,
.features .feature-card h3 { color: #0f172a; }

/* Body copy on cards/white surfaces */
.features .feature-card p,
.testimonials .testimonial-content,
.footer-about p { color: #334155; }

/* Secondary/longer paragraphs */
.section-header p { color: #475569; }

/* Links inside light sections/cards */
.features .feature-card a,
.section-header a {
  color: #0b3a56; text-decoration: underline; text-underline-offset: 2px;
}

.features .feature-card a:hover { color: #083049; }

/* Card chrome */
.features .feature-card {
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 20px rgba(2,6,23,.06);
}

/* Stats (dark bg) */
.stats, .stats .stat-label { color: #ffffff; }
.stats .stat-number { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* CTA (dark gradient) */
.cta h2 { color: #ffffff; }
.cta p { color: rgba(255,255,255,.95); }
.cta .btn-secondary { color: #102a43; border-color: #ffffff; }

/* Footer links */
.footer .footer-link { color: #cbd5e1; }
.footer .footer-link:hover { color: #e2e8f0; }

/* Desktop active underline color for landing nav */
.navbar--landing .navbar-nav .nav-link.active {
  position: relative; color: #cfe4ff !important;
}

.navbar--landing .navbar-nav .nav-link.active::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px;
  background: #cfe4ff; border-radius: 999px;
}

/* ========================================================================
   Hero visual
   ======================================================================== */
.hero-visual {
  order: 1; position: relative; border-radius: var(--radius-lg); overflow: hidden;
}

.hero-card {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  padding: 1rem;
  /* tilt interaction */
  transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
  transition: var(--transition-slow);
  will-change: transform;
}

.hero-card:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-card{ transform: none; transition: none; }
}

/* Canvas fit */
#heroChart { width: 100% !important; height: 100% !important; display: block; }

/* Balance layout on larger screens */
@media (min-width: 768px) {
  .hero-container { align-items: stretch; }
  .hero-content { flex: 1.1; }
  .hero-visual  { flex: 0.9; }
}

/* ========================================================================
   CTA background (lightweight, brandy, no heavy assets)
   ======================================================================== */
/* ========================================================================
   Ulandy — CTA Section Visual Enhancements
   ======================================================================== */

/* Basic styling for CTA section */
.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-600), var(--primary-800)); /* CTA base gradient */
  padding: 40px 20px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Add subtle left-side graphic */
.cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23ffffff' opacity='0.15'/%3E%3Ccircle cx='30' cy='60' r='10' fill='%23ffffff' opacity='0.12'/%3E%3Ccircle cx='60' cy='30' r='12' fill='%23ffffff' opacity='0.1'/%3E%3Ccircle cx='50' cy='80' r='6' fill='%23ffffff' opacity='0.08'/%3E%3C/svg%3E") no-repeat center center;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2; /* Subtle effect */
}

/* Ensure the content in the CTA stays above the graphic */
.cta > * {
  position: relative;
  z-index: 1;
}

/* Adjust padding and spacing for CTA button alignment */
.cta .btn-group {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

/* Button hover effects for the CTA */
.cta .btn-primary {
  background: #ffffff;
  color: var(--primary-600);
  transition: background-color 0.3s ease;
}

.cta .btn-primary:hover {
  background: var(--primary-600);
  color: #ffffff;
}

.cta .btn-secondary {
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  transition: background-color 0.3s ease;
}

.cta .btn-secondary:hover {
  background: #ffffff;
  color: var(--primary-600);
}

/* Make the left visual adapt for smaller screens */
@media (max-width: 768px) {
  .cta {
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
  }

  .cta::before {
    width: 100%;
    height: 80%;
    background-size: 50%;
  }
}
/* ========================================================================
   Footer Contrast Enhancement
   ======================================================================== */

/* Footer Text */
.footer-about p {
  color: #e2e8f0; /* lighter text for better contrast */
  opacity: 0.85;   /* slightly less opaque for subtle effect */
}

.footer-about p:hover {
  color: #ffffff; /* Ensure it's fully visible on hover */
}

/* Footer Social Icons */
.footer .social-icons a {
  color: #e2e8f0; /* brighter icon color for better visibility */
  transition: color 0.3s ease;
}

.footer .social-icons a:hover {
  color: var(--primary-500); /* Primary brand color for hover effect */
}

/* Ensure footer links are legible */
.footer .footer-link {
  color: #cbd5e1; /* soft grey for footer links */
}

.footer .footer-link:hover {
  color: #ffffff; /* full white on hover */
}