/* BitComfy — static pages and the 404 screen.
   Scope: `.bc-page*` only. Loaded on is_page() and is_404() after gp-bridge
   and shared.css, ahead of nothing.

   The reference's five standalone screens (About, Contact, Privacy, Terms,
   Subscribe) all sit in the same 1240/32 container the homepage uses and all
   render their H1 at the archive's 68px/1.02. Two of them — About and Contact —
   put a second column beside the prose. That column is NOT the 340px Recent /
   Explore rail: measured on the rendered reference it is 464px on About and
   490px on Contact, each in its own grid, and neither carries the ad slots.
   So this file defines a page-local aside rather than reusing .bc-sidebar.

   REFERENCE DEFECTS — NOT COPIED. The reference holds its container padding at
   32px and its H1 at 68px on every viewport, which overflows at 375 on all five
   screens (and at 768 on Contact). Both are relaxed below 768 here, exactly as
   V37 already does on the archive.

   FLEX GAPS ARE NOT FLOW MARGINS. The reference builds every one of these
   screens as a flex column with a gap and declares near-zero margins on the
   children. Blocks emit ordinary flow, where adjacent margins collapse, so a
   declared reference margin is not the value to copy — the rendered gap is.
   Where the two differ, the flow equivalent is written here with the reference
   arithmetic shown: an H2 the reference declares at 32px-0-0 inside a gap:24
   column renders 56 above and 24 below, and that is what section 3 sets. */

.bc-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-10) var(--page-pad) var(--sp-11);
}

/* GP flexes .site-content for its content/widget pair. These templates manage
   their own width, so the flex context goes — the same line home.php uses. */
.page .site-content,
.error404 .site-content {
  display: block;
}

/* ---------------------------------------------------------------
   1. Page header
   --------------------------------------------------------------- */
.bc-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line-rule);
  margin-bottom: var(--sp-9);
}

.bc-page__head .bc-breadcrumb {
  margin-bottom: var(--sp-2);
}

/* 56 x 4 accent rule above the H1. Measured on all five reference pages at
   t=267, immediately above the H1 at t=287 — the same device the category
   archive uses. A page has no category, so it takes the brand clay rather than
   a section accent. */
.bc-page__rule {
  width: 56px;
  height: 4px;
  background-color: var(--clay-500);
}

/* -0.025em, matching the archive H1 — see the note in archive.css. */
.bc-page__title {
  font: var(--text-display-lg);
  letter-spacing: -0.025em;
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

.bc-page__deck {
  font: var(--text-article-deck);
  color: var(--ink-600);
  margin: 0;
  max-width: var(--measure-deck);
  text-wrap: pretty;
}

.bc-page__meta {
  font: var(--text-caption);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   2. Layout containers
   ---------------------------------------------------------------
   THE WRAPPER RULE. The block editor wraps a group's children in
   .wp-block-group__inner-container, so on a rendered page a group carrying a
   layout class has exactly one child, and a grid or flex context put on it
   collapses — measured on V38: both columns of .bc-page__cols inside track 1 at
   640px. Every layout container in this file therefore carries the same pair of
   selectors: the element itself where that wrapper is absent (hand-written
   markup, older content), and the wrapper where it is present. Custom
   properties are set on the outer element and inherit into the wrapper, so the
   per-page dimensions in section 6 only ever need writing once. */

/* Measured on the rendered reference at 1536, inside its 1176 content box:
   About  640 + 464 + 72 = 1176
   Contact 613 + 490 + 72 = 1175
   Expressed as fr with those exact numerators so the pair resolves to the
   reference widths at 1536 and keeps the proportion below it. */
.bc-page__cols:not(:has(> .wp-block-group__inner-container)),
.bc-page__cols > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 640fr) minmax(0, 464fr);
  gap: var(--sp-10);
  align-items: start;
}

.bc-page-contact .bc-page__cols:not(:has(> .wp-block-group__inner-container)),
.bc-page-contact .bc-page__cols > .wp-block-group__inner-container {
  grid-template-columns: minmax(0, 613fr) minmax(0, 490fr);
}

