@import "tailwindcss";

/* ===========================================
   Custom Fonts - Acumin Pro & Garamond Premier
   =========================================== */

@font-face {
  font-family: 'Acumin Pro';
  src: url("/assets/acumend-pro-light-2e585dd0.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Acumin Pro';
  src: url("/assets/acumed-pro-regular-685e1139.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Acumin Pro';
  src: url("/assets/acumed_pro-bold-ff0f49c2.otf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Garamond Premier';
  src: url("/assets/GaramondPremrPro-2de6a9f8.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Garamond Premier';
  src: url("/assets/GaramondPremrPro-It-010797f6.ttf") format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Garamond Premier';
  src: url("/assets/GaramondPremrPro-SmbdSubh-fd4ab847.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ===========================================
   Custom Theme Configuration
   =========================================== */

@theme {
  /* MEDICENT brand color */
  --color-medicent-blue: #28313D;
  --color-medicent-accent: #C7BFA8;

  /* Fonts */
  --font-sans: 'Acumin Pro', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Garamond Premier', ui-serif, Georgia, serif;
}

/* ===========================================
   Custom Animations
   =========================================== */

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

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

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================================
   Custom Utility Classes
   =========================================== */

@utility animate-marquee {
  animation: marquee 6s linear infinite;
}

@media (min-width: 768px) {
  .animate-marquee {
    animation: marquee 18s linear infinite;
  }
}

@utility animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

@utility animate-slide-up {
  animation: slide-up 0.6s ease-out forwards;
}

@utility hero-gradient {
  background: linear-gradient(135deg, rgba(40, 49, 61, 0.85) 0%, rgba(40, 49, 61, 0.6) 100%);
}

@utility text-gradient {
  background: linear-gradient(135deg, #28313D 0%, #28313D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@utility line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===========================================
   Base Styles
   =========================================== */

html {
  scroll-behavior: smooth;
}

/* Sans-serif text should be light weight by default */
body {
  font-weight: 300;
}

/* Apply tighter letter-spacing to all serif headlines */
.font-serif {
  letter-spacing: -0.035em; /* tracking-tighter */
}

/* Custom form styling */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #28313D;
  box-shadow: 0 0 0 3px rgba(40, 49, 61, 0.1);
}

/* Trix editor (Action Text) - admin form styling */
trix-editor {
  min-height: 150px;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #111827;
}

trix-editor:focus {
  outline: none;
  border-color: #28313D;
  box-shadow: 0 0 0 3px rgba(40, 49, 61, 0.1);
}

trix-toolbar {
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-bottom: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  background: #f9fafb;
}

trix-toolbar + trix-editor {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Hide file upload tools in trix (not needed for education/about) */
trix-toolbar .trix-button-group--file-tools {
  display: none;
}

/* Action Text rendered content */
.trix-content h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.trix-content h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.trix-content p { margin-bottom: 0.5rem; }
.trix-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.trix-content ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.trix-content li { margin-bottom: 0.25rem; }