/**
 * ModKor FAQ — self-contained storefront styles.
 * Ships compiled so the module renders correctly on ANY Hyvä theme without relying on the
 * theme's Tailwind build scanning these templates. All rules are scoped under .mk-faq /
 * .mk-faq-ask so nothing leaks into the surrounding theme. Override the accent by setting
 * --mk-faq-accent on a parent element.
 *
 * @copyright Copyright (c) 2026 ModKor — Proprietary.
 */
.mk-faq,
.mk-faq-ask {
    --mk-faq-accent: #2563eb;
    --mk-faq-text: #374151;
    --mk-faq-muted: #6b7280;
    --mk-faq-border: #e5e7eb;
    --mk-faq-border-soft: #f0f1f3;
    --mk-faq-hover: #f9fafb;
    --mk-faq-chip: #f3f4f6;
    --mk-faq-chip-hover: #e5e7eb;
    color: var(--mk-faq-text);
    box-sizing: border-box;
}
.mk-faq *,
.mk-faq-ask * { box-sizing: border-box; }

/* ---- layout / page ---- */
.mk-faq { max-width: 56rem; margin: 0 auto; padding: 2rem 1rem; }
.mk-faq--single { max-width: 48rem; }
.mk-faq--tab { max-width: none; margin: 0; padding: 0; }
.mk-faq__title { font-size: 1.875rem; line-height: 1.2; font-weight: 700; margin: 0 0 .5rem; }
.mk-faq--single .mk-faq__title { margin: .75rem 0 1rem; }
.mk-faq__back { display: inline-block; font-size: .875rem; color: var(--mk-faq-muted); text-decoration: none; }
.mk-faq__back:hover { color: var(--mk-faq-accent); }
.mk-faq__empty,
.mk-faq__nomatch { color: var(--mk-faq-muted); }

