/* The brand centre inside a website: loaded after brand_book.css, on the website only.

   Every page is built from the website's own pieces (sections with a colour preset, containers, rows of columns,
   btn buttons, img images), so the website editor can edit all of it. These rules make those pieces look like the
   brand book while taking their colours from the website theme: each section reads its ground, text, headings, links
   and button from its colour preset (o_cc1 to o_cc5), with the brand presets from the tokens as the fallback. Change
   a section's preset in the editor, or the theme's colours, and the page follows. The AAA themes are the one
   exception: they always use the brand's checked AAA colours. */

/* ------------------------------------------------------------------ colour presets */

.cbb .o_cc1 {
    --cbb-bg: var(--o-cc1-bg, var(--climb-preset-o-cc1-background));
    --cbb-text: var(--o-cc1-text, var(--climb-preset-o-cc1-text));
    --cbb-head: var(--o-cc1-headings, var(--climb-preset-o-cc1-heading));
    --cbb-link: var(--o-cc1-link, var(--climb-preset-o-cc1-link));
    --cbb-btn: var(--o-cc1-btn-primary, var(--climb-preset-o-cc1-button-fill));
    --cbb-btn-label: var(--o-cc1-btn-primary-text, var(--climb-preset-o-cc1-button-label));
}
.cbb .o_cc2 {
    --cbb-bg: var(--o-cc2-bg, var(--climb-preset-o-cc2-background));
    --cbb-text: var(--o-cc2-text, var(--climb-preset-o-cc2-text));
    --cbb-head: var(--o-cc2-headings, var(--climb-preset-o-cc2-heading));
    --cbb-link: var(--o-cc2-link, var(--climb-preset-o-cc2-link));
    --cbb-btn: var(--o-cc2-btn-primary, var(--climb-preset-o-cc2-button-fill));
    --cbb-btn-label: var(--o-cc2-btn-primary-text, var(--climb-preset-o-cc2-button-label));
}
.cbb .o_cc3 {
    --cbb-bg: var(--o-cc3-bg, var(--climb-preset-o-cc3-background));
    --cbb-text: var(--o-cc3-text, var(--climb-preset-o-cc3-text));
    --cbb-head: var(--o-cc3-headings, var(--climb-preset-o-cc3-heading));
    --cbb-link: var(--o-cc3-link, var(--climb-preset-o-cc3-link));
    --cbb-btn: var(--o-cc3-btn-primary, var(--climb-preset-o-cc3-button-fill));
    --cbb-btn-label: var(--o-cc3-btn-primary-text, var(--climb-preset-o-cc3-button-label));
}
.cbb .o_cc4 {
    --cbb-bg: var(--o-cc4-bg, var(--climb-preset-o-cc4-background));
    --cbb-text: var(--o-cc4-text, var(--climb-preset-o-cc4-text));
    --cbb-head: var(--o-cc4-headings, var(--climb-preset-o-cc4-heading));
    --cbb-link: var(--o-cc4-link, var(--climb-preset-o-cc4-link));
    --cbb-btn: var(--o-cc4-btn-primary, var(--climb-preset-o-cc4-button-fill));
    --cbb-btn-label: var(--o-cc4-btn-primary-text, var(--climb-preset-o-cc4-button-label));
}
.cbb .o_cc5 {
    --cbb-bg: var(--o-cc5-bg, var(--climb-preset-o-cc5-background));
    --cbb-text: var(--o-cc5-text, var(--climb-preset-o-cc5-text));
    --cbb-head: var(--o-cc5-headings, var(--climb-preset-o-cc5-heading));
    --cbb-link: var(--o-cc5-link, var(--climb-preset-o-cc5-link));
    --cbb-btn: var(--o-cc5-btn-primary, var(--climb-preset-o-cc5-button-fill));
    --cbb-btn-label: var(--o-cc5-btn-primary-text, var(--climb-preset-o-cc5-button-label));
}

/* A preset that does not match the page's theme (a light section on the dark book, an orange one on either): the
   theme's muted text, accents and lines were checked against the theme's grounds, not this one, so use the preset's
   own text, heading and link colours for them. */
.cbb[data-climb-theme$="dark"] :is(.o_cc1, .o_cc2, .o_cc4),
.cbb[data-climb-theme$="light"] :is(.o_cc3, .o_cc4, .o_cc5) {
    --cbb-muted: var(--cbb-text);
    --cbb-acc: var(--cbb-head);
    --cbb-acc-s: var(--cbb-link);
    --cbb-btn-hover: var(--cbb-btn);
    --cbb-line: color-mix(in srgb, var(--cbb-text) 22%, transparent);
    --cbb-card: color-mix(in srgb, var(--cbb-text) 6%, transparent);
}

