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

@layer base {
  body {
    @apply font-sans antialiased;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-lg px-6 py-3 text-base font-semibold transition-all duration-200;
  }
  
  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600;
  }
  
  .btn-secondary {
    @apply border border-slate-200 bg-white text-slate-900 hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-white dark:hover:border-slate-600 dark:hover:bg-slate-700;
  }
}

@layer utilities {
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  
  .animation-delay-4000 {
    animation-delay: 4s;
  }
}

::selection {
  @apply bg-green-700 text-white;
}
.menu-item a {
  @apply !font-semibold text-lg;
}
/* text editor descriptions  
=========================== */
.descriptions {
  @apply p-0 sm:p-4 md:p-6 bg-white;
}

.descriptions table {
  @apply mb-3 sm:mb-4 rounded-md border border-slate-300 p-1 sm:p-2 w-full overflow-x-auto block sm:table;
}

.descriptions th,
.descriptions td,
.descriptions tr {
  @apply border border-slate-300 p-1 sm:p-2 text-sm sm:text-base;
}

.descriptions h1 {
  @apply mb-3 sm:mb-5 text-2xl sm:text-3xl font-bold text-rose-700;
}

.descriptions h2 {
  @apply mb-3 sm:mb-5 text-xl sm:text-2xl font-bold;
}

.descriptions h3 {
  @apply mb-3 sm:mb-5 text-lg sm:text-xl font-bold;
}

.descriptions h4 {
  @apply mb-2 sm:mb-4 text-base sm:text-lg font-bold;
}

.descriptions h5 {
  @apply mb-2 sm:mb-4 text-sm sm:text-base font-bold;
}

.descriptions h6 {
  @apply mb-2 sm:mb-3 text-xs font-bold;
}

.descriptions p {
  @apply mb-3 sm:mb-4 text-base sm:text-lg;
}

.descriptions ul {
  @apply mb-3 sm:mb-4 ml-1 list-inside list-disc flex flex-col;
}

.descriptions ol {
  @apply mb-3 sm:mb-4 list-inside list-decimal;
}

.descriptions li {
  @apply relative inline-flex pl-4 sm:pl-5 text-sm sm:text-base pb-2 sm:pb-3 last:pb-0;
}

.descriptions li:before {
  @apply absolute left-0 top-1.5 sm:top-2 h-2 sm:h-3 w-2 sm:w-3 rounded bg-slate-300 content-[''];
}

.descriptions blockquote {
  @apply mb-3 sm:mb-4 rounded-md border-l-2 border-slate-400 bg-green-100 p-3 sm:p-5 pl-5 sm:pl-7;
}

.descriptions code {
  @apply mb-3 sm:mb-4 rounded-md bg-slate-100 p-1 text-sm sm:text-base overflow-x-auto block;
}

.descriptions hr {
  @apply mb-3 sm:mb-4 border-t-2 border-slate-300;
}

.descriptions img,
.descriptions video,
.descriptions iframe {
  @apply mb-3 sm:mb-4 rounded-md w-full max-w-full h-auto;
}

.descriptions a {
  @apply text-blue-500 underline break-words;
}

.descriptions .ProseMirror {
  @apply p-2 sm:p-4;
}

.descriptions .ProseMirror:focus {
  @apply outline-none;
}

.descriptions ul li::marker {
  @apply text-red-500 text-base sm:text-lg;
}

.wp-block-image img {
  @apply rounded-md w-full max-w-full h-auto;
}

/* excerpts */
.excerpts {
  @apply text-gray-800 text-base sm:text-lg;
}

.excerpts p {
  @apply text-gray-800 text-base sm:text-lg;
}

/* Add these custom styles */
@layer components {
  .menu-item-has-children {
    @apply relative;
  }

  .menu-item-has-children:hover > .dropdown-menu {
    @apply block opacity-100 translate-y-0;
  }

  .dropdown-menu {
    @apply hidden opacity-0 translate-y-1 transition-all duration-200 ease-in-out;
  }

  /* Mobile menu styles */
  @media (max-width: 767px) {
    .dropdown-menu {
      @apply static w-full shadow-none mt-0 !important;
    }

    .menu-item-has-children > a {
      @apply flex justify-between items-center w-full;
    }
  }
}

/* Footer Menu Styles */
.footer-menu-widget {
  /* General styles for the footer menu widget container can go here */
}

.footer-menu-widget h3 {
  @apply text-xl font-semibold text-gray-900; /* Larger font and emphasis for headings */
}

.footer-menu-widget .footer-item {
  @apply mt-3; /* Add spacing between menu items */
}

.footer-menu-widget .wp-block-list {
  @apply list-none p-0; /* Remove default list styling */
}

.footer-menu-widget .wp-block-list li {
  @apply mb-2; /* Add spacing between list items */
}

.footer-menu-widget .wp-block-list a {
  @apply text-base font-medium text-gray-700 hover:text-green-600 transition-colors;
}

.header-logo-wrap img {
  @apply max-w-[170px];
}
/* mobile footer logo */
@media (max-width: 767px) {
  .header-logo-wrap img,
  .mobile-header-logo .wp-block-image img {
    @apply !w-auto !h-[30px] !object-contain;
  }
}
.author-avatar img {
  @apply rounded-md;
}
.footer-logo img {
  @apply !w-auto !h-[45px] !object-contain;
}
.footer-column-group h3 {
  @apply text-xl font-semibold text-gray-900 mb-1;
}

.footer-column-group ul {
  @apply list-none p-0;
}
.footer-column-group li {
  @apply mb-1;
}
.footer-column-group a {
  @apply text-base font-medium text-gray-700 hover:text-green-600 transition-colors;
}
.contact-form input,
.contact-form textarea {
  @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-600;
}

.page-numbers {
  @apply text-gray-600 flex items-center justify-center gap-4;
}

/* Contact Form 7 */
.wpcf7-form {
  @apply max-w-2xl mx-auto;
}
.wpcf7-form-control {
  @apply w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-600 p-2 mt-2;
}
.wpcf7-submit {
  @apply bg-green-600 text-white px-4 py-2 rounded-md;
}
.wpcf7-submit:hover {
  @apply bg-green-700;
}
.wpcf7-form-control.wpcf7-not-valid {
  @apply border-red-500;
}
.wpcf7-not-valid-tip {
  @apply text-red-500;
}
.wpcf7-response-output {
  @apply text-green-600;
}