/* The grid has to escape the prose measure, or it inherits it and collapses.
   V38 rendered 329/238 against the reference's 640/464 because .bc-page__body
   caps at --measure-article (640) and the wrapper is its child: 329+238+72=639.
   :has() lifts the cap only on the pages that actually carry a second column,
   so single-column legal pages keep their 640 measure untouched. */
/* Anything that lays out across the full content box has to be listed here, or
   it resolves inside the 640 measure instead. Measured on V40.0: Subscribe's
   hero grid rendered 236/236 against 504/504 and its support grid 186.7 against
   365, which is exactly (640 − 96 − 72) / 2 and (640 − 80) / 3. */
.bc-page__body:has(> .bc-page__cols),
.bc-page__body:has(> .bc-page__legal),
.bc-page__body:has(> .bc-page__panel),
.bc-page__body:has(> .bc-page__grid) {
  max-width: none;
}

.bc-page__aside {
  min-width: 0;
}

/* About's aside is a white card that follows the reader; Contact's is plain. */
/* 10px, measured on the rendered reference aside. Deliberately a local value
   rather than --radius-md (6px): this is the only 10px corner in the system and
   promoting it to an eleventh global radius would be worse than naming it here.
   Pixel fidelity over token-count purity. */
.bc-page__aside--card {
  position: sticky;
  top: 86px;
  padding: var(--sp-7);
  border-radius: 10px;
  background-color: var(--surface-card);
}

/* The white panel the reference puts behind the Contact form (padding 40) and
   the Subscribe hero (padding 48). Same 10px corner as the About aside. It is
   also what fixes the Contact control widths: the 613 column less 80 of padding
   is 533, which is the select and textarea width, and (533 − 20 gap) / 2 is
   256.5 for the name and email pair. */
.bc-page__panel {
  padding: var(--sp-8);
  border-radius: 10px;
  background-color: var(--surface-card);
}

/* Card grids. auto-fit is the default for anything that has not asked for a
   shape; About and Subscribe both have, in section 6. */
.bc-page__grid {
  margin: 0 0 var(--sp-6);
}

.bc-page__grid:not(:has(> .wp-block-group__inner-container)),
.bc-page__grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: var(--bc-grid-cols, repeat(auto-fit, minmax(240px, 1fr)));
  gap: var(--bc-grid-gap, var(--sp-6));
  align-items: start;
}

/* A plain vertical block — no ground, no padding, just a gap. Subscribe builds
   both halves of its hero and all three support columns out of these. */
.bc-page__block {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

.bc-page__block:not(:has(> .wp-block-group__inner-container)),
.bc-page__block > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: var(--bc-block-gap, var(--sp-4));
}

/* Flow margins would add to the flex gap above and double every space. */
.bc-page__block h2,
.bc-page__block h3,
.bc-page__block p {
  margin: 0;
}

/* ---------------------------------------------------------------
   3. Prose
   --------------------------------------------------------------- */
.bc-page__body {
  max-width: var(--measure-article);
}

.bc-page__cols .bc-page__body {
  max-width: none;
}

.bc-page__body > * {
  margin-top: 0;
}

.bc-page__body p,
.bc-page__body ul,
.bc-page__body ol {
  font: var(--text-body);
  color: var(--ink-800);
  margin: 0 0 var(--sp-6);
}

/* The reference opens About with a 20px lede and drops to 18px for the rest of
   the column. A class rather than a :first-of-type rule, because the wrapper
   described in section 2 means "first paragraph" is not a stable selector, and
   because a lede is an editorial decision rather than a position. */
.bc-page .bc-page__lede {
  font: var(--text-body-lg);
}

.bc-page__body li {
  margin-bottom: var(--sp-2);
}

/* Reference: margin 32px-0-0 inside a gap:24 flex column, so 56 above and 24
   below once the gaps are folded in. See the note at the top of this file. */
