/* ============================================
   SUREVIVR - MAIN STYLESHEET
   CSS Variables for Easy Theme Customization
   ============================================ */

/* --- CSS VARIABLES --- */
:root {
  /* Primary Color Palette */
  --sv-50: #f5f8f6;
  --sv-100: #dfe8e4;
  --sv-200: #bed1c9;
  --sv-300: #96b2a7;
  --sv-400: #68877d;
  --sv-700: #384d47;
  --sv-800: #303f3b;
  --sv-900: #2b3634;
  --sv-950: #151e1c;

  /* Accent Colors */
  --green-500: #22c55e;
  --gray-400: #9ca3af;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --yellow-500: #eab308;
  --orange-500: #f97316;
  --red-500: #ef4444;

  /* Neutral Colors */
  --white: #ffffff;
  --white-90: rgba(255, 255, 255, 0.9);
  --white-50: rgba(255, 255, 255, 0.5);

  /* Glass Effect */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-blur: 12px;
  --glass-border: rgba(18, 30, 28, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-card: 0 20px 40px rgba(21, 30, 28, 0.08);
  --shadow-sv-950-20: rgb(21 30 28 / 0.2);

  /* Transitions */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-card: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-image: 0.3s ease;
}

/* --- BASE STYLES --- */
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: var(--sv-50);
  overflow-x: hidden;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

/* --- PAGE FADE IN ANIMATION --- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- SMOOTH SCROLLING --- */
html {
  scroll-behavior: smooth;
}

/* --- GLASS NAVBAR --- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
}

/* --- CARD STYLES --- */
.sv-card {
  transition: all var(--transition-card);
}

.sv-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card);
}

/* --- BLINK DOT ANIMATION --- */
.blink-dot {
  width: 8px;
  height: 8px;
  background: var(--sv-950);
  border-radius: 50%;
  display: inline-block;
}

/* --- FILTER ACTIVE STATE (Portfolio) --- */
.filter-active {
  border-bottom: 3px solid var(--sv-950);
}

/* --- PROJECT CARD STYLES (Portfolio) --- */
.project-card:hover .project-image {
  transform: scale(1.05);
}

.project-image {
  transition: transform var(--transition-image);
}

/* --- SCROLLBAR STYLES --- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--sv-700);
  border-radius: 10px;
}

/* --- ANIMATIONS --- */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.8);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes pulse-soft {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes count {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animation Classes */
.animate-blink-fast {
  animation: blink 1.5s infinite;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-soft {
  animation: pulse-soft 2s infinite;
}

.animate-count {
  animation: count 2s ease-out;
}

/* --- SWEETALERT2 CUSTOM STYLES --- */
.swal-surevivr-popup {
  background: var(--sv-50) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--sv-200) !important;
}

.swal-surevivr-title {
  color: var(--sv-950) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
}

.swal-surevivr-content {
  color: var(--sv-700) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.swal-surevivr-confirm {
  background-color: var(--sv-400) !important;
  color: var(--sv-50) !important;
  border-radius: 12px !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
  transition: all var(--transition-normal) !important;
}

.swal-surevivr-confirm:hover {
  background-color: var(--sv-700) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* SweetAlert icon colors */
.swal2-icon.swal2-success {
  border-color: var(--green-500) !important;
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--green-500) !important;
}

.swal2-icon.swal2-error {
  border-color: var(--red-500) !important;
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--red-500) !important;
}

.swal2-icon.swal2-info {
  border-color: var(--blue-400) !important;
  color: var(--blue-400) !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--yellow-500) !important;
  color: var(--yellow-500) !important;
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* --- HERO SECTION MOBILE --- */
@media (max-width: 1023px) {
  #hero {
    height: auto;
    min-height: 100vh;
    padding: 100px 0 60px;
  }

  #hero h1 {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  #hero p {
    font-size: 1rem;
  }

  #hero .flex.gap-4 {
    flex-direction: column;
  }

  #hero .flex.gap-4 a {
    width: 100%;
    justify-content: center;
  }

  #hero .h-\[550px\] {
    height: 350px;
  }

  #hero .absolute.bottom-6 {
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 1rem;
  }
}

/* --- SERVICES SECTION MOBILE --- */
@media (max-width: 1023px) {
  #services .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  #services .sv-card {
    padding: 1.5rem;
  }

  #services h2 {
    font-size: 2rem;
  }
}

/* --- ABOUT SECTION MOBILE --- */
@media (max-width: 1023px) {
  #about .grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  #about .grid.grid-cols-2.gap-6 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  #about .h-64 {
    height: 200px;
  }

  #about h2 {
    font-size: 2rem;
  }

  #about p {
    font-size: 1rem;
  }
}

/* --- PRICING SECTION MOBILE --- */
@media (max-width: 1023px) {
  #pricing .grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr;
  }

  #pricing .scale-105 {
    transform: scale(1);
  }

  #pricing h2 {
    font-size: 2rem;
  }

  #pricing .p-10 {
    padding: 1.5rem;
  }
}

