/* Touch States CSS - Provides visual feedback for touch interactions */

/* ============================================
   GLOBAL TOUCH/FOCUS STATES
   ============================================ */

/* Focus visible for keyboard navigation accessibility */
:focus-visible {
  outline: 2px solid #c5a065;
  outline-offset: 2px;
}

/* Remove default focus outline when not using keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   BUTTONS - Active/Focus States
   ============================================ */

/* Primary buttons (gold background) */
button,
.btn,
.cta-button,
a[style*="background-color: #c5a065"],
a[style*="background:#c5a065"] {
  -webkit-tap-highlight-color: transparent;
}

button:active,
.btn:active,
.cta-button:active {
  transform: scale(0.97);
  opacity: 0.9;
}

button:focus-visible,
.btn:focus-visible,
.cta-button:focus-visible {
  outline: 2px solid #c5a065;
  outline-offset: 3px;
}

/* ============================================
   NAVIGATION LINKS - Active/Focus States
   ============================================ */

nav a:active,
.nav-dropdown-toggle:active {
  opacity: 0.7;
}

nav a:focus-visible,
.nav-dropdown-toggle:focus-visible {
  outline: 2px solid #c5a065;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mobile menu toggle button */
.mobile-menu-toggle:active {
  transform: scale(0.9);
  opacity: 0.8;
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid #c5a065;
  outline-offset: 2px;
}

/* ============================================
   FOOTER LINKS - Active/Focus States
   ============================================ */

footer a:active {
  opacity: 0.7;
}

footer a:focus-visible {
  outline: 2px solid #c5a065;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Social icons - enhanced touch feedback */
.social-icon:active,
footer a[href*="linkedin"]:active,
footer a[href*="facebook"]:active,
footer a[href*="youtube"]:active {
  transform: scale(0.92);
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================
   CARDS & INTERACTIVE ELEMENTS
   ============================================ */

/* Service cards, blog cards, etc. */
.service-card:active,
.blog-card:active,
.card:active {
  transform: scale(0.98);
}

.service-card:focus-within,
.blog-card:focus-within,
.card:focus-within {
  outline: 2px solid #c5a065;
  outline-offset: 2px;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #c5a065;
  outline-offset: 0;
  border-color: #c5a065;
}

input[type="submit"]:active,
input[type="button"]:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* ============================================
   HEADER LINKS
   ============================================ */

.header-link:active,
.header-contact:active {
  opacity: 0.7;
}

.header-link:focus-visible,
.header-contact:focus-visible {
  outline: 2px solid #c5a065;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */

.nav-dropdown-menu a:active {
  background-color: rgba(197, 160, 101, 0.2) !important;
}

.nav-dropdown-menu a:focus-visible {
  outline: 2px solid #c5a065;
  outline-offset: -2px;
}

/* ============================================
   GENERAL LINK STATES
   ============================================ */

a:active {
  opacity: 0.8;
}

/* Ensure smooth transitions for all interactive elements */
button,
a,
input,
textarea,
select,
.btn,
.card,
.service-card,
.blog-card {
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* ============================================
   MOBILE-SPECIFIC ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Larger touch feedback on mobile */
  button:active,
  .btn:active,
  a:active {
    transform: scale(0.96);
  }
  
  /* Ensure minimum touch target size */
  nav a,
  footer a,
  .header-link,
  .header-contact {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}