/* General styles */

@layer base {
   body {
      font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 18px;
   }
   
   html {
      scroll-behavior: smooth;
   }

   p {
      font-family: 'Barlow', sans-serif;
      line-height: 1.45;
      font-weight: 400;
      padding-bottom: 1.25em;
   }
   
   h1, h2, h3, h4, h5, h6 {
      font-family: 'Merriweather', Georgia, serif;
   }
}

@layer components {
   .nav-link {
      @apply font-medium text-[0.9375rem] tracking-wide transition-colors duration-200;
   }
   
   .nav-link.active {
      @apply font-semibold;
   }
   
   h1 {
      @apply text-6xl md:text-[3.75rem] leading-tight font-light tracking-tight text-neutral-900 mb-8;
   }
   
   h2 {
      @apply text-4xl md:text-[2.75rem] leading-snug font-light tracking-tight text-neutral-900 mb-6;
   }
   
   h3 {
      @apply text-[1.375rem] leading-snug font-bold text-neutral-900 mb-4 tracking-tight;
   }
   
   h4 {
      @apply text-sm leading-tight font-semibold text-neutral-600 mb-3 uppercase tracking-widest;
      font-family: 'Barlow', sans-serif;
   }
   
   p {
      @apply text-base leading-relaxed text-neutral-700 mb-4;
      font-family: 'Barlow', sans-serif;
   }
   
   blockquote {
      @apply text-[1.375rem] leading-relaxed italic font-normal text-neutral-900 my-12 relative;
   }
   
   /* Scroll reveal animation - disabled on mobile to prevent errors */
   .reveal {
      opacity: 1;
      transform: translateY(0);
   }
   
   .reveal-stagger > * {
      opacity: 1;
      transform: translateY(0);
   }
   
   .reveal-slide-item {
      opacity: 1;
      transform: translateX(0);
   }
   
   .reveal-card {
      opacity: 1;
      transform: scale(1) translateY(0) rotateX(0deg);
   }
   
   /* Enable reveal animations only on larger screens (tablet and up) */
   @media (min-width: 768px) {
      .reveal {
         opacity: 0;
         transform: translateY(40px);
         transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      }
      
      .reveal.active {
         opacity: 1;
         transform: translateY(0);
      }
      
      /* Stagger animation for child elements */
      .reveal-stagger > * {
         opacity: 0;
         transform: translateY(30px);
         transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      }
      
      .reveal-stagger.active > *:nth-child(1) { transition-delay: 0.1s; }
      .reveal-stagger.active > *:nth-child(2) { transition-delay: 0.2s; }
      .reveal-stagger.active > *:nth-child(3) { transition-delay: 0.3s; }
      .reveal-stagger.active > *:nth-child(4) { transition-delay: 0.4s; }
      .reveal-stagger.active > *:nth-child(5) { transition-delay: 0.5s; }
      .reveal-stagger.active > *:nth-child(6) { transition-delay: 0.6s; }
      
      .reveal-stagger.active > * {
         opacity: 1;
         transform: translateY(0);
      }
      
      /* Horizontal fly-in animation for list items */
      .reveal-slide-item {
         opacity: 0;
         transform: translateX(-100px);
         transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      }
      
      .reveal-slide-item.active {
         opacity: 1;
         transform: translateX(0);
      }
      
      /* Fancy card animation - scale and fade with rotation */
      .reveal-card {
         opacity: 0;
         transform: scale(0.85) translateY(30px) rotateX(10deg);
         transform-style: preserve-3d;
         perspective: 1000px;
         transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), 
                  transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      
      .reveal-card.active {
         opacity: 1;
         transform: scale(1) translateY(0) rotateX(0deg);
      }
      
      /* Stagger delays for cards */
      .reveal-card:nth-child(1) { transition-delay: 0s; }
      .reveal-card:nth-child(2) { transition-delay: 0.1s; }
      .reveal-card:nth-child(3) { transition-delay: 0.2s; }
      .reveal-card:nth-child(4) { transition-delay: 0.3s; }
      .reveal-card:nth-child(5) { transition-delay: 0.4s; }
      .reveal-card:nth-child(6) { transition-delay: 0.5s; }
      .reveal-card:nth-child(7) { transition-delay: 0.6s; }
      .reveal-card:nth-child(8) { transition-delay: 0.7s; }
      .reveal-card:nth-child(9) { transition-delay: 0.8s; }
   }
}

/* Navigation scroll effect */

nav {
   transition: all 0.3s ease;
}

