/* HockeyShare Support KB — Elite Tactician v3.1 (kb-v3.css). Public KB pages only; tickets/contact/CRM keep support-v3.css. */

/* =========================================
   FULL-BLEED LAYOUT ESCAPE + PAGE-HEADER ARTIFACT
   No page-header is rendered on KB pages; the KB
   home page also escapes the standard content gutter.
   ========================================= */
body[data-kb] .page-header-v3 {
    display: none;
}

body[data-kb] .main-content-v3.no-page-header {
    margin-top: 4rem; /* fixed header offset */
}

body[data-kb-home] .main-content-v3 {
    max-width: none;
    padding: 0;
    margin: 0;
}

body[data-kb-home] .main-content-v3.no-page-header {
    margin-top: 4rem; /* fixed header offset */
}

/* =========================================
   BANDS + CONTAINER
   Slightly tighter block rhythm than home.css —
   these are docs pages, not marketing pages.
   ========================================= */
.kb-band {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.kb-band--dark {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #1a2437 0%, #040e21 45%);
    color: var(--et-on-primary-container);
}

.kb-band--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60rem 30rem at 85% 95%, rgba(182, 21, 46, 0.14), transparent 65%);
    pointer-events: none;
}

.kb-container {
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* =========================================
   KICKER + SECTION HEADS
   ========================================= */
.kb-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--et-secondary);
    margin-bottom: 1rem;
}

.kb-band--dark .kb-kicker {
    color: var(--et-secondary-container);
}

.kb-kicker::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 2px;
    background: var(--et-secondary);
    vertical-align: middle;
    margin-right: 0.75rem;
}

.kb-hero-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.kb-hero-subtitle {
    font-family: var(--font-body);
    color: var(--et-on-primary-container);
    max-width: 42rem;
}

.kb-kicker--on-dark {
    color: var(--et-secondary-container);
}

.kb-hero {
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.kb-hero-search {
    max-width: 40rem;
}

.kb-hero-compact {
    padding: 1rem 0;
}

.kb-hero-compact-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.5rem;
    color: var(--et-on-surface);
    margin: 0 0 1rem;
}

.kb-band--light {
    background: var(--et-surface-container-lowest);
}

.kb-band--flush {
    padding-top: 2.5rem;
}

.kb-section-head {
    margin-block: 0 2rem;
}

.kb-section-head h2 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

/* -----------------------------------------
   KB PAGE HEADER - Category + Search page headers
   Not a boxed card: hairline rule underneath, no fill.
   ----------------------------------------- */
.kb-page-header {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color, rgba(197, 198, 205, 0.25));
}

.kb-page-header .kb-kicker {
    margin-bottom: 0.5rem;
}

.kb-page-header-title {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.15;
    color: var(--et-on-surface);
    margin: 0.25rem 0 0;
}

.kb-page-header-desc {
    color: var(--et-on-surface-variant);
    margin: 0.5rem 0 0;
}

.kb-page-header-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--et-on-surface-variant);
    margin: 0.75rem 0 0;
}

/* -----------------------------------------
   KB CTA - Talk to a human panel, navy w/ crimson wash
   ----------------------------------------- */
.kb-cta {
    position: relative;
    overflow: hidden;
    background: var(--gradient-arena);
    color: var(--et-on-primary-container);
    border-radius: 1rem;
    padding: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.kb-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(50rem 25rem at 85% 100%, rgba(182, 21, 46, 0.18), transparent 65%);
    pointer-events: none;
}

.kb-cta > * {
    position: relative;
}

.kb-cta-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: #ffffff;
    margin: 0 0 0.75rem;
}

.kb-cta-message {
    color: var(--et-on-primary-container);
    max-width: 32rem;
    margin: 0 auto 1.5rem;
}

.kb-btn-ghost-dark {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.kb-btn-ghost-dark:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
}

/* =========================================
   BASELINE PORT — support-v3.css (public KB subset)
   Copied verbatim from support-v3.css so the four
   public KB templates keep working when the
   stylesheet link is swapped. Tickets/contact/CRM-only
   rules stay in support-v3.css.
   ========================================= */

/* -----------------------------------------
   KB CARDS - Use v3 .card under the hood; these add KB-specific trim
   ----------------------------------------- */
