/**
 * FAQ LLM Optimized — display styles (3.1.0)
 *
 * Driven by the --faq-ui-* custom properties printed by FAQ_Style
 * (FAQs › Settings › Style). Loaded after faq.css.
 *
 * Components:
 *   .faq-card.faq-ui            archive (.faq-item), shortcode (.faq-shortcode-item), search (.faq-search-item)
 *   .faq-category-nav.faq-ui    category navigation
 *   .faq-ui-surface             single article, sidebar boxes, related cards, empty states
 * Presets: .faq-ui--cards | --minimal | --outlined | --soft
 * Icons:   .faq-ui-icon--chevron | --plus | --none
 */

/* ============================================
   Fallback values (if the inline variables are missing)
   ============================================ */
:root {
    --faq-ui-accent: #667eea;
    --faq-ui-accent-text: #ffffff;
    --faq-ui-page-bg: #fafafa;
    --faq-ui-item-bg: #ffffff;
    --faq-ui-border-color: #e6e8ee;
    --faq-ui-border-width: 0px;
    --faq-ui-radius: 12px;
    --faq-ui-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --faq-ui-shadow-hover: 0 4px 14px rgba(0,0,0,.08);
    --faq-ui-question-color: #1a1a1a;
    --faq-ui-question-size: 18px;
    --faq-ui-answer-color: #555555;
    --faq-ui-answer-size: 16px;
    --faq-ui-badge-bg: var(--faq-ui-accent);
    --faq-ui-badge-color: #ffffff;
    --faq-ui-category-color: #1a1a1a;
    --faq-ui-gap: 16px;
    --faq-ui-padding: 24px;
    --faq-ui-sticky-position: sticky;
    --faq-ui-sticky-top: 20px;
    --faq-adminbar: 0px;
}

/* WordPress admin bar (logged-in users) is added to the sticky offset. */
body.admin-bar {
    --faq-adminbar: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --faq-adminbar: 46px;
    }
}

/* ============================================
   Sticky category block (FAQs › Settings › Style › Layout)
   ============================================ */
.faq-sidebar,
.faq-single-sidebar {
    position: var(--faq-ui-sticky-position);
    top: calc(var(--faq-ui-sticky-top) + var(--faq-adminbar));
}

/* Long category lists stay reachable under a sticky header. */
.faq-sidebar .faq-category-nav.faq-ui-sticky--on {
    max-height: calc(100vh - var(--faq-ui-sticky-top) - var(--faq-adminbar) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Deep links (#faq-123) land below the sticky header. */
.faq-card[id],
.faq-single-article[id] {
    scroll-margin-top: calc(var(--faq-ui-sticky-top) + var(--faq-adminbar) + 16px);
}

/* ============================================
   Page background
   ============================================ */
.faq-archive-wrapper,
.faq-single-wrapper {
    background: var(--faq-ui-page-bg);
}

/* ============================================
   Shared surface (items, navigation, boxes)
   ============================================ */
.faq-card.faq-ui,
.faq-category-nav.faq-ui,
.faq-ui-surface {
    background: var(--faq-ui-item-bg);
    border: var(--faq-ui-border-width) solid var(--faq-ui-border-color);
    border-radius: var(--faq-ui-radius);
    box-shadow: var(--faq-ui-shadow);
}

.faq-card.faq-ui {
    overflow: hidden;
    transition: box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}

.faq-card.faq-ui:hover {
    box-shadow: var(--faq-ui-shadow-hover);
}

/* Spacing between items */
.faq-list,
.faq-search-results-list,
.faq-shortcode-col {
    gap: var(--faq-ui-gap);
}

.faq-shortcode-grid {
    gap: max(var(--faq-ui-gap), 16px);
}

/* ============================================
   Item content
   ============================================ */
.faq-ui .faq-card__header {
    padding: var(--faq-ui-padding);
    align-items: center;
}

.faq-ui .faq-card__answer-content {
    padding: 0 var(--faq-ui-padding) var(--faq-ui-padding);
}

.faq-ui .faq-card__question {
    color: var(--faq-ui-question-color);
    font-size: var(--faq-ui-question-size);
}

.faq-ui .faq-card__answer-content,
.faq-ui .faq-card__answer-content p,
.faq-ui .faq-card__full-answer,
.faq-ui .faq-card__full-answer li {
    color: var(--faq-ui-answer-color);
    font-size: var(--faq-ui-answer-size);
}

.faq-ui .faq-card__full-answer h2,
.faq-ui .faq-card__full-answer h3,
.faq-ui .faq-card__full-answer strong {
    color: var(--faq-ui-question-color);
}

.faq-ui .faq-card__full-answer a,
.faq-ui .faq-card__permalink a,
.faq-ui .faq-card__related-inline a {
    color: var(--faq-ui-accent);
}

.faq-ui .faq-card__related-inline {
    background: color-mix(in srgb, var(--faq-ui-accent) 6%, transparent);
    border-radius: min(var(--faq-ui-radius), 10px);
}

.faq-ui .faq-card__answer-content p.faq-card__related-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--faq-ui-question-color);
}

.faq-ui .faq-card__related-list {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: disc outside;
}

.faq-ui .faq-card__related-list li {
    margin: 4px 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--faq-ui-accent);
}

