/**
 * Pea6 KiNiK Theme - Common Styles
 */

/* Custom properties for theme colors and layout values */
:root {
  /* KiNiK Colors (Midnight & Coral) */
  --kinik-bg: 220 14% 96%;
  --kinik-fg: 220 38% 20%;
  --kinik-primary: 0 100% 71%;          /* Coral red */
  --kinik-primary-fg: 0 0% 100%;
  --kinik-secondary: 220 38% 20%;        /* Midnight Blue */
  --kinik-secondary-fg: 0 0% 100%;
  --kinik-accent: 216 91% 64%;           /* Electric Blue */
  --kinik-gold: 41 100% 67%;             /* Gold */
  
  --kinik-surface-hero: #162031;         /* hsl(220 38% 18%) */
  --kinik-surface-noir: #101824;         /* hsl(220 40% 14%) */
  
  /* Pea6 Colors (Orange & Bright Slate) */
  --pea6-primary: #FF6500;
  --pea6-dark: #151515;
  --pea6-light: #FDFDFD;
  --pea6-gray: #656363;
  --pea6-link: #4be7e3;
  
  /* Shared layouts */
  --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-elevated: 0 12px 40px -16px rgba(31, 42, 68, 0.18);
  --shadow-cinema: 0 30px 80px -30px rgba(31, 42, 68, 0.25);
  --shadow-ember: 0 20px 60px -24px rgba(255, 107, 107, 0.35);
}

/* Base layouts */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

