/* Generic content pages — About, Contact, Returns. Page-specific; enqueued
   only when page-templates/content.php is the active template. */

/* ===== simple variant (Contact, Returns) ===== */

.bkc-content{max-width:var(--container-max);margin:0 auto;padding:var(--space-9) var(--gutter-page-lg) var(--space-13)}
/* Real prototype's About Q&A card: #E7E3DC (--surface-panel, not
   --surface-card — that's the product-card token, a real but different
   shade), no grime texture on this one, and a 10px chamfer (repo/README.md
   names this card explicitly as one of the chamfer's few uses) — corrected
   2026-08-30, this card previously had grime and no chamfer at all. */
.bkc-content__card{background:var(--surface-panel);border:var(--border-hair) solid var(--line-hairline);box-shadow:var(--shadow-plate);padding:var(--space-11) var(--space-11) var(--space-12);max-width:var(--measure-prose);clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))}
.bkc-content__eyebrow{color:var(--rust-500)}
.bkc-content__title{text-transform:uppercase;margin-top:var(--space-6)}
.bkc-content__body{margin-top:var(--space-8);font:var(--type-body);color:var(--text-body)}
.bkc-content__body p{max-width:var(--measure-prose);margin:0 0 var(--space-7)}
.bkc-content__body p:last-child{margin-bottom:0}
.bkc-content__body a{color:var(--text-link)}
.bkc-content__body a:hover{color:var(--text-link-hover)}

@media (max-width: 780px){
	.bkc-content{padding:var(--space-8) var(--gutter-page) var(--space-11)}
	.bkc-content__card{padding:var(--space-9)}
}

/* ===== about variant ===== */

.bkc-about{max-width:var(--container-max);margin:0 auto;padding:var(--space-9) var(--gutter-page-lg) var(--space-13)}
.bkc-about__eyebrow{color:var(--rust-500)}
.bkc-about__title{text-transform:uppercase;margin-top:var(--space-6)}
/* Contact / Store Policies / Privacy also use the .bkc-about shell (grid,
   eyebrow, title are all page-agnostic) — this intro line and the privacy
   "last updated" stamp are the only bits About itself doesn't need. */
.bkc-about__intro{font:var(--type-body);color:var(--text-body);max-width:60ch;margin:var(--space-5) 0 0}
.bkc-policy-updated{font:var(--type-stencil);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);margin:var(--space-5) 0 0}

/* 48px gap and the 760/280-320 column split are literal per repo/README.md's
   About spec — the design's spacing scale doesn't have an exact 48px stop
   (40 or 56 are the neighbours), so this one is a deliberate off-scale value
   rather than a token. */
.bkc-about__grid{display:grid;grid-template-columns:minmax(0,760px) minmax(280px,320px);gap:48px;align-items:start;margin-top:var(--space-9)}

.bkc-qa-card{padding:44px 48px 48px}
.bkc-qa{margin:0}
.bkc-qa__row{padding:var(--space-7) 0;border-top:var(--border-hair) solid var(--line-hairline)}
.bkc-qa__row:first-child{border-top:0}
.bkc-qa__row dt{font:var(--fw-semibold) var(--fs-500)/1.35 var(--font-display);color:var(--text-strong)}
.bkc-qa__row dd{margin:var(--space-4) 0 0;font:var(--type-body);line-height:var(--lh-loose);color:var(--text-body);max-width:58ch}
.bkc-qa__row dd a{color:var(--text-link)}
.bkc-qa__row dd a:hover{color:var(--text-link-hover)}
/* Store Policies' answers are the first real use of multiple paragraphs and
   a bulleted list inside a dd — About's answers are always a single line. */
.bkc-qa__row dd p{margin:0 0 var(--space-4)}
.bkc-qa__row dd p:last-child{margin-bottom:0}
.bkc-qa__row dd ul{margin:var(--space-3) 0 0;padding-left:1.2em}
.bkc-qa__row dd li{margin:0 0 var(--space-2)}
/* Privacy's definition lists run many more rows than About's ~12 Q&As in
   the same card width — tighter padding and a smaller dt so a section like
   "What we collect" (5 defs) doesn't sprawl. */
.bkc-qa--compact .bkc-qa__row{padding:var(--space-5) 0}
.bkc-qa--compact .bkc-qa__row dt{font:var(--fw-semibold) var(--fs-400)/1.35 var(--font-display)}
.bkc-qa--compact .bkc-qa__row dd{font:var(--type-body-sm);line-height:var(--lh-loose)}

/* ===== Store Policies / Privacy: stacked section cards ===== */

