/* =====================================================================
   BOLD WEALTH CLIENT HUB — stylesheet for the Sections / Inner Sections build
   Add to Appearance › Customize › Additional CSS (recommended, loads last),
   your child theme's style.css, or Elementor Custom CSS.

   - Fonts and buttons follow your site; colours are set below.
   - Layout and small UI pieces (labels, cards, tags, tabs, callouts,
     tables, pop-up) are styled here.
   - Colours are fixed brand colours (navy #253E63, orange #E18757) set in
     the tokens below — not your Elementor Global Colours.
   - Every hub section carries the class "bw-hub"; everything is scoped to it.
   ===================================================================== */

/* ---------- 0. Tokens ---------- */
.bw-hub {
    /* Brand colours: navy for everything, orange for accents. Change them here only. */
    --bw-primary: #253E63;
    --bw-accent: #E18757;
    --bw-text: #253E63;
    --bw-muted: color-mix(in srgb, #253E63 72%, #fff);
    --bw-on-primary: #ffffff;
    --bw-soft: color-mix(in srgb, #E18757 50%, #fff);
    --bw-wash: color-mix(in srgb, #253E63 7%, #fff);
    --bw-paper: #faf8f4;
    --bw-sand: #f3efe7;
    --bw-stone: #d9d3c7;
    --bw-line: #e7e2d8;
    --bw-card: #ffffff;
    --bw-danger: #a94a3d;
    --bw-scrim: rgba(37, 62, 99, .55);
    --bw-radius: 8px;
    --bw-sticky-top: 128px;        /* height of the fixed site header (top bar + nav) */
    --kit-widget-spacing: 0px;
}

body.admin-bar .bw-hub { --bw-sticky-top: 160px; }  /* + 32px WordPress admin bar when logged in */

/* ---------- 1. Elementor resets inside the hub ---------- */
.bw-hub .elementor-widget:not(:last-child) { margin-bottom: 0; margin-block-end: 0; }
.bw-hub .elementor-widget-wrap { align-content: flex-start; }
.bw-hub .elementor-heading-title { margin: 0; }
.bw-hub .elementor-widget-text-editor :is(p, ul, ol, dl, table) { margin: 0; }
.bw-hub .elementor-widget-text-editor :is(p, ul, ol, dl, table) + :is(p, ul, ol, dl, table) { margin-top: 16px; }
html.bw-locked, html.bw-locked body { overflow: hidden; }
.bw-hub :focus-visible { outline: 2px solid var(--bw-accent); outline-offset: 3px; }
.bw-hub .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bw-hub .ic-sm { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- 2. Brand colours on headings, text and links (fonts still follow your site) ---------- */
.bw-hub .elementor-widget-heading .elementor-heading-title { color: var(--bw-primary); }
.bw-hub .elementor-widget-text-editor { color: var(--bw-text); }
.bw-hub em, .bw-hub .elementor-heading-title em { color: var(--bw-accent); }
.bw-hub .elementor-widget-text-editor a { color: var(--bw-primary); text-decoration: underline; text-decoration-color: var(--bw-soft); text-underline-offset: 3px; }
.bw-hub .elementor-widget-text-editor a:hover { color: var(--bw-accent); }
:where(.bw-hub) :where(h1, h2, h3) { text-wrap: balance; }

/* ---------- 3. Shared labels ---------- */
.bw-hub .bw-eyebrow .elementor-heading-title,
.bw-hub .bw-callout p:first-of-type, .bw-hub .bw-draft p:first-of-type, .bw-hub .bw-faq-eyebrow {
    font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.5; color: var(--bw-accent); margin: 0;
}
.bw-hub .bw-sub { font-size: 14px; line-height: 1.6; color: var(--bw-muted); }

/* ---------- 4. Landing ---------- */
.bw-hub.bw-landing { padding: clamp(40px, 7vw, 72px) clamp(16px, 5vw, 48px); }
.bw-hub .bw-col-access { padding-right: 48px; }
.bw-hub .bw-col-start { padding-left: 48px; border-left: 1px solid var(--bw-line); counter-reset: bw-sh; }
.bw-hub.bw-landing .bw-eyebrow { margin-bottom: 18px; }
.bw-hub.bw-landing .bw-title { margin-bottom: 10px; }
.bw-hub.bw-landing .bw-sub { margin-bottom: 28px; }
.bw-hub .bw-url { margin-top: 10px; text-align: center; font-size: 12px; letter-spacing: .02em; color: var(--bw-muted); }
.bw-hub .bw-helper { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--bw-line); font-size: 13px; line-height: 1.6; color: var(--bw-muted); }
.bw-hub .bw-helper ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.bw-hub .bw-helper strong { color: var(--bw-text); font-weight: 500; }

/* "Start here" rows (Icon Box widgets, no icon) — numbers are automatic */
.bw-hub .bw-sub + .bw-sh-item { border-top: 1px solid var(--bw-line); }
.bw-hub .bw-sh-item { position: relative; counter-increment: bw-sh; border-bottom: 1px solid var(--bw-line); }
.bw-hub .bw-sh-item.elementor-widget-icon-box .elementor-icon-box-wrapper {
    display: flex; flex-direction: row; align-items: center !important; gap: 14px; text-align: left;
    padding: 12px 4px; border-radius: 4px; transition: background .2s;
}
.bw-hub .bw-sh-item:hover .elementor-icon-box-wrapper { background: var(--bw-sand); }
.bw-hub .bw-sh-item .elementor-icon-box-wrapper::before {
    content: counter(bw-sh); flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--bw-primary); color: var(--bw-on-primary); font-size: 12px; font-weight: 600; line-height: 1; display: grid; place-items: center;
}
.bw-hub .bw-sh-item .elementor-icon-box-wrapper::after { content: "→"; flex: none; color: var(--bw-accent); font-size: 14px; transition: transform .2s; }
.bw-hub .bw-sh-item:hover .elementor-icon-box-wrapper::after { transform: translateX(2px); }
.bw-hub .bw-sh-item .elementor-icon-box-content { flex: 1 1 auto; min-width: 0; }
.bw-hub .bw-sh-item.elementor-widget-icon-box .elementor-icon-box-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--bw-primary); }
.bw-hub .bw-sh-item.elementor-widget-icon-box .elementor-icon-box-description { margin: 0; font-size: 12px; line-height: 1.5; color: var(--bw-muted); }

