/* =========================================
   FAQ Block (scoped)
   File: css/faq-block.css
   Matches FAQ archive styling (no hero)
========================================= */

.faq-block-section {
  background: linear-gradient(to bottom, #0e0e0e 0%, #0b0b0b 100%);
  color: #ffffff;
  padding: 56px 0 64px;
}

/* Centered header */
.faq-block-section .faq-block-header {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
}

.faq-block-section .faq-block-title {
  margin-bottom: 10px;
}

.faq-block-section .faq-block-intro {
  opacity: 0.88;
}

/* Accordion spacing */
.faq-block-section .faq-block-accordion {
  margin-top: 22px;
}

/* Accordion container */
.faq-block-section .accordion-item {
  background: transparent;
  border: 0;
  margin-bottom: 14px;
}

/* Rounded “pill” rows like the archive */
.faq-block-section .accordion-button {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px !important;
  padding: 22px 22px;
  box-shadow: none !important;

  color: #e6e6e6;
  font-weight: 500;

  transition: border-color 180ms ease, background-color 180ms ease;
}

/* Hover/focus */
.faq-block-section .accordion-button:hover,
.faq-block-section .accordion-button:focus {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.45);
}

/* Remove Bootstrap focus ring */
.faq-block-section .accordion-button:focus {
  box-shadow: none !important;
}

/* ---- FIX THE ARROWS (chevrons) ----
   - Use our own SVG so it matches the archive look
   - Down when collapsed, Up when open
*/
.faq-block-section .accordion-button::after {
  /* kill default bootstrap icon */
  background-image: none !important;

  /* custom chevron (down) */
  content: "";
  width: 18px;
  height: 18px;
  margin-left: auto;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;

  /* White stroke chevron-down */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.8 8 10.6l4.8-4.8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  transform: rotate(0deg);
  transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
  opacity: 0.65;
}

/* Hover makes arrow a bit stronger */
.faq-block-section .accordion-button:hover::after {
  opacity: 0.95;
}

/* Open state: rotate to chevron-up */
.faq-block-section .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  opacity: 0.95;
}

/* Optional: make open chevron slightly warmer (if you want it closer to your “liked” look)
   Comment OUT this block if you want pure white always.
*/
.faq-block-section .accordion-button:not(.collapsed)::after {
  filter: brightness(1) sepia(0.35) saturate(2.2) hue-rotate(10deg);
}

/* Make the open item feel like one card */
.faq-block-section .accordion-collapse {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 0;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  overflow: hidden;

  background: rgba(0, 0, 0, 0.35);
}

.faq-block-section .accordion-button:not(.collapsed) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.50);
}

/* Answer body */
.faq-block-section .accordion-body {
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.75;
  padding: 18px 22px 22px;
}

/* Links inside answers */
.faq-block-section .accordion-body a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Empty state */
.faq-block-section .faq-block-empty {
  padding: 36px 0 10px;
}

.faq-block-section .faq-block-empty-title {
  margin-bottom: 10px;
}

.faq-block-section .faq-block-empty-copy {
  margin-bottom: 0;
  opacity: 0.85;
}

/* Add this to faq-block.css (or replace the ::after rules) */

/* Make sure the accordion button reserves room for the chevron */
.faq-block-section .accordion-button {
  position: relative;
  padding-right: 56px; /* space for arrow */
}

/* Bootstrap sometimes sets ::after but we’re overriding it.
   Force it to render as an actual box. */
.faq-block-section .accordion-button::after {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-left: auto !important;

  /* reset anything bootstrap might apply */
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;

  /* custom chevron-down */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.8 8 10.6l4.8-4.8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  opacity: 0.7;
  transform: rotate(0deg);
  transition: transform 180ms ease, opacity 180ms ease;
}

/* Open state: rotate to chevron-up */
.faq-block-section .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  opacity: 0.95;
}

/* If you want the open arrow to stay white, keep this.
   If you previously added a "warm" filter, remove it. */
.faq-block-section .accordion-button:not(.collapsed)::after {
  filter: none !important;
}