/* ---- search ---- */
.mk-faq__search { margin: 1rem 0 2rem; }
.mk-faq__search-input {
    width: 100%; padding: .625rem .875rem; font-size: 1rem; color: inherit;
    border: 1px solid #d1d5db; border-radius: .5rem; background: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.mk-faq__search-input:focus {
    outline: none; border-color: var(--mk-faq-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

/* ---- categories ---- */
.mk-faq__cat { margin-bottom: 2.5rem; }
.mk-faq__cat-title {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1.5rem; line-height: 1.25; font-weight: 600; margin: 0 0 1rem;
}
.mk-faq__cat-desc { color: var(--mk-faq-muted); margin: 0 0 1rem; }

/* ---- question list / accordion ---- */
.mk-faq__list { border: 1px solid var(--mk-faq-border); border-radius: .625rem; overflow: hidden; background: #fff; }
.mk-faq__item + .mk-faq__item { border-top: 1px solid var(--mk-faq-border); }
.mk-faq__q {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    text-align: left; padding: 1rem; background: transparent; border: 0; cursor: pointer;
    font: inherit; color: inherit;
}
.mk-faq__q:hover { background: var(--mk-faq-hover); }
.mk-faq__q:focus { outline: none; }
.mk-faq__q-label { font-weight: 500; }
.mk-faq__star { color: #eab308; }
.mk-faq__chev { width: 1.25rem; height: 1.25rem; flex: none; transition: transform .2s ease; }
.mk-faq__chev--open { transform: rotate(180deg); }
.mk-faq__short { padding: 0 1rem 1rem; margin-top: -.5rem; font-size: .875rem; color: var(--mk-faq-muted); }
.mk-faq__body { padding: 0 1rem 1.25rem; color: #4b5563; }

/* ---- tags ---- */
.mk-faq__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.mk-faq__tag {
    font: inherit; font-size: .75rem; line-height: 1; padding: .35rem .6rem; border: 0; cursor: pointer;
    color: var(--mk-faq-text); background: var(--mk-faq-chip); border-radius: 999px;
}
.mk-faq__tag:hover { background: var(--mk-faq-chip-hover); }
.mk-faq__tag--static { cursor: default; }

/* ---- voting ---- */
.mk-faq__vote {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--mk-faq-border-soft);
}
.mk-faq__vote-label { font-size: .875rem; color: var(--mk-faq-muted); }
.mk-faq__btn {
    font: inherit; font-size: .875rem; padding: .35rem .6rem; cursor: pointer;
    border: 1px solid var(--mk-faq-border); border-radius: .375rem; background: #fff; color: inherit;
}
.mk-faq__btn:hover { background: var(--mk-faq-hover); }
.mk-faq__vote-ok { color: #16a34a; font-size: .875rem; }
.mk-faq__vote-err { color: var(--mk-faq-muted); font-size: .875rem; }

/* ---- share / more ---- */
.mk-faq__share { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; font-size: .875rem; color: var(--mk-faq-muted); }
.mk-faq__share-link { color: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.mk-faq__share-link:hover { color: var(--mk-faq-accent); }
.mk-faq__more { margin-top: .75rem; font-size: .875rem; }
.mk-faq__more-link { color: #9ca3af; text-decoration: none; }
.mk-faq__more-link:hover { color: var(--mk-faq-accent); }

/* ---- single-question extras ---- */
.mk-faq__related { margin-top: 2.5rem; border-top: 1px solid var(--mk-faq-border); padding-top: 1.5rem; }
.mk-faq__related-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 .75rem; }
.mk-faq__related-list { margin: 0; padding-left: 1.25rem; list-style: disc; }
.mk-faq__related-list li { margin-bottom: .5rem; }
.mk-faq__related-list a { color: var(--mk-faq-accent); text-decoration: none; }
.mk-faq__related-list a:hover { text-decoration: underline; }
.mk-faq__button {
    display: inline-block; margin-top: 2rem; padding: .625rem 1.25rem; cursor: pointer;
    font: inherit; font-weight: 600; text-decoration: none; border: 0; border-radius: .5rem;
    background: var(--mk-faq-accent); color: #fff;
}
.mk-faq__button:hover { filter: brightness(1.05); }

/* ---- answer rich-HTML (replaces Tailwind "prose") ---- */
.mk-faq__answer { line-height: 1.65; }
.mk-faq__answer > :first-child { margin-top: 0; }
.mk-faq__answer > :last-child { margin-bottom: 0; }
.mk-faq__answer p { margin: 0 0 .85rem; }
.mk-faq__answer h2,
.mk-faq__answer h3,
.mk-faq__answer h4 { font-weight: 600; line-height: 1.3; margin: 1.25rem 0 .5rem; color: #1f2937; }
.mk-faq__answer h2 { font-size: 1.25rem; }
.mk-faq__answer h3 { font-size: 1.125rem; }
.mk-faq__answer h4 { font-size: 1rem; }
.mk-faq__answer ul,
.mk-faq__answer ol { margin: 0 0 .85rem; padding-left: 1.4rem; }
.mk-faq__answer ul { list-style: disc; }
.mk-faq__answer ol { list-style: decimal; }
.mk-faq__answer li { margin: .25rem 0; }
.mk-faq__answer a { color: var(--mk-faq-accent); text-decoration: underline; }
.mk-faq__answer img { max-width: 100%; height: auto; border-radius: .375rem; }
.mk-faq__answer blockquote { margin: 0 0 .85rem; padding: .25rem 0 .25rem 1rem; border-left: 3px solid var(--mk-faq-border); color: var(--mk-faq-muted); }
.mk-faq__answer code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--mk-faq-chip); border-radius: .25rem; padding: .1em .35em; }
.mk-faq__answer pre { overflow-x: auto; background: #111827; color: #e5e7eb; padding: .85rem 1rem; border-radius: .5rem; margin: 0 0 .85rem; }
.mk-faq__answer pre code { background: none; padding: 0; color: inherit; }
.mk-faq__answer table { width: 100%; border-collapse: collapse; margin: 0 0 .85rem; font-size: .95em; }
.mk-faq__answer th,
.mk-faq__answer td { border: 1px solid var(--mk-faq-border); padding: .45rem .6rem; text-align: left; }
.mk-faq__answer hr { border: 0; border-top: 1px solid var(--mk-faq-border); margin: 1.25rem 0; }

/* ---- product-tab variant ---- */
.mk-faq--tab .mk-faq__list { border: 0; border-radius: 0; background: transparent; }
.mk-faq--tab .mk-faq__q { padding: 1rem 0; }
.mk-faq--tab .mk-faq__q:hover { background: transparent; opacity: .8; }
.mk-faq--tab .mk-faq__body { padding: 0 0 1.25rem; }
.mk-faq__section-title { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.mk-faq__asked-by { font-size: .75rem; color: #9ca3af; margin: 0 0 .5rem; }

/* ---- Ask-a-Question form ---- */
.mk-faq-ask { max-width: 36rem; }
.mk-faq-ask > * + * { margin-top: 1rem; }
.mk-faq-ask__row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .mk-faq-ask__row { grid-template-columns: 1fr 1fr; } }
.mk-faq-ask__label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .25rem; }
.mk-faq-ask__input {
    width: 100%; padding: .55rem .75rem; font: inherit; color: inherit;
    border: 1px solid #d1d5db; border-radius: .375rem; background: #fff;
}
.mk-faq-ask__input:focus { outline: none; border-color: var(--mk-faq-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
textarea.mk-faq-ask__input { resize: vertical; }
.mk-faq-ask__consent { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; color: var(--mk-faq-muted); }
.mk-faq-ask__note { font-size: .75rem; color: var(--mk-faq-muted); }

/* ---- footer link ---- */
.modkor-faq-footer-link { display: inline-block; }