/* Navigation always white */
nav {
   background: rgba(255, 255, 255, 0.98) !important;
   border-bottom-color: #e5e5e5 !important;
}

nav .nav-link,
nav a[href="/"] {
   color: #525252 !important;
}

nav a[href="/"]:hover,
nav .nav-link:hover {
   color: #0a0a0a !important;
}

nav .mobile-menu-btn {
   color: #525252;
}


/* Logo Carousel */

.logo-carousel {
   cursor: grab;
   will-change: transform;
}

.logo-carousel.dragging {
   cursor: grabbing;
   user-select: none;
}

/* Reviews Carousel */

.reviews-carousel {
   cursor: grab;
   will-change: transform;
}

.reviews-carousel.dragging {
   cursor: grabbing;
   user-select: none;
}

.service-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: linear-gradient(90deg, #0ea5e9, #14b8a6, #fbbf24);
   transform: scaleX(0);
   transition: transform 0.35s ease;
}

.service-card:hover::before {
   transform: scaleX(1);
}

/* Services Content List Styling */
.services-content ul,
.services-content ol {
   padding-left: 1em;
   margin-top: 0.75em;
   margin-bottom: 0.75em;
}

.services-content ul {
   list-style-type: disc;
}

.services-content ol {
   list-style-type: decimal;
}

.services-content li {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   line-height: 1.5;
}

.services-content li::marker {
   color: #0ea5e9;
}

.services-content ul ul,
.services-content ol ol,
.services-content ul ol,
.services-content ol ul {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
}

.hero-animated-bg {
   position: relative;
   overflow: hidden;
   background: 
      linear-gradient(135deg, 
         #0f172a 0%,
         #1e293b 25%,
         #0c4a6e 50%,
         #134e4a 75%,
         #0f172a 100%
      );
}

.hero-animated-bg::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   right: -50%;
   bottom: -50%;
   background: 
      radial-gradient(ellipse at 20% 20%, rgba(14, 165, 233, 0.2) 0%, transparent 40%),    /* Sky-500 */
      radial-gradient(ellipse at 80% 30%, rgba(20, 184, 166, 0.18) 0%, transparent 45%),   /* Teal-500 */
      radial-gradient(ellipse at 40% 80%, rgba(251, 191, 36, 0.12) 0%, transparent 50%),   /* Amber-400 */
      radial-gradient(ellipse at 70% 70%, rgba(14, 165, 233, 0.15) 0%, transparent 40%),
      radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 60%);    /* Indigo-500 */
   animation: backgroundPulse 20s ease-in-out infinite;
}

.hero-animated-bg::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
      linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.5) 100%);
   pointer-events: none;
}

@keyframes backgroundPulse {
   0%, 100% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
   }
   33% {
      opacity: 0.9;
      transform: scale(1.1) rotate(5deg);
   }
   66% {
      opacity: 0.85;
      transform: scale(1.05) rotate(-3deg);
   }
}

/* Canvas for particle animation */

#particles-canvas {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
}

.hero-content {
   position: relative;
   z-index: 10;
}

/* Hero button gradients and effects */

.hero-animated-bg .btn-primary {
   background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(20, 184, 166, 0.2));
   border-color: rgba(14, 165, 233, 0.6);
   backdrop-filter: blur(10px);
}

.hero-animated-bg .btn-primary:hover {
   background: linear-gradient(135deg, rgba(14, 165, 233, 0.4), rgba(20, 184, 166, 0.4));
   border-color: rgba(14, 165, 233, 1);
}

.hero-animated-bg .btn-secondary {
   backdrop-filter: blur(10px);
}

/* Prose/WYSIWYG Content Styles */
.prose {
   color: #404040;
   max-width: 65ch;
}

.prose p {
   margin-bottom: 1.25em;
   line-height: 1.75;
}

.prose h2 {
   margin-top: 2em;
   margin-bottom: 1em;
   line-height: 1.3;
}

.prose h3 {
   margin-top: 1.6em;
   margin-bottom: 0.6em;
   line-height: 1.4;
}

.prose strong {
   font-weight: 600;
   color: #171717;
}

.prose em {
   font-style: italic;
}

.prose a {
   color: #0ea5e9;
   text-decoration: underline;
   font-weight: 500;
   transition: color 0.2s;
}

.prose a:hover {
   color: #0284c7;
}

.prose ul,
.prose ol {
   padding-left: 1.625em;
   margin-top: 1.25em;
   margin-bottom: 1.25em;
}

.prose ul {
   list-style-type: disc;
}

