/* ==========================================================================
   FabCon Europe 2026 resources page (/fabcon/)

   Loaded only on this page (functions.php, "FabCon Europe 2026 resources
   page"). Enqueued unminified on purpose, as fabops.css and
   fea-qualification.css are: the surgical deploy ships only committed files.

   The page is built on the shared page kit in main.css (.onyx-page,
   .onyx-page__hero, .onyx-sec, .onyx-h2, .onyx-eyebrow, .onyx-card,
   .onyx-cta-row, .onyx-cta-primary, .onyx-cta-secondary) and the global
   tokens in critical.css (--onyx-ink, --onyx-fog, --lt-*). This file adds
   only the page-specific pieces:

     .fabcon-hero__*     hero additions
     .fabcon-intro__*    intro grid and basis note
     .fabcon-calc*       the reference workload cost calculator
     .fabcon-paper__*    companion paper head and read-online body
     .fabcon-sources__*  sources and dating
     .fabcon-table       table wrapper shared by the paper and the sources
     .fabcon-note*       educational and trademark note

   Calculator conventions follow roi-calculator.css (white step cards on an
   off-white band, bold right-aligned number inputs with a gold focus ring,
   gold active toggle, navy highlight card for the key result) using the
   current kit tokens.
   ========================================================================== */

/* ----- Header without the booking button -----
   header.php suppresses "Book a Strategy Call" on this page (organiser
   condition). Without it the primary items sit further right, and the last two
   left-anchored dropdowns (hidden, but still laid out) would run past the
   viewport and cause horizontal scroll at 1440 px. Anchor them to the right on
   this page only; body class page-fabcon comes from onyx_body_classes(). */
.page-fabcon .onyx-nav .onyx-nav__menu > li:nth-last-child(-n+2) > .onyx-dropdown {
    left: auto;
    right: 0;
    transform-origin: top right;
}

