/* ==========================================================
   VIJAY ENTERPRISES
   FREQUENTLY ASKED QUESTIONS

   Website:
   https://vijayenterprises1986.in/

   Dependencies:
   - sections/faq.html
   - js/faq.js
   - css/style.css

   Existing design preserved:
   - Clean white section
   - Navy and royal blue typography
   - Gold eyebrow accent
   - Bordered accordion
   - Chevron open/close indicator
   - Animated answer panels
   - Bottom contact CTA

   Improvements:
   - Readable mobile typography
   - Accessible keyboard focus
   - Responsive spacing
   - Reliable hidden-answer states
   - Reduced-motion support
========================================================== */


/* ==========================================================
   01. SECTION VARIABLES
========================================================== */

.ve-faq {
  --faq-navy: #112b48;
  --faq-blue: #203f83;
  --faq-gold: #d69e56;
  --faq-text: #596b80;
  --faq-border: #e0e6ee;
  --faq-bg: #ffffff;
  --faq-answer-bg: #fbfcfe;
  --faq-focus: #ad742a;

  width: 100%;
  padding: 76px 0 79px;

  color: var(--faq-navy);
  background: var(--faq-bg);

  font-family: "Inter", sans-serif;

  scroll-margin-top: 90px;
}

.ve-faq,
.ve-faq *,
.ve-faq *::before,
.ve-faq *::after {
  box-sizing: border-box;
}


/* ==========================================================
   02. SECTION CONTAINER
========================================================== */

.ve-faq .ve-faq-container {
  width: 100%;
  max-width: 1100px;

  margin-inline: auto;
  padding-inline: 24px;
}


/* ==========================================================
   03. SECTION HEADER
========================================================== */

.ve-faq-header {
  max-width: 800px;

  margin-bottom: 31px;
}


/* ==========================================================
   04. EYEBROW LABEL
========================================================== */

.ve-faq-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 15px;

  color: var(--faq-blue);

  font-size: 10px;
  font-weight: 750;

  line-height: 1.5;
  letter-spacing: 1.6px;
}


/* ==========================================================
   05. EYEBROW LINE
========================================================== */

.ve-faq-eyebrow-line {
  display: inline-block;

  flex: 0 0 28px;

  width: 28px;
  height: 2px;

  background: var(--faq-gold);
}


/* ==========================================================
   06. SECTION HEADING
========================================================== */

.ve-faq-header h2 {
  margin: 0 0 14px;

  color: var(--faq-navy);

  font-family:
    "Plus Jakarta Sans", sans-serif;

  font-size: clamp(32px, 3.4vw, 43px);
  font-weight: 800;

  line-height: 1.2;
  letter-spacing: -1.35px;
}

.ve-faq-header h2 span {
  color: var(--faq-blue);
}


/* ==========================================================
   07. HEADER DESCRIPTION
========================================================== */

.ve-faq-header > p {
  max-width: 760px;

  margin: 0;

  color: var(--faq-text);

  font-size: 15px;
  font-weight: 400;

  line-height: 1.85;
}


/* ==========================================================
   08. ACCORDION CONTAINER
========================================================== */

.ve-faq-accordion {
  width: 100%;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--faq-border);
  border-radius: 10px;
}


/* ==========================================================
   09. ACCORDION ITEM
========================================================== */

.ve-faq-item {
  position: relative;

  width: 100%;
  min-width: 0;

  background: #ffffff;
}


/* ==========================================================
   10. ITEM DIVIDERS
========================================================== */

.ve-faq-item + .ve-faq-item {
  border-top:
    1px solid var(--faq-border);
}


/* ==========================================================
   11. QUESTION HEADING
========================================================== */

.ve-faq-question {
  margin: 0;

  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}


/* ==========================================================
   12. QUESTION BUTTON
========================================================== */

.ve-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  width: 100%;
  min-height: 62px;

  margin: 0;
  padding: 19px 23px;

  color: var(--faq-navy);
  background: transparent;

  border: 0;
  border-radius: 0;

  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 650;

  line-height: 1.65;

  text-align: left;

  cursor: pointer;

  transition:
    background-color 200ms ease,
    color 200ms ease;
}


/* ==========================================================
   13. QUESTION TEXT
========================================================== */

.ve-faq-trigger > span {
  display: block;

  flex: 1 1 auto;

  min-width: 0;

  overflow-wrap: break-word;
}


