/* css/style.css */

/*
  This file is intended for CSS rules that are either:
  1. Not easily achievable with Tailwind utility classes.
  2. For more complex custom components or animations.
  3. Global overrides or base styles if not handled in HTML <style> tag.

  For this enhanced design, many foundational styles (colors, fonts, spacing, responsive helpers)
  are configured within the Tailwind `tailwind.config` object in the <head> of index.html
  and applied using utility classes. Specific custom styles for components like buttons,
  FAQ accordions, cards, and form inputs are also embedded in the <head> <style> tag
  for cohesiveness in this example.

  You can add more specific or complex styles here.
*/

/* Example: If you wanted a very specific text gradient not easily done with Tailwind */
/*
.text-gradient-custom {
  background: -webkit-linear-gradient(45deg, theme('colors.secondary.DEFAULT'), theme('colors.accent.DEFAULT'));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
*/

/*
  Ensure this stylesheet is linked in your index.html:
  <link rel="stylesheet" href="css/style.css"> (This is already done in the provided HTML)
*/

/*
  The AOS library (Animate on Scroll) is used for scroll animations.
  Its default styles are included via CDN. You can override or extend AOS animations here if needed,
  though it's often easier to use its data attributes for configuration.
*/

/*
  Consider performance:
  - Keep custom CSS lean.
  - Leverage Tailwind's JIT (Just-In-Time) engine which purges unused styles.
  - Optimize images.
*/

/*
  Accessibility:
  - Ensure custom styles maintain or enhance accessibility (e.g., focus states, contrast).
  - The provided HTML and embedded styles already consider focus visibility and contrast.
*/

/*
  Process Section Connector Lines (Desktop)
  The basic connector is styled in the <head>.
  If you need more complex dashed lines or animated lines, you might add them here.
  For instance, to make the line appear to draw itself, you'd use SVG and JS or more complex CSS animations.
*/
@media (min-width: 768px) {
  /* md breakpoint */
  .process-grid .process-step-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(
      2rem + 2rem
    ); /* Vertically center with the number circle (4rem diameter / 2 + padding) */
    left: calc(
      100% + 1rem
    ); /* Start after the card + half the gap (gap is 2rem or 8 in Tailwind units) */
    width: calc(
      100vw / 3 - 100% - 2rem
    ); /* Attempt to fill gap; might need JS for perfect dynamic width */
    /* Or a simpler fixed width if gaps are predictable */
    /* A more robust way for fixed gaps: if gap-x-8 (2rem), then width could be 2rem */
    width: 2rem; /* Assuming gap-x-8 */
    height: 3px;
    background-color: theme("colors.secondary.light");
    transform: translateY(-50%); /* Adjust vertical alignment */
    z-index: -10; /* Ensure it's behind card content */
  }
  /* A more robust way if you know the number of columns and gaps */
  /* For 3 columns with gap-x-8 (2rem), the space between cards is 2rem.
       The line should visually bridge this gap.
       The previous .process-connector class in <style> was an attempt.
       This ::after pseudo-element is another approach.
       It's tricky to make it perfectly dynamic with pure CSS for all screen sizes if column count changes.
       The current inline .process-connector div is simpler but also has limitations.
       For a truly dynamic line that adjusts to any gap, JS might be needed to calculate positions.
    */
}

@media (min-width: 1024px) {
  nav img {
    max-height: 80px;
  }
}

/* Keyframe animations for more complex effects if desired */
/*
@keyframes subtlePulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.pulsing-element {
  animation: subtlePulse 2s infinite ease-in-out;
}
*/