/* Whole row / card clickable */
.bw-hub :is(.bw-sh-item, .bw-rc) .elementor-icon-box-title a { color: inherit; text-decoration: none; }
.bw-hub :is(.bw-sh-item, .bw-rc) .elementor-icon-box-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---------- 5. Tab bar (HTML widget) + panels ---------- */
.bw-hub.bw-tabbar { position: sticky; top: var(--bw-sticky-top); z-index: 50; background: var(--bw-card); border-top: 1px solid var(--bw-line); border-bottom: 1px solid var(--bw-line); }
.bw-hub .bw-tabs { display: flex; justify-content: center; overflow-x: auto; scrollbar-width: none; padding: 0 16px; }
.bw-hub .bw-tabs::-webkit-scrollbar { display: none; }
.bw-hub .bw-tab, .bw-hub .filter, .bw-hub .bw-copy-btn, .bw-hub .bw-v-close, .bw-hub .bw-v-nav button {
    font-family: inherit; line-height: 1.5; margin: 0; box-shadow: none; cursor: pointer; min-height: 0; text-decoration: none;
    transition: color .2s, background .2s, border-color .2s;
}
.bw-hub .bw-tab {
    flex: 0 0 auto; padding: 16px 20px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
    color: var(--bw-muted); white-space: nowrap; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.bw-hub .bw-tab:hover, .bw-hub .bw-tab:focus { background: transparent; color: var(--bw-primary); }
.bw-hub .bw-tab.active { color: var(--bw-primary); border-bottom-color: var(--bw-primary); }

.bw-hub.bw-panel { padding: 44px clamp(16px, 5vw, 48px) 64px; }
body:not(.elementor-editor-active) .bw-hub.bw-panel.bw-is-hidden { display: none; }
.bw-hub.bw-panel .bw-eyebrow { margin-bottom: 6px; }
.bw-hub.bw-panel .bw-title { margin-bottom: 6px; }
.bw-hub.bw-panel .bw-sub { margin-bottom: 28px; }
body.elementor-editor-active .bw-hub.bw-panel::before {
    content: "Tab panel · " attr(id); display: block; max-width: 1008px; margin: 0 auto 16px; padding: 6px 12px; border-radius: 4px;
    background: var(--bw-wash); color: var(--bw-primary); font-size: 12px;
}

/* Toolbar (filters + search) */
.bw-hub.bw-panel .bw-toolbar { margin-bottom: 28px; }
.bw-hub .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bw-hub .toolbar > * { min-width: 0; }
.bw-hub .filters { display: flex; gap: 6px; flex-wrap: wrap; }
.bw-hub .filter { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--bw-stone); border-radius: 999px; background: transparent; color: var(--bw-muted); }
.bw-hub .filter:hover, .bw-hub .filter:focus { background: transparent; border-color: var(--bw-primary); color: var(--bw-primary); }
.bw-hub .filter.active { background: var(--bw-primary); border-color: var(--bw-primary); color: var(--bw-on-primary); }
.bw-hub .search { display: flex; align-items: center; gap: 8px; width: 220px; max-width: 100%; margin: 0; padding: 0 12px; border: 1px solid var(--bw-stone); border-radius: 4px; background: var(--bw-card); color: var(--bw-muted); }
.bw-hub .search:focus-within { border-color: var(--bw-accent); }
.bw-hub #bw-q { border: 0; outline: 0; box-shadow: none; background: transparent; font: inherit; font-size: 13px; color: var(--bw-text); padding: 8px 0; margin: 0; width: 100%; min-width: 0; min-height: 0; height: auto; border-radius: 0; }
.bw-hub .bw-empty { margin: 16px 0 0; font-size: 14px; }
.bw-hub .bw-empty[hidden] { display: none; }

