/* База знань — hub + article + FAQ. Split off from legal-pages.css (D1): different visual language
   (accordion sidebar vs. horizontal tabs), so Legal Info stays untouched. */

.kb-page { padding-bottom: 80px; }
.kb-page ul,
.kb-page ol { list-style: none; margin: 0; padding: 0; }
.kb-page p { margin: 0; }
.kb-sidebar a { color: inherit; }

.kb-page .page-heading { padding: 40px 0 24px; }
.kb-page .page-heading .title { text-align: center; }

/* Layout: sidebar + content, shared by hub / article / FAQ */
.kb-page .kb-layout { display: flex; align-items: flex-start; gap: 32px; }

/* ---------------------------------------------------------------- Sidebar (accordion) */
.kb-sidebar {
    width: 332px;
    flex-shrink: 0;
    border-right: 1px solid #ebedf2;
    padding: 40px 16px 40px 0;
}
.kb-sidebar .nav-list .item { margin-bottom: 24px; }
.kb-sidebar .nav-list .item:last-child { margin-bottom: 0; }
.kb-sidebar .nav-list .item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-decoration: none;
}
.kb-sidebar .nav-list .item .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ebedf2;
    flex-shrink: 0;
}
.kb-sidebar .nav-list .item .icon-wrapper img,
.kb-sidebar .nav-list .item .icon-wrapper svg { width: 24px; height: 24px; object-fit: contain; }
.kb-sidebar .nav-list .item.current .icon-wrapper { background: #effeee; }
.kb-sidebar .nav-list .item > a:hover .icon-wrapper { background: #effeee; }
.kb-sidebar .nav-list .item .title { flex: 1 0 0; color: #221f1f; margin: 0; }
.kb-sidebar .nav-list li.has-child > a:after {
    content: '';
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.12987 9.95518C5.91159 9.68835 5.97492 9.31335 6.27137 9.11685C6.56784 8.92051 6.98456 8.97744 7.20286 9.2442C7.20323 9.24468 7.2047 9.24562 7.20546 9.24655C7.20714 9.24859 7.2099 9.25183 7.21327 9.25592C7.22037 9.26455 7.2313 9.27797 7.24539 9.29499C7.27368 9.32914 7.31551 9.37984 7.36954 9.44421C7.47788 9.57332 7.63529 9.75883 7.8279 9.98096C8.21371 10.4259 8.74124 11.0167 9.30977 11.6061C9.88121 12.1984 10.4814 12.7757 11.0147 13.1999C11.2822 13.4126 11.518 13.5744 11.7118 13.6796C11.9222 13.7937 12.0085 13.7998 12 13.7999C11.9901 13.7999 12.0762 13.7947 12.2883 13.6796C12.4821 13.5744 12.7179 13.4126 12.9854 13.1999C13.5187 12.7757 14.1189 12.1984 14.6903 11.6061C15.2589 11.0167 15.7864 10.4259 16.1722 9.98096C16.3648 9.75882 16.5222 9.5733 16.6306 9.44421C16.6846 9.37983 16.7264 9.32913 16.7547 9.29499C16.7688 9.27796 16.7797 9.26453 16.7868 9.25592C16.7902 9.25181 16.793 9.24857 16.7946 9.24655C16.7954 9.2456 16.796 9.24464 16.7964 9.2442C17.0147 8.97747 17.4323 8.92042 17.7287 9.11685C18.025 9.31335 18.0884 9.6884 17.8702 9.95518L17.8694 9.95674C17.8688 9.95741 17.8677 9.9587 17.8668 9.95987C17.8647 9.96236 17.8618 9.96628 17.8581 9.97081C17.8503 9.9803 17.839 9.99436 17.8242 10.0122C17.7943 10.0483 17.75 10.101 17.694 10.1677C17.5821 10.301 17.4209 10.4909 17.2235 10.7185C16.8289 11.1735 16.2863 11.7831 15.6973 12.3936C15.1114 13.001 14.4665 13.6242 13.8682 14.0999C13.5699 14.3372 13.2666 14.5505 12.9767 14.7078C12.7051 14.8551 12.3612 14.9999 12 15C11.6389 15 11.295 14.8551 11.0234 14.7078C10.7335 14.5505 10.4303 14.3372 10.1319 14.0999C9.53362 13.6242 8.88877 13.001 8.30276 12.3936C7.71382 11.7831 7.17119 11.1735 6.77661 10.7185C6.57924 10.4909 6.41802 10.301 6.3061 10.1677C6.25015 10.101 6.20579 10.0483 6.17588 10.0122C6.16111 9.99437 6.14985 9.98032 6.14202 9.97081C6.13831 9.96629 6.1354 9.96238 6.13334 9.95987C6.1324 9.95872 6.13131 9.95744 6.13074 9.95674L6.12987 9.95518Z' fill='%23221F1F'/%3E%3C/svg%3E") center / 20px no-repeat;
    transition: transform .3s;
}
.kb-sidebar .nav-list li.has-child.expanded > a:after { transform: rotate(180deg); }
.kb-sidebar .nav-list .children { display: none; padding-top: 16px; padding-left: 52px; }
.kb-sidebar .nav-list li.expanded .children { display: block; }
.kb-sidebar .nav-list .children ul li { padding: 0 0 12px; }
.kb-sidebar .nav-list .children ul li:last-child { padding-bottom: 0; }
.kb-sidebar .nav-list .children ul li a,
.kb-sidebar .nav-list .children ul li span {
    color: #221f1f;
    text-decoration: none;
    font-size: 16px;
    line-height: 22px;
}
.kb-sidebar .nav-list .children ul li a.current,
.kb-sidebar .nav-list .children ul li span.current { color: #06ba52; }
.kb-sidebar .nav-list .children ul li a:hover { color: #06ba52; }

/* ---------------------------------------------------------------- Hub hero + search + cards */
.kb-hub-content { flex: 1 0 0; min-width: 0; padding-top: 40px; text-align: center; }
.kb-hub-content .hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #effeee;
    margin-bottom: 24px;
}
.kb-hub-content .hero-icon svg,
.kb-hub-content .hero-icon img { width: 52px; height: 52px; object-fit: contain; }
.kb-hub-content .hero-title { color: #221f1f; margin-bottom: 8px; }
.kb-hub-content .hero-subtitle { color: #221f1f; margin-bottom: 24px; }

.kb-search { position: relative; max-width: 500px; margin: 0 auto 24px; text-align: left; }
.kb-search .kb-search-input {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: 1px solid #cad3da;
    border-radius: 6px;
    background: #fff;
}
.kb-search .kb-search-input:focus-within { border-color: #221f1f; }
.kb-search .kb-search-input svg { flex-shrink: 0; width: 24px; height: 24px; }
.kb-search .kb-search-input .kb-search-clear {
    display: none;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.kb-search.-has-value .kb-search-input .kb-search-clear { display: block; }
.kb-search.-loading .kb-search-input .kb-search-clear { display: none; }
.kb-search .kb-search-input .kb-search-spinner {
    display: none;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 2px solid #4e4c4c;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 1s linear infinite;
}
.kb-search.-loading .kb-search-input .kb-search-spinner { display: inline-block; }
.kb-search .kb-search-input input {
    flex: 1 0 0;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 18px;
    line-height: 24px;
    color: #221f1f;
    padding: 0;
}
.kb-search .kb-search-input input::placeholder { color: #4e4c4c; }
.kb-search-results {
    display: none;
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 6px rgba(0, 0, 0, .15);
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: #e9e9e9 transparent;
}
.kb-search-results::-webkit-scrollbar { width: 8px; }
.kb-search-results::-webkit-scrollbar-track { background: transparent; }
.kb-search-results::-webkit-scrollbar-thumb { background: #e9e9e9; border-radius: 8px; }
.kb-search.-active .kb-search-results { display: block; }
.kb-search-results .kb-result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-radius: 6px;
    text-decoration: none;
    color: #221f1f;
}
.kb-search-results .kb-result-item .icon-wrapper {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ebedf2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kb-search-results .kb-result-item .icon-wrapper img { width: 24px; height: 24px; object-fit: contain; }
.kb-search-results .kb-result-item:hover .icon-wrapper { background: #effeee; }
.kb-search-results .kb-result-item .result-title { margin: 0 0 4px; color: #221f1f; font-size: 14px; line-height: 18px; font-weight: 700; }
.kb-search-results .kb-result-item:hover .result-title { color: #06ba52; text-decoration: underline; text-underline-offset: 2px; }
.kb-search-results .kb-result-item .result-snippet {
    margin: 0;
    color: #4e4c4c;
    font-size: 14px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.kb-search-results .kb-empty { display: none; padding: 60px 16px; text-align: center; }
.kb-search-results.-empty .kb-empty { display: block; }
.kb-search-results.-empty .kb-result-item { display: none; }
.kb-search-results .kb-empty .icon-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f6f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px;
}
.kb-search-results .kb-empty .icon-wrapper img { width: 52px; height: 52px; object-fit: contain; }
.kb-search-results .kb-empty p { margin: 0; }
.kb-search-results .kb-empty .empty-title { color: #221f1f; font-weight: 900; margin-bottom: 8px; }
.kb-search-results .kb-empty .empty-subtitle { color: #4e4c4c; }

.kb-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    text-align: left;
}
.kb-cards .kb-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    background: #f6f8fa;
    text-decoration: none;
    transition: background-color .2s;
}
.kb-cards .kb-card:hover { background: #effeee; }
.kb-cards .kb-card .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #ebedf2;
}
.kb-cards .kb-card:hover .icon-wrapper { background: #06ba52; }
.kb-cards .kb-card .icon-wrapper img,
.kb-cards .kb-card .icon-wrapper svg { width: 32px; height: 32px; object-fit: contain; }
.kb-cards .kb-card:hover .icon-wrapper img,
.kb-cards .kb-card:hover .icon-wrapper svg { filter: brightness(0) invert(1); }
.kb-cards .kb-card .card-title { color: #221f1f; margin: 0 0 8px; }
.kb-cards .kb-card .card-desc { color: #221f1f; margin: 0; }

/* ---------------------------------------------------------------- Article (shared shell with old .legal-page markup, re-skinned) */
.kb-page .kb-article { flex: 1 0 0; min-width: 0; padding-top: 40px; }
.kb-page .kb-article .notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: #fff8e6;
    margin-bottom: 24px;
}
.kb-page .kb-article .notice .title { width: 100%; margin: 0; font-weight: 700; }
.kb-page .kb-article .notice .description { width: 100%; margin: 0; }
.kb-page .kb-article h1.title { color: #221f1f; margin-bottom: 24px; }
.kb-page .kb-article .article-content { color: #221f1f; }
.kb-page .kb-article .article-content img { max-width: 100%; height: auto; border-radius: 8px; }
.kb-page .kb-article .article-content p { margin: 0 0 16px; }

.kb-page .mobile-back-btn-wrapper { display: none; }
.kb-page .mobile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #221f1f;
    padding: 8px;
    margin-bottom: 16px;
    cursor: pointer;
}
.kb-page .mobile-back-btn:before {
    content: '';
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.12987 9.95518C5.91159 9.68835 5.97492 9.31335 6.27137 9.11685C6.56784 8.92051 6.98456 8.97744 7.20286 9.2442C7.20323 9.24468 7.2047 9.24562 7.20546 9.24655C7.20714 9.24859 7.2099 9.25183 7.21327 9.25592C7.22037 9.26455 7.2313 9.27797 7.24539 9.29499C7.27368 9.32914 7.31551 9.37984 7.36954 9.44421C7.47788 9.57332 7.63529 9.75883 7.8279 9.98096C8.21371 10.4259 8.74124 11.0167 9.30977 11.6061C9.88121 12.1984 10.4814 12.7757 11.0147 13.1999C11.2822 13.4126 11.518 13.5744 11.7118 13.6796C11.9222 13.7937 12.0085 13.7998 12 13.7999C11.9901 13.7999 12.0762 13.7947 12.2883 13.6796C12.4821 13.5744 12.7179 13.4126 12.9854 13.1999C13.5187 12.7757 14.1189 12.1984 14.6903 11.6061C15.2589 11.0167 15.7864 10.4259 16.1722 9.98096C16.3648 9.75882 16.5222 9.5733 16.6306 9.44421C16.6846 9.37983 16.7264 9.32913 16.7547 9.29499C16.7688 9.27796 16.7797 9.26453 16.7868 9.25592C16.7902 9.25181 16.793 9.24857 16.7946 9.24655C16.7954 9.2456 16.796 9.24464 16.7964 9.2442C17.0147 8.97747 17.4323 8.92042 17.7287 9.11685C18.025 9.31335 18.0884 9.6884 17.8702 9.95518L17.8694 9.95674C17.8688 9.95741 17.8677 9.9587 17.8668 9.95987C17.8647 9.96236 17.8618 9.96628 17.8581 9.97081C17.8503 9.9803 17.839 9.99436 17.8242 10.0122C17.7943 10.0483 17.75 10.101 17.694 10.1677C17.5821 10.301 17.4209 10.4909 17.2235 10.7185C16.8289 11.1735 16.2863 11.7831 15.6973 12.3936C15.1114 13.001 14.4665 13.6242 13.8682 14.0999C13.5699 14.3372 13.2666 14.5505 12.9767 14.7078C12.7051 14.8551 12.3612 14.9999 12 15C11.6389 15 11.295 14.8551 11.0234 14.7078C10.7335 14.5505 10.4303 14.3372 10.1319 14.0999C9.53362 13.6242 8.88877 13.001 8.30276 12.3936C7.71382 11.7831 7.17119 11.1735 6.77661 10.7185C6.57924 10.4909 6.41802 10.301 6.3061 10.1677C6.25015 10.101 6.20579 10.0483 6.17588 10.0122C6.16111 9.99437 6.14985 9.98032 6.14202 9.97081C6.13831 9.96629 6.1354 9.96238 6.13334 9.95987C6.1324 9.95872 6.13131 9.95744 6.13074 9.95674L6.12987 9.95518Z' fill='%23221F1F'/%3E%3C/svg%3E") center / 20px no-repeat;
    transform: rotate(90deg);
}

/* FAQ accordion block reused from template-parts/faq-block.php — override its standalone-page
   styling (big centered title) to sit inline in the KB article column instead. */
.kb-page .kb-article .faq-block { padding: 0; }
.kb-page .kb-article .faq-block .container { max-width: 100%; padding: 0; }
.kb-page .kb-article .faq-block .title { text-align: left; font-size: 28px; line-height: 1.357; }
.kb-page .kb-article .faq-block .faq-container { padding-top: 24px; }

/* Lightbox overlay (#rp-lightbox) is built by initLightbox() in legal-pages.js, which this page
   also loads for that function — but legal-pages.css itself isn't enqueued here, so its overlay
   styling (fixed position, hidden by default, close button) has to be duplicated. */
.kb-page .article-content p > img { cursor: zoom-in; }

#rp-lightbox {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    inset: 0;
    background: #28282880;
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 99999;
}
#rp-lightbox.prepare-anim { display: flex; }
#rp-lightbox.active {
    display: flex;
    opacity: 1;
}
#rp-lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    will-change: transform;
    transform-origin: center center;
}
#rp-lightbox img.zoomed {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    position: absolute;
    cursor: grab;
}

#rp-lightbox.desktop img {
    transition: opacity 0.2s;
    cursor: zoom-in;
}
#rp-lightbox.desktop img.zoomed {
    position: absolute;
    top: 0;
    left: 0;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    transition: none;
    cursor: grab;
}
#rp-lightbox.desktop img.zoomed:active { cursor: grabbing; }

#rp-lightbox.mobile img {
    touch-action: none;
    transition: transform .1s linear;
}

#rp-lightbox .lightbox-close {
    position: absolute;
    display: block;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #221f1f;
    transition: background-color .3s;
    cursor: pointer;
}
#rp-lightbox .lightbox-close * { cursor: pointer; }
#rp-lightbox .lightbox-close path { transition: stroke .3s; }
#rp-lightbox .lightbox-close:hover { background: #eaeaea; }
#rp-lightbox .lightbox-close:hover path { stroke: #221f1f; }
#rp-lightbox .lightbox-spinner {
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid #fff;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 1300px) {
    .kb-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .kb-page { padding-bottom: 24px; }
    .kb-page .kb-layout { display: flex; flex-direction: column; gap: 24px; }
    .kb-sidebar {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #ebedf2;
        padding: 24px 0;
        margin-bottom: 24px;
    }

    /* Hub on mobile: the accordion nav replaces the card grid, shown below the hero/search. */
    .kb-page:not(.single-page) .kb-hub-content { order: 1; }
    .kb-page:not(.single-page) .kb-sidebar {
        order: 2;
        padding: 0;
        margin-bottom: 0;
        border: none;
    }
    .kb-page:not(.single-page) .kb-cards { display: none; }

    /* Article on mobile: swap the sidebar for a back link instead of stacking the accordion. */
    .kb-page.single-page .kb-sidebar { display: none; }
    .kb-page.single-page .mobile-back-btn-wrapper { display: block; }
    .kb-page .kb-article { padding-top: 0px; }
}

@media (max-width: 768px) {
    .kb-search .kb-search-input input { font-size: 16px; }
}

@media (max-width: 576px) {
    .kb-page .page-heading { padding: 24px 0 16px; }
    .kb-hub-content { padding-top: 24px; }
}