@tailwind base;
@tailwind components;
@tailwind utilities;

/* Define font-face for Brush Script MT */
@font-face {
  font-family: 'Brush Script MT';
  src: url("/fonts/BRUSHSCI.TTF") format('truetype'),
       url("/fonts/BrushScriptStd.otf") format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@layer components {
  .logo-font {
    font-family: 'Brush Script MT', cursive;
    @apply text-med-off-black;
  }

  .btn-primary {
    @apply bg-med-primary text-med-off-black font-semibold py-2 px-4 rounded-md hover:bg-med-primary-dark transition-colors;
  }

  .btn-form-submit {
    @apply px-4 py-2 text-sm font-medium text-med-off-black bg-med-primary border border-transparent rounded-md shadow-sm hover:bg-med-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-med-primary;
  }

  .btn-secondary {
    @apply bg-med-red text-white font-semibold py-2 px-4 rounded-md hover:bg-opacity-90 transition-colors;
  }

  .btn-outline {
    @apply border-2 border-med-primary text-med-primary-dark font-semibold py-2 px-4 rounded-md hover:bg-med-primary-light transition-colors;
  }

  .tag {
    @apply text-xs px-2 py-0.5 rounded-full font-medium;
  }

  /* Expandable content buttons styling */
  .expand-button {
    @apply inline-flex items-center px-3 py-1.5 mt-3 text-sm font-semibold;
    @apply text-med-primary-dark bg-med-primary-light;
    @apply hover:bg-med-primary hover:text-med-off-black;
    @apply rounded-full transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-med-primary focus:ring-offset-1;
    @apply shadow-sm hover:shadow-md;
    @apply border border-med-primary border-opacity-20 hover:border-opacity-40;
  }

  .expand-button:hover svg {
    transform: scale(1.1);
  }

  .expand-button:active {
    transform: translateY(1px);
  }

  /* Line clamp utility for text truncation */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Custom gradient classes */
  .gradient-primary-turquoise {
    background: linear-gradient(to right, theme('colors.med-primary'), theme('colors.med-turquoise'));
  }

  .gradient-primary-to-dark {
    background: linear-gradient(to right, theme('colors.med-primary'), theme('colors.med-primary-dark'));
  }

  .gradient-primary-dark {
    background: linear-gradient(to bottom right, theme('colors.med-primary'), theme('colors.med-primary-dark'));
  }

  .gradient-turquoise-dark {
    background: linear-gradient(to bottom right, theme('colors.med-turquoise'), theme('colors.med-dark-turquoise'));
  }

  .gradient-turquoise-to-dark {
    background: linear-gradient(to right, theme('colors.med-turquoise'), theme('colors.med-dark-turquoise'));
  }

  .gradient-red-dark {
    background: linear-gradient(to bottom right, theme('colors.med-red'), #DC2626);
  }

  .gradient-red-to-dark {
    background: linear-gradient(to right, theme('colors.med-red'), #DC2626);
  }

  .gradient-blue-purple {
    background: linear-gradient(to right, #2563EB, #7C3AED);
  }

  .gradient-green {
    background: linear-gradient(to right, #10B981, #059669);
  }

  .gradient-gray {
    background: linear-gradient(to right, #6B7280, #4B5563);
  }

  .gradient-map-light {
    background: linear-gradient(to bottom right, theme('colors.med-primary-light'), theme('colors.med-light-turquoise'));
  }
}