/*
Theme Name: xniux
Theme URI: https://sweet-tapioca-c30ce0.netlify.app/
Description: A professional WordPress theme by xniux with flexible customisation and seamless integration for modern digital experiences.
Author: xniux

Version: 9.1
 *
 * Versioning
 *
 * This theme is being iterated on top of the original 8.x series.  To make
 * future revisions easier to track in the WordPress admin dashboard and
 * change logs, a standard `Version:` header is added here.  Each new
 * revision should increment the minor version (9.1, 9.2, …) up to 9.9.  When
 * the minor version reaches 9.9, the next release should bump the major
 * version to 10.0 and reset the minor number.  See the project README or
 * commit messages for details about specific changes in each release.
 */

/*
 * Active navigation link styling
 *
 * When a menu item corresponds to the section currently visible on the
 * page, JavaScript applies the `active-link` class.  This CSS applies
 * a gradient colour to the text by clipping the background to the
 * foreground text.  The colours mirror those used in the original
 * xniux React/Vite theme.
 */

/*
 * Fade‑up animation classes
 *
 * Elements with the `fade-up` class start slightly below their
 * final position with zero opacity.  When scrolled into view, a
 * JavaScript observer adds the `fade-up-active` class to trigger a
 * smooth upward transition.  These classes are kept lightweight to
 * avoid interfering with the Tailwind utility classes used elsewhere.
 */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
}
.fade-up-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Service tab icon inversion for active state */
.service-tab.active img {
  /* Invert and brighten the SVG icons when the tab is active so they appear white */
  filter: invert(1) brightness(2);
}

/*
 * Custom animation for sliding logo carousel in the testimonials section.
 * The animation moves the container to the left continuously, giving the
 * impression of an infinite loop.  This is applied to the wrapper via
 * the `animate-slide-infinite` utility class.
 */
@keyframes slide-infinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.animate-slide-infinite {
  animation: slide-infinite 40s linear infinite;
}

/* Slow spin animation used for decorative shapes in the testimonials section */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animate-spin-slow {
  animation: spin-slow 12s linear infinite;
}

/*
 * Floating WhatsApp button
 *
 * The WhatsApp floating action button appears in the bottom right
 * corner of the page on all screens.  It replicates the styling of
 * the original React/Vite theme: a circular green button with a
 * white WhatsApp icon, drop shadow, and a subtle scale on hover.
 */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 120px;
  right: 40px;
  background-color: #25d366;
  color: #ffffff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 20px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 2px 2px 30px rgba(37, 211, 102, 0.6);
}

/*
 * Blog content typography
 *
 * The xniux theme uses a Tailwind CSS foundation but does not include the
 * typography plugin that normally styles rich HTML in blog posts.  As a
 * result, headings, paragraphs, lists and other elements would render
 * without spacing or consistent sizing when authors paste in content from
 * other websites.  The rules below add sensible defaults so that new
 * posts retain their structure (e.g. <h1>…<h6>, <strong>, <em>, <ul>,
 * <ol>, <blockquote>, images) and display nicely on both desktop and
 * mobile.  These styles apply only within elements with the `prose` class
 * used in single.php.
 */
.prose p {
  margin-top: 1rem;
  margin-bottom: 1.25rem;
  line-height: 1.7;
  font-size: 1.125rem;
  color: #374151; /* gray‑700 */
}
.prose h1 {
  font-size: 2.25rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: #1f2937; /* gray‑800 */
}
.prose h2 {
  font-size: 1.875rem;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
  color: #1f2937;
}
.prose h3 {
  font-size: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
  color: #1f2937;
}
.prose h4 {
  font-size: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #1f2937;
}
.prose h5 {
  font-size: 1.125rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #1f2937;
}
.prose h6 {
  font-size: 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #1f2937;
}
.prose strong {
  font-weight: 700;
}
.prose em {
  font-style: italic;
}
.prose ul,
.prose ol {
  padding-left: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.prose ul li {
  list-style-type: disc;
  margin-bottom: 0.5rem;
}
.prose ol li {
  list-style-type: decimal;
  margin-bottom: 0.5rem;
}
.prose blockquote {
  border-left: 4px solid #06b6d4; /* cyan‑500 */
  padding-left: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #4b5563; /* gray‑600 */
}
.prose img {
  display: block;
  margin: 1.5rem auto;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
@media (max-width: 640px) {
  .prose p {
    font-size: 1rem;
  }
  .prose h1 {
    font-size: 1.75rem;
  }
  .prose h2 {
    font-size: 1.5rem;
  }
  .prose h3 {
    font-size: 1.25rem;
  }
}