.faq-ui .faq-card__related-list li::marker {
    color: var(--faq-ui-accent);
}

.faq-ui .faq-card__related-list a {
    text-decoration: none;
}

.faq-ui .faq-card__related-list a:hover,
.faq-ui .faq-card__related-list a:focus-visible {
    text-decoration: underline;
}

.faq-ui .faq-card__related-inline strong {
    color: var(--faq-ui-question-color);
}

.faq-ui .faq-card__badge {
    background: var(--faq-ui-badge-bg);
    color: var(--faq-ui-badge-color);
}

/* Themes often outline :focus on click; keep the outline for keyboard only. */
.faq-card .faq-card__toggle:focus:not(:focus-visible) {
    outline: none;
}

.faq-ui .faq-card__question .faq-card__toggle:focus-visible {
    outline: 2px solid var(--faq-ui-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ============================================
   Open / close icon
   ============================================ */
.faq-ui .faq-card__header::after {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    transition: transform .25s ease;
}

.faq-ui-icon--chevron .faq-card__header::after {
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--faq-ui-accent);
    border-bottom: 2px solid var(--faq-ui-accent);
    transform: translateY(-3px) rotate(45deg);
}

.faq-ui-icon--chevron.is-open .faq-card__header::after,
.faq-ui-icon--chevron .faq-card__header[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
}

.faq-ui-icon--plus .faq-card__header::after {
    background:
        linear-gradient(var(--faq-ui-accent), var(--faq-ui-accent)) center / 100% 2px no-repeat,
        linear-gradient(var(--faq-ui-accent), var(--faq-ui-accent)) center / 2px 100% no-repeat;
}

.faq-ui-icon--plus.is-open .faq-card__header::after,
.faq-ui-icon--plus .faq-card__header[aria-expanded="true"]::after {
    transform: rotate(45deg);
}

.faq-ui-icon--none .faq-card__header::after {
    content: none;
}

/* ============================================
   Category navigation
   ============================================ */
.faq-category-nav.faq-ui {
    padding: var(--faq-ui-padding);
}

.faq-ui .faq-sidebar-title {
    color: var(--faq-ui-category-color);
    opacity: .65;
}

.faq-ui .faq-category-link {
    color: var(--faq-ui-category-color);
    border-radius: min(var(--faq-ui-radius), 10px);
}

.faq-ui .faq-category-link:hover,
.faq-ui .faq-category-link:focus-visible {
    background: color-mix(in srgb, var(--faq-ui-accent) 8%, transparent);
    color: var(--faq-ui-accent);
}

.faq-ui .faq-category-link.active {
    background: var(--faq-ui-accent);
    color: var(--faq-ui-accent-text);
}

.faq-ui .faq-category-count {
    background: color-mix(in srgb, var(--faq-ui-category-color) 8%, transparent);
    color: inherit;
}

.faq-ui .faq-category-link.active .faq-category-count {
    background: color-mix(in srgb, var(--faq-ui-accent-text) 22%, transparent);
    color: var(--faq-ui-accent-text);
}

/* Secondary surfaces follow the text colors too */
.faq-ui-surface .faq-related-question a,
.faq-ui-surface .faq-single-title {
    color: var(--faq-ui-question-color);
}

.faq-ui-surface .faq-answer-text,
.faq-ui-surface .faq-related-excerpt {
    color: var(--faq-ui-answer-color);
}

.faq-ui-surface .faq-related-link,
.faq-ui-surface .faq-answer-text a {
    color: var(--faq-ui-accent);
}

/* Buttons & active states use the accent text color */
.faq-btn,
.faq-btn:hover,
.faq-btn-outline:hover {
    color: var(--faq-ui-accent-text);
}

.faq-btn-outline {
    color: var(--faq-ui-accent);
}

/* ============================================
   Card footer: "Was this helpful?" and/or link (full answers)
   ============================================ */
.faq-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--faq-ui-answer-color) 15%, transparent);
}

