/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Base Styles */
@layer base {
  html {
    @apply scroll-smooth;
  }

  body {
    @apply font-sans text-gray-800 bg-gray-50;
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold leading-tight text-gray-900;
  }

  h1 {
    @apply text-4xl md:text-5xl mb-6;
  }

  h2 {
    @apply text-3xl md:text-4xl mb-6;
  }

  h3 {
    @apply text-2xl md:text-3xl mb-4;
  }

  p {
    @apply mb-4 text-gray-600;
  }

  a {
    @apply transition-colors duration-300;
  }

  /* Custom font faces */
  @font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
}

/* Custom Components */
@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-md font-bold transition-all duration-300 ease-in-out;
  }

  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 hover:shadow-lg;
  }

  .btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 hover:shadow-lg;
  }

  .btn-outline {
    @apply border-2 border-current text-current hover:bg-opacity-10 hover:bg-current;
  }

  /* Cards */
  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg;
  }

  .program-card {
    @apply card transform hover:-translate-y-1;
  }

  .testimonial-card {
    @apply card p-6 hover:shadow-xl;
  }

  /* Forms */
  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300;
  }

  .form-label {
    @apply block text-gray-700 font-medium mb-2;
  }

  /* Navigation */
  .nav-link {
    @apply px-4 py-2 text-gray-700 hover:text-blue-600 transition-colors duration-300;
  }

  .nav-link.active {
    @apply text-blue-600 font-medium;
  }

  /* Hero Section */
  .hero {
    @apply relative py-20 md:py-32 text-white overflow-hidden;
  }

  .hero-overlay {
    @apply absolute inset-0 bg-black bg-opacity-50;
  }

  /* Section */
  .section {
    @apply py-16 md:py-24;
  }

  .section-title {
    @apply text-3xl md:text-4xl font-bold text-center mb-8;
  }

  /* Timeline (for admissions) */
  .timeline-item {
    @apply relative pl-12 mb-8;
  }

  .timeline-dot {
    @apply absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-600 border-4 border-white shadow-md;
  }

  .timeline-line {
    @apply absolute left-4 top-8 bottom-0 w-1 bg-gray-200;
  }

  /* Accordion */
  .accordion-header {
    @apply flex justify-between items-center p-4 cursor-pointer bg-gray-50 rounded-lg;
  }

  .accordion-content {
    @apply overflow-hidden transition-all duration-300;
  }

  /* Modal */
  .modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300;
  }

  .modal-overlay.active {
    @apply opacity-100 visible;
  }

  .modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-full max-h-screen overflow-auto transform scale-95 transition-all duration-300;
  }

  .modal-overlay.active .modal-content {
    @apply scale-100;
  }
}

/* Custom Utilities */
@layer utilities {
  /* Animation */
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  /* Text */
  .text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  }

  .text-shadow-md {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  /* Background */
  .bg-gradient-blue {
    background: linear-gradient(to right, #3b82f6, #2563eb);
  }

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

  /* Layout */
  .full-bleed {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  /* Transform */
  .rotate-45 {
    transform: rotate(45deg);
  }

  .-rotate-45 {
    transform: rotate(-45deg);
  }

  /* Scroll */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Custom Grid */
  .grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  /* Special Effects */
  .backdrop-blur {
    backdrop-filter: blur(5px);
  }

  /* Custom Transitions */
  .transition-slow {
    transition: all 0.5s ease;
  }

  .transition-fast {
    transition: all 0.15s ease;
  }
}

/* Custom Vendor Overrides */
/* If you need to override any third-party component styles */
/* For example: */
/*
.swiper-button-next,
.swiper-button-prev {
  @apply text-white bg-blue-600 rounded-full w-12 h-12 flex items-center justify-center;
}
*/

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }

  body {
    @apply bg-white text-black;
  }

  .print-break {
    page-break-after: always;
  }
}