/* ==========================================================
   14. CHEVRON ICON

   Lucide replaces the original i element
   with an SVG during initialization.
========================================================== */

.ve-faq-trigger > svg,
.ve-faq-trigger > i[data-lucide] {
  display: block;

  flex: 0 0 18px;

  width: 18px;
  height: 18px;

  color: #60748c;

  stroke-width: 2;

  transition:
    transform 250ms ease,
    color 200ms ease;
}


/* ==========================================================
   15. HOVER STATE
========================================================== */

@media (hover: hover) and (pointer: fine) {

  .ve-faq-trigger:hover {
    color: var(--faq-blue);
    background: #f8fafc;
  }

}


/* ==========================================================
   16. OPEN ACCORDION STATE
========================================================== */

.ve-faq-item.is-open
.ve-faq-trigger {
  color: var(--faq-blue);
  background: var(--faq-answer-bg);
}


/* ==========================================================
   17. OPEN CHEVRON STATE
========================================================== */

.ve-faq-item.is-open
.ve-faq-trigger > svg,
.ve-faq-item.is-open
.ve-faq-trigger > i[data-lucide] {
  color: var(--faq-blue);

  transform: rotate(180deg);
}


/* ==========================================================
   18. ANSWER PANEL

   Important:
   js/faq.js manages the animated height
   and hidden attribute.

   Preserve height: 0 and overflow: hidden
   for compatibility with the accordion.
========================================================== */

