/* =========================================================
   FLAX KNOWLEDGEBASE — categories, results and documents
   ========================================================= */

.fh-kb {
    --kb-cyan: #67d4ff;
    --kb-blue: #347fff;
    --kb-panel: #091831;
    --kb-deep: #050e20;
    --kb-line: rgba(112, 177, 255, .17);
    --kb-muted: #8499b8;
    color: var(--kb-muted);
    padding: 12px 0 35px;
}

.fh-kb-hero {
    background:
        radial-gradient(circle at 88% 0, rgba(61, 137, 255, .21), transparent 27rem),
        linear-gradient(145deg, #0d244b, #061126 72%);
    border: 1px solid var(--kb-line);
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
    margin-bottom: 34px;
    overflow: hidden;
    padding: 44px;
    position: relative;
}

.fh-kb-hero:after {
    border: 1px solid rgba(103, 212, 255, .13);
    border-radius: 50%;
    content: '';
    height: 360px;
    pointer-events: none;
    position: absolute;
    right: -160px;
    top: -235px;
    width: 360px;
}

.fh-kb-kicker,
.fh-kb-section-index {
    color: var(--kb-cyan);
    display: block;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    margin-bottom: 11px;
}

.fh-kb-hero h2,
.fh-kb-document-head h2 {
    color: #f5f9ff !important;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.7rem, 5vw, 4.8rem);
    letter-spacing: -.06em;
    line-height: .95;
    margin: 0;
}

.fh-kb-hero h2 em { color: var(--kb-cyan); font-style: normal; }
.fh-kb-hero-copy p { color: #95aac8; line-height: 1.75; margin: 18px 0 0; max-width: 670px; }

.fh-kb-search-form { margin-top: 30px; max-width: 860px; position: relative; z-index: 2; }
.fh-kb-search-box {
    align-items: center;
    background: rgba(3, 10, 23, .72);
    border: 1px solid rgba(103, 212, 255, .23);
    border-radius: 15px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
    display: grid;
    gap: 12px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    padding: 7px;
}
.fh-kb-search-box > i { color: var(--kb-cyan); font-size: .95rem; margin-left: 10px; }
.fh-kb-search-box .form-control {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #eff8ff !important;
    font-size: .92rem;
    min-height: 52px;
    padding: 0 5px !important;
}
.fh-kb-search-box .form-control::placeholder { color: #60799e; }
.fh-kb-search-box .btn {
    align-items: center;
    background: linear-gradient(135deg, #347fff, #1755cb) !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: white !important;
    display: flex;
    font-size: .75rem;
    font-weight: 800;
    gap: 20px;
    min-height: 48px;
    padding: 0 18px !important;
}

.fh-kb-hero-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 19px; position: relative; z-index: 2; }
.fh-kb-hero-meta span {
    background: rgba(4, 13, 29, .42);
    border: 1px solid rgba(112, 177, 255, .13);
    border-radius: 999px;
    color: #7e95b6;
    font-size: .65rem;
    font-weight: 700;
    padding: 7px 10px;
}
.fh-kb-hero-meta i { color: var(--kb-cyan); margin-right: 5px; }

.fh-kb-section-head,
.fh-kb-panel-head {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin: 0 0 18px;
}
.fh-kb-section-head h3,
.fh-kb-panel-head h3 {
    color: #eff7ff !important;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    letter-spacing: -.04em;
    margin: 0;
}
.fh-kb-section-head p { color: #7289aa; font-size: .78rem; margin: 0; }

.fh-kb-category-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 34px; }
.fh-kb-category-card {
    background:
        radial-gradient(circle at 100% 0, rgba(52, 127, 255, .11), transparent 15rem),
        linear-gradient(150deg, #0a1b37, #061126);
    border: 1px solid var(--kb-line);
    border-radius: 19px;
    min-height: 155px;
    overflow: hidden;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fh-kb-category-card:hover { border-color: rgba(103, 212, 255, .42); box-shadow: 0 25px 65px rgba(0,0,0,.28); transform: translateY(-4px); }
.fh-kb-category-link { align-items: center; color: inherit !important; display: grid; gap: 16px; grid-template-columns: 48px minmax(0,1fr) 26px; min-height: 155px; padding: 22px; text-decoration: none !important; }
.fh-kb-category-icon,
.fh-kb-file-icon {
    align-items: center;
    background: rgba(52, 127, 255, .13);
    border: 1px solid rgba(103, 212, 255, .16);
    border-radius: 13px;
    color: var(--kb-cyan);
    display: flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}
.fh-kb-category-content { min-width: 0; }
.fh-kb-category-count { color: #60799e; display: block; font-size: .58rem; font-weight: 800; letter-spacing: .1em; margin-bottom: 6px; text-transform: uppercase; }
.fh-kb-category-content strong { color: #eef7ff; display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.08rem; letter-spacing: -.025em; }
.fh-kb-category-content small { color: #7e94b3; display: block; line-height: 1.55; margin-top: 7px; }
.fh-kb-category-arrow { color: #5c759b; transition: color .2s ease, transform .2s ease; }
.fh-kb-category-card:hover .fh-kb-category-arrow { color: var(--kb-cyan); transform: translateX(4px); }

.fh-kb-edit {
    align-items: center;
    background: #08162d;
    border: 1px solid var(--kb-line);
    border-radius: 8px;
    color: var(--kb-cyan);
    display: flex;
    height: 30px;
    justify-content: center;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 30px;
    z-index: 4;
}

.fh-kb-popular {
    background: linear-gradient(150deg, rgba(10, 27, 55, .98), rgba(5, 14, 31, .99));
    border: 1px solid var(--kb-line);
    border-radius: 23px;
    overflow: hidden;
}
.fh-kb-panel-head { background: rgba(52, 127, 255, .055); border-bottom: 1px solid var(--kb-line); margin: 0; padding: 25px 27px; }
.fh-kb-panel-status { color: #7088a9; font-size: .64rem; font-weight: 750; }
.fh-kb-panel-status i { background: var(--kb-cyan); border-radius: 50%; display: inline-block; height: 6px; margin-right: 6px; width: 6px; }
.fh-kb-article-list { padding: 7px; }
.fh-kb-article-row { border-radius: 13px; position: relative; transition: background .2s ease; }
.fh-kb-article-row:not(:last-child) { border-bottom: 1px solid rgba(112, 177, 255, .09); }
.fh-kb-article-row:hover { background: rgba(52, 127, 255, .07); }
.fh-kb-article-link { align-items: center; color: inherit !important; display: grid; gap: 14px; grid-template-columns: 42px minmax(0,1fr) 20px; min-height: 88px; padding: 13px 16px; text-decoration: none !important; }
.fh-kb-file-icon { border-radius: 11px; height: 42px; width: 42px; }
.fh-kb-article-copy { min-width: 0; }
.fh-kb-article-copy strong { color: #eaf4ff; display: block; font-size: .85rem; font-weight: 750; }
.fh-kb-article-copy small { color: #748bab; display: block; line-height: 1.5; margin-top: 5px; overflow: hidden; padding: 0 !important; text-overflow: ellipsis; }
.fh-kb-row-arrow { color: #526c92; font-size: .7rem; transition: color .2s ease, transform .2s ease; }
.fh-kb-article-row:hover .fh-kb-row-arrow { color: var(--kb-cyan); transform: translateX(3px); }

.fh-kb-empty { background: #08162d; border: 1px solid var(--kb-line); border-radius: 18px; color: #8499b8; padding: 55px 25px; text-align: center; }
.fh-kb-empty i { color: var(--kb-cyan); font-size: 1.7rem; }
.fh-kb-empty p { margin: 12px 0 0; }
.fh-kb-empty-inline { border: 0; border-radius: 13px; }

.fh-kb-search-compact { background: linear-gradient(145deg, #0b1d3b, #061126); border: 1px solid var(--kb-line); border-radius: 20px; margin: 0 0 30px; max-width: none; padding: 20px; }
.fh-kb-search-compact .fh-kb-search-box { box-shadow: none; margin: 0 auto; max-width: 850px; }
.fh-kb-results { margin-top: 28px; }
.fh-kb-page-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 18px; }
.fh-kb-back,
.fh-kb-admin-action,
.fh-kb-print {
    align-items: center;
    border: 1px solid rgba(112, 177, 255, .2);
    border-radius: 11px;
    color: #9eb3cf !important;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    gap: 8px;
    padding: 11px 14px;
}
.fh-kb-back:hover,
.fh-kb-admin-action:hover,
.fh-kb-print:hover { background: rgba(52,127,255,.1); color: white !important; }

.fh-kb-vote-confirmation { align-items: center; background: rgba(52,127,255,.12); border: 1px solid rgba(103,212,255,.2); border-radius: 14px; color: #c9eaff; display: flex; gap: 10px; margin-bottom: 15px; padding: 14px 16px; }
.fh-kb-vote-confirmation i { color: var(--kb-cyan); }
.fh-kb-document { border-radius: 27px; box-shadow: 0 30px 90px rgba(0,0,0,.3); overflow: hidden; }
.fh-kb-document-head {
    align-items: start;
    background: radial-gradient(circle at 90% 0, rgba(61,137,255,.19), transparent 24rem), linear-gradient(145deg,#0d244b,#061126 72%);
    border: 1px solid var(--kb-line);
    border-radius: 27px 27px 0 0;
    display: flex;
    justify-content: space-between;
    padding: 40px 44px 43px;
}
.fh-kb-document-head h2 { font-size: clamp(2.2rem,4vw,3.8rem); max-width: 820px; }
.fh-kb-document-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.fh-kb-document-meta span { background: rgba(4,13,29,.54); border: 1px solid rgba(112,177,255,.14); border-radius: 999px; color: #8399b9; font-size: .65rem; font-weight: 700; padding: 7px 10px; }
.fh-kb-document-meta i { color: var(--kb-cyan); margin-right: 6px; }
.fh-kb-document-layout { background: linear-gradient(145deg,#091831,#050e20); border-left: 1px solid var(--kb-line); border-right: 1px solid var(--kb-line); display: grid; grid-template-columns: 82px minmax(0,1fr); }
.fh-kb-document-rail { align-items: center; border-right: 1px solid var(--kb-line); display: flex; flex-direction: column; gap: 17px; padding: 38px 18px; }
.fh-kb-document-rail span { color: #577197; font-size: .52rem; font-weight: 800; letter-spacing: .14em; writing-mode: vertical-rl; }
.fh-kb-document-rail i { background: linear-gradient(var(--kb-cyan),transparent); flex: 1; min-height: 110px; opacity: .35; width: 1px; }
.fh-kb-document-rail strong { color: var(--kb-cyan); font-size: .65rem; }
.fh-kb-document-content { color: #a6b6cc; font-size: 1rem; line-height: 1.9; min-height: 400px; padding: 48px clamp(30px,7vw,88px) 65px; }
.fh-kb-document-content > * { max-width: 830px; }
.fh-kb-document-content h1,
.fh-kb-document-content h2,
.fh-kb-document-content h3,
.fh-kb-document-content h4 { color: #eff7ff !important; line-height: 1.2; margin: 1.6em 0 .7em; }
.fh-kb-document-content a { color: var(--kb-cyan); text-decoration: underline; text-decoration-color: rgba(103,212,255,.35); text-underline-offset: 3px; }
.fh-kb-document-content img { border-radius: 15px; height: auto; max-width: 100%; }
.fh-kb-document-content pre,
.fh-kb-document-content code { background: #030a17; border: 1px solid rgba(112,177,255,.13); border-radius: 9px; color: #bfeaff; }
.fh-kb-document-content pre { overflow-x: auto; padding: 16px; }
.fh-kb-document-content code { padding: 2px 5px; }
.fh-kb-helpful { align-items: center; background: #061126; border: 1px solid var(--kb-line); border-radius: 0 0 27px 27px; display: flex; justify-content: space-between; padding: 25px 30px; }
.fh-kb-helpful h3 { color: #edf7ff !important; font-size: 1.15rem; margin: 0; }
.fh-kb-helpful form { display: flex; gap: 8px; }
.fh-kb-vote { border: 1px solid rgba(112,177,255,.2); border-radius: 10px; color: #aac0da; font-size: .72rem; font-weight: 800; padding: 10px 13px; }
.fh-kb-vote-yes { background: rgba(52,127,255,.12); }
.fh-kb-vote-no { background: rgba(232,95,89,.07); }
.fh-kb-vote-yes i { color: var(--kb-cyan); }
.fh-kb-vote-no i { color: #ef8d89; }
.fh-kb-related { margin-top: 25px; }

@media (max-width: 767.98px) {
    .fh-kb-hero { padding: 31px 24px; }
    .fh-kb-search-box { grid-template-columns: 22px minmax(0,1fr); }
    .fh-kb-search-box .btn { grid-column: 1 / -1; justify-content: space-between; width: 100%; }
    .fh-kb-section-head { align-items: start; flex-direction: column; gap: 8px; }
    .fh-kb-category-grid { grid-template-columns: 1fr; }
    .fh-kb-category-link { min-height: 140px; padding: 19px; }
    .fh-kb-document-head { flex-direction: column; gap: 22px; padding: 31px 24px 35px; }
    .fh-kb-document-layout { grid-template-columns: 1fr; }
    .fh-kb-document-rail { border-bottom: 1px solid var(--kb-line); border-right: 0; flex-direction: row; padding: 15px 24px; }
    .fh-kb-document-rail span { writing-mode: initial; }
    .fh-kb-document-rail i { background: linear-gradient(90deg,var(--kb-cyan),transparent); min-height: 1px; width: auto; }
    .fh-kb-document-content { padding: 32px 24px 45px; }
    .fh-kb-helpful { align-items: stretch; flex-direction: column; gap: 16px; padding: 22px; }
    .fh-kb-helpful form { width: 100%; }
    .fh-kb-vote { flex: 1; }
    .fh-kb-panel-head { align-items: start; flex-direction: column; gap: 10px; padding: 22px; }
    .fh-kb-article-link { grid-template-columns: 38px minmax(0,1fr) 14px; padding: 12px 9px; }
    .fh-kb-file-icon { height: 38px; width: 38px; }
}

@media print {
    .fh-kb-document-head,
    .fh-kb-document-layout,
    .fh-kb-document-content { background: white !important; color: #111 !important; }
    .fh-kb-document-rail,
    .fh-kb-helpful,
    .fh-kb-related,
    .fh-kb-page-actions,
    .fh-kb-print { display: none !important; }
    .fh-kb-document-content h1,
    .fh-kb-document-content h2,
    .fh-kb-document-content h3,
    .fh-kb-document-content h4 { color: #111 !important; }
}