/* --- CONTACT SECTION MOBILE --- */
@media (max-width: 1023px) {
  #contact .grid.grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr;
  }

  #contact .p-16 {
    padding: 2rem;
  }

  #contact h2 {
    font-size: 2rem;
  }

  #contact .flex.items-center.gap-6 {
    gap: 1rem;
  }

  #contact .w-14.h-14 {
    width: 3rem;
    height: 3rem;
  }

  #contact input,
  #contact textarea {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
}

/* --- FOOTER MOBILE --- */
@media (max-width: 1023px) {
  #footer .grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  #footer .flex.flex-col.md\:flex-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #footer .flex.gap-6.text-sv-400.text-sm {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- HAMBURGER MENU ANIMATION --- */
@media (max-width: 767px) {
  #mobile-menu-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  #mobile-menu-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
  }

  #mobile-menu-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  #mobile-menu-overlay.open {
    transform: translateX(0);
  }

  /* Prevent body scroll when menu is open */
  body.menu-open {
    overflow: hidden;
  }
}

/* --- GENERAL MOBILE TYPOGRAPHY ADJUSTMENTS --- */
@media (max-width: 767px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Ensure text doesn't overflow */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  p,
  span,
  a {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Touch-friendly buttons */
  button,
  a {
    min-height: 44px;
    min-width: 44px;
  }

  /* Fix horizontal scrolling issues - exclude overlay so its content can use full width */
  *:not(#mobile-menu-overlay):not(#mobile-menu-overlay *) {
    max-width: 100%;
    box-sizing: border-box;
  }
  #mobile-menu-overlay,
  #mobile-menu-overlay * {
    box-sizing: border-box;
  }

  /* Mobile menu overlay: explicit dimensions so content is visible */
  #mobile-menu-overlay {
    height: 100vh !important;
    height: 100dvh !important;
    width: 100vw !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  #mobile-menu-content,
  #mobile-menu-overlay .mobile-menu-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #mobile-menu-overlay nav,
  #mobile-menu-overlay .mobile-menu-content nav {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #mobile-menu-overlay .mobile-menu-link,
  #mobile-menu-overlay a.mobile-menu-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #f5f8f6 !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    padding: 1rem 1.25rem !important;
    min-height: 44px !important;
  }

  /* Mobile menu button stays above header when overlay is closed */
  #mobile-menu-btn {
    z-index: 60;
    position: relative;
    pointer-events: auto !important;
  }

  /* Mobile menu overlay: above header when open (z set in HTML), slide in from left */
  #mobile-menu-overlay.open {
    transform: translateX(0) !important;
    visibility: visible;
  }

  /* Overlay content wrapper - always visible when overlay is in view */
  .mobile-menu-content {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box;
  }

  .mobile-menu-content nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
  }

  /* Menu links: light color, padding, professional look */
  #mobile-menu-overlay .mobile-menu-link {
    color: var(--sv-50) !important;
    display: block !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 1rem 1.25rem !important;
    line-height: 1.5 !important;
    border-radius: 0.75rem !important;
    transition:
      background-color 0.2s ease,
      color 0.2s ease !important;
  }

  #mobile-menu-overlay .mobile-menu-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Connect With Us button in overlay */
  #mobile-menu-overlay a.bg-sv-50,
  #mobile-menu-overlay .mobile-menu-content a.bg-sv-50 {
    background-color: var(--sv-50) !important;
    color: var(--sv-950) !important;
  }

  #mobile-menu-overlay .mobile-menu-content a.bg-sv-50:hover {
    background-color: var(--sv-200) !important;
  }

  /* Overlay close button (X only) */
  .mobile-menu-close-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* --- TABLET STYLES --- */
@media (min-width: 768px) and (max-width: 1023px) {
  #hero h1 {
    font-size: 3.5rem;
  }

  #hero .h-\[550px\] {
    height: 400px;
  }

  #services .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  #about .grid.grid-cols-2.gap-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  #pricing .grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  #pricing .p-10 {
    padding: 2rem;
  }

  #footer .grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- PORTFOLIO PAGE MOBILE STYLES --- */
@media (max-width: 1023px) {
  #portfolio-hero {
    height: auto;
    min-height: 100vh;
    padding: 100px 0 60px;
  }

  #portfolio-hero h1 {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  #portfolio-hero p {
    font-size: 1rem;
  }

  #portfolio-hero .h-\[400px\] {
    height: 250px;
  }

  #portfolio-hero .grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr;
  }

  #metrics .grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  #portfolio-grid .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr;
  }

  #portfolio-grid .project-card {
    padding: 1.5rem;
  }

  #cta-section h2 {
    font-size: 2rem;
  }

  #cta-section p {
    font-size: 1rem;
  }

  #cta-section .flex.gap-4 {
    flex-direction: column;
  }

  #cta-section .flex.gap-4 a {
    width: 100%;
    justify-content: center;
  }
}