.bc-page__body h2 {
  font: var(--text-h2);
  letter-spacing: var(--track-heading);
  color: var(--text-strong);
  margin: var(--sp-9) 0 var(--sp-6);
}

.bc-page__body h3 {
  font: var(--text-h3);
  letter-spacing: var(--track-heading);
  color: var(--text-strong);
  margin: var(--sp-7) 0 var(--sp-3);
}

/* Two pages carry a different H2 scale in the reference, measured at 1536:
   Contact  600 24px/1.3   ls -0.36px  ("Send a message")
   Subscribe 500 42px/1.08 ls -0.924px
   Every other page is 500 32px/1.18, which --text-h2 already provides.

   Both sit first in a flex column, so neither has anything above it and the
   reference declares margin:0 on each. What follows is the column gap — 8 to
   Contact's note, 20 to Subscribe's body copy. */
.bc-page-contact .bc-page__body h2 {
  font: var(--text-h3);
  letter-spacing: var(--track-heading);
  margin: 0 0 var(--sp-2);
}

.bc-page-subscribe .bc-page__body h2 {
  font: var(--text-h1);
  letter-spacing: var(--track-tight);
  margin: 0 0 var(--sp-5);
}

.bc-page__body a {
  color: var(--text-link);
}

.bc-page__body a:hover {
  color: var(--text-link-hover);
}

/* The short line under a form heading. */
.bc-page .bc-page__note {
  font: var(--text-body-sm);
  color: var(--ink-600);
  margin: 0 0 var(--sp-6);
}

/* Numbered legal sections (Terms). The counter is on the wrapper so the
   numbering survives a section being added or removed in the editor — and, per
   the wrapper rule in section 2, on whichever of the two elements the editor
   actually produced. */
.bc-page__body--numbered:not(:has(> .wp-block-group__inner-container)),
.bc-page__body--numbered > .wp-block-group__inner-container {
  counter-reset: bc-clause;
}

.bc-page__body--numbered h2 {
  counter-increment: bc-clause;
}

.bc-page__body--numbered h2::before {
  content: counter(bc-clause) ". ";
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   4. Legal pages — anchor nav beside the prose
   ---------------------------------------------------------------
   Reference: grid minmax(200px,1fr) / minmax(0,40rem), gap 72, nav sticky at
   86 in a gap:12 column. The nav markup is generated in inc/page-parts.php. */
.bc-page__legal {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, var(--measure-article));
  gap: var(--sp-10);
  align-items: start;
}

.bc-page__legal-body {
  min-width: 0;
}

.bc-page__anchors {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.bc-page .bc-page__anchors .bc-page__eyebrow {
  margin-bottom: var(--sp-2);
}

.bc-page__anchors a {
  font: var(--w-regular) var(--size-nav) / var(--lh-ui) var(--font-ui);
  color: var(--ink-700);
  text-decoration: none;
}

.bc-page__anchors a:hover {
  color: var(--text-strong);
  text-decoration: none;
}

/* Reference: article gap 16, section padding 24px-0 with a hairline on top,
   section gap 12. Folded into flow margins that collapse against the preceding
   paragraph's 24: 40 clear, the rule, 24, the heading, 12, the prose. The body
   copy stays at 18/30.96 — the 20px lede belongs to About and to the standfirst
   above the nav, not to the clauses. */
.bc-page-privacy-policy .bc-page__body h2,
.bc-page-terms-and-conditions .bc-page__body h2 {
  margin: var(--sp-8) 0 var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-hairline);
}

/* ---------------------------------------------------------------
   5. Cards, blocks and asides
   ---------------------------------------------------------------
   The reference's card is not a card: it is a rule and a stack. Transparent
   ground, no radius, a 2px accent along the top, 16 of air under it and a gap
   of 10 between the label and the copy. */
.bc-page__card {
  padding: var(--sp-4) 0 0;
  border-top: 2px solid var(--bc-card-accent, var(--text-accent));
  border-radius: 0;
  background-color: transparent;
}