.prose ol {
   list-style-type: decimal;
}

.prose li {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   line-height: 1.75;
}

.prose li p {
   margin-top: 0.75em;
   margin-bottom: 0.75em;
}

.prose u {
   text-decoration: underline;
}

.prose s {
   text-decoration: line-through;
}

/* Grav Form Styling */
.form-field {
   margin-bottom: 1.5rem;
}

.form-field label {
   display: block;
   font-size: 0.875rem;
   font-weight: 600;
   color: #404040;
   margin-bottom: 0.5rem;
   font-family: 'Barlow', sans-serif;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
   width: 100%;
   padding: 0.75rem 1rem;
   border: 2px solid #d4d4d4;
   border-radius: 0.5rem;
   font-family: 'Barlow', sans-serif;
   font-size: 1rem;
   transition: border-color 0.2s ease, outline 0.2s ease;
}

.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field input[type="tel"]:focus,
.form-field textarea:focus {
   border-color: #0ea5e9;
   outline: none;
}

.form-field textarea {
   resize: vertical;
   min-height: 150px;
}

.form-field input[type="checkbox"] {
   width: 1.25rem;
   height: 1.25rem;
   border: 2px solid #d4d4d4;
   border-radius: 0.25rem;
   margin-right: 0.75rem;
   vertical-align: middle;
}

.form-field.checkbox-field {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
}

.form-field.checkbox-field label {
   margin-bottom: 0;
   font-weight: 400;
   font-size: 0.875rem;
   color: #404040;
}

.form-field.checkbox-field a {
   color: #0ea5e9;
   text-decoration: underline;
}

.form-field.checkbox-field a:hover {
   color: #0284c7;
}

.form-data.required label::after {
   content: '';
}

button[type="submit"],
.button {
   width: 100%;
   background: linear-gradient(135deg, #0ea5e9, #14b8a6);
   color: white;
   font-weight: 600;
   padding: 1rem 2rem;
   border-radius: 0.5rem;
   border: none;
   cursor: pointer;
   font-family: 'Barlow', sans-serif;
   font-size: 1rem;
   transition: all 0.3s ease;
}

button[type="submit"]:hover,
.button:hover {
   box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3);
   transform: translateY(-2px);
}

.form-messages,
.notices {
   margin-top: 1.5rem;
   padding: 1rem;
   border-radius: 0.5rem;
}

.form-messages.success,
.notices.success,
.notices.green {
   background-color: #ecfdf5;
   border: 1px solid #10b981;
   color: #065f46;
}

.form-messages.error,
.notices.error,
.notices.red {
   background-color: #fef2f2;
   border: 1px solid #ef4444;
   color: #991b1b;
}

.notices.warning,
.notices.yellow {
   background-color: #fffbeb;
   border: 1px solid #f59e0b;
   color: #92400e;
}

.form-message.error {
   margin-top: 1.5rem;
   padding: 1rem;
   border-radius: 0.5rem;
   background-color: #fef2f2;
   border: 1px solid #ef4444;
   color: #991b1b;
}

/* Success Modal */
.form-success-overlay {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0);
   backdrop-filter: blur(0px);
   transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
   padding: 1.5rem;
}
.form-success-overlay.visible {
   background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
}
.form-success-modal {
   background: white;
   border-radius: 1rem;
   padding: 2.5rem;
   max-width: 28rem;
   width: 100%;
   text-align: center;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   transform: scale(0.9) translateY(1rem);
   opacity: 0;
   transition: transform 0.3s ease, opacity 0.3s ease;
}
.form-success-overlay.visible .form-success-modal {
   transform: scale(1) translateY(0);
   opacity: 1;
}
.form-success-icon {
   width: 4rem;
   height: 4rem;
   margin: 0 auto 1.5rem;
   color: #10b981;
}
.form-success-icon svg {
   width: 100%;
   height: 100%;
}
.form-success-modal h3 {
   font-size: 1.5rem;
   font-weight: 700;
   color: #111827;
   margin-bottom: 0.75rem;
}
.form-success-modal p {
   color: #6b7280;
   line-height: 1.6;
   margin-bottom: 2rem;
}
.form-success-close {
   display: inline-block;
   background: linear-gradient(to right, #0ea5e9, #14b8a6);
   color: white;
   font-weight: 600;
   padding: 0.75rem 2rem;
   border-radius: 0.5rem;
   border: none;
   cursor: pointer;
   font-size: 1rem;
   transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.form-success-close:hover {
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   transform: translateY(-1px);
}