/*
 * Layout chrome for the sites (packages/layouts). Colours only through --bf-* roles (rule 1);
 * spacing, type and radii through RHDS tokens. Layout boxes and documented RHDS styling hooks
 * follow the extension order (AGENTS.md rule 3).
 */
html {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--bf-font-body);
  font-size: var(--rh-font-size-body-text-md);
  line-height: var(--rh-line-height-body-text);
  color: var(--bf-text);
  background: var(--bf-surface-default);
}

h1,
h2,
h3,
h4 {
  font-family: var(--bf-font-heading);
  font-weight: var(--rh-font-weight-heading-medium);
  line-height: var(--rh-line-height-heading);
  margin-block: 0 var(--rh-space-lg);
  text-wrap: balance;
}

h1 {
  font-size: var(--rh-font-size-heading-xl);
}

h2 {
  font-size: var(--rh-font-size-heading-lg);
}

h3 {
  font-size: var(--rh-font-size-heading-xs);
}

p {
  margin-block: 0 var(--rh-space-lg);
}

a {
  color: var(--bf-link);
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header */
.bf-header [slot='logo'] {
  margin-inline-end: var(--rh-space-lg);
}

.bf-header__action {
  display: flex;
  align-items: center;
}

/* The primary CTA's default vertical padding exceeds the 50px mobile masthead.
   Use its documented container part; RHDS still owns colour, focus and hover. */
.bf-header__action rh-cta::part(container) {
  padding-block: var(--rh-space-md);
  padding-inline: var(--rh-space-xl);
}

@media (width < 48rem) {
  .bf-header__action--wide {
    display: none;
  }
}

.bf-header img {
  display: block;
  block-size: var(--rh-length-2xl);
  inline-size: auto;
}

/* Main: every macro is a full-width band whose content is centred in .bf-section__inner */
.bf-main {
  display: block;
}

.bf-section {
  padding-block: var(--rh-space-4xl);
  padding-inline: var(--rh-space-xl);
}

.bf-section__inner {
  max-inline-size: 75rem;
  margin-inline: auto;
}

.bf-section__inner > h2:first-child {
  margin-block-end: var(--rh-space-2xl);
}

.bf-eyebrow {
  font-family: var(--bf-font-heading);
  font-size: var(--rh-font-size-body-text-sm);
  font-weight: var(--rh-font-weight-heading-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bf-brand);
  margin-block-end: var(--rh-space-md);
}

.bf-lede {
  font-size: var(--rh-font-size-body-text-lg);
  max-inline-size: 60ch;
}

.bf-prose {
  max-inline-size: 70ch;
}

.bf-prose :is(h2, h3) {
  margin-block-start: var(--rh-space-2xl);
}

.bf-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rh-space-lg);
  align-items: center;
  margin-block-start: var(--rh-space-xl);
}

.bf-meta {
  color: var(--bf-text-subtle);
  font-size: var(--rh-font-size-body-text-sm);
}

/* bf-hero */
.bf-hero {
  /* PatternFly Hero's angle and stop positions, with shared pale-blue crayons. */
  background: linear-gradient(
    109deg,
    var(--bf-surface-default) 0%,
    var(--bf-surface-brand-subtle) 50%,
    var(--bf-surface-brand) 100%
  );
}

.bf-hero .bf-section__inner {
  display: grid;
  gap: var(--rh-space-2xl);
  align-items: center;
}

@media (width >= 64rem) {
  .bf-hero .bf-section__inner:has(.bf-hero__media) {
    grid-template-columns: 3fr 2fr;
    gap: var(--rh-space-4xl);
  }
}

.bf-hero__media {
  margin: 0;
}

.bf-hero__media img {
  display: block;
  inline-size: 100%;
  border-radius: var(--bf-radius-container);
}

/* bf-proof-strip */
.bf-proof-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rh-space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* bf-feature-trio and bf-team: card grids */
.bf-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rh-space-xl);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.bf-cards > li {
  display: grid;
}

/* More than four cards: a wider minimum so six fill two rows of three, not four and two. */
.bf-cards--wide {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

/* rh-card sizes its host to max-content; stretch it so a row of cards shares one height. */
.bf-cards rh-card {
  block-size: 100%;
}

.bf-team__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rh-space-2xl) var(--rh-space-xl);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.bf-person rh-avatar {
  /* PatternFly's xl avatar (128px). rh-avatar's documented size property is capped at the
     64px --rh-size-icon-06 token upstream, so the cap is lifted through its documented `img`
     shadow part (extension order step 5, ADR 0005); the token is RHDS's own 128px step. */
  --rh-avatar-size: var(--rh-size-icon-09);

  margin-block-end: var(--rh-space-lg);
}