.kb-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 1rem;
    border: 1px solid var(--border-color, rgba(197, 198, 205, 0.25));
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kb-card:hover {
    text-decoration: none;
    color: inherit;
    border-color: var(--category-accent, var(--et-secondary));
    box-shadow: var(--shadow-ambient-sm);
}

.kb-card-body {
    padding: 1.25rem 1.5rem;
}

.kb-card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--et-on-surface);
    margin: 0;
    transition: color 0.2s ease;
}

.kb-card:hover .kb-card-title {
    color: var(--et-secondary);
}

.kb-card-title-lg {
    font-size: 1.125rem;
}

.kb-card-excerpt {
    color: var(--et-on-surface-variant);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0.5rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--et-on-surface-variant);
}

.kb-card-arrow {
    flex-shrink: 0;
    margin-left: 1rem;
    color: var(--et-outline-variant);
    transition: color 0.2s ease;
}

.kb-card:hover .kb-card-arrow {
    color: var(--et-secondary);
}

@media (prefers-reduced-motion: no-preference) {
    .kb-card-arrow {
        transition: color 0.2s ease, transform 0.2s ease;
    }

    .kb-card:hover .kb-card-arrow {
        transform: translateX(3px);
    }
}

/* -----------------------------------------
   CATEGORY ACCENT SYSTEM
   Templates set --category-accent inline; classes consume it.
   ----------------------------------------- */
.kb-category-icon-tile {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--category-accent, #2563eb) 14%, var(--et-surface-container-lowest));
    color: var(--category-accent, #2563eb);
    font-size: 1.25rem;
}

.kb-category-icon-tile-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
}

.kb-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: color-mix(in srgb, var(--category-accent, var(--et-secondary)) 12%, transparent);
    color: var(--category-accent, var(--et-secondary));
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.kb-category-badge:hover {
    opacity: 0.85;
    color: var(--category-accent, var(--et-secondary));
}

/* -----------------------------------------
   ARTICLE HEADER - Meta row + title
   ----------------------------------------- */
.kb-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--et-on-surface-variant);
}

.kb-article-meta > * {
    display: inline-flex;
    align-items: center;
}

.kb-article-meta > *:not(:first-child)::before {
    content: "\00B7";
    margin: 0 0.625rem;
    color: var(--et-outline-variant);
}

.kb-article-meta-featured {
    color: var(--et-warning);
    opacity: 0.85;
}

.kb-article-title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--et-on-surface);
    margin: 0;
}

/* -----------------------------------------
   SIDEBAR - Category nav list
   ----------------------------------------- */
.kb-sidebar-heading {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--et-on-surface-variant);
    margin: 0 0 0.75rem;
}

.kb-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.kb-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--et-on-surface-variant);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.kb-sidebar-link:hover {
    background: var(--et-surface-container-low);
    color: var(--et-on-surface);
}

.kb-sidebar-link.is-active {
    background: color-mix(in srgb, var(--category-accent, var(--et-secondary)) 10%, transparent);
    color: var(--category-accent, var(--et-secondary));
    font-weight: 600;
}

.kb-sidebar-link-label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.kb-sidebar-link-icon {
    width: 1rem;
    text-align: center;
    color: var(--category-accent, var(--et-on-surface-variant));
    flex-shrink: 0;
}

.kb-sidebar-link.is-active .kb-sidebar-link-icon {
    color: var(--category-accent, var(--et-secondary));
}

.kb-sidebar-link-count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--et-on-surface-variant);
}

.kb-sidebar-link.is-active .kb-sidebar-link-count {
    color: var(--category-accent, var(--et-secondary));
}

.kb-sidebar-divider {
    height: 1px;
    background: var(--border-color, rgba(197, 198, 205, 0.25));
    margin: 1rem 0;
}

.kb-sidebar-footer-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--et-on-surface-variant);
    text-decoration: none;
    transition: color 0.15s ease;
}

.kb-sidebar-footer-link:hover {
    color: var(--et-secondary);
}

/* -----------------------------------------
   TABLE OF CONTENTS - Sticky sidebar TOC with scroll-spy
   Sticky on the TOC element itself; sidebar include sits above it
   in DOM order so it scrolls away naturally before the TOC pins.
   ----------------------------------------- */
