/* ═══════════════════════════════════════════════════════════════════
   FAQ PAGE — faq.css
   Page-specific styles for /skyline-resort-convention-centre-indore/faq/
   Required: main.css (loaded first)

   Sections:
     1. Category filter (same pill row as the offers filter)
     2. Question list (native <details> accordions)
     3. CTA band
     4. Responsive
═══════════════════════════════════════════════════════════════════ */


/* ═══ 1. CATEGORY FILTER ═══ */
.sec-faq {
  padding: 52px 60px 88px;
  background: var(--m-parchment);
}
.faq-inner { max-width: 900px; margin: 0 auto; }

.faq-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 0 0 40px;
  border: 1px solid rgba(123,74,30,.15);
}
.faq-tab {
  flex: 1 1 auto;
  padding: 12px 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--m-stone);
  background: none; border: none;
  border-right: 1px solid rgba(123,74,30,.15);
  cursor: pointer; white-space: nowrap;
  transition: all .25s;
}
.faq-tab:last-child { border-right: none; }
.faq-tab:hover      { color: var(--m-walnut); background: rgba(123,74,30,.05); }
.faq-tab.active     { background: var(--m-walnut); color: #fff; }


/* ═══ 2. QUESTION LIST ═══ */
.faq-group { margin-bottom: 36px; }
.faq-group.hidden { display: none; }
.faq-group-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 600;
  color: var(--m-on-strong);
  margin-bottom: 12px;
}
.faq-item {
  background: var(--m-surface);
  border: 1px solid var(--m-hairline);
  margin-bottom: 8px;
}
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  font-size: 13px; font-weight: 600; line-height: 1.5;
  color: var(--m-on-strong);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: none;
  font-size: 20px; font-weight: 300; line-height: 1;
  color: var(--m-gold-ink);
  transition: transform .25s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer {
  padding: 0 22px 20px;
  font-size: 13px; line-height: 1.9;
  color: var(--m-on-body);
}
.faq-answer a { color: var(--m-gold-ink); }


/* ═══ 3. CTA BAND (same band as the facilities page) ═══ */
.cta-band {
  background: linear-gradient(135deg, var(--m-espresso) 0%, var(--m-walnut) 100%);
  padding: 72px 60px;
  text-align: center;
}
.cta-title {
  margin-bottom: 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 50px); font-weight: 300;
  color: #fff; line-height: 1.1;
}
.cta-title em { font-style: italic; font-weight: 600; color: var(--m-honey); }
.cta-sub {
  margin-bottom: 32px;
  font-size: 12px; letter-spacing: .5px;
  color: rgba(237,228,213,.6);
}
.cta-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 16px;
}


/* ═══ 4. RESPONSIVE ═══ */
@media (max-width: 900px) {
  .sec-faq { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 640px) {
  .cta-band { padding: 56px 20px; }
  .sec-faq  { padding: 40px 18px 60px; }
  .faq-tab  { padding: 10px 14px; }
  .faq-item summary { padding: 16px 16px; }
  .faq-answer { padding: 0 16px 18px; }
}

/* ===================== PageSpeed fixes (pagespeed-fix 1.2.0) =====================
   Added for PageSpeed. Keep this block (see EDITING-GUIDE.md); edit the rules above it as usual. */

/* reCAPTCHA now loads when the form comes near: keep the widget's slot so nothing moves when it appears (78 px; compact 144 px). Only empty boxes: once the widget is in, the rule stops applying. */
div.g-recaptcha:empty:not([data-size="invisible"]):not([data-size="compact"]), div[id^="g-recaptcha-"]:not(.g-recaptcha):empty { min-height: 78px; }
div.g-recaptcha:empty[data-size="compact"] { min-height: 144px; }

/* First-screen content held back by an entrance animation (measured: hidden at first paint, visible later) is shown in its final state from the first paint: the elements marked data-psf-reveal in the pages (-d: desktop first screen only, 1024 px and wider; -m: phone first screen only; the :not(#psf-a):not(#psf-b) parts only give the rule priority). */
[data-psf-reveal="1"]:not(#psf-a):not(#psf-b) {
  opacity: 1 !important; visibility: visible !important;
}
@media (min-width: 1024px) {
[data-psf-reveal-d="1"]:not(#psf-a):not(#psf-b) {
  opacity: 1 !important; visibility: visible !important;
}
}
/* ===================== end of PageSpeed fixes ===================== */