/* =========================================================
   FAQ SECTION
   Gauri Krishna Homes
   ========================================================= */


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.faq {
  padding: 96px 0 100px;
  background: #f7f5ef;
}


.faq .section-inner {
  width: min(100% - 64px, 1040px);
  margin: 0 auto;
}


/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */

.faq .section-kicker {
  margin: 0 0 12px;
  max-width: 760px;

  font-size: 10px;
  line-height: 1.5;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #b08b4f;
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.faq h2 {
  margin: 0;

  max-width: 700px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(38px, 4vw, 52px);
  line-height: 1.08;

  font-weight: 400;

  letter-spacing: -0.025em;

  color: #09213b;
}


/* ---------------------------------------------------------
   FAQ LIST
   --------------------------------------------------------- */

.faq-list {
  width: min(100%, 414px);

  margin-top: 38px;

  /* IMPORTANT:
     Keep items in normal document flow.
     Nothing here should create fixed-height rows.
  */

  display: block;
}


/* ---------------------------------------------------------
   FAQ ITEM
   --------------------------------------------------------- */

.faq-item {
  position: relative;

  display: block;

  width: 100%;

  height: auto !important;
  min-height: 0 !important;

  margin: 0;
  padding: 0;

  border: 0;
  border-bottom:
    1px solid rgba(9, 33, 59, 0.08);

  background: transparent;

  overflow: visible;
}


/* First item top border */

.faq-item:first-child {
  border-top:
    1px solid rgba(9, 33, 59, 0.08);
}


/* ---------------------------------------------------------
   QUESTION
   --------------------------------------------------------- */

.faq-question {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ---------------------------------------------------------
   FAQ BUTTON
   --------------------------------------------------------- */

.faq-toggle {
  box-sizing: border-box;

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

  margin: 0;
  padding: 18px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  border: 0;
  outline: 0;

  background: transparent;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  text-align: left;

  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;

  color: #10243b;
}


/* ---------------------------------------------------------
   QUESTION TEXT
   --------------------------------------------------------- */

.faq-question-text {
  display: block;

  flex: 1 1 auto;

  min-width: 0;
}


/* ---------------------------------------------------------
   ICON
   --------------------------------------------------------- */

.faq-icon {
  position: relative;

  flex: 0 0 18px;

  width: 18px;
  height: 18px;

  display: block;

  color: #c9a66b;

  transition:
    transform 240ms ease,
    color 240ms ease;
}


/* Horizontal line */

.faq-icon::before,
.faq-icon::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 10px;
  height: 1px;

  background: currentColor;

  transform:
    translate(-50%, -50%);

  transition:
    transform 240ms ease,
    opacity 240ms ease;
}


/* Vertical line */

.faq-icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.faq-toggle:hover {
  color: #071c34;
}


.faq-toggle:hover .faq-icon {
  color: #a77c3f;
}


/* ---------------------------------------------------------
   FOCUS
   --------------------------------------------------------- */

.faq-toggle:focus-visible {
  outline:
    1px solid rgba(176, 139, 79, 0.7);

  outline-offset: 5px;
}


/* ---------------------------------------------------------
   OPEN ICON
   --------------------------------------------------------- */

/*
   Closed:
   +
   
   Open:
   -
*/

.faq-item.is-open .faq-icon {
  color: #a77c3f;
}


.faq-item.is-open .faq-icon::after {
  opacity: 0;

  transform:
    translate(-50%, -50%)
    rotate(90deg)
    scaleY(0);
}


/* ---------------------------------------------------------
   ANSWER
   --------------------------------------------------------- */

/*
   IMPORTANT FIX:

   Do NOT use display:none / hidden here.

   We animate max-height so the FAQ item remains
   part of the normal document flow.

   Therefore, when FAQ 1 opens:

       FAQ 2 moves down
       FAQ 3 moves down
       FAQ 4 moves down
       FAQ 5 moves down

   naturally.
*/

.faq-answer {
  display: block;

  width: 100%;

  max-height: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;

  opacity: 0;

  transition:
    max-height 360ms ease,
    opacity 220ms ease;
}


/* ---------------------------------------------------------
   ANSWER INNER
   --------------------------------------------------------- */

.faq-answer-inner {
  display: block;

  padding:
    0 42px 24px 0;
}


/* ---------------------------------------------------------
   ANSWER TEXT
   --------------------------------------------------------- */

.faq-answer p {
  margin: 0;

  font-size: 13px;
  line-height: 1.75;
  font-weight: 400;

  color: #5e6874;
}


/* ---------------------------------------------------------
   OPEN ANSWER
   --------------------------------------------------------- */

.faq-item.is-open .faq-answer {
  max-height: 500px;

  opacity: 1;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

  .faq .section-inner {
    width: min(100% - 64px, 1040px);
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

  .faq {
    padding:
      72px 0
      76px;
  }


  .faq .section-inner {
    width: calc(100% - 44px);
  }


  .faq .section-kicker {
    font-size: 9px;

    letter-spacing:
      0.15em;
  }


  .faq h2 {
    font-size: 38px;
    line-height: 1.08;
  }


  .faq-list {
    width: 100%;

    margin-top: 32px;
  }


  .faq-toggle {
    min-height: 68px;

    padding:
      18px 0;

    gap: 18px;

    font-size: 12px;
  }


  .faq-answer-inner {
    padding:
      0 24px 22px 0;
  }


  .faq-answer p {
    font-size: 13px;
    line-height: 1.7;
  }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

  .faq-answer,
  .faq-icon,
  .faq-icon::before,
  .faq-icon::after {
    transition: none;
  }

}

/* =====================================================
   FAQ — DESKTOP ONE-LINE QUESTIONS
===================================================== */

@media (min-width: 768px) {

    .faq-question {
        white-space: nowrap;
    }

}