/* Additions to the compiled stylesheet (styles.css): the mobile menu, the contact form states
   and the article pages. Colours come from the variables styles.css defines. */

.bc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bc-status { margin: 0; font-size: 0.875rem; min-height: 1.25rem; }
.bc-status[data-kind="error"] { color: #ffb4a3; }
.bc-thanks { display: grid; place-items: center; min-height: 16rem; text-align: center; font-size: 1.25rem; font-weight: 600; }

.bc-mobile-nav { display: none; border-top: 1px solid var(--border); background: var(--background); padding: 0.5rem 1.5rem 1rem; }
.bc-mobile-nav.open { display: block; }
.bc-mobile-nav a { display: block; padding: 0.75rem 0; font-size: 0.95rem; font-weight: 500; color: var(--foreground); text-decoration: none; border-bottom: 1px solid var(--border); }
.bc-mobile-nav a:last-child { border-bottom: 0; color: var(--accent); font-weight: 700; }
@media (min-width: 768px) { .bc-mobile-nav, .bc-mobile-nav.open { display: none; } }

.bc-page { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }
.bc-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.bc-page h1 { margin-top: 0.75rem; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.025em; color: var(--foreground); }
.bc-lede { margin-top: 1rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted-foreground); }
.bc-meta { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }

.bc-prose { margin-top: 2.5rem; font-size: 1.0625rem; line-height: 1.75; color: var(--foreground); }
.bc-prose h2 { margin: 2.5rem 0 0.75rem; font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.bc-prose h3 { margin: 2rem 0 0.5rem; font-size: 1.2rem; font-weight: 700; }
.bc-prose p { margin: 0 0 1.25rem; }
.bc-prose ul, .bc-prose ol { margin: 0 0 1.25rem; padding-left: 1.4rem; list-style: revert; }
.bc-prose li { margin-bottom: 0.4rem; }
.bc-prose a { color: #a54624; text-decoration: underline; text-underline-offset: 2px; }
.bc-prose strong { font-weight: 700; }
.bc-prose table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; font-size: 0.95rem; }
.bc-prose th, .bc-prose td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; }
.bc-prose th { font-weight: 600; color: var(--muted-foreground); }
.bc-table-wrap { overflow-x: auto; }

.bc-cta { margin-top: 3rem; padding: 1.75rem; border-radius: 1rem; background: #fbeee8; }
.bc-cta h2 { font-size: 1.25rem; font-weight: 700; color: var(--foreground); }
.bc-cta p { margin-top: 0.5rem; color: var(--muted-foreground); }
.bc-button { display: inline-block; margin-top: 1rem; padding: 0.8rem 1.5rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.bc-button:hover { background: #a54624; }

.bc-postlist { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
.bc-postcard { display: block; padding: 1.5rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; text-decoration: none; color: inherit; transition: box-shadow 0.15s, transform 0.15s; }
.bc-postcard:hover { box-shadow: 0 8px 24px rgb(9 17 35 / 0.08); transform: translateY(-2px); }
.bc-postcard h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; color: var(--foreground); }
.bc-postcard p { margin-top: 0.5rem; color: var(--muted-foreground); }
.bc-postcard time { display: block; margin-top: 0.75rem; font-size: 0.8rem; color: var(--muted-foreground); }

/* Gallery of sample designs: each card shows a live, scaled-down view of the page it links to. */
.bc-page.bc-wide { max-width: 72rem; }
.bc-gallery { margin-top: 2.5rem; display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.bc-example { display: block; border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow 0.15s, transform 0.15s; }
.bc-example:hover { box-shadow: 0 14px 34px rgb(9 17 35 / 0.12); transform: translateY(-3px); }
.bc-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--muted); border-bottom: 1px solid var(--border); }
.bc-shot iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; transform: scale(var(--shot-scale, 0.33)); pointer-events: none; }
.bc-example-text { padding: 1.25rem 1.5rem 1.5rem; }
.bc-example-text span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.bc-example-text h2 { margin-top: 0.4rem; font-size: 1.3rem; font-weight: 700; color: var(--foreground); }
.bc-example-text p { margin-top: 0.4rem; color: var(--muted-foreground); }
.bc-example-text b { display: inline-block; margin-top: 0.9rem; font-size: 0.9rem; font-weight: 600; color: #a54624; }