.kb-toc {
    position: sticky;
    top: 5.5rem;
    margin-top: 1.5rem;
    background: var(--et-surface-container-lowest);
    border: 1px solid var(--border-color, rgba(197, 198, 205, 0.25));
    border-radius: 1rem;
    padding: 1.5rem;
}

.kb-toc-heading {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--et-on-surface-variant);
    margin: 0 0 0.75rem;
}

.kb-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.kb-toc-link {
    display: block;
    padding: 0.375rem 0 0.375rem 0.75rem;
    border-left: 2px solid transparent;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--et-on-surface-variant);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.kb-toc-link:hover {
    color: var(--et-on-surface);
}

.kb-toc-link.is-active {
    border-color: var(--et-secondary);
    color: var(--et-primary);
    font-weight: 600;
}

.kb-toc-link--h3 {
    padding-left: 1.5rem;
}

/* -----------------------------------------
   FEEDBACK WIDGET
   ----------------------------------------- */
.kb-feedback {
    background: var(--et-surface-container-low);
    border-radius: 1rem;
    border-top: 1px solid var(--border-color, rgba(197, 198, 205, 0.25));
    padding: 1.5rem;
}

.kb-feedback-prompt {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--et-on-surface);
    text-align: center;
    margin: 0 0 1rem;
}

.kb-feedback-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.kb-feedback-success-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--et-secondary) 12%, transparent);
    color: var(--et-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.kb-feedback-success-heading {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--et-on-surface);
    margin: 0;
}

.kb-feedback-success-sub {
    font-size: 0.875rem;
    color: var(--et-on-surface-variant);
    margin: 0.25rem 0 0;
}

/* -----------------------------------------
   SEARCH BOX - Override v3 form-input bottom-border-only
   for the prominent standalone KB search UI
   ----------------------------------------- */
.kb-search {
    position: relative;
    width: 100%;
}