.bc-page__card:not(:has(> .wp-block-group__inner-container)),
.bc-page__card > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The card's title renders as the eyebrow, in the card's own accent. */
.bc-page__card h3 {
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bc-card-accent, var(--text-accent));
  margin: 0;
}

.bc-page__card p {
  font: var(--text-body-sm);
  margin: 0;
}

/* About's five desk cards each take their section's key, so the page carries
   the same colour coding as the masthead and the archive. A modifier class
   rather than an inline custom property: the block editor supports className
   and does not support arbitrary style attributes on a group. */
.bc-page__card--health {
  --bc-card-accent: var(--cat-health);
}

.bc-page__card--beauty {
  --bc-card-accent: var(--cat-beauty);
}

.bc-page__card--lifestyle {
  --bc-card-accent: var(--cat-lifestyle);
}

.bc-page__card--relationships {
  --bc-card-accent: var(--cat-relationships);
}

.bc-page__card--travel {
  --bc-card-accent: var(--cat-travel);
}

/* --text-accent (--clay-600) rather than the reference's --clay-500. At 12px
   semibold the reference clay measures 4.90:1 on white but only 4.27:1 on the
   page ground, against a 4.5:1 minimum, and half of these eyebrows render on
   the page ground: Contact's aside, Subscribe's support band and the legal
   nav. One token step inside the existing ramp takes those to 7.39:1 and
   6.43:1 and changes no hue — the same correction .bc-minicard__cat already
   carries. The five --cat-* keys are already the 600 weights and pass
   everywhere, so the desk accents are used unaltered. */
.bc-page .bc-page__eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bc-eyebrow-accent, var(--text-accent));
  display: block;
  margin-bottom: var(--sp-3);
}

/* Reference: 400 14/1.45 in --ink-400. --ink-500 here, for the reason recorded
   against .bc-minicard__meta in shared.css — #8D7D6E gives 3.45:1 on the page
   ground where #6F5F51 gives 5.32:1. */
.bc-page .bc-page__numeral {
  font: var(--text-meta);
  color: var(--ink-500);
}

/* A numeral beside its line, ruled off underneath. Subscribe's "what is in it"
   list. */
.bc-page__numitem {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-hairline);
}

.bc-page__numitem:not(:has(> .wp-block-group__inner-container)),
.bc-page__numitem > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: baseline;
}

.bc-page__numitem p {
  font: var(--text-body-sm);
  margin: 0;
}

/* Aside copy is 16/26.88 on both pages that have one, and its links are not
   underlined — they are the whole line, not a word inside a sentence. */
.bc-page__aside p,
.bc-page__aside li {
  font: var(--text-body-sm);
  color: var(--ink-800);
  margin: 0 0 var(--sp-6);
}

.bc-page__aside a {
  color: var(--ink-800);
  text-decoration: none;
}

.bc-page__aside a:hover {
  color: var(--text-link);
  text-decoration: none;
}

/* Contact's aside is a stack of routes, each ruled off: 24 under the copy, the
   hairline, then 32 to the next. Nothing to sit on, so no ground and no stick. */
.bc-page__aside-item {
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line-hairline);
  margin-bottom: var(--sp-7);
}

.bc-page__aside-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 0;
}