.bf-person rh-avatar::part(img) {
  max-inline-size: var(--rh-size-icon-09);
}

/* bf-media-split */
.bf-media-split .bf-section__inner {
  display: grid;
  gap: var(--rh-space-2xl);
  align-items: center;
}

@media (width >= 64rem) {
  .bf-media-split .bf-section__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--rh-space-4xl);
  }

  .bf-media-split--media-end .bf-media-split__media {
    order: 2;
  }
}

.bf-media-split__media {
  margin: 0;
}

.bf-media-split__media img {
  display: block;
  inline-size: 100%;
  border-radius: var(--bf-radius-container);
  border: var(--rh-border-width-sm) solid var(--bf-border-subtle);
}

.bf-media-split__media figcaption {
  margin-block-start: var(--rh-space-sm);
  font-size: var(--rh-font-size-body-text-sm);
  color: var(--bf-text-subtle);
}

.bf-media-split__media--map {
  position: relative;
}

.bf-media-split__media--map figcaption {
  position: absolute;
  font-size: var(--rh-font-size-body-text-xs);
  inset-block-end: var(--rh-space-sm);
  inset-inline-end: var(--rh-space-sm);
  max-inline-size: calc(100% - var(--rh-space-lg));
  margin: 0;
  padding: var(--rh-space-xs) var(--rh-space-sm);
  background: var(--bf-surface-default);
  border: var(--rh-border-width-sm) solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-container);
}

/* bf-closing-cta */
.bf-closing-cta {
  padding-inline: 0;
}

.bf-closing-cta rh-surface {
  padding-block: var(--rh-space-4xl);
  padding-inline: var(--rh-space-xl);
}

.bf-closing-cta .bf-section__inner {
  text-align: center;
}

.bf-closing-cta .bf-lede {
  margin-inline: auto;
}

.bf-closing-cta .bf-ctas {
  justify-content: center;
}

/* bf-process: numbered steps (an ordered list; the number is a CSS counter in a brand pill) */
.bf-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rh-space-2xl) var(--rh-space-xl);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  counter-reset: bf-step;
}

.bf-process__step {
  counter-increment: bf-step;
}

.bf-process__step::before {
  content: counter(bf-step);
  display: grid;
  place-items: center;
  inline-size: var(--rh-size-icon-05);
  block-size: var(--rh-size-icon-05);
  margin-block-end: var(--rh-space-lg);
  border-radius: var(--rh-border-radius-pill);
  background: var(--bf-brand);
  color: var(--bf-on-brand);
  font-family: var(--bf-font-heading);
  font-size: var(--rh-font-size-body-text-lg);
  font-weight: var(--rh-font-weight-heading-medium);
}

.bf-process__step h3 {
  margin-block-end: var(--rh-space-md);
}

.bf-process__step p {
  margin-block-end: var(--rh-space-md);
}

/* bf-capability-grid: dense titled items, no card chrome; a photo replaces the top rule */
.bf-capability-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rh-space-2xl) var(--rh-space-xl);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.bf-capability-grid__item {
  border-block-start: var(--rh-border-width-sm) solid var(--bf-border-subtle);
  padding-block-start: var(--rh-space-lg);
}

.bf-capability-grid__item--media {
  border-block-start: 0;
  padding-block-start: 0;
}

.bf-capability-grid__item img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--bf-radius-container);
  margin-block-end: var(--rh-space-lg);
}

.bf-capability-grid__item h3 {
  margin-block-end: var(--rh-space-md);
}

.bf-capability-grid__item p {
  margin-block-end: 0;
}

/* bf-faq: the large accordion spans the band; panel text keeps RHDS's 750px measure */
.bf-faq rh-accordion-panel > * {
  max-inline-size: 46.875rem;
}

/* bf-contact */
.bf-contact .bf-section__inner {
  display: grid;
  gap: var(--rh-space-2xl);
}

@media (width >= 64rem) {
  .bf-contact .bf-section__inner {
    grid-template-columns: 3fr 2fr;
    gap: var(--rh-space-4xl);
  }
}

