/* ============================================
   WORQ DIRECTORY - TAILWIND CUSTOM STYLES
   Based on BRAND_GUIDELINES.md
   ============================================ */

/* Override Tailwind defaults with brand guidelines */
@layer base {
  body {
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #162b4d; /* Navy */
    background-color: #f4f0ea; /* Beige */
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: Avenir, 'Trebuchet MS', Arial, sans-serif;
    color: #162b4d; /* Navy */
  }

  a {
    color: #23607c; /* Teal */
    text-decoration: none;
  }

  a:hover {
    color: #162b4d; /* Navy */
    text-decoration: underline;
  }
}

/* Custom component classes matching brand guidelines */
@layer components {
  /* Button Styles */
  .btn-primary {
    @apply bg-navy text-white px-6 py-3 rounded-md font-medium transition-all hover:shadow-md hover:-translate-y-0.5 active:translate-y-0;
  }

  .btn-secondary {
    @apply bg-forest text-white px-6 py-3 rounded-md font-medium transition-all hover:shadow-md hover:-translate-y-0.5 active:translate-y-0;
  }

  .btn-outline {
    @apply bg-transparent border-2 border-navy text-navy px-6 py-3 rounded-md font-medium transition-all hover:bg-navy hover:text-white;
  }

  /* Card Styles */
  .card {
    @apply bg-white rounded-lg p-6 shadow-md transition-all hover:shadow-lg hover:-translate-y-1;
  }

  /* Directory Cards */
  .directory-card {
    @apply relative overflow-hidden bg-white rounded-3xl p-8 shadow-lg transition-all cursor-pointer hover:shadow-xl hover:-translate-y-1;
  }

  .directory-card.member {
    @apply bg-navy text-white;
  }

  .directory-card.visitor {
    @apply bg-forest text-white;
  }

  /* Feature Cards */
  .feature-card {
    @apply bg-white rounded-2xl p-5 shadow-md transition-all hover:shadow-lg hover:-translate-y-1 cursor-pointer;
  }

  /* Alert Styles */
  .alert {
    @apply p-4 rounded-md border-l-4 mb-4;
  }

  .alert-success {
    @apply bg-green-50 border-green-500 text-green-800;
  }

  .alert-warning {
    @apply bg-amber-50 border-amber-500 text-amber-800;
  }

  .alert-error {
    @apply bg-red-50 border-red-500 text-red-800;
  }

  .alert-info {
    @apply bg-blue-50 border-blue-500 text-blue-800;
  }
}

/* Utility Classes */
@layer utilities {
  /* Remove mobile-only container constraint */
  .directory-container {
    @apply w-full mx-auto px-12;
  }

  /* Tablet responsive */
  @media (min-width: 768px) {
    .directory-container {
      @apply max-w-3xl px-16;
    }
  }

  /* Desktop responsive */
  @media (min-width: 1024px) {
    .directory-container {
      @apply max-w-5xl px-24;
    }
  }

  /* View visibility */
  .view {
    @apply hidden;
  }

  .view.active {
    @apply block;
  }

  /* Animation utilities */
  .fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Touch-friendly tap effect */
  .btn-tap:active {
    @apply scale-98 opacity-90;
  }

  /* Smooth transitions */
  .transition-smooth {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
  .directory-card {
    @apply p-6;
  }

  .feature-card {
    @apply p-4;
  }

  /* Ensure touch targets are minimum 44x44px */
  button,
  a.btn-primary,
  a.btn-secondary,
  a.btn-outline {
    @apply min-h-[44px] min-w-[44px];
  }
}