.bc-page__aside-item p {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   6. Per-page grid shapes
   ---------------------------------------------------------------
   About   desks   prose column 640 → (640 − 32) / 2 = 304 each
   Subscribe hero  1176 − 96 padding − 72 gap = 1008 → 504 each
   Subscribe help  1176 − 80 gap = 1096 → 365.33 each */
.bc-page-about-us .bc-page__grid {
  --bc-grid-cols: 1fr 1fr;
  --bc-grid-gap: var(--sp-7);
}

/* Reference: the support band opens 96 below the hero panel. */
.bc-page-subscribe .bc-page__panel {
  padding: 48px;
  margin-bottom: var(--sp-11);
}

/* The hero's left column runs at a 20 gap against the right column's 16.
   Everything inside a block is gap-spaced, so the flow margins that section 3
   sets per page have to come back off — at (0,3,1), above the page-scoped H2
   rules that would otherwise double the space. */
.bc-page__block--hero {
  --bc-block-gap: var(--sp-5);
}

.bc-page-subscribe .bc-page__block h2,
.bc-page-subscribe .bc-page__block h3,
.bc-page-subscribe .bc-page__block p {
  margin: 0;
}

.bc-page-subscribe .bc-page__grid {
  --bc-grid-cols: 1fr 1fr;
  --bc-grid-gap: var(--sp-10);
}

.bc-page-subscribe .bc-page__grid--support {
  --bc-grid-cols: repeat(3, minmax(0, 1fr));
  --bc-grid-gap: var(--sp-8);
}

/* ---------------------------------------------------------------
   7. Forms — geometry measured off the reference
   ---------------------------------------------------------------
   Contact 44px controls, Subscribe 48px, both radius 4 with a 1px border at
   .22 alpha. Fluent Forms renders its own markup, so the selectors reach into
   it rather than restyling it wholesale. */
.bc-page input[type="text"],
.bc-page input[type="email"],
.bc-page input[type="search"],
.bc-page select,
.bc-page textarea,
.bc-page .ff-el-form-control {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(23, 19, 16, 0.22);
  border-radius: var(--radius-sm);
  background-color: var(--surface-card);
  font: var(--w-regular) var(--size-nav) / var(--lh-flat) var(--font-ui);
  color: var(--text-strong);
}

.bc-page select,
.bc-page select.ff-el-form-control {
  height: 44px;
  padding: 0 12px;
}

/* Fluent Forms sizes its own select from a custom property, behind
   `select.ff-el-form-control:not([size]):not([multiple])` at (0,3,1) — which
   the rule above cannot outrank without an !important. Setting the variable is
   the supported route and keeps the control on the same 44px grid as the rest.
   Measured on V40.1: the select rendered 23.2px against the other controls' 44. */
.bc-page .fluentform {
  --fluentform-input-select-height: 44px;
}

/* rows="7" at 15px/1.6 is 168, plus 24 of padding and 2 of border = 194. */
.bc-page textarea,
.bc-page textarea.ff-el-form-control {
  height: auto;
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
}

.bc-page button[type="submit"],
.bc-page .ff-btn-submit {
  height: 44px;
  padding: 0 var(--sp-6);
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--ink-900);
  color: var(--text-inverse);
  font: var(--text-button);
  letter-spacing: var(--track-ui);
  cursor: pointer;
}

.bc-page button[type="submit"]:hover,
.bc-page .ff-btn-submit:hover {
  background-color: var(--ink-800);
}

/* Fluent Forms' own chrome. Field groups sit 20 apart, its column containers
   are flexed rather than tabled, and its labels come back to the reference's
   400 14/1.45. The submit rule is repeated at (0,3,0) because Fluent Forms
   prints a per-form style block into the page body — see the Subscribe note
   below. */
.bc-page .fluentform .ff-el-group {
  margin-bottom: var(--sp-5);
}

.bc-page .fluentform .ff-el-group:last-child,
.bc-page .fluentform .ff_submit_btn_wrapper {
  margin-bottom: 0;
}

.bc-page .fluentform .ff-t-container {
  display: flex;
  gap: var(--sp-5);
  margin: 0;
}

.bc-page .fluentform .ff-t-cell {
  flex: 1 1 0%;
  min-width: 0;
  padding: 0;
}

.bc-page .fluentform .ff-el-input--label {
  margin-bottom: var(--sp-2);
  padding: 0;
}

.bc-page .fluentform .ff-el-input--label label {
  font: var(--w-regular) var(--size-meta) / var(--lh-ui) var(--font-ui);
  color: var(--ink-700);
  margin: 0;
}

.bc-page .fluentform .ff-el-form-check {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.bc-page .fluentform .ff-el-form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--clay-500);
}