.faq-ui .faq-card__footer .faq-card__permalink,
.faq-ui .faq-card__answer-content p.faq-card__cta {
    margin: 0;
    font-size: 14px;
}

.faq-ui .faq-card__answer-content p.faq-card__cta {
    margin-top: 12px;
}

.faq-ui .faq-card__permalink a {
    font-weight: 600;
    text-decoration: none;
}

.faq-ui .faq-card__permalink a:hover,
.faq-ui .faq-card__permalink a:focus-visible {
    text-decoration: underline;
}

.faq-feedback--inline.faq-feedback-container {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    text-align: left;
}

.faq-feedback--inline .faq-feedback-widget {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.faq-ui .faq-feedback--inline .faq-feedback-question,
.faq-ui-surface .faq-feedback--inline .faq-feedback-question {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--faq-ui-answer-color);
}

.faq-feedback--inline .faq-feedback-buttons {
    gap: 8px;
    justify-content: flex-start;
}

.faq-feedback--inline .faq-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    background: transparent;
    color: var(--faq-ui-answer-color);
    border: 1px solid color-mix(in srgb, var(--faq-ui-answer-color) 30%, transparent);
    border-radius: min(var(--faq-ui-radius), 999px);
    box-shadow: none;
    margin: 0; /* Neutralise theme default margins on <button> (spacing comes from the gap). */
}

.faq-feedback--inline .faq-feedback-btn:hover,
.faq-feedback--inline .faq-feedback-btn:focus-visible {
    color: var(--faq-ui-accent);
    border-color: var(--faq-ui-accent);
    background: color-mix(in srgb, var(--faq-ui-accent) 6%, transparent);
    transform: none;
    box-shadow: none;
    outline: none;
}

.faq-ui .faq-feedback--inline .faq-feedback-thanks,
.faq-ui-surface .faq-feedback--inline .faq-feedback-thanks,
.faq-ui .faq-feedback--inline .faq-feedback-error,
.faq-ui-surface .faq-feedback--inline .faq-feedback-error {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
}

.faq-ui .faq-feedback--inline .faq-feedback-thanks,
.faq-ui-surface .faq-feedback--inline .faq-feedback-thanks {
    color: var(--faq-ui-accent);
}

.faq-ui .faq-feedback--inline .faq-feedback-error,
.faq-ui-surface .faq-feedback--inline .faq-feedback-error {
    color: #b32d2e;
}

.faq-feedback--inline .faq-feedback-error::before {
    content: none;
}

.faq-feedback--inline.faq-feedback-voted .faq-feedback-thanks {
    animation: none;
}

/* Single FAQ page: feedback row under the answer */
.faq-single-feedback {
    margin: 32px 0 0;
    padding: 16px 0 0;
}

/* ============================================
   Single FAQ page (style "Single FAQ page", or archive style by default)
   ============================================ */
.faq-single-article.faq-ui-surface {
    padding: calc(var(--faq-ui-padding) * 5 / 3);
}

.faq-sidebar-box.faq-ui-surface,
.faq-related-card.faq-ui-surface {
    padding: var(--faq-ui-padding);
}

.faq-ui-surface .faq-single-title {
    font-size: calc(var(--faq-ui-question-size) * 1.75);
}

.faq-ui-surface .faq-answer-text {
    font-size: calc(var(--faq-ui-answer-size) + 1px);
}

.faq-ui-surface .faq-card__badge {
    background: var(--faq-ui-badge-bg);
    color: var(--faq-ui-badge-color);
}

.faq-ui-surface .faq-sidebar-box__title,
.faq-ui-surface h3 {
    color: var(--faq-ui-question-color);
}

.faq-sidebar-box.faq-ui-surface p:not(.faq-sidebar-box__title) {
    color: var(--faq-ui-answer-color);
}

.faq-single-wrapper .faq-related-section {
    background: color-mix(in srgb, var(--faq-ui-accent) 4%, transparent);
    border-radius: var(--faq-ui-radius);
}

.faq-single-wrapper .faq-related-title {
    color: var(--faq-ui-question-color);
}

.faq-single-wrapper .faq-nav-btn:not(.faq-nav-btn-secondary),
.faq-single-wrapper .faq-btn:not(.faq-btn-outline) {
    color: var(--faq-ui-accent-text);
}

.faq-single-wrapper .faq-btn-outline {
    border-color: var(--faq-ui-accent);
    color: var(--faq-ui-accent);
}

