/**
 * FAQ page — luxury concierge (presentation only).
 * Scoped to body.page-faq so completed pages are untouched.
 * No new blocks / CMS fields. Accordion a11y preserved in block markup/JS.
 *
 * @package Flamingo_Liqueur
 */

/**
 * Consolidated faq-page.css.
 *
 * Successive redesign passes re-declared the same selectors on top of each
 * other. Every declaration that a later one at the same selector already
 * overwrote has been removed; the survivors keep their original order, so
 * the rendered result is unchanged (verified declaration-by-declaration).
 *
 * EDIT the existing rule rather than appending another pass. The mixed tile
 * sizes and left-hugging grids of FIX-12 lived in a layer nobody read.
 */

/**
 * FAQ page — luxury concierge (presentation only).
 * Scoped to body.page-faq so completed pages are untouched.
 * No new blocks / CMS fields. Accordion a11y preserved in block markup/JS.
 *
 * @package Flamingo_Liqueur
 */

/* ------------------------------------------------------------------ */

/* Global rhythm                                                      */

/* ------------------------------------------------------------------ */

.page-faq .c-entry__content--blocks > .fl-story + .fl-faq,
.page-faq .c-entry__content--blocks > .fl-faq + .fl-faq,
.page-faq .c-entry__content--blocks > .fl-faq + .fl-story,
.page-faq .c-entry__content--blocks > .fl-story + .fl-story {
  border-top: 0;
}

.page-faq .fl-hero__subheading {
  font-weight: 300;
}

.page-faq .fl-hero__scroll {
  letter-spacing: 0.28em;
}

/* No cards / shadows — concierge, not support desk */

.page-faq .fl-story__media,
.page-faq .fl-faq__item {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.page-faq .fl-faq__title {
  line-height: 1.05;
}

/* Soft hairlines only */

.page-faq .fl-faq__list {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.page-faq .fl-faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.page-faq .fl-faq__question:hover {
  color: #fff;
}

.page-faq .fl-faq__answer {
  padding-bottom: clamp(1.75rem, 3.5vw, 2.35rem);
}

/* Softer open motion on this page only */

.page-faq .fl-faq__answer:not([hidden]) {
  animation: fl-faq-page-open 0.5s var(--fl-ease);
}

@keyframes fl-faq-page-open {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------------ */

/* Introduction                                                       */

/* ------------------------------------------------------------------ */

.page-faq #introduction {
  padding-block: clamp(7rem, 18vh, 13rem);
  background: radial-gradient(ellipse 65% 50% at 78% 40%, rgba(255, 79, 163, 0.182), transparent 58%), linear-gradient(180deg, #0d0d12 0%, #060608 100%);
}

.page-faq #introduction .fl-story__title {
  font-size: clamp(3rem, 6vw, 5rem);
  max-width: 10ch;
}

.page-faq #introduction .fl-story__description p {
  max-width: 28ch;
}

.page-faq #introduction .fl-story__description p:first-child {
  color: #f2f2f2;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
}

@media (min-width: 900px) {

  .page-faq #introduction .fl-story__grid {
    grid-template-columns: minmax(var(--fl-text-min), 1fr) minmax(var(--fl-image-min), 1.05fr);
    gap: clamp(3.5rem, 9vw, 7rem);
  }
}

.page-faq #introduction .fl-story__img {
  aspect-ratio: 4 / 5;
  object-position: center 30%;
}

/* ------------------------------------------------------------------ */

/* FAQ groups — alternating quiet grounds                             */

/* ------------------------------------------------------------------ */

.page-faq #about-flamingo {
  background: linear-gradient(180deg, #0a0a0f 0%, #040405 100%);
}

.page-faq #about-product {
  background: linear-gradient(180deg, #0d0d12 0%, #060608 100%);
}

.page-faq #shipping-purchase {
  background: radial-gradient(ellipse 50% 45% at 15% 30%, rgba(201, 161, 74, 0.130), transparent 55%), linear-gradient(180deg, #0b0b10 0%, #050506 100%);
}

.page-faq #events {
  background: linear-gradient(180deg, #0d0d12 0%, #060608 100%);
}

.page-faq #about-flamingo .fl-faq__label,
.page-faq #events .fl-faq__label {
  color: rgba(255, 79, 163, 0.88);
}

/* ------------------------------------------------------------------ */

/* Contact + CTA                                                      */

/* ------------------------------------------------------------------ */