/* ---------- 6. Resource cards (Icon Box widgets in an Inner Section) ---------- */
.bw-hub .bw-rc-grid .elementor-column > .elementor-widget-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.bw-hub .bw-rc { position: relative; width: auto; }
.bw-hub .bw-rc > .elementor-widget-container { height: 100%; }
.bw-hub .bw-rc.elementor-widget-icon-box .elementor-icon-box-wrapper {
    height: 100%; display: flex; flex-direction: column; align-items: flex-start !important; gap: 6px; text-align: left;
    padding: 22px; background: var(--bw-card); border: 1px solid var(--bw-line); border-radius: var(--bw-radius);
    transition: box-shadow .2s, border-color .2s;
}
.bw-hub .bw-rc:hover .elementor-icon-box-wrapper { border-color: var(--bw-soft); box-shadow: 0 4px 16px rgba(37, 62, 99, .08); }
.bw-hub .bw-rc.bw-hide { display: none !important; }
.bw-hub .bw-rc .elementor-icon-box-icon { margin: 0 0 10px; line-height: 1; }
.bw-hub .bw-rc.elementor-widget-icon-box .elementor-icon {
    width: 40px; height: 40px; padding: 0; border-radius: 4px; display: grid; place-items: center;
    background: var(--bw-wash); color: var(--bw-primary); fill: var(--bw-primary); font-size: 17px;
}
.bw-hub .bw-rc.elementor-widget-icon-box .elementor-icon :is(i, svg) { width: 1em; height: 1em; color: inherit; fill: currentColor; }
.bw-hub .bw-rc .elementor-icon-box-content { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.bw-hub .bw-rc.elementor-widget-icon-box .elementor-icon-box-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--bw-primary); }
.bw-hub .bw-rc.elementor-widget-icon-box .elementor-icon-box-description { margin: 0 0 6px; font-size: 12.5px; line-height: 1.55; color: var(--bw-muted); }