@media (min-width: 640px) {
  .container { max-width: 640px; }
}
@media (min-width: 768px) {
  .container { max-width: 768px; }
}
@media (min-width: 1024px) {
  .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

/* Visibility helpers */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Scroll reveals */
.reveal-base {
  will-change: opacity, transform, filter;
  transition-property: opacity, transform, filter;
  transition-duration: 1.2s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up {
  opacity: 0;
  transform: translateY(48px);
}
.reveal-fade {
  opacity: 0;
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
}
.reveal-blur {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(24px);
}
.reveal-in {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-base {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==========================================================================
   Unified React Navbar Styles
   ========================================================================== */
.react-navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-sizing: border-box !important;
}

/* Light Theme Styling (Pea6 default) */
.react-navbar.theme-light {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.react-navbar.theme-light.is-scrolled {
  background-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 20px -10px rgba(0, 0, 0, 0.08) !important;
  height: 64px !important;
}

/* Dark Theme Styling (KiNiK crowdfunding) */
.react-navbar.theme-dark {
  background-color: rgba(16, 24, 36, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.react-navbar.theme-dark.is-scrolled {
  background-color: rgba(16, 24, 36, 0.9) !important;
  box-shadow: 0 4px 30px -10px rgba(0, 0, 0, 0.3) !important;
  height: 64px !important;
}

/* Inner Container Layout */
.react-navbar .navbar-inner-container {
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Logo Styles */
.react-navbar .navbar-logo-pea6 {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
}
.react-navbar .navbar-logo-pea6 .logo-image {
  height: 40px !important;
  width: auto !important;
  display: block !important;
  transition: height 0.3s ease !important;
  border: none !important;
  outline: none !important;
}
.react-navbar.is-scrolled .navbar-logo-pea6 .logo-image {
  height: 36px !important;
}

.react-navbar .navbar-logo-kinik {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  line-height: 1 !important;
  border: none !important;
  background: none !important;
}
.react-navbar .navbar-logo-kinik .logo-text-main {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 0.1em !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  transition: font-size 0.3s ease !important;
}
.react-navbar.is-scrolled .navbar-logo-kinik .logo-text-main {
  font-size: 24px !important;
}
.react-navbar .navbar-logo-kinik .logo-text-sub {
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.25em !important;
  color: #9ca3af !important;
  margin-top: 1px !important;
}

/* Menu links wrapper (Desktop) */
.react-navbar .navbar-menu-links {
  display: flex !important;
  gap: 28px !important;
  align-items: center !important;
}
@media (max-width: 767px) {
  .react-navbar .navbar-menu-links {
    display: none !important;
  }
}

/* Link items */
.react-navbar .navbar-menu-item {
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  transition: color 0.25s ease !important;
  cursor: pointer !important;
  border: none !important;
}
.react-navbar.theme-light .navbar-menu-item {
  color: #656363 !important;
  font-family: 'DM Sans', sans-serif !important;
}
.react-navbar.theme-light .navbar-menu-item:hover {
  color: #FF6500 !important;
}

.react-navbar.theme-dark .navbar-menu-item {
  color: #9ca3af !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  font-weight: 500 !important;
}
.react-navbar.theme-dark .navbar-menu-item:hover {
  color: #ffffff !important;
}

/* Right-side elements & CTA buttons */
.react-navbar .navbar-right-elements {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.react-navbar .navbar-cta-btn {
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  border: none !important;
}

.react-navbar.theme-light .navbar-cta-btn {
  background: #FF6500 !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: 4px !important;
  font-family: 'DM Sans', sans-serif !important;
}
.react-navbar.theme-light .navbar-cta-btn:hover {
  background: #e05900 !important;
  transform: translateY(-1px) !important;
}

.react-navbar.theme-dark .navbar-cta-btn {
  background: #ff6b6b !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
}
.react-navbar.theme-dark .navbar-cta-btn:hover {
  background: #e05c5c !important;
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Hamburger button styling */
.react-navbar .navbar-hamburger-btn {
  background: none !important;
  border: none !important;
  padding: 8px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  justify-content: center !important;
  align-items: center !important;
  outline: none !important;
  z-index: 10001 !important;
  width: 36px !important;
  height: 36px !important;
  box-shadow: none !important;
}
@media (min-width: 768px) {
  .react-navbar .navbar-hamburger-btn {
    display: none !important;
  }
}

.react-navbar .hamburger-line {
  width: 20px !important;
  height: 2px !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  border-radius: 1px !important;
}
.react-navbar.theme-light .hamburger-line {
  background-color: #151515 !important;
}
.react-navbar.theme-dark .hamburger-line {
  background-color: #ffffff !important;
}

/* Open hamburger button states */
.react-navbar.is-open .line-1 {
  transform: translateY(7px) rotate(45deg) !important;
}
.react-navbar.is-open .line-2 {
  opacity: 0 !important;
}
.react-navbar.is-open .line-3 {
  transform: translateY(-7px) rotate(-45deg) !important;
}

/* Mobile Drawer Overlay */
.react-navbar .navbar-mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10000 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease !important;
}

.react-navbar.is-open .navbar-mobile-drawer {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.react-navbar.theme-light .navbar-mobile-drawer {
  background-color: #ffffff !important;
}
.react-navbar.theme-dark .navbar-mobile-drawer {
  background-color: #101824 !important;
}

.react-navbar .mobile-drawer-links {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 40px !important;
  width: 100% !important;
}

.react-navbar .mobile-menu-item {
  text-decoration: none !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  transition: color 0.25s ease !important;
  cursor: pointer !important;
  border: none !important;
}

.react-navbar.theme-light .mobile-menu-item {
  color: #151515 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 20px !important;
}
.react-navbar.theme-light .mobile-menu-item:hover {
  color: #FF6500 !important;
}

.react-navbar.theme-dark .mobile-menu-item {
  color: #e5e7eb !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important;
  letter-spacing: 0.15em !important;
}
.react-navbar.theme-dark .mobile-menu-item:hover {
  color: #ff6b6b !important;
}

.react-navbar .mobile-cta-btn {
  text-decoration: none !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-top: 12px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  border: none !important;
}

.react-navbar.theme-light .mobile-cta-btn {
  background: #FF6500 !important;
  color: #ffffff !important;
  padding: 12px 30px !important;
  border-radius: 4px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
}
.react-navbar.theme-light .mobile-cta-btn:hover {
  background: #e05900 !important;
}

.react-navbar.theme-dark .mobile-cta-btn {
  background: #ff6b6b !important;
  color: #ffffff !important;
  padding: 12px 36px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 20px !important;
  letter-spacing: 0.1em !important;
}
.react-navbar.theme-dark .mobile-cta-btn:hover {
  background: #e05c5c !important;
}

/* Page Spacing Overrides to support fixed navbar */
.pea6-home-template {
  padding-top: 72px !important;
}
.kinik-crowdfunding-template .kinik-hero-section {
  padding-top: 72px !important;
}