.bf-contact address {
  font-style: normal;
}

.bf-contact address p {
  margin-block-end: var(--rh-space-md);
}

.bf-opt-out {
  margin-block-start: var(--rh-space-3xl);
  padding-block-start: var(--rh-space-xl);
  border-block-start: var(--rh-border-width-sm) solid var(--bf-border-subtle);
}

/* Evidence markup (Phase 2) */
.bf-metric {
  font-variant-numeric: tabular-nums;
}

.bf-flag {
  display: inline-block;
  border-radius: var(--rh-border-radius-pill);
  background: var(--bf-status-warning);
  color: var(--rh-color-text-primary-on-light);
  font-family: var(--bf-font-body);
  font-size: var(--rh-font-size-body-text-xs);
  font-weight: var(--rh-font-weight-body-text-medium);
  line-height: var(--rh-line-height-body-text);
  padding-inline: var(--rh-space-sm);
  margin-inline-start: var(--rh-space-xs);
  vertical-align: middle;
}

/* Footer: plain HTML, never rh-footer (rule 6), inside a darkest rh-surface, so the roles below
   resolve to their dark values. */
.bf-footer {
  background: var(--bf-surface-default);
  color: var(--bf-text);
  padding-block: var(--rh-space-4xl);
  padding-inline: var(--rh-space-xl);
  font-size: var(--rh-font-size-body-text-sm);
}

.bf-footer a {
  color: inherit;
}

.bf-footer__inner {
  max-inline-size: 75rem;
  margin-inline: auto;
  display: grid;
  gap: var(--rh-space-2xl);
}

@media (width >= 64rem) {
  .bf-footer__inner {
    grid-template-columns: 2fr 3fr;
  }

  .bf-footer__legal {
    grid-column: 1 / -1;
  }
}

.bf-footer__logo-link {
  display: block;
  inline-size: fit-content;
}

.bf-footer__about img {
  display: block;
  block-size: var(--rh-length-xl);
  inline-size: auto;
  margin-block-end: var(--rh-space-lg);

  /* The supplied wordmark is a single near-black fill (ADR 0002): invert it on the dark footer. */
  filter: invert(1);
}

.bf-footer__columns {
  display: grid;
  gap: var(--rh-space-xl);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.bf-footer .bf-footer__columns h2 {
  font-size: var(--rh-font-size-body-text-md);
  margin-block-end: var(--rh-space-md);
}

.bf-footer__columns ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bf-footer__columns li {
  margin-block-end: var(--rh-space-sm);
}

.bf-footer__legal {
  border-block-start: var(--rh-border-width-sm) solid var(--bf-border-subtle);
  padding-block-start: var(--rh-space-xl);
  color: var(--bf-text-subtle);
  display: grid;
  align-items: center;
  gap: var(--rh-space-2xl);
}

@media (width >= 64rem) {
  .bf-footer__legal {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.bf-footer__legal-text p:last-child {
  margin-block-end: 0;
}

.bf-footer__badge {
  display: inline-block;
  flex: none;
}

.bf-footer__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rh-space-xl);
}

.bf-footer__organisation-logo {
  display: block;
  inline-size: var(--rh-size-icon-09);
  block-size: auto;
}

.bf-footer__organisation-logo img {
  display: block;
  inline-size: 100%;
}

.bf-footer__badge img {
  display: block;
  block-size: var(--rh-size-icon-07);
  inline-size: auto;
}

/* RHDS floating form pattern; native fields fill gaps in the installed component set. */
.bf-interest-form .bf-section__inner {
  display: grid;
  gap: var(--rh-space-xl);
  max-inline-size: 46.875rem;
}

.bf-interest-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.bf-interest-form .bf-interest-form__field {
  display: grid;
  gap: var(--rh-space-xs);
  margin-block-end: var(--rh-space-xl);
}

.bf-interest-form__field > :is(label, legend) {
  font-size: var(--rh-font-size-body-text-sm);
  font-weight: var(--rh-font-weight-body-text-medium);
  margin-block-end: var(--rh-space-xs);
}

.bf-interest-form__field > legend {
  margin-block-end: var(--rh-space-md);
}

.bf-interest-form :is(input:not([type='radio'], [type='checkbox']), textarea, select) {
  box-sizing: border-box;
  inline-size: 100%;
  padding: var(--rh-space-sm) var(--rh-space-md);
  font: inherit;
  color: var(--bf-text);
  background: var(--bf-surface-default);
  border: var(--rh-border-width-sm) solid var(--bf-border-subtle);
  border-radius: var(--bf-radius-container);
}

.bf-interest-form__choices {
  display: flex;
  flex-direction: column;
  gap: var(--rh-space-md);
}

.bf-interest-form__choices--inline {
  flex-flow: row wrap;
  gap: var(--rh-space-xl);
}

.bf-interest-form__choices label {
  display: flex;
  align-items: baseline;
  gap: var(--rh-space-md);
  font-size: var(--rh-font-size-body-text-sm);
}

.bf-interest-form input:is([type='radio'], [type='checkbox']) {
  accent-color: var(--bf-brand);
  margin: 0;
}

.bf-interest-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rh-space-lg);
  margin-block-end: var(--rh-space-xl);
}

