/* ==========================================================================
   SV Steels Chennai — FAQ page (faq.html) styles
   Loaded AFTER assets/css/style.css and assets/css/sv-chennai.css so it can
   override both. Page-specific rules only — anything used sitewide belongs in
   sv-chennai.css.
   Do not edit style.css — that file is compiled from SCSS (style.css.map).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. White band.

   The template ships .faqone as a dark section: a gold background utility with
   a photo over it, white heading and body copy, and near-black question bars
   pinned with !important. The utility class, the background image and the
   .text-white classes are gone from the markup; what is left here is undoing
   the parts style.css hard-codes.
   -------------------------------------------------------------------------- */
.faqone {
  background: var(--white-color);
}

.faqone .section-top h2 {
  color: var(--black-color);
}

.faqone .section-top + p {
  color: var(--text-color);
}

/* Question bars: the template's #21252f is carried on !important and reads as
   a foreign navy once the band behind it is white. Back to the accordion's own
   light-grey default with dark text. */
.faqone .faq__question {
  background: var(--bg-color-primary) !important;
  color: var(--black-color);
}

.faqone .faq__question:hover {
  background: #ECECEC !important;
}

.faqone .faq__answer {
  color: var(--text-color);
}

/* Tablet: below xl the two columns stack and become full width, but
   .faqone__thumb keeps a fixed 537px, so the image sat hard against the left
   edge. Shrink the wrapper to the image it contains and centre it.
   The starburst badge is absolutely positioned at left: -103px, so it does not
   count toward max-content; the translate re-centres the image and badge as one
   group rather than centring the image and leaving the badge hanging left.
   Below 768px the image is already width: 100%, so this range stops there. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .faqone__thumb-wrap {
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(51px);
  }
}

/* --------------------------------------------------------------------------
   2. Accordion scroller — show four questions, scroll for the rest.

   A collapsed .faq__item is 64px tall (18px padding + 28px line-height + 18px
   padding) with a 20px gap below it, so four of them occupy
   (4 x 64) + (3 x 20) = 316px. That exact figure is used below, which lands
   the cut cleanly on the fourth item's lower edge rather than mid-question.
   -------------------------------------------------------------------------- */
.sv-faq-scroll {
  max-height: 316px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Keeps the items clear of the scrollbar track. */
  padding-right: 12px;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #670D0F rgba(0, 0, 0, 0.10);
}

/* WebKit / Blink */
.sv-faq-scroll::-webkit-scrollbar {
  width: 6px;
}

.sv-faq-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.10);
  border-radius: 3px;
}

.sv-faq-scroll::-webkit-scrollbar-thumb {
  background: #670D0F;
  border-radius: 3px;
}

.sv-faq-scroll::-webkit-scrollbar-thumb:hover {
  background: #4E0A0C;
}

/* Below xl the question text starts wrapping to two lines, which would push
   the fourth item out of a 316px window — give it room for the extra lines. */
@media (max-width: 1199.98px) {
  .sv-faq-scroll {
    max-height: 380px;
  }
}

@media (max-width: 575.98px) {
  .sv-faq-scroll {
    max-height: 420px;
  }
}