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

/* Improve text smoothing and apply a single base font */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" on, "kern" on;
  font-family: 'Poppins', ui-sans-serif, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

@layer components {
  .h1 {
    @apply text-5xl text-heading lg:text-6xl font-bold mb-6;
  }

  .h2 {
    @apply text-3xl text-heading lg:text-4xl font-bold relative mb-16 orange-line;
  }

  .sub-heading {
    @apply text-xl text-sub-heading lg:text-2xl xl:text-3xl font-semibold relative sub-orange-line sm:orange-line;
  }

  .h3 {
    @apply text-lg text-sub-heading lg:text-xl xl:text-2xl font-semibold relative sub-orange-line;
  }
  p,
  h3,
  h4,
  a {
    @apply font-poppins;
  }

  @keyframes slide {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-50%, 0, 0);
    }
  }

  .animate-slide {
    /* Animations disabled site-wide */
    animation: none;
    width: max-content;
  }

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

  @keyframes pop {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .animate-fade {
    animation: none;
  }

  .animate-pop {
    animation: none;
  }

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

  .animate-fade-up {
    animation: none;
  }

  .error-text {
    color: red;
  }
}

@layer utilities {
  /* Balance heading line breaks for better readability */
  .text-balance {
    text-wrap: balance;
  }
  .orange-line::after {
    content: "";
    @apply block w-14 h-1 absolute -bottom-4 bg-tertiary rounded-lg;
  }

  .center-orange-line::after {
    @apply left-1/2 -translate-x-1/2;
  }

  .sub-orange-line::after {
    content: "";
    @apply block w-14 h-1 absolute -bottom-3 bg-tertiary rounded-lg;
  }

  .li::before {
    content: "";
    @apply block h-[10px] w-[10px] sm:w-3 sm:h-3 rounded-sm absolute left-1 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-main;
  }
}

.section {
  padding: 0 264px;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
  color: #242323;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.blog-content p {
  margin-bottom: 1rem;
  line-height: 1.8;
}

.blog-content ul,
.blog-content ol {
  list-style-position: outside;
  list-style-type: initial;
}

.blog-content ul {
  list-style-type: disc;
}

.blog-content ol {
  list-style-type: decimal;
}

.blog-content ul,
.blog-content ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.blog-content a {
  color: #125F60;
  text-decoration: underline;
}

.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #E6E6E6;
  background: #f9fafb;
}

.rte-editor {
  padding: 16px;
  min-height: 280px;
}

.tiptap {
  min-height: 220px;
  outline: none;
  color: #2a2a2a;
}

.tiptap > * + * {
  margin-top: 0.8em;
}

.tiptap h2 {
  font-size: 1.25rem;
  font-weight: 700;
}

.tiptap h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.tiptap ul,
.tiptap ol {
  list-style-position: outside;
  padding-left: 1.25rem;
  margin: 0.75rem 0;
}

.tiptap ul {
  list-style-type: disc;
}

.tiptap ol {
  list-style-type: decimal;
}

.tiptap blockquote {
  padding-left: 1rem;
  border-left: 3px solid #74b9b0;
  color: #4b5563;
}

.tiptap code {
  background: #f3f4f6;
  padding: 0.2em 0.4em;
  border-radius: 6px;
  font-size: 0.95em;
}

.tiptap pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 0.9rem;
  border-radius: 12px;
  overflow-x: auto;
}

.tiptap a {
  color: #125f60;
  text-decoration: underline;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-slide,
  .animate-fade,
  .animate-pop,
  .animate-fade-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 1660px) {
  .section {
    padding: 0 184px;
  }
}

@media (max-width: 1500px) {
  .section {
    padding: 0 128px;
  }
}

@media (max-width: 1440px) {
  .section {
    padding: 0 64px;
  }
}

@media (max-width: 1320px) {
  .section {
    padding: 0 36px;
  }
}

@media (max-width: 1080px) {
  .section {
    padding: 0 16px;
  }
}