.bf-interest-form [data-form-errors] {
  margin-block-end: var(--rh-space-xl);
}

.bf-interest-form__error {
  color: var(--bf-status-danger);
  font-size: var(--rh-font-size-body-text-sm);
  margin: 0;
}

.bf-interest-form :is(input, textarea)[aria-invalid='true'] {
  border-color: var(--bf-status-danger);
}

.bf-interest-form__field .bf-meta {
  margin: 0;
}

.bf-interest-form textarea {
  resize: vertical;
}

.bf-interest-form :is(input, textarea, select):focus-visible {
  outline: var(--rh-border-width-md) solid var(--bf-focus);
  outline-offset: var(--rh-space-xs);
}

.bf-interest-form__required {
  color: var(--bf-status-danger);
}

/* bf-feature-trio's brick CTA under the cards */
.bf-feature-trio__cta {
  margin-block-start: var(--rh-space-2xl);
}

/* bf-logo-wall: one strip of label and logo cells with dividers; stacked and boxed on small screens */
.bf-logo-wall__strip {
  display: flex;
  flex-direction: column;
  border: var(--rh-border-width-sm) solid var(--bf-border-subtle);
}

.bf-logo-wall__logos {
  display: contents;
  list-style: none;
}

.bf-logo-wall__label,
.bf-logo-wall__logos li {
  margin: 0;
  padding: var(--rh-space-xl) var(--rh-space-2xl);
  border-block-start: var(--rh-border-width-sm) solid var(--bf-border-subtle);
}

.bf-logo-wall__label {
  flex: 1;
  font-family: var(--bf-font-heading);
  font-size: var(--rh-font-size-body-text-xl);
  color: var(--bf-text-subtle);
  text-align: center;
}

.bf-logo-wall__label:first-child {
  border-block-start: 0;
}

.bf-logo-wall__logos li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bf-logo-wall__logos img {
  display: block;
  inline-size: var(--rh-length-7xl);
  block-size: auto;
}

@media (width >= 48rem) {
  .bf-logo-wall__strip {
    flex-direction: row;
    align-items: stretch;
    border-block: 0;
  }

  .bf-logo-wall__label {
    text-align: start;
  }

  .bf-logo-wall__label,
  .bf-logo-wall__logos li {
    border-block-start: 0;
    border-inline-start: var(--rh-border-width-sm) solid var(--bf-border-subtle);
  }

  .bf-logo-wall__label:first-child {
    border-inline-start: 0;
  }
}

/* The dark-scheme primary CTA for the felt-glass-dark site theme: the specimen's candidate for
   gate question (b) (apps/specimen/src/styles/specimen.css), adopted on IslandView only (ADR
   0024). RHDS keeps white text and the light hover on the pale dark-scheme brand blue. */
.bf-theme-felt-glass-dark rh-cta[variant='primary'] {
  --rh-cta-color: var(--bf-on-brand);
  --rh-cta-hover-color: var(--bf-on-brand);
  --rh-cta-focus-color: var(--bf-on-brand);
  --rh-cta-hover-background-color: var(--bf-brand-hover);
  --rh-cta-hover-border-color: var(--bf-brand-hover);
  --rh-cta-focus-background-color: var(--bf-brand-hover);
  --rh-cta-focus-border-color: var(--bf-brand-hover);
  --rh-cta-active-background-color: var(--bf-brand-hover);
}