.page-faq #contact-note {
  padding-block: clamp(7rem, 18vh, 12rem);
  background: radial-gradient(ellipse 60% 50% at 50% 35%, rgba(255, 79, 163, 0.208), transparent 62%), linear-gradient(180deg, #0a0a0f 0%, #040405 100%);
  text-align: center;
}

.page-faq #contact-note .fl-story__grid {
  display: block;
  max-width: 36rem;
  margin-inline: auto;
}

.page-faq #contact-note .fl-story__title {
  font-size: clamp(3rem, 6vw, 4.75rem);
  max-width: 12ch;
  margin-inline: auto;
}

.page-faq #contact-note .fl-story__description p {
  max-width: 28ch;
  margin-inline: auto;
}

.page-faq #contact-note .fl-story__actions {
  justify-content: center;
}

.page-faq #invite {
  padding-block: clamp(6.5rem, 16vh, 11rem);
  background: linear-gradient(180deg, #0d0d12 0%, #060608 100%);
  text-align: center;
}

.page-faq #invite .fl-story__grid {
  display: block;
  max-width: 36rem;
  margin-inline: auto;
}

.page-faq #invite .fl-story__title {
  font-size: clamp(2.75rem, 5.5vw, 4.25rem);
  max-width: 14ch;
  margin-inline: auto;
}

.page-faq #invite .fl-story__description p {
  max-width: 28ch;
  margin-inline: auto;
}

.page-faq #invite .fl-story__actions {
  justify-content: center;
}

.page-faq #contact-note .fl-story__cta,
.page-faq #invite .fl-story__cta {
  min-width: 11rem;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: transparent;
  letter-spacing: 0.16em;
}

.page-faq #contact-note .fl-story__cta:hover,
.page-faq #contact-note .fl-story__cta:focus-visible,
.page-faq #invite .fl-story__cta:hover,
.page-faq #invite .fl-story__cta:focus-visible {
  border-color: var(--fl-pink, #d12b74);
  color: var(--fl-pink, #d12b74);
  background: transparent;
}

@media (max-width: 699px) {

  /* ------------------------------------------------------------------ */

  /* Mobile                                                             */

  /* ------------------------------------------------------------------ */

  .page-faq .fl-faq__question {
    font-size: clamp(1.4rem, 5.5vw, 1.7rem);
    gap: 1rem;
  }

  .page-faq .fl-faq__answer-body {
    max-width: none;
  }
}

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

  .page-faq .fl-faq__answer:not([hidden]),
  .page-faq .fl-faq__icon {
    animation: none;
    transition: none;
  }
}

/* ================================================================== */

/* FINAL DIRECTOR PASS — Luxury concierge handbook                    */

/* ================================================================== */

.page-faq {
  --fl-dir-reveal-y: 1.1rem;
  --fl-dir-reveal-ms: 1.1s;
}

.page-faq .fl-hero__content {
  margin-inline: auto;
}

.page-faq .fl-hero__heading {
  font-weight: 500;
  line-height: 1.05;
  margin-inline: auto;
  text-transform: none;
}

.page-faq .fl-hero__subheading {
  margin-inline: auto;
}

.page-faq .fl-hero__actions {
  justify-content: center;
}

/* Handbook measure — quiet, centered */

.page-faq .fl-faq {
  padding-block: clamp(7rem, 18vh, 12.5rem);
}

.page-faq .fl-faq__intro {
  margin-inline: auto;
}

@media (prefers-reduced-motion: no-preference) {

  .page-faq .fl-reveal.is-pending {
    transform: translateY(var(--fl-dir-reveal-y));
    transition-duration: var(--fl-dir-reveal-ms);
  }

  .page-faq .fl-faq__answer:not([hidden]) {
    animation-duration: 0.55s;
  }
}

.page-faq .fl-hero__heading {
  margin-bottom: 1.25rem;
}

.page-faq .fl-hero__subheading {
  margin-bottom: 2rem;
}

/* Calm unequal group spacing */

.page-faq .fl-faq:nth-of-type(odd) {
  padding-block: clamp(7.5rem, 18vh, 12.5rem);
}

.page-faq .fl-faq:nth-of-type(even) {
  padding-block: clamp(5.5rem, 13vh, 9rem);
}

.page-faq .fl-faq__title {
  font-style: normal;
}

.page-faq .fl-faq__list {
  border-top-color: rgba(255, 255, 255, 0.04);
}

