/* FAQ topic + single styling (GitLab #145, items 2/3/4). Direct-served, no
   build step. Mirrors the site's existing .nm-faq-el card component so the new
   theme-rendered FAQ pages match the branded FAQ hub: a green mint hero band,
   white rounded-20px accordion cards, a rotating chevron and the green
   open-state tint. Brand colours are inlined as explicit hex (matching the
   theme's green-*/lime-* tokens) and all layout/typography is defined here, so
   these pages render correctly without depending on the compiled main.css. */

/* Vertical rhythm is defined here rather than via Tailwind py-* utilities so the
   FAQ pages render correctly regardless of the compiled main.css build state. */
.nm-faq-hero > .container {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.nm-faq-body {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    .nm-faq-hero > .container {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .nm-faq-body {
        padding-top: 4rem;
        padding-bottom: 5rem;
    }
}

/* --- Green hero band (topic + single) --- */
.nm-faq-hero {
    background-color: #BBDFD2;
}

.nm-faq-hero__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #005537;
}

.nm-faq-hero__breadcrumb a:hover {
    text-decoration: underline;
}

.nm-faq-hero__sep {
    opacity: 0.5;
}

.nm-faq-hero__overline {
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #206F52;
}

.nm-faq-hero__title {
    font-weight: 900;
    line-height: 1.05;
    color: #005537;
    font-size: clamp(1.875rem, 4vw, 3.5rem);
}

.nm-faq-hero--single .nm-faq-hero__title {
    /* single questions are long sentences — cap the size so they don't wrap
       into an oversized block. */
    font-size: clamp(1.5rem, 3vw, 2.5rem);
}

.nm-faq-hero__subtitle {
    margin-top: 1rem;
    max-width: 48rem;
    font-size: 1.125rem;
    color: #005537;
    opacity: 0.85;
}

/* --- Accordion cards (topic listing) --- */
.nm-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nm-faq-item {
    overflow: hidden;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.06);
}

.nm-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #282828;
    list-style: none;
    cursor: pointer;
    transition: background-color 0.25s ease-in-out;
}

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

.nm-faq-item[open] > summary {
    background-color: rgba(107, 199, 0, 0.2);
}

.nm-faq-item__q-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nm-faq-item__marker {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: #005537;
    transition: transform 0.25s ease-in-out;
}

.nm-faq-item[open] > summary .nm-faq-item__marker {
    transform: rotate(180deg);
}

.nm-faq-item__answer {
    padding: 0 1.5rem 1.5rem;
}

.nm-faq-item__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.nm-faq-item__links a:hover {
    text-decoration: underline;
}

.nm-faq-item--featured {
    box-shadow:
        0 0 0 2px #77CB00,
        0 4px 20px 0 rgba(0, 0, 0, 0.06);
}

.nm-faq-item__badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background-color: rgba(107, 199, 0, 0.15);
    color: #005537;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .nm-faq-item > summary {
        padding: 1rem 1.125rem;
        font-size: 1rem;
    }

    .nm-faq-item__answer {
        padding: 0 1.125rem 1.125rem;
    }
}

/* --- Answer typography ---
   Tailwind's preflight (in main.css) zeroes list/paragraph margins and removes
   bullets, so the semantic answer HTML from the importer needs its spacing
   restored here — this keeps the FAQ answers readable independently of the
   `prose` utility. Scoped to the FAQ answer wrappers only. */
.nm-faq-item__answer,
.nm-faq-answer {
    color: #282828;
    line-height: 1.6;
}

.nm-faq-item__answer > p,
.nm-faq-answer > p {
    margin: 0 0 1rem;
}

.nm-faq-item__answer ul,
.nm-faq-item__answer ol,
.nm-faq-answer ul,
.nm-faq-answer ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.nm-faq-item__answer ul,
.nm-faq-answer ul {
    list-style: disc;
}

.nm-faq-item__answer ol,
.nm-faq-answer ol {
    list-style: decimal;
}

.nm-faq-item__answer li,
.nm-faq-answer li {
    margin: 0 0 0.5rem;
}

.nm-faq-item__answer strong,
.nm-faq-answer strong {
    font-weight: 700;
}

.nm-faq-item__answer a,
.nm-faq-answer a {
    color: #005537;
    text-decoration: underline;
}

.nm-faq-item__answer h2,
.nm-faq-item__answer h3,
.nm-faq-item__answer h4,
.nm-faq-answer h2,
.nm-faq-answer h3,
.nm-faq-answer h4 {
    margin: 1.5rem 0 0.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: #005537;
}

/* The item answer already carries the last-question link row; drop the trailing
   paragraph margin so it doesn't add a double gap above the links. */
.nm-faq-item__answer > :last-child {
    margin-bottom: 0;
}

/* --- Hub loop card: "open question page" link (F14) ---
   Appended server-side to each Elementor loop card's answer so the single
   /faq/{slug}/ pages are internally linked, not orphaned. */
.nm-faq-hub__link {
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.nm-faq-hub__link a {
    color: #005537;
    text-decoration: none;
}

.nm-faq-hub__link a:hover {
    text-decoration: underline;
}

/* --- Single question: topic chips footer --- */
.nm-faq-single__topics {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.nm-faq-single__topics-label {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
}

.nm-faq-single__topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-faq-single__topics-list a {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background-color: #f1f3f4;
    font-size: 0.875rem;
    color: #282828;
    transition: background-color 0.2s ease-in-out;
}

.nm-faq-single__topics-list a:hover {
    background-color: #e2e5e7;
}