/*
 * Superdose knowledge hub — hand-written, loaded after brand.css and
 * overrides.css.
 *
 * NOT in brand.css: that file is concatenated from the capture by
 * download-assets.cjs and is rewritten wholesale every re-capture, so anything
 * put there is lost. NOT in overrides.css either: overrides.css exists to undo
 * frozen layout in the captured chrome, and this page has no captured markup at
 * all — it is the one hand-authored page in the brand.
 *
 * Every selector below is scoped to `.knowledge-hub`, the root class on the
 * hub's own <main>. The other pages in this brand are replayed snapshots of the
 * retailer's real HTML; an unscoped rule here would land inside them.
 */

.knowledge-hub {
    --kh-navy: #1e4786;
    --kh-ink: #1a1a1a;
    --kh-muted: #5c6470;
    --kh-hairline: #dcdfe4;
    --kh-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    box-sizing: border-box;
    max-width: 820px;
    margin: 0 auto;
    padding: 64px 24px 96px;
    color: var(--kh-ink);
    line-height: 1.6;
}

.knowledge-hub *,
.knowledge-hub *::before,
.knowledge-hub *::after {
    box-sizing: inherit;
}

.knowledge-hub a {
    color: var(--kh-navy);
}

/* ---- Header ------------------------------------------------------------- */

.knowledge-hub .pf-hub-header {
    margin-bottom: 56px;
}

.knowledge-hub .pf-hub-eyebrow {
    margin: 0 0 12px;
    font-family: var(--kh-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kh-muted);
}

.knowledge-hub .pf-hub-headline {
    margin: 0 0 20px;
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.knowledge-hub .pf-hub-standfirst {
    margin: 0;
    max-width: 60ch;
    font-size: 17px;
    color: #33383f;
}

/* ---- One research pair -------------------------------------------------- */

.knowledge-hub .pf-hub-pair {
    margin: 0 0 72px;
}

.knowledge-hub .pf-hub-pair:last-child {
    margin-bottom: 0;
}

/* Hairline card: the independent piece is the item; the reply below is
   attached to it, so only this half is boxed. */
.knowledge-hub .pf-hub-independent {
    border: 1px solid var(--kh-hairline);
    border-radius: 4px;
    padding: 32px;
    background: #fff;
}

.knowledge-hub .pf-hub-title {
    margin: 0 0 12px;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.25;
}

.knowledge-hub .pf-hub-title--response {
    font-size: clamp(19px, 2.4vw, 23px);
}

.knowledge-hub .pf-hub-dek {
    margin: 0 0 16px;
    max-width: 62ch;
    font-size: 16px;
    color: #3d434b;
}

/* ---- Badges and compliance lines ---------------------------------------- */

/* Small and quiet, never faint: these carry the funding claim. #5c6470 on
   white is ~5.9:1, comfortably past AA at this size. */
.knowledge-hub .pf-hub-badge {
    margin: 0 0 14px;
    font-family: var(--kh-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.knowledge-hub .pf-hub-badge--independent {
    color: var(--kh-navy);
}

.knowledge-hub .pf-hub-badge--response {
    color: var(--kh-muted);
}

.knowledge-hub .pf-hub-disclaimer {
    margin: 0 0 24px;
    padding-top: 14px;
    border-top: 1px solid var(--kh-hairline);
    font-family: var(--kh-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: var(--kh-muted);
}

.knowledge-hub .pf-hub-response-disclosure {
    margin: 20px 0 0;
    font-family: var(--kh-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: var(--kh-muted);
}

/* ---- Format menu -------------------------------------------------------- */

.knowledge-hub .pf-hub-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
    margin: 0 0 32px;
    padding: 20px 0;
    border-top: 1px solid var(--kh-hairline);
    border-bottom: 1px solid var(--kh-hairline);
}

.knowledge-hub .pf-hub-menu-voice {
    flex: 1 1 240px;
    min-width: 0;
}

.knowledge-hub .pf-hub-menu-heading {
    margin: 0 0 6px;
    font-family: var(--kh-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kh-ink);
}

.knowledge-hub .pf-hub-menu-disclosure {
    display: block;
    margin: 0 0 10px;
    font-family: var(--kh-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: var(--kh-muted);
}

.knowledge-hub .pf-hub-menu-slots {
    margin: 0;
    padding: 0;
    list-style: none;
}

.knowledge-hub .pf-hub-menu-slot {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    font-size: 15px;
}

/* An unbuilt format stays visible and inert, so the shopper can see what a
   piece does and does not have. Dimmed, not hidden — and not so dim it
   disappears. */
.knowledge-hub .pf-hub-menu-slot[data-available='no'] {
    color: #8b929c;
}

.knowledge-hub .pf-hub-menu-meta {
    font-family: var(--kh-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--kh-muted);
}

/* ---- Bodies ------------------------------------------------------------- */

.knowledge-hub .pf-hub-body {
    margin-top: 8px;
}

.knowledge-hub .pf-hub-body img {
    max-width: 100%;
    height: auto;
}

/* No card border, a coloured left rule — the reply is attached to the piece
   above it, not a second item in a list. */
.knowledge-hub .pf-hub-response {
    margin: 28px 0 0 32px;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--kh-navy);
}

.knowledge-hub .pf-hub-empty {
    margin: 0;
    padding: 48px 0;
    font-size: 16px;
    color: var(--kh-muted);
}

/* ---- Narrow screens ------------------------------------------------------
 *
 * The captured chrome around this page is responsive; a fixed inset here would
 * push the hub past the viewport on a phone. Drop the card padding, un-indent
 * the reply, and let the left rule sit flush with the piece it answers.
 */

@media screen and (max-width: 767px) {
    .knowledge-hub {
        padding: 40px 16px 64px;
    }

    .knowledge-hub .pf-hub-header {
        margin-bottom: 36px;
    }

    .knowledge-hub .pf-hub-independent {
        padding: 20px;
    }

    .knowledge-hub .pf-hub-pair {
        margin-bottom: 48px;
    }

    .knowledge-hub .pf-hub-menu {
        gap: 20px;
    }

    .knowledge-hub .pf-hub-response {
        margin-left: 0;
        padding-left: 16px;
    }
}