/* Tags are drawn from each card's category class (topic-…). Add "is-draft" to show "Pending review". */
.bw-hub .bw-rc .elementor-icon-box-content::after,
.bw-hub .bw-rc.is-draft .elementor-icon-box-wrapper::after {
    display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--bw-sand); color: var(--bw-muted);
    font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
}
.bw-hub .bw-rc .elementor-icon-box-content::after { margin-top: auto; }
.bw-hub .bw-rc.topic-start .elementor-icon-box-content::after { content: "Getting started"; }
.bw-hub .bw-rc.topic-investments .elementor-icon-box-content::after { content: "Your investments"; }
.bw-hub .bw-rc.topic-managing .elementor-icon-box-content::after { content: "Managing your accounts"; }
.bw-hub .bw-rc.topic-reference .elementor-icon-box-content::after { content: "Tax and reference"; }
.bw-hub .bw-rc.is-draft .elementor-icon-box-wrapper::after { content: "Pending review"; padding: 3px 9px; background: transparent; border: 1px solid var(--bw-danger); color: var(--bw-danger); }

/* ---------- 7. Questions (Toggle widgets) ---------- */
.bw-hub .bw-faq-label { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bw-line); }
.bw-hub .bw-title + .bw-faq-label { margin-top: 22px; padding-top: 0; border-top: 0; }
.bw-hub .bw-faq-acc .elementor-toggle-item { margin: 0; border: 0; border-bottom: 1px solid var(--bw-line); }
.bw-hub .bw-faq-acc .elementor-toggle-item:last-child { border-bottom: 0; }
.bw-hub .bw-faq-acc .elementor-toggle .elementor-tab-title {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0; padding: 11px 0;
    border: 0; background: transparent; cursor: pointer; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--bw-primary);
}
.bw-hub .bw-faq-acc .elementor-toggle .elementor-toggle-title { order: 1; color: inherit; font: inherit; text-decoration: none; }
.bw-hub .bw-faq-acc .elementor-toggle .elementor-toggle-icon { order: 2; float: none; width: auto; margin: 6px 0 0; color: var(--bw-accent); font-size: 11px; line-height: 1; }
.bw-hub .bw-faq-acc .elementor-toggle .elementor-toggle-icon svg { width: 11px; height: 11px; fill: currentColor; }
.bw-hub .bw-faq-acc .elementor-toggle .elementor-tab-content { padding: 0 28px 14px 0; border: 0; font-size: 14.5px; }
.bw-hub .bw-more { margin-top: 8px; font-size: 13px; font-weight: 500; }
.bw-hub .bw-more a { text-decoration: none; }

/* FAQ inside the FAQ guide pop-up (built by the script) */
.bw-hub .bw-faq.in-article { display: grid; width: 100%; }
.bw-hub .bw-faq-group { display: grid; padding: 18px 0; border-top: 1px solid var(--bw-line); }
.bw-hub .bw-faq details { border-bottom: 1px solid var(--bw-line); }
.bw-hub .bw-faq-group details:last-of-type { border-bottom: 0; }
.bw-hub .bw-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--bw-primary); }
.bw-hub .bw-faq summary::-webkit-details-marker { display: none; }
.bw-hub .bw-plus { position: relative; width: 12px; height: 12px; flex-shrink: 0; margin-top: 6px; }
.bw-hub .bw-plus::before, .bw-hub .bw-plus::after { content: ""; position: absolute; left: 0; top: 5.25px; width: 12px; height: 1.5px; background: var(--bw-accent); transition: transform .2s; }
.bw-hub .bw-plus::after { transform: rotate(90deg); }
.bw-hub details[open] .bw-plus::after { transform: rotate(0); }
.bw-hub .bw-faq-answer { padding: 0 28px 14px 0; font-size: 14.5px; }
.bw-hub .bw-faq-answer p { margin: 0; }
.bw-hub .bw-faq-more { justify-self: start; margin-top: 8px; font-size: 13px; font-weight: 500; text-decoration: none; }

