/* Base, components (button, link, eyebrow, surfaces, header, footer). Presentation only. */
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { background: var(--br-accent); color: #fff; }
:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--br-accent); outline-offset: 3px; border-radius: 4px; }
.has-dark-surface :where(a, button):focus-visible, .br-dark :where(a, button):focus-visible { outline-color: #fff; }

/* eyebrow / mono label */
.br-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--br-text-muted); font-weight: 450; }
.br-eyebrow::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; background: var(--br-accent); border-radius: 2px; margin-right: 0.6em; vertical-align: 0.05em; }
.br-lede { font-size: var(--wp--preset--font-size--lg); line-height: 1.5; color: var(--br-text-muted); max-width: 38rem; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* dark sections */
.br-dark { background: var(--br-s-dark); color: var(--br-text-on-dark); }
.br-dark :where(h1,h2,h3,h4) { color: var(--br-text-on-dark); }
.br-dark .br-eyebrow, .br-dark .br-lede { color: var(--br-text-on-dark-muted); }

/* links: underline moves */
.br-link, .wp-block-post-content a:not(.wp-element-button) { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--br-dur-base) var(--br-ease-out); }
.br-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* buttons */
.wp-element-button, .br-btn { display: inline-flex; align-items: center; gap: 0.6em; transition: background-color var(--br-dur-fast) var(--br-ease), transform var(--br-dur-fast) var(--br-ease), box-shadow var(--br-dur-fast) var(--br-ease); text-decoration: none; }
.wp-element-button:hover, .br-btn:hover { background-color: var(--br-accent-ink); }
.wp-element-button:active { transform: translateY(1px); }
a.br-btn--arrow::after, .br-btn--arrow .wp-block-button__link::after { content: "→"; display: inline-block; transition: transform var(--br-dur-base) var(--br-ease-out); }
a.br-btn--arrow:hover::after, .br-btn--arrow .wp-block-button__link:hover::after { transform: translateX(3px); }
.is-style-outline > .wp-element-button { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--br-line); }
.is-style-outline > .wp-element-button:hover { background: var(--br-s2); }
.br-dark .is-style-outline > .wp-element-button { box-shadow: inset 0 0 0 1px var(--br-line-dark); }
.br-dark .is-style-outline > .wp-element-button:hover { background: var(--br-s-dark-2); }

/* surfaces */
.br-surface { background: var(--br-s1); border: var(--br-border); border-radius: var(--br-radius-lg); box-shadow: var(--br-shadow-1); }
.br-surface--sunken { background: var(--br-s2); border-color: transparent; box-shadow: none; }
.br-hairline { border-top: var(--br-border); }

/* header */
.wp-site-blocks > .wp-block-template-part:first-child { position: sticky; top: 0; z-index: 50; }
body.admin-bar .wp-site-blocks > .wp-block-template-part:first-child { top: var(--wp-admin--admin-bar--height, 0px); }
.br-header { position: relative; isolation: isolate; border-bottom: 1px solid transparent; transition: border-color var(--br-dur-base) var(--br-ease); }
.br-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--br-s0) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.br-header.is-condensed { border-bottom-color: var(--br-line); }
.br-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding: 1.1rem var(--wp--custom--gutter); transition: padding-block var(--br-dur-base) var(--br-ease); }
.br-header.is-condensed .br-header__inner { padding-block: 0.65rem; }
.br-brand { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.65rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; background: none; }
.br-brand svg { height: 1.6rem; width: auto; }
.br-nav { font-size: var(--wp--preset--font-size--sm); }
.br-nav a { text-decoration: none; background: none; color: var(--br-text-muted); transition: color var(--br-dur-fast) var(--br-ease); }
.br-nav a:hover, .br-nav [aria-current="page"] a, .br-nav a[aria-current="page"] { color: var(--br-text); }
.br-header .wp-block-buttons { flex-wrap: nowrap; }
@media (max-width: 781px) { .br-header .br-header__cta { display: none !important; } }

/* footer */
.br-footer { background: var(--br-s-dark); color: var(--br-text-on-dark-muted); font-size: var(--wp--preset--font-size--sm); }
.br-footer a { color: var(--br-text-on-dark); text-decoration: none; background: none; }
.br-footer a:hover { text-decoration: underline; }
.br-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 3rem; max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-block: 4rem 2.5rem; }
.br-footer h2 { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); letter-spacing: .08em; text-transform: uppercase; color: var(--br-text-on-dark-muted); font-weight: 450; margin: 0 0 1rem; }
.br-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.br-footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--br-line-dark); }
@media (max-width: 860px) { .br-footer__grid { grid-template-columns: 1fr 1fr; } .br-footer__grid > :first-child { grid-column: 1 / -1; } }

/* design-system page helpers */
.ds-swatch { border-radius: var(--br-radius-md); border: var(--br-border); height: 5.5rem; display: flex; align-items: flex-end; padding: .6rem .75rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); }
.ds-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.ds-row { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; align-items: baseline; padding-block: 1rem; border-top: var(--br-border); }
.ds-row > code { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--br-text-muted); }
.ds-bar { height: .75rem; background: var(--br-accent); border-radius: 2px; }
.ds-motion { width: 3rem; height: 3rem; border-radius: var(--br-radius-md); background: var(--br-accent); }
.ds-motion-track:hover .ds-motion { transform: translateX(12rem); }
.ds-motion-track .ds-motion { transition: transform var(--d) var(--e); }
@media (max-width: 640px) { .ds-row { grid-template-columns: 1fr; gap: .4rem; } .ds-motion-track:hover .ds-motion { transform: translateX(6rem); } }

.br-nav .wp-block-navigation-item.br-nav__cta { display: none; }