.kb-search-input {
    width: 100%;
    padding: 1rem 8rem 1rem 3rem;
    background: var(--et-surface-container-lowest);
    border: 1px solid var(--et-input-border);
    border-radius: 0.75rem;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--et-on-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kb-search-input:focus {
    outline: none;
    border-color: var(--et-input-border-hover);
    box-shadow: var(--state-focus-ring-input);
    background: var(--et-surface-container-lowest);
}

.kb-search-input::placeholder {
    color: var(--et-on-surface-variant);
}

/* Dark variant — used on the navy home-style hero band */
.kb-search--dark .kb-search-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.kb-search--dark .kb-search-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.kb-search--dark .kb-search-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(182, 21, 46, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.kb-search--dark .kb-search-icon {
    color: rgba(255, 255, 255, 0.7);
}

.kb-search--dark .kb-search-submit {
    box-shadow: var(--shadow-glow-red-sm);
}

.kb-search--compact .kb-search-input {
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    font-size: 0.875rem;
    border-radius: 0.625rem;
}

.kb-search-icon {
    position: absolute;
    left: 1.125rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--et-on-surface-variant);
    pointer-events: none;
}

.kb-search--compact .kb-search-icon {
    left: 0.875rem;
    font-size: 0.8125rem;
}

.kb-search-submit {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    bottom: 0.375rem;
    padding: 0 1.25rem;
    border-radius: 0.625rem;
    background: var(--et-secondary);
    color: var(--text-inverse);
    border: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.kb-search-submit:hover {
    background: var(--goal-red-hover);
    box-shadow: var(--shadow-glow-red-sm);
}

/* -----------------------------------------
   KB ARTICLE CONTENT - rich-text prose styling
   Base layout loads Tailwind v4 via the browser CDN which does not
   ship the @tailwindcss/typography plugin, so the .prose class has no
   effect and Preflight zeroes <p> margins. Scope basic typography here
   for KB articles only (this stylesheet is loaded on support pages).
   ----------------------------------------- */
.kb-article-content {
    max-width: 68ch;
    color: var(--et-on-surface);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.kb-article-content > * + * {
    margin-top: 1.25em;
}

.kb-article-content p {
    margin: 0;
}

.kb-article-content h2,
.kb-article-content h3,
.kb-article-content h4 {
    font-family: var(--font-display);
    color: var(--et-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-top: 1.75em;
    margin-bottom: 0;
    scroll-margin-top: 5.5rem;
}

.kb-article-content h2 { font-size: 1.5rem; font-weight: 800; }
.kb-article-content h3 { font-size: 1.25rem; font-weight: 700; }
.kb-article-content h4 { font-size: 1.0625rem; font-weight: 700; }

/* Hairline separator ahead of h2 sections for scannability */
.kb-article-content h2 {
    padding-top: 1.25em;
    border-top: 1px solid var(--et-outline-variant);
}

.kb-article-content > *:first-child {
    margin-top: 0;
}

.kb-article-content > h2:first-child {
    padding-top: 0;
    border-top: none;
}

.kb-article-content ul,
.kb-article-content ol {
    margin: 0;
    padding-left: 1.5rem;
}

.kb-article-content ul { list-style: disc; }
.kb-article-content ol { list-style: decimal; }

.kb-article-content li + li {
    margin-top: 0.375em;
}

.kb-article-content li > ul,
.kb-article-content li > ol {
    margin-top: 0.375em;
}

.kb-article-content a {
    color: var(--et-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kb-article-content a:hover {
    color: var(--goal-red-hover);
    text-decoration: none;
}

.kb-article-content blockquote {
    border-left: 2px solid var(--et-secondary);
    padding: 0.25em 1rem;
    color: var(--et-on-surface-variant);
    font-style: italic;
    background: color-mix(in srgb, var(--et-secondary) 4%, transparent);
    border-radius: 0 0.375rem 0.375rem 0;
    margin: 0;
}

.kb-article-content img,
.kb-article-content iframe,
.kb-article-content video {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Video embeds (YouTube/Vimeo/Streamable) — Quill emits iframes without
   dimensions, so give them a responsive 16:9 box */
.kb-article-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.kb-article-content table,
.kb-article-content pre {
    max-width: 100%;
}

.kb-article-content pre {
    background: var(--et-surface-container);
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-size: 0.9375em;
    line-height: 1.55;
    margin: 0;
}

.kb-article-content code {
    background: var(--et-surface-container-low);
    font-family: var(--font-mono);
    padding: 0.125em 0.375em;
    border-radius: 0.25rem;
    font-size: 0.9em;
    color: var(--et-on-surface);
}

.kb-article-content pre code {
    background: transparent;
    padding: 0;
}

.kb-article-content hr {
    border: 0;
    border-top: 1px solid var(--et-outline-variant);
    margin: 0;
}

.kb-article-content strong,
.kb-article-content b { font-weight: 700; }

.kb-article-content em,
.kb-article-content i { font-style: italic; }

.kb-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.kb-article-content th,
.kb-article-content td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--et-outline-variant);
    text-align: left;
}

.kb-article-content th {
    font-weight: 700;
    background: var(--et-surface-container);
}

/* -----------------------------------------
   EMPTY STATE
   ----------------------------------------- */
.kb-empty {
    background: var(--et-surface-container-low);
    border-radius: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.kb-empty-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 9999px;
    background: var(--et-surface-container);
    color: var(--et-on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.kb-empty-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--et-on-surface);
    margin: 0 0 0.5rem;
}

.kb-empty-message {
    color: var(--et-on-surface-variant);
    margin: 0;
}

/* -----------------------------------------
   RESPONSIVE
   ----------------------------------------- */
@media (max-width: 639px) {
    .kb-search-input {
        padding: 0.875rem 1rem 0.875rem 2.75rem;
        font-size: 0.9375rem;
    }

    .kb-search-submit {
        position: static;
        width: 100%;
        margin-top: 0.75rem;
        padding: 0.75rem 1rem;
    }

    /* stacked layout: the icon can no longer center against the whole
       form (input + button rows) — pin it to the input row instead */
    .kb-search-icon {
        top: 1.6rem;
    }

    .kb-search--compact .kb-search-icon {
        top: 1.3rem;
    }
}

/* =========================================
   PRINT
   ========================================= */
@media print {
    .kb-band--dark {
        background: none !important;
        color: #000;
    }

    .kb-band--dark::before {
        display: none;
    }

    .kb-toc,
    .kb-feedback,
    .kb-cta,
    .kb-hero-search,
    .kb-sidebar-col,
    .kb-pagination {
        display: none !important;
    }

    .kb-article-content {
        max-width: none;
    }
}