/* ---------- 8. Contact ---------- */
.bw-hub .bw-rows dl { display: grid; grid-template-columns: auto minmax(0, 1fr); max-width: 560px; margin-bottom: 28px; }
.bw-hub .bw-rows :is(dt, dd) { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--bw-line); font-size: 14px; }
.bw-hub .bw-rows dt { color: var(--bw-muted); padding-right: 16px; font-weight: 400; }
.bw-hub .bw-rows dd { text-align: right; font-weight: 500; color: var(--bw-text); overflow-wrap: anywhere; }
.bw-hub .bw-rows dt:last-of-type, .bw-hub .bw-rows dd:last-of-type { border-bottom: 0; }
.bw-hub .bw-copy-btn { margin-left: 10px; padding: 3px 10px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--bw-primary); background: transparent; border: 1px solid var(--bw-stone); border-radius: 999px; vertical-align: 1px; }
.bw-hub .bw-copy-btn:hover, .bw-hub .bw-copy-btn:focus { background: var(--bw-wash); color: var(--bw-primary); }

/* ---------- 9. Guides (one section each) ---------- */
/* Hidden on the live page — they open in the pop-up. Visible in the editor so they can be edited. */
body:not(.elementor-editor-active) .bw-hub.bw-guide:not(.bw-in-viewer) { display: none; }
body.elementor-editor-active .bw-hub.bw-guide { margin: 24px auto; padding: 28px 16px; border: 1px dashed var(--bw-stone); background: var(--bw-paper); }
body.elementor-editor-active .bw-hub.bw-guide::before {
    content: "Guide · opens in a pop-up · keep this CSS ID: " attr(id); display: block; max-width: 820px; margin: 0 auto 16px;
    padding: 6px 12px; border-radius: 4px; background: var(--bw-wash); color: var(--bw-primary); font-size: 12px;
}
body:not(.elementor-editor-active) .bw-hub.bw-script-section { height: 0; overflow: hidden; }
body.elementor-editor-active .bw-hub .bw-hub-script::before { content: "Hub script (tabs, filters, search, pop-up) — keep this widget"; font-size: 12px; color: var(--bw-muted); }

.bw-hub.bw-guide > .elementor-container > .elementor-column > .elementor-widget-wrap { row-gap: 16px; }
.bw-hub.bw-guide .elementor-widget-text-editor { font-size: 15px; }
.bw-hub.bw-guide strong { color: var(--bw-primary); font-weight: 500; }

