/* ============================================================
   VENVITY — FAQ Page Styles
   ============================================================ */


/* ---- Page Hero ---- */

.faq-hero {
  padding: clamp(6rem, 12vw, 10rem) 0 clamp(3.5rem, 7vw, 6rem);
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-light);
}

.faq-hero__text {
  max-width: 640px;
}

.faq-hero__title {
  margin-bottom: 1.5rem;
}

.faq-hero__intro {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 560px;
}


/* ---- Breadcrumb ---- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-light);
}

.breadcrumb a {
  color: var(--text-light);
  transition: color var(--transition);
}

.breadcrumb a:hover {
  color: var(--primary);
}

.breadcrumb .sep {
  opacity: 0.5;
  font-size: 0.75rem;
}


/* ---- FAQ Body Container ---- */

.faq-body {
  padding: clamp(4rem, 8vw, 8rem) 0;
  background: var(--bg-main);
}

.container--faq {
  max-width: 780px;
}


/* ---- Category Block ---- */

.faq-category {
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.faq-category:last-of-type {
  margin-bottom: 0;
}

.faq-category__header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}

.faq-category__num {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-light);
  flex-shrink: 0;
}

.faq-category__title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 0;
}


/* ---- FAQ List ---- */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid var(--border-light);
}

.faq-item:first-child {
  border-top: 1px solid var(--border-light);
}


/* ---- FAQ Question Button ---- */

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.25rem 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-dark);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition);
  line-height: 1.5;
}

.faq-question:hover {
  color: var(--primary-dark);
}

.faq-item--open .faq-question {
  color: var(--primary-dark);
  font-weight: 500;
}


/* ---- Accordion Icon ---- */

.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  position: relative;
  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

/* Horizontal bar (always visible) */
.faq-icon::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 1.5px;
  background: var(--text-mid);
  border-radius: 1px;
  transition:
    background var(--transition),
    transform var(--transition),
    opacity var(--transition);
}

/* Vertical bar (becomes hidden when open) */
.faq-icon::after {
  content: '';
  position: absolute;
  width: 1.5px;
  height: 9px;
  background: var(--text-mid);
  border-radius: 1px;
  transition:
    background var(--transition),
    transform var(--transition),
    opacity var(--transition);
}

.faq-item--open .faq-icon {
  background: var(--primary);
  border-color: var(--primary);
  transform: rotate(0deg);
}

.faq-item--open .faq-icon::before {
  background: #fff;
}

.faq-item--open .faq-icon::after {
  background: #fff;
  transform: rotate(90deg);
  opacity: 0;
}

.faq-question:hover .faq-icon {
  border-color: var(--primary);
}

.faq-question:hover .faq-icon::before,
.faq-question:hover .faq-icon::after {
  background: var(--primary-dark);
}

.faq-item--open .faq-question:hover .faq-icon::before {
  background: #fff;
}


/* ---- FAQ Answer ---- */

/*
  Smooth height animation:
  hidden attribute → max-height: 0
  faq-item--open   → max-height: measured value
  We use max-height trick with a generous ceiling value.
*/

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition:
    max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.28s ease,
    padding    0.28s ease;
  opacity: 0;
  padding-bottom: 0;
}

/* When the hidden attribute is removed, the JS also adds --open */
.faq-item--open .faq-answer {
  max-height: 400px;
  opacity: 1;
  padding-bottom: 1.5rem;
}

.faq-answer p {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 620px;
}


/* ---- FAQ CTA Block ---- */

.faq-cta {
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  text-align: center;
}

.faq-cta .label {
  display: block;
  margin-bottom: 0.75rem;
}

.faq-cta__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 0.875rem;
  line-height: 1.2;
}

.faq-cta__text {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 440px;
  margin: 0 auto;
}


/* ---- Responsive ---- */

/* ============================================================
   DESKTOP-ONLY (min-width: 1025px) — center the complete
   introductory content block (breadcrumb + eyebrow + title +
   description) so it lines up with the FAQ content below,
   instead of sitting pinned to the left edge of the wide 1200px
   page container.

   Root cause: `.faq-hero`'s breadcrumb and `.faq-hero__text` are
   both direct children of the shared `.container` (max-width:
   1200px, css/style.css), with no width constraint of their own
   narrower than that — `.faq-hero__text` merely caps its own
   content at max-width: 640px without ever centering that box
   inside the wider 1200px container, so both elements simply
   start flush against the container's own left inner edge. Lower
   on the page, the FAQ accordion/category column already sits at
   a visually centered, narrower width via `.container--faq`
   (max-width: 780px, defined below in this same file, layered on
   the same shared, already-auto-centered `.container`), which is
   why the intro above it reads as noticeably further left than
   the content beneath it.

   Fix: reuse that exact same compatible width by scoping a
   narrower `max-width` to `.faq-hero`'s own `.container` only
   (this selector cannot match `.container` on any other page,
   since `.faq-hero` is unique to faq.html) — the shared,
   sitewide `.container` class itself (used by header, footer and
   every other page) is never edited directly. The container
   already centers itself via the shared `.container` rule's own
   `margin: 0 auto`; `margin-inline: auto` is added explicitly
   here too as a robust, standards-based centering method (the
   two are equivalent for a block-level element, this simply makes
   the centering explicit and resilient to any future change of
   the base rule). No manual `margin-left` offset or pixel-based
   nudge is used anywhere.

   Result: the intro block's container now shares the identical
   780px max-width, side padding and centered horizontal position
   as `.container--faq` below, so its left/right edges line up
   exactly with the FAQ category headers and accordion column.
   Internal text alignment is NOT changed — the breadcrumb, eyebrow
   label, title and description keep their existing left-aligned
   text (`.faq-hero__text`'s own `max-width: 640px` still caps line
   length for readability inside the now-centered, wider 780px
   column; no text-align rule is added anywhere). Title size, line
   breaks, description width, breadcrumb styling, FAQ questions,
   accordion functionality, category headings and the header/
   navigation are all completely unaffected. Mobile and the
   ≤1024px tablet tier keep the original left-aligned-in-container
   behavior exactly as before — this rule only applies at
   min-width: 1025px. ============================================================ */
@media (min-width: 1025px) {
  .faq-hero .container {
    max-width: 780px;
    margin-inline: auto;
  }
}

@media (max-width: 768px) {

  .faq-hero {
    padding-top: clamp(5rem, 10vw, 7rem);
  }

  .faq-category__header {
    gap: 0.75rem;
  }

  .faq-question {
    font-size: 0.9375rem;
    padding: 1.125rem 0;
  }

  .faq-answer p {
    font-size: 0.9rem;
  }

  .faq-cta {
    text-align: left;
  }

  .faq-cta__text {
    margin: 0;
  }
}

@media (max-width: 480px) {

  .faq-category__header {
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
  }

  .faq-category__num {
    font-size: 0.625rem;
  }

  .faq-question {
    gap: 1rem;
  }

  .faq-icon {
    width: 20px;
    height: 20px;
  }

  .faq-icon::before {
    width: 8px;
  }

  .faq-icon::after {
    height: 8px;
  }
}