.bkc-policy-list{display:flex;flex-direction:column;gap:var(--space-7)}
.bkc-policy-section{padding:36px 40px 40px}
.bkc-policy-section > p{font:var(--type-body);color:var(--text-body);max-width:58ch;margin:0 0 var(--space-5)}
.bkc-policy-section > p:last-child{margin-bottom:0}
.bkc-policy-section__title{color:var(--rust-500);margin-bottom:var(--space-6)}
/* Privacy's "The short version" card — same soot plate treatment as the
   About/Contact sidebar, but full content-column width, not sidebar width. */
.bkc-policy-section--soot{background:var(--soot-900);background-image:var(--grime-scanlines);border:var(--border-hair) solid var(--line-inverse)}
.bkc-policy-section--soot .bkc-policy-section__title{color:var(--ash-300)}
.bkc-policy-section--soot > p{color:var(--ash-050)}

/* ===== Contact form ===== */

.bkc-contact-form{display:flex;flex-direction:column;gap:var(--space-6)}
.bkc-contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:start}
.bkc-contact-form textarea.bkc-input{min-height:160px}
.bkc-contact-form__footer{border-top:var(--border-hair) solid var(--line-hairline);padding-top:var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.bkc-contact-form__optin{display:flex;align-items:center;gap:var(--space-3);font:var(--type-body-sm);color:var(--text-body);cursor:pointer}
.bkc-contact-form__optin input{width:16px;height:16px;accent-color:var(--soot-900);cursor:pointer}

.bkc-contact-sent{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.bkc-contact-sent__title{font:var(--fw-bold) clamp(24px,2.4vw,34px)/1.05 var(--font-display);text-transform:uppercase;color:var(--text-strong);letter-spacing:-.01em;margin:0}
.bkc-contact-sent p{font:var(--type-body);color:var(--text-body);max-width:52ch;margin:0}

.bkc-about__rail{position:sticky;top:84px;display:flex;flex-direction:column;gap:var(--space-7)}

.bkc-rail-plate{padding:var(--space-8);border:var(--border-hair) solid var(--line-strong)}
.bkc-rail-plate__heading{margin-bottom:var(--space-6)}
.bkc-rail-plate__body{font:var(--type-body-sm);margin:0 0 var(--space-6)}

/* Real prototype's "The whole operation" sidebar plate: #221E19
   (--soot-900), not the hero/footer ground (--surface-inverse, #2A2C29) —
   corrected 2026-08-30. */
.bkc-rail-plate--soot{background:var(--soot-900);background-image:var(--grime-scanlines);color:var(--text-inverse)}
.bkc-rail-plate--soot .bkc-rail-plate__heading{color:var(--ash-300)}

.bkc-rail-plate--steel{background:var(--surface-plate);background-image:var(--grime-hatch)}
.bkc-rail-plate--steel .bkc-rail-plate__heading{color:var(--text-steel-label)}
.bkc-rail-plate--steel .bkc-rail-plate__body{color:var(--text-body)}

.bkc-rail-stats{margin:0;display:flex;flex-direction:column}
.bkc-rail-stats__row{display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-4) 0;border-top:1px dotted var(--line-inverse)}
.bkc-rail-stats__row:first-child{border-top:0}
.bkc-rail-stats__row dt{font:var(--type-body-sm);color:var(--ash-400);margin:0}
.bkc-rail-stats__row dd{font:var(--type-code);color:var(--text-inverse);margin:0;text-align:right}

/* Shared signup-form bits, reused by About's rail and (separately) the
   Newberger page — see inc/newsletter.php's bkc_newsletter_form(). */
.bkc-signup-form{display:flex;gap:var(--space-4)}
.bkc-signup-form__input{flex:1;min-width:0;height:var(--control-h-md);padding:0 var(--space-5);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-2);background:var(--surface-sunken);box-shadow:var(--shadow-inset-well);font:var(--type-body-sm);color:var(--text-strong)}
.bkc-signup__message{font:var(--type-body-sm);color:var(--status-ok)}
.bkc-signup__message--error{color:var(--status-bad)}

@media (max-width: 900px){
	.bkc-about__grid{grid-template-columns:1fr}
	.bkc-about__rail{position:static}
}

@media (max-width: 780px){
	.bkc-about{padding:var(--space-8) var(--gutter-page) var(--space-11)}
	.bkc-qa-card{padding:var(--space-8)}
	.bkc-policy-section{padding:var(--space-8)}
	.bkc-contact-form__row{grid-template-columns:1fr}
}