/* Guide header (Inner Section: text | illustration) */
.bw-hub .bw-g-head { padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--bw-line); }
.bw-hub .bw-g-head > .elementor-container { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 24px; align-items: center; }
.bw-hub .bw-g-head > .elementor-container > .elementor-column { width: auto; max-width: none; }
.bw-hub .bw-g-head .elementor-widget-wrap { row-gap: 8px; }
.bw-hub .bw-g-lede { font-size: 15.5px; font-style: italic; font-weight: 300; }
.bw-hub .bw-g-art { padding: 6px; border-radius: var(--bw-radius); background: var(--bw-sand); }
.bw-hub .bw-g-art svg { display: block; width: 100%; height: auto; }
/* Recolour the illustrations' original light blues to the navy/orange palette (no need to edit the SVGs) */
.bw-hub .bw-g-art [stroke="#6d98ca"] { stroke: var(--bw-accent); }
.bw-hub .bw-g-art [stroke="#a6c0dd"] { stroke: color-mix(in srgb, #253E63 30%, #fff); }
.bw-hub .bw-g-art [fill="#a6c0dd"] { fill: color-mix(in srgb, #E18757 35%, #fff); }
.bw-hub .bw-g-art [fill="#e6eef7"] { fill: color-mix(in srgb, #253E63 8%, #fff); }
/* Guide headings sized for the pop-up (your theme's H2/H3 are display-sized) */
.bw-hub .bw-g-title .elementor-heading-title { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; }
.bw-hub .bw-g-h3 .elementor-heading-title { font-size: 21px; line-height: 1.3; }
.bw-hub .bw-g-h3 { margin-top: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bw-line); }
.bw-hub .bw-g-foot { padding-top: 16px; border-top: 1px solid var(--bw-line); font-size: 13.5px; color: var(--bw-muted); }
.bw-hub .bw-note { font-size: 13px; font-style: italic; color: var(--bw-muted); }

/* Bulleted lists → navy dots */
.bw-hub.bw-guide .elementor-widget-text-editor ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.bw-hub.bw-guide .elementor-widget-text-editor ul li { position: relative; padding-left: 20px; }
.bw-hub.bw-guide .elementor-widget-text-editor ul li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--bw-primary); }

/* Numbered lists → numbered steps (bold text at the start of an item is its title) */
.bw-hub.bw-guide .elementor-widget-text-editor ol { list-style: none; padding: 0; counter-reset: bw-step; }
.bw-hub.bw-guide .elementor-widget-text-editor ol li { position: relative; counter-increment: bw-step; padding: 14px 0 14px 44px; border-top: 1px solid var(--bw-line); }
.bw-hub.bw-guide .elementor-widget-text-editor ol li:last-child { border-bottom: 1px solid var(--bw-line); }
.bw-hub.bw-guide .elementor-widget-text-editor ol li::before {
    content: counter(bw-step); position: absolute; left: 0; top: 15px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--bw-primary); color: var(--bw-on-primary); font-size: 12.5px; font-weight: 600; line-height: 1; display: grid; place-items: center;
}
.bw-hub.bw-guide .elementor-widget-text-editor ol li > strong:first-child { display: block; }
.bw-hub .bw-g-h3 + .elementor-widget-text-editor ol:first-child li:first-child { border-top: 0; }

/* Definition lists (term | description) */
.bw-hub.bw-guide .elementor-widget-text-editor dl { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); border-bottom: 1px solid var(--bw-line); }
.bw-hub.bw-guide .elementor-widget-text-editor :is(dt, dd) { margin: 0; padding: 14px 0; border-top: 1px solid var(--bw-line); }
.bw-hub.bw-guide .elementor-widget-text-editor dt { font-weight: 500; line-height: 1.5; color: var(--bw-primary); }
.bw-hub.bw-guide .elementor-widget-text-editor dd { padding-left: 20px; }
.bw-hub .bw-g-h3 + .elementor-widget-text-editor dl:first-child > :is(dt, dd):nth-child(-n+2) { border-top: 0; padding-top: 4px; }
.bw-hub .bw-gloss dl { border-bottom: 0; }
.bw-hub.bw-guide .bw-gloss :is(dt, dd) { padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
.bw-hub .bw-gloss-label { margin-top: 8px; }

/* Callouts and compliance drafts: the first paragraph is the label */
.bw-hub .bw-callout { padding: 18px 22px; background: var(--bw-sand); border-left: 3px solid var(--bw-primary); border-radius: 0 var(--bw-radius) var(--bw-radius) 0; font-size: 14.5px; }
.bw-hub .bw-callout p:first-of-type { color: var(--bw-primary); }
.bw-hub.bw-guide .bw-callout p + p, .bw-hub.bw-guide .bw-draft p + p { margin-top: 6px; }
.bw-hub .bw-draft { padding: 16px 20px; border: 1px solid var(--bw-danger); border-radius: var(--bw-radius); color: var(--bw-danger); font-size: 14px; }
.bw-hub .bw-draft p:first-of-type { color: var(--bw-danger); }

/* Tables */
.bw-hub .bw-table { overflow-x: auto; border: 1px solid var(--bw-line); border-radius: var(--bw-radius); background: var(--bw-card); }
.bw-hub .bw-table table { width: 100%; min-width: 520px; margin: 0; border: 0; border-collapse: collapse; font-size: 13.5px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.bw-hub .bw-table :is(th, td) { text-align: left; vertical-align: top; padding: 10px 14px; border: 0; border-top: 1px solid var(--bw-line); background: transparent; }
.bw-hub .bw-table thead th { border-top: 0; background: var(--bw-primary); color: var(--bw-on-primary); font-size: 12.5px; font-weight: 500; }
.bw-hub .bw-table tbody th { color: var(--bw-primary); font-weight: 500; }
.bw-hub .bw-table tr.grp th { padding: 7px 14px; background: var(--bw-wash); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- 10. Guide pop-up ---------- */
.bw-hub.bw-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bw-scrim); }
.bw-hub.bw-overlay[hidden] { display: none; }
body.admin-bar .bw-hub.bw-overlay { top: 32px; }   /* keep the pop-up below the WordPress admin bar */
.bw-hub .bw-viewer { width: 100%; max-width: 820px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--bw-radius); background: var(--bw-paper); box-shadow: 0 12px 36px rgba(37, 62, 99, .12); animation: bw-up .2s cubic-bezier(.22, .61, .36, 1); }
@keyframes bw-up { from { opacity: .5; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bw-hub .bw-v-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; background: var(--bw-primary); }
.bw-hub .bw-v-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--bw-on-primary); }
.bw-hub .bw-v-close { flex-shrink: 0; padding: 6px 16px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--bw-on-primary); background: transparent; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; }
.bw-hub .bw-v-close:hover, .bw-hub .bw-v-close:focus { background: rgba(255, 255, 255, .1); color: var(--bw-on-primary); border-color: rgba(255, 255, 255, .6); }
.bw-hub .bw-v-body { flex: 1; overflow-y: auto; outline: none; padding: clamp(24px, 5vw, 44px); color: var(--bw-text); }
.bw-hub .bw-v-body .bw-guide { margin: 0; padding: 0; border: 0; background: transparent; }
.bw-hub .bw-v-nav { display: flex; justify-content: space-between; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--bw-line); background: var(--bw-card); }
.bw-hub .bw-v-nav button { display: inline-flex; gap: 6px; align-items: center; padding: 4px 0; text-align: left; font-size: 13px; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--bw-primary); background: transparent; border: 0; border-radius: 0; }
.bw-hub .bw-v-nav button:hover, .bw-hub .bw-v-nav button:focus { background: transparent; color: var(--bw-accent); }
.bw-hub .bw-v-nav button[disabled] { visibility: hidden; }

