/* ============================================================
   faq.css
   Scoped to the FAQ page via .FaqPage.
   ============================================================ */

@font-face {
    font-family: 'Keskiyon Lumisade';
    src: url('../fonts/KeskiyonLumisade.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.FaqPage {
    --paper-ink: #17161A;
    --paper-rule: rgba(56, 37, 87, .18);
    --display: 'Keskiyon Lumisade', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    --label: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    position: relative;
}

.InnerContent:has(.FaqPage) {
    padding: 0 !important;
    gap: 0 !important;
}

/* ---------- masthead ---------- */
/* No side art here any more — the frame art now sits at the bottom
   of the page, applied site-wide from style.css. */
.FaqPage .faq-head {
    position: relative;
    max-width: 1200px;
    margin: -22px auto 0;
    padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px) clamp(28px, 4vw, 44px);
}

.FaqPage .eyebrow {
    display: block;
    font-family: var(--label);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tomatoRed);
    margin-bottom: var(--space-sm);
}

.FaqPage h1 {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: clamp(2.6rem, 7vw, 5rem) !important;
    line-height: .96;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left !important;
    margin: 0 0 18px !important;
    color: var(--paper-ink) !important;
}

.FaqPage h1 .l-a { color: var(--justicePurple); }
.FaqPage h1 .l-b { color: var(--tomatoRed); }

.FaqPage .faq-intro {
    max-width: 46ch;
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
}

/* ---------- accordion ---------- */
.FaqPage .faq-accordion {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) clamp(32px, 4vw, 56px);
}

/* override the transparent/borderless defaults in style.css */
.FaqPage .faq-accordion .accordion-item {
    border-top: 1.5px solid var(--paper-rule) !important;
    margin-bottom: 0 !important;
}

.FaqPage .faq-accordion .accordion-item:last-child {
    border-bottom: 1.5px solid var(--paper-rule) !important;
}

.FaqPage .faq-accordion .accordion-item.active {
    background: rgba(255, 255, 255, .42);
}

.FaqPage .faq-accordion .accordion-toggle {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: clamp(12px, 2vw, 26px);
    background: none;
    border: 0;
    text-align: left;
    padding: clamp(18px, 2.4vw, 28px) clamp(12px, 1.6vw, 22px);
    cursor: pointer;
    transition: background .15s;
}

.FaqPage .faq-accordion .accordion-toggle:hover {
    background: rgba(255, 255, 255, .3);
}

/* numbered because the list is a real reading order, not decoration */
.FaqPage .faq-accordion .accordion-toggle::before {
    content: counter(faq, decimal-leading-zero);
    counter-increment: faq;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1;
    color: var(--justiceOrange);
}

.FaqPage .faq-accordion {
    counter-reset: faq;
}

.FaqPage .faq-title {
    font-family: var(--label);
    font-size: clamp(16px, 1.7vw, 21px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--justicePurple);
}

.FaqPage .faq-title strong {
    font-weight: 600;
}

.FaqPage .accordion-icon {
    font-family: var(--label);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    color: var(--tomatoRed);
    transition: transform .2s ease;
}

.FaqPage .accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}

.FaqPage .faq-accordion .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.FaqPage .faq-accordion .accordion-content > div {
    padding: 0 clamp(12px, 1.6vw, 22px) clamp(24px, 3vw, 34px);
    /* indents the answer under the question, clear of the number */
    padding-left: clamp(44px, 5.4vw, 74px);
    max-width: 78ch;
}

.FaqPage .accordion-content p {
    font-size: 15px;
    line-height: 1.8;
    margin: 0 0 var(--space-md);
}

.FaqPage .accordion-content p:last-child {
    margin-bottom: 0;
}

/* section labels inside an answer */
.FaqPage .faq-sub {
    font-family: var(--label);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--justicePurple);
    margin: 22px 0 var(--space-xs);
}

.FaqPage .faq-sub-sub {
    font-family: var(--label);
    font-weight: 700;
    font-size: 14px;
    color: var(--tomatoRed);
    margin: var(--space-md) 0 var(--space-2xs);
}

/* ---------- closing card ---------- */
.FaqPage .faq-more {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) var(--sectionGap);
}

.FaqPage .faq-more-inner {
    padding: clamp(24px, 3vw, 38px);
    background-image:
        linear-gradient(rgba(165, 142, 216, .7), rgba(158, 136, 211, .7)),
        url('../images/General/Backgrounds/Paperbackground.jpg');
    background-color: #B7A2E0;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.FaqPage .faq-more h2 {
    font-family: var(--display);
    font-weight: 400 !important;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    text-transform: uppercase;
    text-align: left;
    margin: 0;
    color: var(--paper-ink) !important;
}

.FaqPage .faq-more .button {
    border-radius: 0;
    padding: 13px 26px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

@media (max-width: 800px) {
    .FaqPage .faq-accordion .accordion-content > div {
        padding-left: clamp(12px, 1.6vw, 22px);
    }
}