/* =========================================================
   FAQ Page — Clean Premium Accordion
========================================================= */

.faq-section {
    position: relative;
    padding: 116px 0 126px;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse 52% 34% at 18% 8%,
            color-mix(in srgb, var(--neta-white, #fffaf1) 74%, transparent),
            transparent 62%
        ),
        radial-gradient(
            ellipse 46% 30% at 86% 4%,
            color-mix(in srgb, var(--neta-linen, #e7d8c1) 42%, transparent),
            transparent 64%
        ),
        linear-gradient(
            180deg,
            var(--neta-paper-light, #fff8ee),
            var(--neta-paper, #f4eadb)
        );
}

.faq-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--neta-walnut, #24190f) 4%, transparent) 1px,
            transparent 1px
        );
    background-size: 38px 38px;
    opacity: 0.12;
}

.faq-section .container {
    position: relative;
    z-index: 1;
}

/* =========================
   Intro
========================= */

.faq-section__intro {
    max-width: 820px;
    margin: 0 auto 48px;
    text-align: center;
}

.faq-section__intro .section-label {
    justify-content: center;
}

.faq-section__intro h1 {
    max-width: 760px;
    margin: 0 auto;

    color: var(--neta-walnut, #24190f);
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(42px, 6.8vw, 78px);
    font-weight: 560;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.faq-section__intro p:not(.section-label) {
    max-width: 700px;
    margin: 22px auto 0;

    color: var(--neta-walnut-soft, #493828);
    font-family: var(--font-body, sans-serif);
    font-size: 17.5px;
    line-height: 1.88;
}

/* =========================
   Layout
========================= */

.faq-layout {
    max-width: 1120px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    direction: rtl;
}

/* =========================
   Side Card
========================= */

.faq-side-card {
    position: sticky;
    top: 112px;

    min-width: 0;
    padding: 30px 28px;
    border-radius: 30px;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--neta-white, #fffaf1) 96%, transparent),
            color-mix(in srgb, var(--neta-paper-light, #fff8ee) 88%, transparent)
        );

    border: 1px solid var(--neta-line-soft, rgba(36, 25, 15, 0.08));
    box-shadow: 0 18px 46px rgba(36, 25, 15, 0.07);
}

.faq-side-card__label {
    margin: 0 0 14px;

    color: var(--neta-brass, #9c7c3f);
    font-family: var(--font-label, var(--font-mono, monospace));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.faq-side-card h2 {
    margin: 0;

    color: var(--neta-walnut, #24190f);
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 560;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.faq-side-card p:not(.faq-side-card__label) {
    margin: 18px 0 0;

    color: var(--neta-walnut-soft, #493828);
    font-family: var(--font-body, sans-serif);
    font-size: 15.8px;
    line-height: 1.78;
}

.faq-side-card a {
    width: 100%;
    min-height: 52px;
    margin-top: 24px;
    padding: 0 18px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    background: var(--neta-walnut, #24190f);
    color: var(--neta-white, #fffaf1) !important;

    font-family: var(--font-button, var(--font-body, sans-serif));
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none !important;

    box-shadow: 0 16px 36px rgba(36, 25, 15, 0.16);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.faq-side-card a i {
    font-size: 21px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.faq-side-card a:hover {
    transform: translateY(-2px);
    background: var(--neta-brass, #9c7c3f);
    color: var(--neta-white, #fffaf1) !important;
    box-shadow: 0 20px 42px rgba(36, 25, 15, 0.22);
}

.faq-side-card a:hover i {
    transform: translateX(-4px);
}

/* =========================
   FAQ Card
========================= */

.faq-card {
    min-width: 0;
    padding: 18px;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--neta-white, #fffaf1) 98%, transparent),
            color-mix(in srgb, var(--neta-white, #fffaf1) 90%, transparent)
        );

    border: 1px solid var(--neta-line-soft, rgba(36, 25, 15, 0.08));
    border-radius: 32px;
    box-shadow: 0 20px 55px rgba(36, 25, 15, 0.08);
}

.faq-list {
    display: grid;
    gap: 10px;
}

/* =========================
   FAQ Item
========================= */

.faq-item {
    position: relative;
    overflow: hidden;

    background: color-mix(in srgb, var(--neta-paper-light, #fff8ee) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--neta-line, rgba(36, 25, 15, 0.14)) 64%, transparent);
    border-radius: 22px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.faq-item:hover {
    border-color: color-mix(in srgb, var(--neta-brass, #9c7c3f) 28%, transparent);
    background: color-mix(in srgb, var(--neta-white, #fffaf1) 88%, transparent);
}

.faq-item.is-open {
    background: var(--neta-white, #fffaf1);
    border-color: color-mix(in srgb, var(--neta-brass, #9c7c3f) 36%, transparent);
    box-shadow: 0 14px 36px rgba(36, 25, 15, 0.07);
}

/* =========================
   Question Button
========================= */

.faq-page .faq-question,
.faq-page .faq-question:hover,
.faq-page .faq-question:focus,
.faq-page .faq-question:active,
.faq-question,
.faq-question:hover,
.faq-question:focus,
.faq-question:active {
    width: 100% !important;
    min-height: 78px !important;
    padding: 18px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;

    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 14px;

    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none;

    color: var(--neta-walnut-soft, #493828) !important;
    font-family: var(--font-body, sans-serif) !important;
    text-align: right;

    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    overflow: hidden;
}

.faq-question:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--neta-brass, #9c7c3f) 50%, transparent) !important;
    outline-offset: -4px;
}

.faq-question__number {
    min-width: 0;

    color: color-mix(in srgb, var(--neta-brass, #9c7c3f) 88%, var(--neta-walnut, #24190f));
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.faq-question__text {
    min-width: 0;
    max-width: 100%;

    color: currentColor;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.45;

    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;

    transition: color 0.25s ease;
}

.faq-question__icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;

    display: grid;
    place-items: center;
    justify-self: end;

    background: color-mix(in srgb, var(--neta-paper, #f4eadb) 86%, transparent);
    border: 1px solid var(--neta-line-soft, rgba(36, 25, 15, 0.08));

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.faq-question__icon i {
    color: var(--neta-walnut, #24190f);
    font-size: 24px;
    line-height: 1;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.faq-question:hover .faq-question__text,
.faq-item.is-open .faq-question__text {
    color: var(--neta-walnut, #24190f);
}

.faq-question:hover .faq-question__icon,
.faq-item.is-open .faq-question__icon {
    background: var(--neta-white, #fffaf1);
    border-color: color-mix(in srgb, var(--neta-brass, #9c7c3f) 36%, transparent);
}

.faq-item.is-open .faq-question__icon {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--neta-brass, #9c7c3f) 12%, transparent);
}

.faq-question:hover .faq-question__icon i,
.faq-item.is-open .faq-question__icon i {
    color: var(--neta-brass, #9c7c3f);
}

.faq-item.is-open .faq-question__icon i {
    transform: rotate(180deg);
}

/* =========================
   Answer
========================= */

.faq-answer {
    max-height: 0;
    overflow: hidden;

    transition: max-height 0.32s ease;
}

.faq-answer__inner {
    max-width: 760px;
    padding: 0 78px 26px 54px;

    color: var(--neta-walnut-soft, #493828);
    font-family: var(--font-body, sans-serif);
    font-size: 16.6px;
    line-height: 1.9;

    overflow-wrap: anywhere;
}

.faq-answer__inner p {
    margin: 0 0 14px;
}

.faq-answer__inner p:last-child {
    margin-bottom: 0;
}

.faq-answer__inner a {
    color: var(--neta-brass, #9c7c3f);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* =========================
   Empty State
========================= */

.faq-empty {
    max-width: 880px;
    margin: 0 auto;
    padding: 54px 44px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--neta-white, #fffaf1) 98%, transparent),
            color-mix(in srgb, var(--neta-white, #fffaf1) 90%, transparent)
        );

    border: 1px solid var(--neta-line-soft, rgba(36, 25, 15, 0.08));
    border-radius: 34px;
    box-shadow: 0 20px 55px rgba(36, 25, 15, 0.09);
}

.faq-empty .section-label {
    justify-content: center;
}

.faq-empty h2 {
    margin: 0;

    color: var(--neta-walnut, #24190f);
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(30px, 5vw, 50px);
    font-weight: 560;
    line-height: 1.08;
}

.faq-empty p:not(.section-label) {
    max-width: 620px;
    margin: 18px auto 0;

    color: var(--neta-walnut-soft, #493828);
    font-family: var(--font-body, sans-serif);
    font-size: 17px;
    line-height: 1.85;
}

/* body.neta-site prefix: outranks the site-wide `body.neta-site a { color: inherit }`,
   which otherwise turned the label dark on the dark button. */
body.neta-site .faq-empty__button {
    width: fit-content;
    margin: 26px auto 0;
    padding: 13px 22px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--neta-walnut, #24190f);
    color: var(--neta-white, #fffaf1);
    font-family: var(--font-body, sans-serif);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

body.neta-site .faq-empty__button:hover {
    transform: translateY(-2px);
    background: var(--neta-brass, #9c7c3f);
    color: var(--neta-white, #fffaf1);
    box-shadow: 0 16px 36px rgba(36, 25, 15, 0.16);
}

/* =========================
   Motion
========================= */

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-answer,
    .faq-question__text,
    .faq-question__icon,
    .faq-question__icon i,
    .faq-empty__button,
    .faq-side-card a,
    .faq-side-card a i {
        transition: none !important;
    }
}

/* =========================
   Responsive
========================= */

@media (max-width: 980px) {
    .faq-layout {
        max-width: 760px;
        grid-template-columns: 1fr;
    }

    .faq-side-card {
        position: relative;
        top: auto;
    }
}

@media (max-width: 760px) {
    .faq-section {
        padding: 82px 0 86px;
    }

    .faq-section__intro {
        margin-bottom: 30px;
    }

    .faq-section__intro h1 {
        font-size: clamp(36px, 10vw, 52px);
    }

    .faq-section__intro p:not(.section-label) {
        font-size: 16px;
        line-height: 1.8;
    }

    .faq-side-card {
        padding: 26px 22px;
        border-radius: 26px;
    }

    .faq-card {
        padding: 12px;
        border-radius: 26px;
    }

    .faq-list {
        gap: 10px;
    }

    .faq-item {
        border-radius: 20px;
    }

    .faq-page .faq-question,
    .faq-page .faq-question:hover,
    .faq-page .faq-question:focus,
    .faq-page .faq-question:active,
    .faq-question,
    .faq-question:hover,
    .faq-question:focus,
    .faq-question:active {
        min-height: 72px !important;
        grid-template-columns: 34px minmax(0, 1fr) 32px;
        gap: 9px;
        padding: 17px 13px !important;
    }

    .faq-question__number {
        font-size: 10.5px;
    }

    .faq-question__text {
        font-size: 16.2px;
        line-height: 1.5;
    }

    .faq-question__icon {
        width: 32px;
        height: 32px;
    }

    .faq-question__icon i {
        font-size: 20px;
    }

    .faq-answer__inner {
        padding: 0 56px 21px 14px;
        font-size: 15.6px;
        line-height: 1.85;
    }

    .faq-empty {
        padding: 42px 22px;
        border-radius: 26px;
    }

    .faq-empty p:not(.section-label) {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .faq-card {
        margin-inline: -2px;
        padding: 10px;
    }

    .faq-page .faq-question,
    .faq-page .faq-question:hover,
    .faq-page .faq-question:focus,
    .faq-page .faq-question:active,
    .faq-question,
    .faq-question:hover,
    .faq-question:focus,
    .faq-question:active {
        grid-template-columns: 28px minmax(0, 1fr) 30px;
        gap: 8px;
        padding: 16px 12px !important;
    }

    .faq-question__number {
        font-size: 10px;
    }

    .faq-question__text {
        font-size: 15.6px;
    }

    .faq-question__icon {
        width: 30px;
        height: 30px;
    }

    .faq-answer__inner {
        padding: 0 48px 20px 12px;
        font-size: 15.35px;
    }
}