.bc-page .fluentform .ff-el-form-check label,
.bc-page .fluentform .ff-el-form-check-label {
  font: var(--w-regular) var(--size-meta) / var(--lh-ui) var(--font-ui);
  color: var(--ink-600);
  margin: 0;
}

.bc-page .fluentform .ff-btn-submit {
  height: 44px;
  min-width: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--ink-900);
  color: var(--text-inverse);
}

.bc-page .fluentform .ff-btn-submit:hover {
  background-color: var(--ink-800);
  color: var(--text-inverse);
}

/* Subscribe runs one field beside its button at 48px, inside the reference's
   26rem form: 416 − 12 gap − 116 button = 288 for the field.

   Fluent Forms writes each column's width as an INLINE flex-basis, which no
   stylesheet declaration can outrank. Rather than shout over it, the split is
   set in the form itself (69.23 / 27.88, which is 288 / 116 of 416), so the
   plugin emits the right basis and this file only has to stop the button
   column growing. Overriding it from here instead produced a 0px field and a
   416px button column — measured on V40.1. */
.bc-page-subscribe .fluentform form {
  max-width: 26rem;
}

.bc-page-subscribe .fluentform .ff-t-container {
  gap: var(--sp-3);
}

.bc-page-subscribe .fluentform .ff-t-cell.ff-t-column-2 {
  flex-grow: 0;
  flex-shrink: 0;
}

.bc-page-subscribe .fluentform .ff-el-group {
  margin-bottom: 0;
}

.bc-page-subscribe .fluentform .ff-el-form-control,
.bc-page-subscribe .fluentform .ff-btn-submit {
  height: 48px;
}

/* The field is labelled for assistive technology and unlabelled on screen —
   the reference shows a placeholder only, and an input with no accessible name
   is not something to reproduce. */
.bc-page-subscribe .fluentform .ff-el-input--label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hand-written subscribe rows outside Fluent Forms keep working. */
.bc-page__subscribe {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
}

.bc-page__subscribe input[type="email"],
.bc-page__subscribe button[type="submit"] {
  height: 48px;
}

.bc-page__subscribe input[type="email"] {
  flex: 1 1 260px;
}

/* ---------------------------------------------------------------
   8. 404 — INTENTIONAL IMPLEMENTATION DIFFERENCE
   The reference ships no 404 screen, so this is built from the existing
   system rather than matched to anything.
   --------------------------------------------------------------- */
.bc-404 {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-11) var(--page-pad);
  text-align: center;
}

.bc-404__inner {
  max-width: var(--measure-deck);
  margin: 0 auto;
}

.bc-404__code {
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--sp-4);
}

.bc-404__title {
  font: var(--text-display-md);
  letter-spacing: -0.025em;
  color: var(--text-strong);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

.bc-404__deck {
  font: var(--text-body);
  color: var(--ink-800);
  margin: 0 0 var(--sp-7);
  text-wrap: pretty;
}

.bc-404__search {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-9);
}

.bc-404__search input[type="search"] {
  flex: 1 1 280px;
  max-width: 420px;
}

.bc-404__sections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-bottom: var(--sp-7);
  padding: 0;
  list-style: none;
}

.bc-404__section {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  font: var(--text-nav);
  color: var(--ink-700);
  text-decoration: none;
  border-bottom: 2px solid var(--section-key, var(--line-soft));
}

.bc-404__section:hover {
  background-color: var(--surface-card);
  text-decoration: none;
}

