/* ========================================================================== 
   FAQ.css — FAQ page (Support-style accordion)
   --------------------------------------------------------------------------
   Reuses Support.css layout primitives and card styling, but replaces the
   per-item download controls with an expandable Q&A accordion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page tweaks (optional)
   -------------------------------------------------------------------------- */

/* Uses Support.css as the base page shell; this class is reserved for FAQ-only overrides. */
.faq-parent-div {
    /* no overrides for now */
}

/* FAQ: place monsters in-flow at the bottom (more stable than absolute) */
.support-parent-div.faq-parent-div {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* prevent extra empty space from Support.css bottom padding */
    padding-bottom: 0;
}

.support-parent-div.faq-parent-div .support-content-div {
  padding-bottom: 0;
}

/* keep a small gap between the last FAQ item and the monsters */
.support-parent-div.faq-parent-div .faq-items {
    margin-bottom: clamp(12px, 2vw, 20px);
}

/* override Support.css absolute positioning for FAQ only */
.support-parent-div.faq-parent-div .support-creatures {
    position: relative;
    right: auto;
    bottom: auto;

    /* push to the bottom of the section */
    margin-top: clamp(16px, 3vh, 40px);

    /* align to the right with the same spacing variable */
    justify-content: flex-end;
    padding-right: var(--creature-right-pad);
    padding-bottom: var(--creature-bottom);

    z-index: 1;
}


/* --------------------------------------------------------------------------
   FAQ list
   -------------------------------------------------------------------------- */

.faq-items {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.2vw, 18px);
}


/* --------------------------------------------------------------------------
   FAQ item (details/summary)
   -------------------------------------------------------------------------- */

details.faq-item {
    margin: 0;
    padding: 0;
    border: 0;

    width: 100%;
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
    overflow: hidden;

    /* Avoid default <details> styling differences across browsers. */
    display: block;
}

/* Remove the default disclosure marker. */
.details-marker-hidden,
.faq-item>summary {
    list-style: none;
}

.faq-item>summary::-webkit-details-marker {
    display: none;
}

.faq-summary {
    width: 100%;
    cursor: pointer;
    user-select: none;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 1.6vw, 18px);

    padding: clamp(16px, 2vw, 24px);
    margin: 0;
}

/* Keyboard focus */
.faq-summary:focus-visible {
    outline: 2px solid rgba(255, 45, 85, 0.35);
    outline-offset: 2px;
}

/* Hover affordance (keep subtle to match site style) */
.faq-item:not([open]) .faq-summary:hover {
    filter: brightness(0.99);
}


/* Question text: reuse Support.css .text-section, but give it a tiny helper line. */
.faq-text {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.faq-text h2 {
    font-size: clamp(18px, 2.2vw, 26px);
    color: #404040;
    margin: 0;
    font-family: "Fredoka", sans-serif;
    font-weight: bold;
    line-height: 1.15;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.faq-hint {
    margin: 0;
    font-size: clamp(13px, 1.2vw, 16px);
    font-family: "Inter", sans-serif;
    color: #999999;
    line-height: 1.35;
}

.faq-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    /* no extra block padding now */
}

.faq-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    border-radius: 999px;

    font-size: 22px;
    line-height: 1;

    color: #404040;
    background: rgba(0, 0, 0, 0.05);

    transition: transform 140ms ease;
}

/* Rotate chevron when expanded */
.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}


/* --------------------------------------------------------------------------
   Answer area
   -------------------------------------------------------------------------- */

.faq-answer {
  border-top: none; /* keep the separator removed */

  /* Proper padding all around, aligned with the summary text */
  padding: 0 clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 26px);

  font-family: "Inter", sans-serif;
  color: #555555;

  /* Improves readability on wide screens */
  max-width: 90ch;
}

.faq-answer p {
  margin: 6px 0 0 0;
  line-height: 1.6;
  font-size: clamp(14px, 1.25vw, 17px);
}

.faq-answer ul {
  margin: 8px 0 0 0;
  padding-left: 22px;
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.6;
}

.faq-answer li {
  margin: 0 0 8px 0;
}

.faq-answer li:last-child {
    margin-bottom: 0;
}

.faq-item[open] .faq-summary {
  padding-bottom: 10px;
}

/* default: show expand, hide collapse */
.faq-hint-collapse { display: none; }

/* when open: hide expand, show collapse */
.faq-item[open] .faq-hint-expand { display: none; }
.faq-item[open] .faq-hint-collapse { display: inline; }

.support-parent-div.faq-parent-div{
  flex: 1 0 auto;
  background-color: #FFF1E1;
}

.support-parent-div.faq-parent-div .support-creatures{
  margin-top: auto;
}

.support-parent-div.faq-parent-div::after{
  content: none !important;
  display: none !important;
}

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

@media (max-width: 640px) {
  .faq-summary {
    flex-direction: column;
    align-items: stretch;   /* prevents centering */
    text-align: left;       /* ensures text stays left */
  }

  .faq-text {
    width: 100%;
  }

  .faq-text h2,
  .faq-hint {
    text-align: left;
  }

  .faq-toggle {
    width: 100%;
    justify-content: flex-end;
    padding-top: 0;
  }

  .faq-answer {
    padding-top: 14px;
    padding-left: clamp(16px, 2vw, 24px);
  }
}

@media (max-width: 425px) {
    .support-parent-div.faq-parent-div {
        --creature-bottom: -20px;
        /* nudges the artwork down */
    }
}