/* The AAA themes keep the brand's AAA colours on the book's own grounds, whatever the website theme says. */
.cbb[data-climb-theme^="aaa"] :is(.o_cc1, .o_cc3) {
    --cbb-bg: var(--climb-background);
}
.cbb[data-climb-theme^="aaa"] :is(.o_cc2, .o_cc5) {
    --cbb-bg: var(--climb-surface);
}
.cbb[data-climb-theme^="aaa"] :is(.o_cc1, .o_cc2, .o_cc3, .o_cc5) {
    --cbb-text: var(--climb-text);
    --cbb-muted: var(--climb-text-muted);
    --cbb-head: var(--climb-heading);
    --cbb-link: var(--climb-link);
    --cbb-acc: var(--climb-accent-large);
    --cbb-acc-s: var(--climb-accent-small);
    --cbb-btn: var(--climb-button-fill);
    --cbb-btn-label: var(--climb-button-label);
}

/* ------------------------------------------------------------------ sections */

/* The ground comes from the preset; a background colour or image set in the editor is written on the section
   itself and wins. */
.cbb .o_cc:is(.cbb-section, .cbb-hero, .cbb-foot) {
    background-color: var(--cbb-bg);
    color: var(--cbb-text);
}
.cbb .o_cc .cbb-foot-line {
    color: var(--cbb-muted);
}

/* The website's preset rules colour every heading and link in a section; bring back the book's own colours, which
   come from the same preset. */
#wrapwrap .cbb .o_cc :is(h1, h2, h3, h4, h5, h6) {
    color: var(--cbb-head);
}
#wrapwrap .cbb .o_cc .cbb-preset-name {
    color: var(--p-heading);
}
#wrapwrap .cbb .o_cc .cbb-ticket-name {
    color: var(--climb-color-brand-white);
}
#wrapwrap .cbb .o_cc a:not([class]) {
    color: var(--cbb-link);
}
/* The editor's table tools move a table's header row into its body and mark each cell o_table_header, which the
   website paints light grey; the saved page keeps it that way. Keep the header row on the book's colours either way. */
#wrapwrap .cbb .cbb-table :is(thead th, th.o_table_header) {
    font: 700 13px/1.2 var(--cbb-display);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cbb-head);
    background: var(--cbb-card);
}

/* The header photo is the section's background image; the fade is its background filter, which the editor can
   change or remove. */
.cbb-photo.oe_img_bg::before {
    content: none;
}
.cbb .cbb-photo-fade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(100deg,
        color-mix(in srgb, var(--climb-color-brand-dark-brown) 97%, transparent) 0%,
        color-mix(in srgb, var(--climb-color-brand-dark-brown) 86%, transparent) 42%,
        color-mix(in srgb, var(--climb-color-brand-dark-brown) 35%, transparent) 100%);
}
.cbb .oe_img_bg {
    background-size: cover;
}

/* ------------------------------------------------------------------ containers, rows and columns */

.cbb .container.cbb-wrap {
    max-width: none;
    padding-inline: 0;
}
/* The website gives every container in #wrap a clearfix (empty ::before and ::after shown as tables). When the
   container is itself a grid or a flex row, those two become items: the ::before took the narrow first column of
   the components page, so the menu landed in the wide column and the components dropped below it. The brand pages
   use no floats, so the clearfix is not needed. */
#wrap .container.cbb-wrap::before,
#wrap .container.cbb-wrap::after {
    content: none;
}
.cbb .row:is(.cbb-grid, .cbb-split) {
    display: flex;
    gap: 0;
    --gutter-x: var(--climb-layout-gutter);
    --gutter-y: var(--climb-layout-gutter);
    --bs-gutter-x: var(--climb-layout-gutter);
    --bs-gutter-y: var(--climb-layout-gutter);
}
.cbb .row.cbb-grid {
    margin-top: calc(var(--climb-space-7) - var(--climb-layout-gutter));
}
.cbb .row.cbb-grid > * > * {
    height: 100%;
}
.cbb .row.cbb-split {
    align-items: flex-start;
    --gutter-x: var(--climb-space-7);
    --gutter-y: var(--climb-space-7);
    --bs-gutter-x: var(--climb-space-7);
    --bs-gutter-y: var(--climb-space-7);
}

/* ------------------------------------------------------------------ the live media kit */

/* Until the page fills it, a slot shows the link to its section's archive. */
.cbb-kit-slot > .cbb-kit-empty:only-child {
    margin-top: var(--climb-space-5);
}