/* "View Category" on hover/focus: filled accent background, accent text color (white by default) */
.faq-single-wrapper .faq-btn-outline:hover,
.faq-single-wrapper .faq-btn-outline:focus-visible {
    background: var(--faq-ui-accent);
    border-color: var(--faq-ui-accent);
    color: var(--faq-ui-accent-text);
}

.faq-single-article.faq-ui--minimal {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 768px) {
    .faq-single-article.faq-ui-surface {
        padding: calc(var(--faq-ui-padding) * .85);
    }

    .faq-ui-surface .faq-single-title {
        font-size: max(22px, calc(var(--faq-ui-question-size) * 1.35));
    }
}

/* ============================================
   Preset: Minimal — no boxes, separators only
   ============================================ */
.faq-card.faq-ui--minimal {
    border-width: 0 0 var(--faq-ui-border-width) 0;
    border-radius: 0;
    background: var(--faq-ui-item-bg);
}

.faq-list > .faq-ui--minimal:first-child,
.faq-search-results-list > .faq-ui--minimal:first-child,
.faq-shortcode-col > .faq-ui--minimal:first-child {
    border-top-width: var(--faq-ui-border-width);
}

.faq-ui--minimal .faq-card__header {
    padding-left: 0;
    padding-right: 0;
}

.faq-ui--minimal .faq-card__answer-content {
    padding-left: 0;
    padding-right: 0;
}

.faq-ui--minimal .faq-card__badge {
    padding-left: 0;
    padding-right: 0;
}

.faq-category-nav.faq-ui--minimal {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.faq-ui--minimal .faq-category-link {
    border-radius: 0;
    border-left: 2px solid var(--faq-ui-border-color);
    padding-left: 14px;
}

.faq-ui--minimal .faq-category-link:hover,
.faq-ui--minimal .faq-category-link:focus-visible {
    background: transparent;
    border-left-color: var(--faq-ui-accent);
}

.faq-ui--minimal .faq-category-link.active {
    background: transparent;
    color: var(--faq-ui-accent);
    border-left-color: var(--faq-ui-accent);
}

.faq-ui--minimal .faq-category-link.active .faq-category-count {
    background: color-mix(in srgb, var(--faq-ui-accent) 12%, transparent);
    color: var(--faq-ui-accent);
}

.faq-ui--minimal .faq-category-list li {
    margin-bottom: 2px;
}

/* ============================================
   Preset: Outlined — accent bar on open item
   ============================================ */
.faq-card.faq-ui--outlined.is-open,
.faq-card.faq-ui--outlined[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--faq-ui-accent) 45%, var(--faq-ui-border-color));
    box-shadow: inset 3px 0 0 var(--faq-ui-accent), var(--faq-ui-shadow);
}

.faq-ui--outlined .faq-category-link.active {
    background: color-mix(in srgb, var(--faq-ui-accent) 10%, transparent);
    color: var(--faq-ui-accent);
    box-shadow: inset 3px 0 0 var(--faq-ui-accent);
    font-weight: 600;
}

.faq-ui--outlined .faq-category-link.active .faq-category-count {
    background: color-mix(in srgb, var(--faq-ui-accent) 15%, transparent);
    color: var(--faq-ui-accent);
}

/* ============================================
   Preset: Soft — tinted, open item a bit stronger
   ============================================ */
.faq-card.faq-ui--soft.is-open,
.faq-card.faq-ui--soft[aria-expanded="true"] {
    background: color-mix(in srgb, var(--faq-ui-accent) 10%, #ffffff);
}

.faq-ui--soft .faq-card__question {
    font-weight: 650;
}

.faq-ui--soft .faq-category-link {
    /* Pill shape, but follows "Corners" (0 = square). */
    border-radius: min(999px, calc(var(--faq-ui-radius) * 3));
}

.faq-ui--soft .faq-card__related-inline {
    background: #ffffff;
}

/* ============================================
   Mobile
   ============================================ */
@media (max-width: 768px) {
    .faq-ui .faq-card__header {
        padding: calc(var(--faq-ui-padding) * .75);
    }

    .faq-ui .faq-card__answer-content {
        padding: 0 calc(var(--faq-ui-padding) * .75) calc(var(--faq-ui-padding) * .75);
    }

    .faq-ui--minimal .faq-card__header,
    .faq-ui--minimal .faq-card__answer-content {
        padding-left: 0;
        padding-right: 0;
    }

    .faq-ui .faq-card__question {
        font-size: max(15px, calc(var(--faq-ui-question-size) * .9));
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-ui .faq-card__header::after,
    .faq-card.faq-ui {
        transition: none;
    }
}