/* Blog blocks (blog-listing + blog-article, Claude CMS blocks library) and the Contact form — mywaycompanions.co.uk.
   Deployed 8 Oct 2026; re-skinned the same day when the site became a store: the --block-* tokens follow the
   storefront's own theme variables (store.css: --ink, --ink-dim, --hairline, --sheet-bg, --accent, --accent-ink), so
   the blog and the form switch with the store's light/dark theme and pick up its brand colour. Each token falls back
   to the stand-alone CMS theme (--text, --muted, --border, --surface) in case the store is ever taken off.
   Tints use color-mix() on the accent, so a new brand colour needs no edit here.
   The /news page carries the listing markup and loads assets/js/blog.js; each article is a "post" inside .article-wrap.
   Rules are prefixed .rp-container where the content-page styles in templates/header.php would otherwise win. */
:root {
  --block-border-color: var(--hairline, var(--border, rgba(127,127,127,.28)));
  --block-border: 1px solid var(--block-border-color);
  --block-radius-sm: 6px;
  --block-radius-md: 14px;
  --block-surface: var(--sheet-bg, var(--surface, #131313));
  --block-text: var(--ink, var(--text, #f5f5f7));
  --block-text-muted: var(--ink-dim, var(--muted, #a1a1aa));
  --block-accent: var(--accent-ink, var(--accent, #b2532f));
  --block-fill: var(--accent, #b2532f);
}

/* ── listing: hero (title + subtitle swap per category) ── */
.rp-container .blog-hero { text-align: center; padding: 24px 0 36px; border-bottom: var(--block-border); }
.rp-container .blog-hero h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; margin: 0 0 12px; }
.rp-container .blog-hero p { color: var(--block-text-muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
.blog-container { max-width: 900px; margin: 0 auto; padding: 36px 0 24px; }

/* ── listing: category filter pills ── */
.blog-filters { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.blog-filter-btn {
  background: var(--block-surface); border: var(--block-border); border-radius: 20px;
  padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 500; color: var(--block-text-muted);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.blog-filter-btn:hover, .blog-filter-btn.active {
  background: color-mix(in srgb, var(--block-fill) 12%, transparent);
  border-color: color-mix(in srgb, var(--block-fill) 40%, transparent);
  color: var(--block-accent);
}

/* ── listing: article cards ── */
.blog-grid { display: grid; gap: 20px; }
.blog-card {
  background: var(--block-surface); border: var(--block-border); border-radius: var(--block-radius-md);
  padding: 26px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start;
  transition: border-color .15s;
}
.blog-card:hover { border-color: color-mix(in srgb, var(--block-fill) 45%, transparent); }
.rp-container .blog-card a, .rp-container .blog-card a:hover { text-decoration: none; }
.blog-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.blog-card-cat {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 10px; border-radius: var(--block-radius-sm);
  background: color-mix(in srgb, var(--block-fill) 12%, transparent); color: var(--block-accent);
}
.blog-card-date { font-size: 13px; color: var(--block-text-muted); }
.blog-card-title { font-size: 1.2rem; font-weight: 600; color: var(--block-text); margin-bottom: 8px; line-height: 1.4; }
.rp-container .blog-card-excerpt { font-size: 15px; color: var(--block-text-muted); line-height: 1.6; margin: 0; max-width: none; }
.rp-container .blog-card-more { font-size: 14px; color: var(--block-accent); font-weight: 500; white-space: nowrap; margin-top: 4px; display: inline-block; }
.blog-empty { text-align: center; padding: 64px 24px; color: var(--block-text-muted); }
.rp-container .blog-empty h3 { font-size: 1.3rem; margin: 0 0 10px; color: var(--block-text); }
.rp-container .blog-empty p { font-size: 15px; margin: 0 auto; }

/* ── article (a "post": its content sits in .article-wrap) ── */
.article-wrap { max-width: 740px; margin: 0 auto; padding: 8px 0 40px; }
.rp-container .article-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--block-text-muted); margin-bottom: 28px; text-decoration: none; }
.rp-container .article-back:hover { color: var(--block-text); text-decoration: none; }
.article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.article-cat {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 12px; border-radius: 20px; background: color-mix(in srgb, var(--block-fill) 12%, transparent);
  color: var(--block-accent); border: 1px solid color-mix(in srgb, var(--block-fill) 30%, transparent);
}
.article-date { font-size: 13px; color: var(--block-text-muted); }
.rp-container .article-wrap h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; line-height: 1.12; margin: 0 0 20px; }
.rp-container .article-wrap .article-lead { font-size: 1.15rem; color: var(--block-text-muted); margin: 0 0 36px; border-bottom: var(--block-border); padding-bottom: 30px; line-height: 1.7; }
.rp-container .article-wrap h2 { font-size: 1.4rem; font-weight: 700; margin: 38px 0 14px; }
.rp-container .article-wrap h3 { font-size: 1.05rem; font-weight: 600; color: var(--block-accent); margin: 28px 0 10px; }
.rp-container .article-wrap p, .rp-container .article-wrap li { color: var(--block-text); }
.rp-container .article-wrap code { font-family: ui-monospace, 'Courier New', monospace; font-size: 13px; background: var(--block-surface); color: var(--block-accent); padding: 2px 7px; border-radius: 4px; }
.rp-container .article-wrap pre { background: var(--block-surface); border: var(--block-border); border-radius: var(--block-radius-md); padding: 20px; font-size: 13px; line-height: 1.65; overflow-x: auto; margin: 12px 0 20px; }
.rp-container .article-wrap pre code { background: none; padding: 0; color: var(--block-text); }
.rp-container .article-wrap .article-end { margin-top: 36px; padding-top: 28px; border-top: var(--block-border); font-size: 15px; }

/* ── Contact page: the store-demo's contact layout (.cf grid — summary left, form card right), with the Content
   area's form-builder markup (.cf1-*) inside the card. Light-mode rules copied from the store's contact.php; the
   dark-mode rules for .cf-side and .cf-form already live in store.css. Everything sits under .cf / .cf-form, so a
   rebuild of the form from the form builder keeps the look. */
.rp-container .cf { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; padding: 20px 0 30px; }
.rp-container .cf h1 { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 48px; line-height: 1.08; font-weight: 700; letter-spacing: -.012em; margin: 0; }
.rp-container .cf-lede { margin: 14px 0 0; font-size: 19px; line-height: 1.4; color: var(--ink-dim); max-width: none; }
.rp-container .cf-side { margin-top: 34px; font-size: 15px; line-height: 1.55; color: #3d3d42; }
.rp-container .cf-side h3 { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-dim); margin: 22px 0 6px; }
.rp-container .cf-side p { font-size: 15px; line-height: 1.55; margin: 0; }
.rp-container .cf-side a { color: var(--accent-ink); }
.cf-form { background: #f3f3f5; border-radius: 24px; padding: 32px; }
.cf-form .cf1 { padding: 0; }
.cf-form .cf1-inner { max-width: none; }
.cf-form .cf1-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cf-form .cf1-field { gap: 7px; margin-bottom: 16px; }
.cf-form .cf1-field:has(textarea), .cf-form .cf1-check, .cf-form .cf1-btn, .cf-form .cf1-msg { grid-column: 1 / -1; }
.cf-form .cf1-form label { font-size: 12px; font-weight: 400; color: var(--ink-dim); }
.cf-form .cf1-form label span[aria-hidden] { display: none; }
.cf-form .cf1-form input:not([type=checkbox]), .cf-form .cf1-form select, .cf-form .cf1-form textarea {
  font: inherit; font-size: 15px; padding: 12px 14px; border: 1.5px solid var(--hairline); border-radius: 12px; background: #fff; color: var(--ink);
}
html[data-theme="dark"] .cf-form .cf1-form input:not([type=checkbox]), html[data-theme="dark"] .cf-form .cf1-form select,
html[data-theme="dark"] .cf-form .cf1-form textarea { background: var(--d-surface); color: var(--d-text); }
.cf-form .cf1-form input:not([type=checkbox]):focus, .cf-form .cf1-form select:focus, .cf-form .cf1-form textarea:focus {
  outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.cf-form .cf1-form textarea { min-height: 160px; }
.cf-form .cf1-form ::placeholder { color: transparent; }
.cf-form .cf1-btn { justify-self: start; background: var(--accent); color: #fff; border-radius: 980px; padding: 13px 26px; font-size: 15px; font-weight: 500; }
.cf-form .cf1-btn:hover { background: var(--accent-hover); filter: none; }
.cf-form .cf1-msg { margin-top: 10px; color: #b3261e; }
html[data-theme="dark"] .cf-form .cf1-msg { color: #f5c07a; }
.cf-form .cf1-thanks { margin: 0; padding: 28px 0; text-align: center; font-size: 22px; font-weight: 700; color: var(--ink); }
html[data-theme="dark"] .cf-form .cf1-thanks { color: var(--d-text); }
.rp-container .cf-note { font-size: 12px; color: var(--ink-dim); margin: 12px 0 0; line-height: 1.5; max-width: none; }
@media (max-width: 833px) {
  .rp-container .cf { grid-template-columns: 1fr; gap: 28px; }
  .rp-container .cf h1 { font-size: 36px; }
  .cf-form { padding: 22px; }
  .cf-form .cf1-form { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .blog-card { grid-template-columns: 1fr; padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-filter-btn, .blog-card { transition: none; }
}