/* ==========================================================================
   Calculator page + /calculators/ hub (CPT calculator)
   Enqueued only on calculator pages (functions.php). Page frame only — the
   widget's own styles ship with the finbedrock-calculators bundle
   (plugins/finbedrock-calculators/src/styles/calculator.css).
   ========================================================================== */

.fb-calc,
.fb-calc-hub {
    --calc-surface: #ffffff;
    --calc-fg: #14213a;
    --calc-muted: #5a6578;
    --calc-faint: #6f7888;
    --calc-line: #e3e7ee;
    --calc-brand: #1a4fa0;
}

/* Dark palette: only when the site itself runs a dark palette (Kadence colour
   switch / data-theme hook), as on research pages. */
.color-switch-dark .fb-calc,
[data-theme="dark"] .fb-calc,
.color-switch-dark .fb-calc-hub,
[data-theme="dark"] .fb-calc-hub {
    --calc-surface: #191d25;
    --calc-fg: #e8ecf3;
    --calc-muted: #a3acbb;
    --calc-faint: #8f98a8;
    --calc-line: #2a303b;
    --calc-brand: #5b8ee0;
}

/* --- header ------------------------------------------------------------ */
.fb-calc-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--calc-brand);
    margin: 0 0 6px;
}
.fb-calc-lede {
    color: var(--calc-muted);
    font-size: 1.05rem;
    max-width: 62ch;
    margin: 10px 0 0;
}

/* --- widget slot: right under the lede, above the fold ------------------ */
.fb-calc-widget { margin: 20px 0 32px; }
.fb-calc-missing {
    padding: 14px 16px;
    border: 1px solid var(--calc-line);
    border-radius: 8px;
    color: var(--calc-muted);
}

/* --- methodology accordion --------------------------------------------- */
.fb-calc-acc {
    border: 1px solid var(--calc-line);
    border-radius: 10px;
    background: var(--calc-surface);
    margin: 32px 0;
}
.fb-calc-acc summary { cursor: pointer; font-weight: 600; padding: 12px 16px; }
.fb-calc-acc summary:focus-visible { outline: 2px solid var(--calc-brand); outline-offset: 2px; }
.fb-calc-acc__body { padding: 0 16px 14px; font-size: 0.9375rem; }
.fb-calc-acc__sub { font-size: 1rem; margin: 16px 0 6px; }
.fb-calc-sources { margin: 0; padding-left: 1.2em; }
.fb-calc-sources li { margin: 4px 0; }

/* --- cite or link -------------------------------------------------------- */
.fb-calc-cite { margin: 32px 0; }
.fb-calc-cite h2 { font-size: 1.25rem; margin: 0 0 8px; }
.fb-calc-cite p { margin: 0 0 10px; }
.fb-calc-cite__line {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--calc-line);
    border-radius: 8px;
    background: var(--calc-surface);
    color: var(--calc-fg);
    font-size: 0.875rem;
    white-space: normal;
    word-break: break-word;
    margin: 0 0 10px;
}
.fb-calc-cite__terms { color: var(--calc-muted); font-size: 0.875rem; }

/* --- hub (/calculators/) ----------------------------------------------- */
.fb-calc-hub { max-width: 1100px; margin: 0 auto; padding: 0 16px 60px; }
.fb-calc-hub__header { text-align: center; padding: 40px 0 32px; }
.fb-calc-hub__header h1 { margin: 0 0 10px; }
.fb-calc-hub__header p:last-child { color: var(--calc-muted); max-width: 600px; margin: 0 auto; }
.fb-calc-hub__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.fb-calc-hub__card { border: 1px solid var(--calc-line); border-radius: 10px; overflow: hidden; background: var(--calc-surface); }
.fb-calc-hub__thumb img { display: block; width: 100%; height: auto; }
.fb-calc-hub__body { padding: 16px; }
.fb-calc-hub__body h2 { font-size: 1.15rem; margin: 0 0 6px; }
.fb-calc-hub__body h2 a { text-decoration: none; }
.fb-calc-hub__cta { margin: 10px 0 0; font-weight: 600; }
.fb-calc-hub__empty { text-align: center; padding: 60px 0; color: var(--calc-muted); }