/* ===========================================================================
   Profiler Knowledge Base — brand theme layered on top of Bootstrap 5.3
   Brand palette sampled from the Profiler logo.
   =========================================================================== */

:root {
    --pf-red: #ec5f4f;
    --pf-blue: #2ca9e0;
    --pf-teal: #5fbfbe;
    --pf-green: #7fbe3a;
    --pf-gold: #f5b01e;
    --pf-grey: #4d4e52;

    --pf-primary: #1391d6;
    --pf-primary-dark: #0f76b0;

    /* Bootstrap overrides */
    --bs-primary: #1391d6;
    --bs-primary-rgb: 19, 145, 214;
    --bs-link-color: #1391d6;
    --bs-link-color-rgb: 19, 145, 214;
    --bs-link-hover-color: #0f76b0;
    --bs-body-color: #3c3d42;
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bs-border-color: #e6eaef;
    --bs-secondary-color: #6b7280;
}

body { background: #f6f8fa; }

h1, h2, h3, h4, h5, h6, .navbar-brand, .pf-hero h1 {
    font-family: 'Poppins', var(--bs-body-font-family);
    color: var(--pf-grey);
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Near-full-width container */
.container-kb {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* ---- Buttons / links (Bootstrap 5.3 uses runtime CSS vars) ---- */
.btn-primary {
    --bs-btn-bg: var(--pf-primary);
    --bs-btn-border-color: var(--pf-primary);
    --bs-btn-hover-bg: var(--pf-primary-dark);
    --bs-btn-hover-border-color: var(--pf-primary-dark);
    --bs-btn-active-bg: var(--pf-primary-dark);
    --bs-btn-active-border-color: var(--pf-primary-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--pf-primary);
    --bs-btn-border-color: var(--pf-primary);
    --bs-btn-hover-bg: var(--pf-primary);
    --bs-btn-hover-border-color: var(--pf-primary);
    --bs-btn-active-bg: var(--pf-primary);
}

/* ---- Navbar ---- */
.pf-navbar { box-shadow: 0 1px 0 rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.03); }
.pf-navbar .nav-link { font-weight: 500; color: var(--pf-grey); }
.pf-navbar .nav-link:hover, .pf-navbar .nav-link.active { color: var(--pf-primary); text-decoration: none; }
.pf-navsearch { min-width: 260px; }
.pf-navsearch .form-control:focus { box-shadow: none; border-color: var(--pf-blue); }
.pf-navsearch .input-group-text { border-color: var(--bs-border-color); }

/* ---- Hero ---- */
.pf-hero {
    background: linear-gradient(135deg, #eaf6fd 0%, #f4fbf6 100%);
    border: 1px solid var(--bs-border-color);
    border-radius: 18px;
    padding: 3rem 1.5rem 2.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pf-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
    background: linear-gradient(90deg, var(--pf-red), var(--pf-blue), var(--pf-teal), var(--pf-green), var(--pf-gold));
}
.pf-hero h1 { font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: .5rem; }
.pf-hero p { color: var(--bs-secondary-color); font-size: 1.05rem; margin-bottom: 1.5rem; }
.pf-hero-search { max-width: 640px; margin: 0 auto; }
.pf-hero-search .form-control { padding: .8rem 1rem; font-size: 1.05rem; }
.pf-hero-search .form-control:focus { box-shadow: none; border-color: var(--pf-blue); }

/* ---- Category cards ---- */
.pf-cat-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-top: 4px solid var(--pf-accent, var(--pf-blue));
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.pf-cat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16,24,40,.08); }
.pf-cat-card h2, .pf-cat-card h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.pf-cat-card h2 a, .pf-cat-card h3 a { color: var(--pf-grey); }
.pf-cat-card h2 a:hover { color: var(--pf-primary); text-decoration: none; }
.pf-cat-icon {
    width: 42px; height: 42px; border-radius: 10px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 1.25rem; color: #fff;
    background: var(--pf-accent, var(--pf-blue)); margin-bottom: .75rem;
}
.pf-cat-card .pf-links { list-style: none; margin: .5rem 0 0; padding: 0; }
.pf-cat-card .pf-links li { padding: .3rem 0; border-top: 1px solid var(--bs-border-color); font-size: .93rem; }
.pf-cat-card .pf-links li:first-child { border-top: none; }
.pf-cat-card .pf-links .count { color: var(--bs-secondary-color); font-size: .82rem; }

/* ---- Breadcrumbs ---- */
.breadcrumb { --bs-breadcrumb-divider: '/'; font-size: .875rem; margin-bottom: 1.25rem; }

/* ---- Article ---- */
.pf-article {
    background: #fff; border: 1px solid var(--bs-border-color);
    border-radius: 16px; padding: 2.25rem 2.5rem;
}
.pf-article > header h1 { font-weight: 700; font-size: 2rem; margin-bottom: .35rem; }
.pf-article .pf-meta { color: var(--bs-secondary-color); font-size: .85rem; margin-bottom: 1.5rem; }

.kb-body { font-size: 1.03rem; color: #33343a; }
.kb-body h2 { margin-top: 1.9em; font-size: 1.4rem; }
.kb-body h3 { margin-top: 1.5em; font-size: 1.18rem; }
.kb-body img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--bs-border-color); }
.kb-body iframe { max-width: 100%; }
.kb-body pre { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: 10px; overflow-x: auto; }
.kb-body code { background: #eef1f5; padding: .12em .4em; border-radius: 5px; font-size: .9em; }
.kb-body pre code { background: none; padding: 0; }
.kb-body table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.kb-body th, .kb-body td { border: 1px solid var(--bs-border-color); padding: .55rem .8rem; text-align: left; }
.kb-body th { background: #f8fafc; }
.kb-body blockquote { border-left: 4px solid var(--pf-blue); margin: 1em 0; padding: .35rem 1rem; color: var(--bs-secondary-color); }
.kb-body a { color: var(--pf-primary); }

/* Responsive video embeds (YouTube / Vimeo) */
.video-embed { position: relative; width: 100%; max-width: 960px; margin: 1.5rem 0; aspect-ratio: 16 / 9; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
@supports not (aspect-ratio: 16 / 9) {
    .video-embed { height: 0; padding-bottom: 56.25%; }
}

/* Tags + feedback */
.pf-tag { background: #eef2f7; color: var(--bs-secondary-color); font-size: .78rem; padding: .2rem .6rem; border-radius: 999px; }
.pf-feedback { border-top: 1px solid var(--bs-border-color); margin-top: 2rem; padding-top: 1.25rem; }

/* Search results */
.pf-result { padding: 1rem 0; border-bottom: 1px solid var(--bs-border-color); }
.pf-result:last-child { border-bottom: none; }
.pf-result .pf-result-title { font-size: 1.1rem; font-weight: 600; }
.pf-result .pf-snippet { color: var(--bs-secondary-color); margin: .35rem 0 0; }

/* Footer */
.pf-footer { background: #fff; border-top: 1px solid var(--bs-border-color); }
.pf-footer-head { font-family: 'Poppins'; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pf-grey); margin-bottom: .9rem; }
.pf-footer-links li { margin-bottom: .45rem; }
.pf-footer-links a { color: var(--bs-secondary-color); }
.pf-footer-links a:hover { color: var(--pf-primary); text-decoration: none; }