/* Sarka Espinosa Consulting - Custom Styles */

/* Additional refinements beyond Tailwind + inline styles */

:root {
  --accent-teal: #0f766e;
  --accent-amber: #b45309;
}

/* Better focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

/* Navbar transition polish */
nav {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Card hover lift is already in HTML inline, but we can enhance */
.service-card {
  will-change: transform;
}

/* Modal backdrop click hint */
#booking-modal,
#service-modal {
  animation: fadeInBackdrop 0.15s ease forwards;
}

@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Form input polish */
input, textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.08);
}

/* Testimonial quote styling enhancement */
.testimonial p {
  font-feature-settings: "ss01";
}

/* Print styles (good for proposals) */
@media print {
  nav, footer, button, #booking-modal, #service-modal {
    display: none !important;
  }
  .max-w-7xl {
    max-width: 100% !important;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  .service-card {
    border-color: #334155;
  }
  
  .nav-link:after {
    height: 3px;
  }
}

/* Subtle grid texture on dark hero (already handled inline but available) */
.dark-grid {
  background-image: 
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 22px 22px;
}