.fabcon-page {
    --fabcon-muted: var(--lt-muted, #5e6775);
    --fabcon-unknown: #9A3412; /* AA on white and on fog */
    --fabcon-radius: 16px;     /* matches .onyx-card */
}

.fabcon-page section[id] {
    scroll-margin-top: var(--onyx-sticky-offset, 100px);
}

/* ----- Hero ----- */

.fabcon-hero .onyx-page__sub {
    max-width: 68ch;
    margin-bottom: 18px;
}

.fabcon-hero__free {
    margin: 0 0 30px;
    font-weight: 700;
    font-size: clamp(16px, 1.6vw, 18px);
    color: var(--onyx-gold, #FFBB09);
}

/* ----- Intro ----- */

.fabcon-intro .onyx-h2 {
    max-width: none;
}

.fabcon-intro__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 28px 0 36px;
}

@media (min-width: 768px) {
    .fabcon-intro__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.fabcon-intro__card {
    border-top: 4px solid var(--onyx-gold, #FFBB09);
}

.fabcon-intro__card .onyx-card__title {
    margin-top: 0;
}

.fabcon-intro__card .onyx-card__title a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s var(--onyx-ease);
}

.fabcon-intro__card .onyx-card__title a:hover {
    border-bottom-color: var(--onyx-gold, #FFBB09);
}

.fabcon-intro__card .onyx-card__desc {
    font-size: 15.5px;
    margin: 0;
}

.fabcon-intro__basis {
    max-width: 72ch;
    font-size: 16px;
    line-height: 1.68;
    color: var(--lt-body);
}

.fabcon-intro__basis p {
    margin: 0 0 12px;
}

.fabcon-intro__rule {
    color: var(--lt-ink);
    font-size: 18px;
}

/* ==========================================================================
   Calculator
   ========================================================================== */

.fabcon-calc {
    color: var(--lt-body);
    font-size: 16px;
    line-height: 1.55;
}

.fabcon-calc__header {
    margin-bottom: 28px;
}

.fabcon-calc__title {
    max-width: none;
    margin-bottom: 12px;
}

.fabcon-calc__sub {
    color: var(--fabcon-muted);
    margin: 0 0 18px;
    max-width: 72ch;
}

.fabcon-calc__notice {
    background: #FFF8E1;
    border-left: 4px solid var(--onyx-gold, #FFBB09);
    border-radius: 8px;
    padding: 14px 18px;
    color: var(--lt-ink);
    max-width: 72ch;
}

/* ----- Layout: inputs beside results on wide screens ----- */

.fabcon-calc__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

@media (min-width: 1024px) {
    .fabcon-calc__grid {
        grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    }

    .fabcon-calc__inputs {
        position: sticky;
        top: var(--onyx-sticky-offset, 100px);
        max-height: calc(100vh - var(--onyx-sticky-offset, 100px) - 16px);
        overflow-y: auto;
        padding-right: 4px;
    }
}

.fabcon-calc__inputs {
    margin: 0;
}

.fabcon-calc__results {
    min-width: 0;
}

/* ----- Panels (the roi-step card, on the kit's card tokens) ----- */

.fabcon-calc__panel {
    background: var(--lt-card, #fff);
    border: 1px solid var(--lt-card-bd);
    border-radius: var(--fabcon-radius);
    box-shadow: var(--lt-card-sh);
    padding: 20px 22px 22px;
    margin: 0 0 20px;
    min-width: 0;
}

.fabcon-calc__legend {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 10px;
    font-family: var(--onyx-font-display);
    font-weight: 800;
    font-size: 17px;
    color: var(--lt-ink);
}

.fabcon-calc__legend + * {
    clear: both;
}

.fabcon-calc__panel-title {
    font-family: var(--onyx-font-display);
    font-weight: 800;
    font-size: 19px;
    line-height: 1.3;
    color: var(--lt-ink);
    margin: 0 0 14px;
}

.fabcon-calc__subhead {
    font-family: var(--onyx-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--lt-accent);
    margin: 16px 0 6px;
}

.fabcon-calc__panel p {
    margin: 0 0 10px;
}

/* ----- Fields (roi-input-number) ----- */

.fabcon-calc__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
}

.fabcon-calc__field label {
    flex: 1 1 auto;
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--lt-body);
    cursor: pointer;
}

.fabcon-calc__field input,
.fabcon-calc__field select {
    flex: 0 0 9.5rem;
    width: 9.5rem;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    font-family: var(--onyx-font-family);
    font-size: 16px;
    font-weight: 700;
    color: var(--onyx-text-heading, #1F273B);
    background: #fff;
    border: 1px solid #B8BFCC;
    border-radius: var(--onyx-btn-radius, 8px);
    font-variant-numeric: tabular-nums;
}

.fabcon-calc__field input {
    text-align: right;
}

.fabcon-calc__field input:focus,
.fabcon-calc__field select:focus {
    outline: 2px solid var(--onyx-gold, #FFBB09);
    outline-offset: 2px;
    border-color: var(--onyx-gold, #FFBB09);
}

.fabcon-calc__field input::placeholder {
    color: #6B7280;
    font-weight: 400;
    opacity: 1;
}

.fabcon-calc__field--wide {
    flex-wrap: wrap;
}

.fabcon-calc__field--wide select {
    flex: 1 1 100%;
    width: 100%;
}

/* ----- Presets (roi-scenario-btn) ----- */

.fabcon-calc__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}

.fabcon-calc__preset {
    min-height: 44px;
    padding: 8px 18px;
    font-family: var(--onyx-font-family);
    font-size: 15px;
    font-weight: 700;
    color: var(--lt-body);
    background: transparent;
    border: 2px solid var(--onyx-border-light, #E0E0E0);
    border-radius: var(--onyx-btn-radius, 8px);
    cursor: pointer;
    transition: background var(--onyx-transition), color var(--onyx-transition), border-color var(--onyx-transition);
}

.fabcon-calc__preset:hover {
    border-color: var(--onyx-gold, #FFBB09);
    color: var(--onyx-navy, #1F273B);
}

.fabcon-calc__preset.is-active {
    background: var(--onyx-gold, #FFBB09);
    border-color: var(--onyx-gold, #FFBB09);
    color: var(--onyx-navy, #1F273B);
}

/* ----- Chips (demand chain, concurrency) ----- */

.fabcon-calc__chain {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.fabcon-calc__chip {
    background: var(--onyx-fog, #F5F7FA);
    border: 1px solid var(--lt-line);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
}

.fabcon-calc__chip-v {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 900;
    line-height: 1.2;
    color: var(--lt-ink);
    font-variant-numeric: tabular-nums;
}

.fabcon-calc__chip-l {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--fabcon-muted);
}

/* The denominator: the roi-results__card--tier treatment. */
.fabcon-calc__chip--key {
    background: var(--onyx-ink, #0E1320);
    border-color: var(--onyx-ink, #0E1320);
}

.fabcon-calc__chip--key .fabcon-calc__chip-v {
    color: var(--onyx-gold, #FFBB09);
}

.fabcon-calc__chip--key .fabcon-calc__chip-l {
    color: var(--onyx-text-white-80, rgba(255, 255, 255, 0.8));
}

/* ----- Live summary ----- */

.fabcon-calc__summary {
    background: var(--onyx-ink, #0E1320);
    color: #fff;
    border-radius: var(--fabcon-radius);
    padding: 16px 22px;
    margin: 0 0 20px;
}

.fabcon-calc__summary p {
    margin: 0;
}

.fabcon-calc__summary strong {
    color: var(--onyx-gold, #FFBB09);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fabcon-calc__summary-label {
    font-weight: 700;
}

/* ----- Route cards ----- */

.fabcon-calc__routes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 1200px) {
    .fabcon-calc__routes {
        grid-template-columns: 1fr 1fr;
    }
}

.fabcon-calc__route {
    background: var(--lt-card, #fff);
    border: 1px solid var(--lt-card-bd);
    border-top: 5px solid var(--onyx-gold, #FFBB09);
    border-radius: var(--fabcon-radius);
    box-shadow: var(--lt-card-sh);
    padding: 20px 22px;
    min-width: 0;
}

.fabcon-calc__route--b {
    border-top-color: var(--lt-accent, #12796B);
}

.fabcon-calc__route-title {
    font-family: var(--onyx-font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--lt-ink);
    margin: 0 0 6px;
}

.fabcon-calc__who {
    font-size: 14.5px;
    color: var(--fabcon-muted);
    margin: 0 0 12px;
}

.fabcon-calc__who strong {
    color: var(--lt-ink);
}

/* ----- Tables (roi-comparison__table) ----- */

.fabcon-calc__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 8px;
}

.fabcon-calc__table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border: 0;
    font-size: 14.5px;
}

.fabcon-calc__table th,
.fabcon-calc__table td {
    padding: 8px 8px;
    border: 0;
    border-bottom: 1px solid var(--lt-line);
    text-align: left;
    vertical-align: top;
    font-weight: 400;
    color: var(--lt-body);
    background: transparent;
}

.fabcon-calc__table thead th {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--onyx-text-heading, #1F273B);
    border-bottom: 2px solid var(--onyx-border-light, #E0E0E0);
}

.fabcon-calc__table--grid tbody tr:nth-child(even) td {
    background: var(--onyx-bg-off-white, #F7F8FA);
}

.fabcon-calc__table .n {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fabcon-calc__table--grid td:first-child {
    color: var(--lt-ink);
}

.fabcon-calc__table tr.is-selected td {
    font-weight: 700;
    background: #FFF8E1;
    color: var(--lt-ink);
}

.fabcon-calc__total th,
.fabcon-calc__total td {
    font-weight: 700;
    color: var(--lt-ink);
    border-top: 2px solid var(--lt-ink);
}

.fabcon-calc__per th,
.fabcon-calc__per td {
    font-weight: 900;
    font-size: 17px;
    color: var(--lt-ink);
    background: #FFF8E1;
}

.fabcon-calc__route--b .fabcon-calc__per th,
.fabcon-calc__route--b .fabcon-calc__per td {
    background: #E7F4F1;
}

.fabcon-calc__unk td {
    color: var(--fabcon-unknown);
    font-size: 13.5px;
}

/* ----- Capacity bar ----- */

.fabcon-calc__barrow td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.fabcon-calc__barlab {
    margin-bottom: 5px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--lt-ink);
}

.fabcon-calc__barlab.is-over {
    color: var(--fabcon-unknown);
}

.fabcon-calc__bar {
    position: relative;
    height: 22px;
    margin: 0 0 6px;
    overflow: hidden;
    background: var(--onyx-fog, #F5F7FA);
    border: 1px solid #C9CFDA;
    border-radius: 6px;
}

.fabcon-calc__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--onyx-navy, #1F273B);
    transition: width 0.25s var(--onyx-ease);
}

.fabcon-calc__fill.is-over {
    background: var(--fabcon-unknown);
}

.fabcon-calc__ceil {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 3px dashed var(--onyx-gold, #FFBB09);
}

/* ----- Band and small print ----- */

.fabcon-calc__band {
    margin: 20px 0;
    padding: 14px 22px;
    text-align: center;
    font-weight: 900;
    font-size: 17px;
    color: var(--onyx-ink, #0E1320);
    background: linear-gradient(135deg, #FFC93C 0%, #FFBB09 55%, #E8A60B 100%);
    border-radius: var(--fabcon-radius);
}

.fabcon-calc__small {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--fabcon-muted);
}

.fabcon-calc__credit {
    margin-top: 8px;
}

@media (max-width: 480px) {
    .fabcon-calc__field {
        flex-wrap: wrap;
        gap: 4px;
    }

    .fabcon-calc__field input,
    .fabcon-calc__field select {
        flex: 1 1 100%;
        width: 100%;
    }

    .fabcon-calc__panel,
    .fabcon-calc__route {
        padding: 16px 16px;
    }
}

/* ==========================================================================
   Companion paper
   ========================================================================== */

.fabcon-paper__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
    padding-bottom: 28px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--lt-line);
}

.fabcon-paper__head .onyx-h2 {
    margin-bottom: 12px;
}

.fabcon-paper__lede {
    margin: 0;
    color: var(--lt-body);
    font-size: 17px;
}

.fabcon-paper__actions {
    gap: 14px 22px;
}

.fabcon-paper__meta {
    font-weight: 400;
}

.fabcon-paper__read {
    font-weight: 700;
    color: var(--lt-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--onyx-gold, #FFBB09);
}

.fabcon-paper__read:hover {
    color: var(--lt-accent);
}

.fabcon-paper__pending {
    margin: 0;
    font-weight: 700;
    color: var(--lt-ink);
}

/* Read-online body: comfortable measure for long-form text. The generated
   partial shifts the paper's headings down one level (h2 title, h3 sections,
   h4 subsections) so the page keeps a single H1. */
.fabcon-paper__body {
    max-width: 760px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.7;
    color: var(--lt-body);
}

.fabcon-paper__body h2,
.fabcon-paper__body h3,
.fabcon-paper__body h4 {
    font-family: var(--onyx-font-display);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--lt-ink);
    margin: 40px 0 14px;
}

.fabcon-paper__body h2 {
    font-size: clamp(24px, 3vw, 30px);
    margin-top: 0;
}

.fabcon-paper__body h3 {
    font-size: clamp(20px, 2.4vw, 24px);
}

.fabcon-paper__body h4 {
    font-size: 18px;
    margin-top: 28px;
}

.fabcon-paper__body p,
.fabcon-paper__body ul,
.fabcon-paper__body ol {
    margin: 0 0 16px;
}

.fabcon-paper__body ul,
.fabcon-paper__body ol {
    padding-left: 22px;
}

.fabcon-paper__body li {
    margin-bottom: 6px;
}

.fabcon-paper__body strong {
    color: var(--lt-ink);
}

.fabcon-paper__body hr {
    border: 0;
    border-top: 1px solid var(--lt-line);
    margin: 32px 0;
}

.fabcon-paper__body a {
    color: var(--lt-accent);
    text-decoration: underline;
    text-decoration-color: rgba(18, 121, 107, 0.4);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.fabcon-paper__body a:hover {
    text-decoration-color: currentColor;
}

.fabcon-paper__body blockquote {
    margin: 0 0 20px;
    padding: 14px 18px;
    background: #FFF8E1;
    border-left: 4px solid var(--onyx-gold, #FFBB09);
    border-radius: 8px;
}

.fabcon-paper__body code {
    font-family: var(--onyx-font-mono);
    font-size: 0.85em;
    background: var(--onyx-fog, #F5F7FA);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--lt-ink);
}

.fabcon-paper__body img,
.fabcon-paper__body svg {
    max-width: 100%;
    height: auto;
}

/* ----- Tables in the paper and the sources (roi-comparison__table) ----- */

.fabcon-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0 24px;
}

.fabcon-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    line-height: 1.5;
}

.fabcon-table th,
.fabcon-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--lt-line);
    text-align: left;
    vertical-align: top;
}

.fabcon-table th {
    font-weight: 700;
    color: var(--onyx-text-heading, #1F273B);
    background: transparent;
    border-bottom: 2px solid var(--onyx-border-light, #E0E0E0);
}

.fabcon-table tbody tr:nth-child(even) td {
    background: var(--onyx-bg-off-white, #F7F8FA);
}

.fabcon-table a {
    color: var(--lt-accent);
    overflow-wrap: anywhere;
}

/* ----- Sources ----- */

.fabcon-sources .onyx-h2 {
    max-width: none;
}

.fabcon-sources__dating {
    max-width: 72ch;
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.68;
    color: var(--lt-body);
}

.fabcon-sources .fabcon-table {
    background: var(--lt-card, #fff);
    border: 1px solid var(--lt-card-bd);
    border-radius: var(--fabcon-radius);
    box-shadow: var(--lt-card-sh);
    padding: 6px 10px;
}

.fabcon-sources .fabcon-table tbody tr:nth-child(even) td {
    background: transparent;
}

/* Narrow screens: keep the five columns readable and scroll the card instead
   of squeezing each URL into a one-word column. */
@media (max-width: 767px) {
    .fabcon-sources .fabcon-table table {
        min-width: 720px;
    }
}

/* ----- Footer note ----- */

.fabcon-note {
    padding: 28px 0;
    background: #fff;
    border-top: 1px solid var(--lt-line);
}

.fabcon-note__text {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fabcon-muted);
}

@media (prefers-reduced-motion: reduce) {
    .fabcon-calc__fill,
    .fabcon-calc__preset,
    .fabcon-intro__card .onyx-card__title a {
        transition: none;
    }
}