/* Semantic colors shared by front end and Gutenberg; raw scales live in theme.json. */
.bb-site-logo { max-width: 100%; flex-shrink: 0; }
.bb-site-logo a { display: block; }
.bb-site-logo img { display: block; height: auto; max-width: 100%; }
/* Contrast-only display treatment; the supplied transparent PNG is unchanged. */
.is-style-brand-dark .bb-site-logo img { filter: brightness(0) invert(1); }
@media (max-width: 600px) {
    .bb-site-logo img { width: min(200px, 55vw); }
}

:where(.wp-site-blocks, .editor-styles-wrapper) {
    --bb-heading: var(--wp--preset--color--ink);
    --bb-copy: var(--wp--preset--color--body);
    --bb-secondary: var(--wp--preset--color--secondary);
    --bb-muted: var(--wp--preset--color--muted);
    --bb-link: var(--wp--preset--color--accent-text);
    --bb-link-hover: var(--wp--custom--color--orange--900);
}

.is-style-brand-light {
    --bb-heading: var(--wp--preset--color--ink);
    --bb-copy: var(--wp--preset--color--body);
    --bb-secondary: var(--wp--preset--color--secondary);
    --bb-muted: var(--wp--preset--color--muted);
    --bb-link: var(--wp--preset--color--accent-text);
    --bb-link-hover: var(--wp--custom--color--orange--900);
    background-color: var(--wp--preset--color--canvas);
    color: var(--bb-copy);
}
.is-style-brand-dark {
    --bb-heading: var(--wp--preset--color--canvas);
    --bb-copy: var(--wp--preset--color--canvas);
    --bb-secondary: var(--wp--custom--color--black--200);
    --bb-muted: var(--wp--custom--color--black--200);
    --bb-link: var(--wp--preset--color--accent);
    --bb-link-hover: var(--wp--custom--color--orange--300);
    background-color: var(--wp--preset--color--ink);
    color: var(--bb-copy);
}
:is(.is-style-brand-light, .is-style-brand-dark) :where(h1,h2,h3,h4,h5,h6,.wp-block-site-title,.wp-block-navigation):not(.has-text-color) { color: var(--bb-heading); }
:is(.is-style-brand-light, .is-style-brand-dark) :where(p):not(.has-text-color) { color: var(--bb-copy); }
:is(.is-style-brand-light, .is-style-brand-dark) a:not(.wp-element-button):not(.wp-block-button__link):not(.has-text-color) { color: var(--bb-link); }
:is(.is-style-brand-light, .is-style-brand-dark) a:not(.wp-element-button):not(.wp-block-button__link):not(.has-text-color):hover { color: var(--bb-link-hover); }
:is(.is-style-brand-light, .is-style-brand-dark) .wp-block-site-title a:not(.wp-element-button):not(.wp-block-button__link):not(.has-text-color) { color: var(--bb-heading); }
:where(.wp-site-blocks, .editor-styles-wrapper) p.is-style-body-small:not(.has-text-color) { color: var(--bb-secondary); }
:where(.wp-site-blocks, .editor-styles-wrapper) :where(figcaption,.wp-block-post-date):not(.has-text-color) { color: var(--bb-muted); }

/* Bright orange is decorative; the darker text token is used on light surfaces. */
.bb-hero :where(h1,h2) em { color: var(--bb-link); }
.bb-hero { border-top: 3px solid var(--wp--preset--color--accent); }
.bb-home-hero { border-top: 0; }
.bb-home-hero__eyebrow { color: var(--wp--preset--color--ink); }
.bb-home-hero__rule { color: var(--wp--preset--color--ink); }

/* Green is an occasional secondary action, not the primary site-wide color. */
.wp-block-button.is-style-brand-green .wp-block-button__link {
    background-color: var(--wp--custom--color--action--green--base);
    color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-brand-green .wp-block-button__link:hover {
    background-color: var(--wp--custom--color--action--green--hover);
    color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-brand-green .wp-block-button__link:active {
    background-color: var(--wp--custom--color--action--green--pressed);
    color: var(--wp--preset--color--white);
}

/* Keep outline buttons outlined in each interaction state. */
.wp-block-button.is-style-outline .wp-block-button__link { color: var(--bb-heading); background: transparent; border-color: currentColor; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--bb-heading); background: transparent; border-color: var(--bb-link); }
.wp-block-button.is-style-outline .wp-block-button__link:active { color: var(--bb-link); background: transparent; }

/* Two-tone focus ring stays visible on both light and dark surfaces. */
:where(.wp-site-blocks, .editor-styles-wrapper) :where(a,button,input,textarea,select):focus-visible {
    outline: 2px solid var(--wp--preset--color--ink);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--wp--preset--color--canvas);
}
:where(.wp-site-blocks, .editor-styles-wrapper) :where(input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),textarea,select) {
    color: var(--wp--preset--color--body);
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--secondary);
}
:where(.wp-site-blocks, .editor-styles-wrapper) ::placeholder { color: var(--wp--preset--color--secondary); opacity: 1; }
:where(.wp-site-blocks, .editor-styles-wrapper) ::selection { color: var(--wp--preset--color--ink); background: var(--wp--preset--color--accent); }