.ve-faq-answer {
  height: 0;

  overflow: hidden;

  background: var(--faq-answer-bg);

  transition:
    height 330ms
    cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================
   19. HIDDEN ANSWER

   An answer marked hidden must never
   occupy space or receive keyboard focus.
========================================================== */

.ve-faq-answer[hidden] {
  display: none !important;
}


/* ==========================================================
   20. ANSWER INNER CONTAINER
========================================================== */

.ve-faq-answer-inner {
  padding: 0 23px 23px;
}


/* ==========================================================
   21. ANSWER PARAGRAPHS
========================================================== */

.ve-faq-answer-inner p {
  max-width: 890px;

  margin: 0;

  color: var(--faq-text);

  font-size: 14px;
  font-weight: 400;

  line-height: 1.9;

  overflow-wrap: break-word;
}


/* ==========================================================
   22. INLINE STRONG TEXT
========================================================== */

.ve-faq-answer-inner strong {
  color: var(--faq-navy);

  font-weight: 700;
}


/* ==========================================================
   23. ANSWER LINKS
========================================================== */

.ve-faq-answer-inner a {
  color: var(--faq-blue);

  font-weight: 650;

  text-decoration: underline;
  text-decoration-thickness: 1px;

  text-underline-offset: 3px;

  overflow-wrap: anywhere;
}

.ve-faq-answer-inner a:hover {
  color: var(--faq-navy);
}


/* ==========================================================
   24. BOTTOM CONTACT AREA
========================================================== */

.ve-faq-bottom {
  margin-top: 25px;
}

.ve-faq-bottom p {
  margin: 0;

  color: var(--faq-text);

  font-size: 14px;
  font-weight: 400;

  line-height: 1.9;
}


/* ==========================================================
   25. BOTTOM CONTACT LINK
========================================================== */

.ve-faq-bottom a {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  margin-left: 4px;

  color: var(--faq-blue);

  font-weight: 700;

  line-height: inherit;

  text-decoration: none;
}

.ve-faq-bottom a:hover {
  color: var(--faq-navy);

  text-decoration: underline;
  text-underline-offset: 4px;
}

.ve-faq-bottom a svg {
  display: inline-block;

  flex: 0 0 16px;

  width: 16px;
  height: 16px;

  stroke-width: 1.9;
}


/* ==========================================================
   26. KEYBOARD ACCESSIBILITY
========================================================== */

.ve-faq-trigger:focus-visible {
  position: relative;
  z-index: 2;

  outline:
    3px solid var(--faq-focus);

  outline-offset: -4px;

  background: #f7f9fd;
}

.ve-faq-answer-inner a:focus-visible,
.ve-faq-bottom a:focus-visible {
  outline:
    3px solid var(--faq-focus);

  outline-offset: 3px;

  border-radius: 2px;
}


/* ==========================================================
   27. LAPTOP
========================================================== */

@media (max-width: 1199.98px) {

  .ve-faq {
    padding: 65px 0 68px;
  }

}


/* ==========================================================
   28. TABLET
========================================================== */

@media (max-width: 991.98px) {

  .ve-faq {
    padding: 59px 0 63px;
  }

  .ve-faq .ve-faq-container {
    padding-inline: 20px;
  }

  .ve-faq-header {
    margin-bottom: 26px;
  }

  .ve-faq-header h2 {
    font-size:
      clamp(30px, 4vw, 38px);
  }

  .ve-faq-trigger {
    padding-inline: 19px;

    font-size: 14px;
  }

  .ve-faq-answer-inner {
    padding-inline: 19px;
  }

  .ve-faq-answer-inner p {
    font-size: 14px;
  }

}


/* ==========================================================
   29. MOBILE
========================================================== */

@media (max-width: 767.98px) {

  .ve-faq {
    padding: 51px 0 55px;
  }

  .ve-faq .ve-faq-container {
    padding-inline: 16px;
  }

  /* Section header */

  .ve-faq-header {
    margin-bottom: 24px;
  }

  .ve-faq-eyebrow {
    font-size: 10px;

    letter-spacing: 1.2px;
  }

  .ve-faq-header h2 {
    font-size:
      clamp(30px, 7vw, 37px);

    line-height: 1.25;
    letter-spacing: -1px;
  }

  .ve-faq-header > p {
    font-size: 14px;

    line-height: 1.8;
  }

  /* Accordion border */

  .ve-faq-accordion {
    border-radius: 8px;
  }

  /* Question trigger */

  .ve-faq-trigger {
    gap: 12px;

    width: 100%;
    min-height: 58px;

    padding: 17px 15px;

    font-size: 14px;
    font-weight: 650;

    line-height: 1.65;
  }

  /* Chevron */

  .ve-faq-trigger > svg,
  .ve-faq-trigger > i[data-lucide] {
    flex-basis: 18px;

    width: 18px;
    height: 18px;
  }

  /* Answer content */

  .ve-faq-answer-inner {
    padding: 0 15px 20px;
  }

  .ve-faq-answer-inner p {
    font-size: 14px;

    line-height: 1.85;
  }

  /* Bottom CTA */

  .ve-faq-bottom {
    margin-top: 23px;
  }

  .ve-faq-bottom p {
    font-size: 14px;

    line-height: 1.85;
  }

  .ve-faq-bottom a {
    margin-left: 0;
  }

}


/* ==========================================================
   30. SMALL MOBILE
========================================================== */

@media (max-width: 380px) {

  .ve-faq .ve-faq-container {
    padding-inline: 13px;
  }

  .ve-faq-header h2 {
    font-size: 29px;
  }

  .ve-faq-trigger {
    gap: 10px;

    padding: 16px 13px;

    font-size: 14px;
  }

  .ve-faq-answer-inner {
    padding: 0 13px 18px;
  }

  .ve-faq-answer-inner p {
    font-size: 14px;
  }

}


/* ==========================================================
   31. EXTRA SMALL VIEWPORT
========================================================== */

@media (max-width: 320px) {

  .ve-faq .ve-faq-container {
    padding-inline: 10px;
  }

  .ve-faq-header h2 {
    font-size: 27px;
  }

  .ve-faq-trigger {
    padding: 15px 11px;
  }

  .ve-faq-answer-inner {
    padding: 0 11px 17px;
  }

}


/* ==========================================================
   32. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .ve-faq-trigger,
  .ve-faq-trigger > svg,
  .ve-faq-trigger > i[data-lucide],
  .ve-faq-answer {
    animation: none !important;
    transition: none !important;
  }

}


/* ==========================================================
   33. PRINT SUPPORT
========================================================== */

@media print {

  .ve-faq {
    padding: 30px 0;

    background: #ffffff;
  }

  .ve-faq-accordion {
    overflow: visible;
  }

  .ve-faq-item {
    break-inside: avoid;
  }

  .ve-faq-answer:not([hidden]) {
    height: auto !important;
    overflow: visible !important;
  }

  .ve-faq-trigger,
  .ve-faq-answer {
    transition: none !important;
  }

}


/* ==========================================================
   END OF FAQ STYLESHEET
========================================================== */