@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'));
  }

  /* ==================== MAP STYLING ENHANCEMENTS ==================== */
  
  /* Custom marker styles for Leaflet */
  .custom-marker {
    background: transparent !important;
    border: none !important;
  }
  
  .marker-pin {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    transition: all 0.2s ease;
  }
  
  .marker-pin:hover {
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
    transform: scale(1.1);
  }
  
  /* Enhanced Leaflet popup styling */
  .leaflet-popup-content-wrapper {
    @apply rounded-xl shadow-2xl border-0;
    background: white;
    padding: 0;
    overflow: hidden;
  }
  
  .leaflet-popup-content {
    margin: 0;
    padding: 0;
    width: auto !important;
  }
  
  .leaflet-popup-tip {
    @apply shadow-lg;
  }
  
  .custom-popup .leaflet-popup-close-button {
    @apply text-gray-400 hover:text-gray-600;
    font-size: 20px;
    top: 8px;
    right: 8px;
  }
  
  /* Job popup enhanced styling with IMPORTANT overrides for Leaflet */
  .job-popup {
    @apply p-4;
    min-width: 280px;
  }
  
  .job-popup h4 {
    @apply font-bold text-gray-900 mb-2 text-base leading-tight;
  }
  
  .job-popup .organization {
    @apply text-blue-600 text-sm mb-2 font-semibold;
  }
  
  .job-popup .location {
    @apply text-gray-600 text-sm mb-3 flex items-center;
  }
  
  .job-popup .profession {
    @apply text-sm text-gray-700 mb-4 font-medium;
  }
  
  /* Custom cluster styling for better visual appeal */
  .custom-cluster {
    @apply rounded-full shadow-lg border-2 border-white;
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  }
  
  .custom-cluster .cluster-inner {
    @apply w-full h-full rounded-full flex items-center justify-center text-white font-bold;
  }
  
  .marker-cluster-small .cluster-inner {
    @apply text-xs;
  }
  
  .marker-cluster-medium .cluster-inner {
    @apply text-sm;
  }
  
  .marker-cluster-large .cluster-inner {
    @apply text-base;
  }
  
  /* Map container enhancements */
  #opportunities-map {
    @apply relative overflow-hidden;
    border-radius: 12px 12px 0 0;
  }
  
  /* Custom zoom control styling */
  .leaflet-control-zoom {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  }
  
  .leaflet-control-zoom a {
    @apply bg-white text-gray-700 border-0;
    font-size: 18px !important;
    font-weight: bold;
    line-height: 32px !important;
    width: 36px !important;
    height: 36px !important;
  }
  
  .leaflet-control-zoom a:hover {
    @apply bg-blue-50 text-blue-600;
  }
  
  .leaflet-control-zoom a:first-child {
    border-radius: 8px 8px 0 0 !important;
  }
  
  .leaflet-control-zoom a:last-child {
    border-radius: 0 0 8px 8px !important;
  }
  
  /* Attribution styling */
  .leaflet-control-attribution {
    @apply bg-white bg-opacity-80 text-xs;
    border-radius: 4px !important;
    padding: 2px 6px !important;
  }
  
  .leaflet-control-attribution a {
    @apply text-blue-600;
  }
}

/* ==================== CRITICAL LEAFLET POPUP FIXES ==================== */
/* These rules are outside @layer to have maximum CSS specificity */

/* MAXIMUM SPECIFICITY: Target the Teoudoc popup button specifically */
.leaflet-popup-content .teoudoc-popup-button,
.leaflet-popup-content-wrapper .teoudoc-popup-button,
.teoudoc-custom-popup .teoudoc-popup-button,
.teoudoc-popup-content .teoudoc-popup-button {
  display: inline-block !important;
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  transition: background-color 0.2s ease !important;
  border: none !important;
}

.leaflet-popup-content .teoudoc-popup-button:hover,
.leaflet-popup-content-wrapper .teoudoc-popup-button:hover,
.teoudoc-custom-popup .teoudoc-popup-button:hover,
.teoudoc-popup-content .teoudoc-popup-button:hover {
  background-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.leaflet-popup-content .teoudoc-popup-button:visited,
.leaflet-popup-content-wrapper .teoudoc-popup-button:visited,
.teoudoc-custom-popup .teoudoc-popup-button:visited,
.teoudoc-popup-content .teoudoc-popup-button:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.leaflet-popup-content .teoudoc-popup-button:focus,
.leaflet-popup-content-wrapper .teoudoc-popup-button:focus,
.teoudoc-custom-popup .teoudoc-popup-button:focus,
.teoudoc-popup-content .teoudoc-popup-button:focus {
  color: #FFFFFF !important;
  text-decoration: none !important;
  outline: 2px solid #93C5FD !important;
  outline-offset: 2px !important;
}

/* Additional fallback for any anchor in job popups */
.leaflet-popup-content .job-popup a:not([class]),
.leaflet-popup-content-wrapper .job-popup a:not([class]) {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  display: inline-block !important;
}