.page-faq .fl-faq__item {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

.page-faq .fl-story__title {
  letter-spacing: 0.02em;
  font-style: normal;
}

/* ================================================================== */

/* FINAL ART DIRECTION — Handbook: questions as typography            */

/* ================================================================== */

.page-faq .c-site-main {
  --fl-container: 38rem;
}

.page-faq .c-site-main .l-container,
.page-faq .fl-faq__inner {
  max-width: var(--fl-container);
}

.page-faq .fl-hero {
  min-height: 55svh;
  align-items: center;
}

.page-faq .fl-hero__image,
.page-faq .fl-hero__video {
  object-position: center 42%;
  /* No brightness/contrast correction here. Measured on the live images:
     this filter clipped 13-68% of every hero to flat white or flat black,
     which is what read as "hazy". The hero block already exposes
     --fl-hero-filter for genuine per-image correction from the editor.
     See FIX-15 — and FIX-06, which removed the same filter from the block
     stylesheet but left these nine page-level copies behind. */
}

.page-faq .fl-hero__overlay {
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.6) 0%, rgba(11, 11, 11, 0.45) 50%, rgba(11, 11, 11, 0.9) 100%);
}

.page-faq .fl-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 26rem;
  padding-block: clamp(4.5rem, 12vh, 7.5rem);
}

.page-faq .fl-hero__heading {
  font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  letter-spacing: 0.06em;
  font-style: normal;
  max-width: 14ch;
}

.page-faq .fl-hero__subheading {
  max-width: 24ch;
  font-size: 0.9rem;
  opacity: 0.7;
}

.page-faq .fl-btn {
  min-height: 2.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  background: transparent;
  border-color: rgba(201, 161, 74, 0.42);
}

.page-faq .fl-btn--primary {
  background: transparent;
  color: #fff;
}

.page-faq .fl-btn--primary:hover,
.page-faq .fl-btn--primary:focus-visible {
  background: rgba(201, 161, 74, 0.208);
  transform: none;
  box-shadow: none;
}

.page-faq .fl-faq:nth-of-type(1) {
  padding-block: clamp(8rem, 20vh, 13rem);
}

.page-faq .fl-faq:nth-of-type(2) {
  padding-block: clamp(5rem, 12vh, 8.5rem);
}

.page-faq .fl-faq:nth-of-type(3) {
  padding-block: clamp(7rem, 16vh, 11rem);
}

.page-faq .fl-faq:nth-of-type(4) {
  padding-block: clamp(5.5rem, 13vh, 9rem);
}

.page-faq .fl-faq:nth-of-type(n + 5) {
  padding-block: clamp(6rem, 14vh, 10rem);
}

.page-faq .fl-faq__header {
  text-align: center;
  margin-inline: auto;
  margin-bottom: clamp(3.5rem, 8vw, 5.5rem);
}

.page-faq .fl-faq__title {
  font-size: clamp(2.35rem, 4.8vw, 3.5rem);
  letter-spacing: 0.04em;
  margin-inline: auto;
  max-width: 12ch;
}

.page-faq .fl-faq__label {
  letter-spacing: 0.42em;
  font-size: 0.62rem;
  color: rgba(201, 161, 74, 0.85);
}

.page-faq .fl-faq__intro p {
  margin-inline: auto;
  text-align: center;
  max-width: 28ch;
  font-size: 0.92rem;
  opacity: 0.75;
}

/* Questions become beautiful display type */

.page-faq .fl-faq__question {
  font-family: var(--fl-font-display, "Cormorant Garamond", serif);
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.28;
  padding-block: clamp(2rem, 4.5vw, 2.75rem);
}

.page-faq .fl-faq__answer-body {
  font-size: 0.9rem;
  line-height: 2;
  max-width: 30ch;
  color: rgba(185, 185, 185, 0.92);
}

.page-faq .fl-faq__list,
.page-faq .fl-faq__item {
  border-color: rgba(255, 255, 255, 0.035);
}

.page-faq .fl-faq__icon {
  opacity: 0.4;
  width: 0.5rem;
  height: 0.5rem;
  border-color: rgba(201, 161, 74, 0.65);
}

.page-faq .fl-story {
  padding-block: clamp(7rem, 16vh, 11rem);
  text-align: center;
}

.page-faq .fl-story__grid {
  display: block;
  max-width: 32rem;
  margin-inline: auto;
}

.page-faq .fl-story__title {
  margin-inline: auto;
  font-size: clamp(2.35rem, 4.8vw, 3.5rem);
}

.page-faq .fl-story__description p {
  margin-inline: auto;
  max-width: 26ch;
}

.page-faq .fl-story__actions {
  justify-content: center;
}