@import "tailwindcss";

/* Pagination */
.pagination {
  @apply flex justify-center space-x-1 mt-8;
}
.pagination a,
.pagination span {
  @apply px-3 py-1 rounded text-sm;
}
.pagination .current {
  @apply bg-blue-600 text-white;
}
.pagination a {
  @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
}

/* === Enhanced Comments Section === */
.comments-area {
  @apply mt-12 pt-8 border-t border-gray-200;
}

.comments-title {
  @apply text-2xl font-bold text-gray-900 mb-6;
  font-family: 'Playfair Display', serif;
}

/* Comment List */
.comment-list {
  @apply space-y-6;
}

ol.comment-list {
  @apply list-none;
}

.comment {
  @apply flex flex-col sm:flex-row gap-4 p-5 bg-white rounded-xl shadow-sm hover:shadow-md transition;
}

/* Nested comments */
.comment .comment {
  @apply ml-0 sm:ml-10 mt-6 pl-5 border-l-2 border-blue-100;
}

/* Avatar */
.comment-author .avatar {
  @apply w-12 h-12 rounded-full ring-2 ring-blue-100;
}

/* Author Info */
.comment-author-name {
  @apply font-semibold text-gray-900;
}

.comment-date {
  @apply text-xs text-blue-600 font-medium;
}

.comment-metadata {
  @apply flex flex-wrap items-baseline gap-2;
}

/* Reply & Edit Links */
.comment-reply-link,
.comment-edit-link {
  @apply text-xs font-medium text-emerald-600 hover:text-emerald-800 transition;
}

/* Comment Content */
.comment-content {
  @apply mt-2 text-gray-700;
}

.comment-content p {
  @apply mb-3 leading-relaxed;
}

/* Moderation Notice */
.comment-awaiting-moderation {
  @apply inline-block px-2 py-1 bg-amber-100 text-amber-800 text-xs font-medium rounded;
}

/* Logged-in Notice */
.logged-in-as {
  @apply text-sm text-gray-600 mb-4;
}

.logged-in-as a {
  @apply text-blue-600 font-medium hover:text-blue-800;
}

/* === Comment Form === */
.comment-respond {
  @apply mt-12 pt-8 border-t border-gray-200;
}

.comment-reply-title {
  @apply text-xl font-bold text-gray-900 mb-4;
  font-family: 'Playfair Display', serif;
}

.comment-form {
  @apply space-y-5;
}

/* Form Labels */
.comment-form label {
  @apply block text-sm font-medium text-gray-800 mb-1;
}

/* Required Asterisk */
.required {
  @apply text-rose-500 ml-1;
}

/* Form Inputs */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition;
}

.comment-form textarea {
  @apply min-h-[140px] ;
}

/* Submit Button */
.form-submit input[type="submit"] {
  @apply px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-700 text-white font-medium rounded-lg shadow hover:from-blue-700 hover:to-indigo-800 transition transform hover:-translate-y-0.5;
}

/* Focus states for accessibility */
.comment-form input:focus,
.comment-form textarea:focus {
  @apply border-blue-500;
}