/* ---------- 11. Responsive ---------- */
@media (max-width: 1024px) {
    .bw-hub.bw-tabbar { position: relative; top: auto; }   /* header height varies on tablet/mobile: don't stick */
}
@media (max-width: 782px) {
    body.admin-bar .bw-hub.bw-overlay { top: 46px; }
}
@media (max-width: 767px) {
    .bw-hub .bw-col-access { padding-right: 0; padding-bottom: 40px; }
    .bw-hub .bw-col-start { padding-left: 0; padding-top: 40px; border-left: 0; border-top: 1px solid var(--bw-line); }
    .bw-hub .bw-tabs { justify-content: flex-start; }
    .bw-hub.bw-overlay { padding: 0; align-items: stretch; }
    .bw-hub .bw-viewer { max-height: none; height: 100%; border-radius: 0; }
}
@media (max-width: 520px) {
    .bw-hub .bw-g-head > .elementor-container { grid-template-columns: minmax(0, 1fr); }
    .bw-hub .bw-g-head-art { display: none; }
    .bw-hub .toolbar > * { flex: 1 1 100%; }
    .bw-hub .filters { flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; overflow: visible; }
    .bw-hub .filter { white-space: nowrap; padding: 6px 12px; font-size: 10.5px; letter-spacing: .06em; }
    .bw-hub .search { width: 100%; }
    .bw-hub.bw-guide .elementor-widget-text-editor dl { grid-template-columns: minmax(0, 1fr); }
    .bw-hub.bw-guide .elementor-widget-text-editor dd { border-top: 0; padding-top: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .bw-hub .bw-viewer { animation: none; }
    .bw-hub * { transition: none !important; }
}