.bc-404__home {
  font: var(--text-caption);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   9. Responsive
   Two stops, matching the rest of the theme. The reference has none — see the
   REFERENCE DEFECT note at the top of this file.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  /* The Contact selectors are repeated here because the page-scoped rule above
     is (0,3,0) and would otherwise outrank a (0,2,0) stack rule inside this
     query — measured on V39.0: Contact held 365/292 at 768 and 147/117 at 375
     while About stacked correctly. The section 6 grid shapes are repeated for
     the same reason. */
  .bc-page__cols:not(:has(> .wp-block-group__inner-container)),
  .bc-page__cols > .wp-block-group__inner-container,
  .bc-page-contact .bc-page__cols:not(:has(> .wp-block-group__inner-container)),
  .bc-page-contact .bc-page__cols > .wp-block-group__inner-container {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-9);
  }

  .bc-page__legal {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-9);
  }

  /* Nothing left to stick to once the column is full width. */
  .bc-page__aside--card,
  .bc-page__anchors {
    position: static;
  }

  .bc-page__grid,
  .bc-page-about-us .bc-page__grid,
  .bc-page-subscribe .bc-page__grid,
  .bc-page-subscribe .bc-page__grid--support {
    --bc-grid-cols: minmax(0, 1fr);
    --bc-grid-gap: var(--sp-7);
  }

  /* The name / email pair wraps rather than shrinking below a usable width. */
  .bc-page .fluentform .ff-t-container {
    flex-wrap: wrap;
  }

  .bc-page .fluentform .ff-t-cell {
    flex: 1 1 240px;
  }
}

@media (max-width: 768px) {
  .bc-page {
    padding: var(--sp-9) var(--page-pad) var(--sp-10);
  }

  .bc-404 {
    padding: var(--sp-10) var(--page-pad);
  }

  .bc-page__panel,
  .bc-page-subscribe .bc-page__panel {
    padding: var(--sp-6);
  }
}

/* 288 + 12 + the button no longer fits a 375 viewport's 335 of content box, so
   the pair stacks. The inline flex-basis has to be beaten to do it — the one
   place a declaration in this file cannot win on specificity alone. */
@media (max-width: 480px) {
  .bc-page-subscribe .fluentform .ff-t-container {
    flex-wrap: wrap;
  }

  .bc-page-subscribe .fluentform .ff-t-cell.ff-t-column-1,
  .bc-page-subscribe .fluentform .ff-t-cell.ff-t-column-2 {
    flex: 1 1 100% !important;
  }
}

/* Colour consistency and heading-line cleanup. Scoped by page ID to About (9), Contact (11), Privacy Policy (3), Terms (15), Affiliate Disclosure (9161) and Subscription (9160); /article/ (13) also loads this file and is left unchanged. All text accents, card top rules and eyebrows take the BitComfy gold; the short bar above each H1 keeps its 56x4px size and 16px gap (same as the category-page rule) and takes the gold. */
body:is(.page-id-9, .page-id-11, .page-id-3, .page-id-15, .page-id-9161, .page-id-9160) .bc-page {
  --text-accent: #7A6212;
  --bc-eyebrow-accent: #7A6212;
  --text-link: #7A6212;
  --text-link-hover: #7A6212;
}

body:is(.page-id-9, .page-id-11, .page-id-3, .page-id-15, .page-id-9161, .page-id-9160) .bc-page__card {
  --bc-card-accent: #7A6212;
}

body:is(.page-id-9, .page-id-11, .page-id-3, .page-id-15, .page-id-9161, .page-id-9160) .bc-page__rule {
  background-color: #7A6212;
}

/* The thin line under the page header is made transparent (space kept) on About, Contact, Privacy, Terms and Affiliate Disclosure, as on the category pages. */
body:is(.page-id-9, .page-id-11, .page-id-3, .page-id-15, .page-id-9161, .page-id-9160, .page-id-13, .page-id-6) .bc-page__head {
  border-bottom-color: transparent;
}

/* Contact page (ID 11) side items: icon, bold title, description. Icon accent is the BitComfy gold. */
body.page-id-11 .bc-page__aside-item--icon > .wp-block-group__inner-container {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

body.page-id-11 .bc-page__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid var(--line-hairline);
  border-radius: 50%;
  color: #7A6212;
  font-size: 16px;
  line-height: 1;
}

body.page-id-11 .bc-page__aside-item--icon .bc-page__aside-title {
  margin: 0 0 var(--sp-1);
  color: var(--text-strong);
}