/*
Theme Name: Catch Matrix
Theme URI: https://github.com/ryanbednar/fishing-log
Author: Bednar Multimedia
Author URI: https://bednarmultimedia.com
Description: Block theme for the Catch Matrix marketing site. Built from the Bednar Multimedia design system — PT Sans / PT Serif, the token palette in theme.json, and block patterns for every section of the Claude Design prototype. Includes a MailerLite-backed Request Access form.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: catch-matrix
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo, editor-style
*/

/* =========================================================================
   Catch Matrix — site styles
   Layout that block markup can't express on its own. Colours, type and
   spacing all come from theme.json presets; nothing is hard-coded twice.
   ========================================================================= */

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* WordPress prints its own skip link for block themes; this just dresses it. */
.skip-link.screen-reader-text:focus {
  background: var(--wp--preset--color--brand-green); color: var(--wp--preset--color--ink-black);
  padding: 12px 20px; font-weight: 700; border-radius: 0 0 6px 0; z-index: 999;
  clip: auto !important; clip-path: none; height: auto; width: auto;
  left: 0; top: 0; position: absolute; text-decoration: none;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-green);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Section rhythm — the prototype's 96px band, tightened on small screens. */
.cm-section { padding-block: clamp(56px, 9vw, 96px); }
.cm-section--tight { padding-block: clamp(48px, 7vw, 88px); }

.cm-eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 18px;
}

.cm-lede { font-size: 1.05rem; line-height: 1.6; text-wrap: pretty; }

/* =========================================================================
   Header
   ========================================================================= */

.cm-header {
  background: var(--wp--preset--color--ink);
  border-bottom: 1px solid var(--wp--custom--hairline);
  position: sticky; top: 0; z-index: 40;
}
.cm-header__inner {
  max-width: 1200px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; gap: 14px 24px;
}
.cm-brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; flex: 0 0 auto;
}
.cm-brand:hover { color: #fff; text-decoration: none; }
.cm-brand img, .cm-brand .custom-logo {
  width: 32px; height: 32px; border-radius: 6px; display: block;
}
.cm-brand__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em;
}

.cm-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-left: auto; }
.cm-nav a { color: #CFCFCF; font-size: 0.9rem; text-decoration: none; display: flex; align-items: center; gap: 7px; }
.cm-nav a:hover { color: #fff; text-decoration: none; }

/* The prototype's active-page dot, driven by WP's own current-menu-item class. */
.cm-nav .current-menu-item > a,
.cm-nav .current_page_item > a { color: #fff; }
.cm-nav .current-menu-item > a::before,
.cm-nav .current_page_item > a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--wp--preset--color--brand-green); display: block; flex: 0 0 auto;
}

.cm-nav__cta {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  background: var(--wp--preset--color--brand-green); color: var(--wp--preset--color--ink-black);
  border-radius: 6px; font-weight: 700; font-size: 0.9rem; text-decoration: none;
}
.cm-nav__cta:hover { background: var(--wp--preset--color--brand-green-dark); color: var(--wp--preset--color--ink-black); text-decoration: none; }

/* Core Navigation block, wearing the prototype's header nav.
   Core's overlay breakpoint is 600px; this moves it to 860px, where the
   three links plus the CTA actually start to crowd the logo. */
.cm-nav.wp-block-navigation { gap: 12px 22px; }
.cm-nav .wp-block-navigation__container { gap: 12px 22px; }
/* Core ships `.wp-block-navigation:not(.has-text-color) .wp-block-navigation-item__content
   { color: inherit }` at (0,3,0). That out-ranks a plainer selector, so the
   links inherited the root #333 body colour on a #1D222A header — 1.26:1, and
   it shipped. The template part now sets an explicit nav colour, which stops
   core's :not(.has-text-color) rule matching at all; this is the belt to that
   braces, in case the nav is later edited in the Site Editor. Specificity
   (0,3,1) was measured against the live page, not guessed. */
.cm-header .cm-nav a.wp-block-navigation-item__content { color: var(--wp--preset--color--on-dark); }
.cm-header .cm-nav a.wp-block-navigation-item__content:hover { color: #fff; }

.cm-header__cta .wp-block-button__link {
  height: 36px; padding: 0 16px; display: inline-flex; align-items: center;
  font-size: 0.9rem; font-weight: 700; border-radius: 6px;
}
.cm-header__cta { margin-left: 8px; }
.cm-header__cta .wp-block-buttons { margin: 0; }

@media (max-width: 859.98px) {
  .cm-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .cm-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.cm-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--ink); padding: 24px 32px;
}
.cm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff; font-size: 1.25rem; }
.cm-nav .wp-block-navigation__responsive-container-open,
.cm-nav .wp-block-navigation__responsive-container-close { color: #fff; }

/* =========================================================================
   Hero
   ========================================================================= */

.cm-hero { background: var(--wp--preset--color--ink); }
.cm-hero.wp-block-cover { min-height: 640px; align-items: flex-end; padding: 0; }
.cm-hero .wp-block-cover__inner-container { width: 100%; }

.cm-hero__grid {
  max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box;
  padding: clamp(96px, 14vw, 140px) 32px 48px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 56px; align-items: end;
}

.cm-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px;
  border: 1px solid rgba(27,184,68,0.5); border-radius: 999px; margin-bottom: 28px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--brand-green-light);
}
.cm-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--wp--preset--color--brand-green); display: block; flex: 0 0 auto;
}

.cm-hero h1 { color: #fff; margin: 0 0 22px; max-width: 17ch; text-wrap: balance; }
.cm-hero__sub {
  font-size: 1.2rem; line-height: 1.55; color: var(--wp--preset--color--on-dark);
  margin: 0 0 34px; max-width: 54ch; text-wrap: pretty;
}
.cm-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cm-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px;
  border-radius: 6px; font-weight: 700; font-size: 1.05rem; text-decoration: none;
  transition: background var(--wp--custom--duration--fast) var(--wp--custom--ease--standard);
}
.cm-btn--primary { background: var(--wp--preset--color--brand-green); color: var(--wp--preset--color--ink-black); }
.cm-btn--primary:hover { background: var(--wp--preset--color--brand-green-dark); color: var(--wp--preset--color--ink-black); text-decoration: none; }
.cm-btn--ghost { border: 1px solid rgba(255,255,255,0.35); color: #fff; }
.cm-btn--ghost:hover { border-color: #fff; color: #fff; text-decoration: none; }

/* =========================================================================
   Gauge card + metric pills (shared)
   ========================================================================= */

.cm-gauge-card {
  background: rgba(15,18,22,0.86); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 22px 24px 20px; box-shadow: var(--wp--preset--shadow--float);
  max-width: 460px; justify-self: end; width: 100%; box-sizing: border-box;
}
.cm-gauge-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.cm-gauge-card__name { font-size: 0.95rem; font-weight: 700; color: #fff; line-height: 1.3; }
.cm-gauge-card__meta {
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wp--preset--color--on-dark-faint); margin-top: 4px;
}
.cm-gauge-card__note {
  border-top: 1px solid rgba(255,255,255,0.1); margin-top: 14px; padding-top: 14px;
  font-size: 0.85rem; line-height: 1.5; color: var(--wp--preset--color--on-dark-muted);
}
.cm-gauge-card svg { width: 100%; height: auto; display: block; }

.cm-badge {
  margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 4px; padding: 4px 8px; white-space: nowrap;
}
.cm-badge--danger { color: var(--wp--preset--color--danger-light); border: 1px solid rgba(255,71,87,0.55); background: rgba(255,71,87,0.12); }
.cm-badge--warning { color: var(--wp--preset--color--warning-text); border: 1px solid rgba(243,156,18,0.55); background: rgba(243,156,18,0.14); }

.cm-metrics { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cm-metric {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
}
.cm-metric__label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Lighter than the prototype's #8A8A8A: at 10px uppercase on near-black
     that was 3.45:1, under WCAG AA. #ADADAD reads the same and clears 7:1. */
  color: #ADADAD;
}
.cm-metric__value { font-size: 1.05rem; font-weight: 700; color: #fff; }
.cm-metric--active { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); }
.cm-metric--light { border-color: var(--wp--preset--color--border-subtle); background: #fff; }
.cm-metric--light .cm-metric__label { color: var(--wp--preset--color--text-muted); }
.cm-metric--light .cm-metric__value { color: #2c3e50; }
.cm-metric--dark { border-color: var(--wp--preset--color--ink); background: var(--wp--preset--color--ink); }
.cm-metric--dark .cm-metric__label { color: #eef0f2; }

.is-danger { color: var(--wp--preset--color--danger-light) !important; }
.is-temp { color: var(--wp--preset--color--temp) !important; }
.is-turbidity { color: var(--wp--preset--color--turbidity) !important; }
.is-oxygen { color: var(--wp--preset--color--oxygen) !important; }

/* =========================================================================
   Gauge strip under the hero
   ========================================================================= */

.cm-gauge-strip {
  background: var(--wp--preset--color--ink);
  border-top: 1px solid var(--wp--custom--hairline);
  padding: 26px 0;
}
.cm-gauge-strip__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap;
}
.cm-gauge-strip__label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--text-faint); padding-bottom: 6px;
}
.cm-gauge-strip__label span { color: var(--wp--preset--color--on-dark-faint); letter-spacing: 0.06em; }
.cm-gauge-strip .cm-metrics { margin-left: auto; margin-bottom: 0; gap: 8px; }
.cm-gauge-strip .cm-metric { padding: 8px 14px; border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); }

/* =========================================================================
   Feature cards
   ========================================================================= */

.cm-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.cm-card {
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-top: 4px solid var(--wp--preset--color--brand-green);
  border-radius: 10px; padding: 30px 26px; background: #fff;
  box-shadow: var(--wp--preset--shadow--sm);
}
.cm-card h3 { font-size: 1.3rem; margin: 0 0 12px; letter-spacing: 0; }
.cm-card p { font-size: 0.95rem; line-height: 1.6; color: var(--wp--preset--color--text-muted); margin: 0; }

/* "Also in the app" — hairline grid built from a 1px gap over the border colour. */
.cm-tile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--wp--preset--color--border-subtle);
  border: 1px solid var(--wp--preset--color--border-subtle);
}
.cm-tile { background: #fff; padding: 28px 24px; }
.cm-tile h3 { font-size: 1rem; margin: 0 0 8px; font-family: var(--wp--preset--font-family--ui); letter-spacing: 0; }
.cm-tile p { font-size: 0.9rem; line-height: 1.55; color: var(--wp--preset--color--text-muted); margin: 0; }

/* =========================================================================
   Data-honesty section (dark, two column)
   ========================================================================= */

.cm-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 64px; align-items: center;
}
.cm-honesty { background: var(--wp--preset--color--ink); }
.cm-honesty h2 { color: #fff; margin: 0 0 20px; max-width: 22ch; }
.cm-honesty__copy p { font-size: 1.05rem; line-height: 1.65; color: var(--wp--preset--color--on-dark-muted); text-wrap: pretty; }
.cm-honesty .cm-eyebrow { color: var(--wp--preset--color--text-faint); }
.cm-honesty a { font-size: 0.95rem; font-weight: 700; }

.cm-mock {
  background: #fff; border-radius: 10px; box-shadow: 0 18px 48px rgba(0,0,0,0.35); overflow: hidden;
}
.cm-mock__head {
  padding: 18px 20px 14px; border-bottom: 2px solid #eef0f2;
  display: flex; align-items: center; gap: 10px;
}
.cm-mock__title { font-size: 1.1rem; font-weight: 700; color: #2c3e50; }
.cm-mock__body { padding: 18px 20px 22px; }
.cm-mock svg { width: 100%; height: auto; display: block; }

/* =========================================================================
   Knowledgebase teaser
   ========================================================================= */

.cm-section-head { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }
.cm-section-head__link { margin-left: auto; font-size: 0.95rem; font-weight: 700; }

.cm-kb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.cm-kb-card {
  border: 1px solid var(--wp--preset--color--border-subtle); border-radius: 10px; padding: 24px;
  text-decoration: none; display: block; background: #fff;
  transition: border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--standard);
}
.cm-kb-card:hover { border-color: var(--wp--preset--color--brand-green); text-decoration: none; }
.cm-kb-card strong { display: block; font-size: 1rem; font-weight: 700; color: var(--wp--preset--color--text-strong); margin-bottom: 6px; }
.cm-kb-card span { font-size: 0.85rem; color: var(--wp--preset--color--text-muted); }

/* =========================================================================
   Request access
   ========================================================================= */

.cm-request { background: var(--wp--preset--color--ink); }
.cm-request__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 64px;
}
.cm-request h1, .cm-request h2 { color: #fff; margin: 0 0 20px; max-width: 20ch; }
.cm-request .cm-eyebrow { color: var(--wp--preset--color--brand-green-light); }
/* Scoped to the copy column on purpose: these dark-section paragraph styles
   must not reach inside the white form card, where they would drop the
   consent line to ~1.9:1 contrast. */
.cm-request__copy p { font-size: 1.05rem; line-height: 1.65; color: var(--wp--preset--color--on-dark-muted); max-width: 46ch; text-wrap: pretty; }

.cm-promises { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.cm-promises li { display: flex; gap: 12px; font-size: 0.95rem; color: var(--wp--preset--color--on-dark); }
.cm-promises li::before { content: "—"; color: var(--wp--preset--color--brand-green); font-weight: 700; flex: 0 0 auto; }

/* ---------- The form ---------- */

.cm-form-shell { background: #fff; border-radius: 10px; padding: 32px; }
.cm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.cm-form label {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  font-size: 0.8rem; font-weight: 700; color: #2c3e50;
}
.cm-form label.cm-form__full { grid-column: 1 / -1; }
.cm-form input[type="text"], .cm-form input[type="email"], .cm-form select, .cm-form textarea {
  padding: 0 12px; height: 40px; border: 1px solid var(--wp--preset--color--border-default);
  border-radius: 6px; box-sizing: border-box; width: 100%; min-width: 0; background: #fff;
  font-family: inherit; font-size: 0.95rem; font-weight: 400; color: #2c3e50;
}
.cm-form textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.cm-form select { padding: 0 10px; }
.cm-form input::placeholder, .cm-form textarea::placeholder { color: #9aa2ab; }
.cm-form__check {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.9rem; font-weight: 400; color: var(--wp--preset--color--text-body); flex-direction: row;
}
.cm-form__check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--wp--preset--color--brand-green); flex: 0 0 auto; }
.cm-form__submit {
  grid-column: 1 / -1; height: 46px; background: var(--wp--preset--color--brand-green);
  color: var(--wp--preset--color--ink-black); border: none; border-radius: 6px;
  font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.cm-form__submit:hover { background: var(--wp--preset--color--brand-green-dark); }
.cm-form__submit[disabled] { opacity: 0.6; cursor: progress; }
.cm-form__consent { grid-column: 1 / -1; font-size: 0.78rem; line-height: 1.5; color: var(--wp--preset--color--text-muted); margin: 0; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.cm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.cm-form__status { grid-column: 1 / -1; font-size: 0.9rem; line-height: 1.5; border-radius: 6px; padding: 12px 14px; margin: 0; }
.cm-form__status:empty { display: none; }
.cm-form__status.is-error { background: #FDECEC; border: 1px solid #F3C0C0; color: #9B2B2B; }
.cm-form__status.is-success { background: #EAF7EE; border: 1px solid #B7E3C4; color: #1E6B33; }
.cm-field-error { display: block; font-size: 0.78rem; font-weight: 400; color: #9B2B2B; }
.cm-form [aria-invalid="true"] { border-color: #C05252; }

/* =========================================================================
   Footer
   ========================================================================= */

.cm-footer { background: var(--wp--preset--color--ink-deep); padding: 56px 0 40px; }
.cm-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start;
}
.cm-footer__blurb { max-width: 34ch; }
.cm-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cm-footer__brand img { width: 28px; height: 28px; border-radius: 6px; display: block; }
.cm-footer__brand span { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1rem; color: #fff; }
.cm-footer__blurb p { font-size: 0.85rem; line-height: 1.6; color: var(--wp--preset--color--text-faint); margin: 0; }
.cm-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; margin-left: auto; }
.cm-footer__col { display: flex; flex-direction: column; gap: 10px; }
.cm-footer__col h2, .cm-footer__col .cm-footer__heading {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--on-dark-faint); margin: 0; font-family: var(--wp--preset--font-family--ui);
}
.cm-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cm-footer__col a { font-size: 0.88rem; color: #CFCFCF; text-decoration: none; }
.cm-footer__col a:hover { color: #fff; text-decoration: none; }
.cm-footer__base {
  max-width: 1200px; margin: 40px auto 0; padding: 20px 32px 0;
  border-top: 1px solid var(--wp--custom--hairline);
  display: flex; gap: 24px; flex-wrap: wrap;
}
.cm-footer__base span { font-size: 0.78rem; color: var(--wp--preset--color--on-dark-faint); }
.cm-footer__base span + span { margin-left: auto; }

/* =========================================================================
   Editor niceties
   ========================================================================= */

.editor-styles-wrapper .cm-hero.wp-block-cover { min-height: 480px; }
.editor-styles-wrapper .cm-header { position: static; }

/* =========================================================================
   Full-width sections
   Every section is an alignfull group that owns its own gutters; WP's
   constrained layout centres the children at 1136px inside them.
   ========================================================================= */

.cm-section, .cm-section--tight, .cm-gauge-strip-wrap { padding-inline: 32px; }
.cm-gauge-strip-wrap { padding-inline: 0; }
.cm-hero { padding-inline: 0; }

/* The section grids do their own spacing — drop WP's block-gap margins. */
.cm-card-grid > *, .cm-tile-grid > *, .cm-kb-grid > *,
.cm-split > *, .cm-hero__grid > *, .cm-request__grid > * { margin-block: 0 !important; }

.cm-card > *:first-child, .cm-tile > *:first-child { margin-block-start: 0 !important; }
.cm-card > *:last-child, .cm-tile > *:last-child { margin-block-end: 0 !important; }

/* =========================================================================
   Hero background + scrim
   The photo is set as the Group's background image in the editor; the scrim
   is this pseudo-element, so swapping the photo never disturbs the gradient.
   ========================================================================= */

.cm-hero {
  position: relative; min-height: 640px; display: flex; align-items: flex-end;
  background-color: var(--wp--preset--color--ink);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cm-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(29,34,42,0.82) 0%, rgba(29,34,42,0.62) 45%, rgba(29,34,42,0.96) 100%);
}
.cm-hero > * { position: relative; z-index: 1; width: 100%; }

/* Core button blocks, wearing the prototype's hero button shape. */
.cm-hero__actions .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 26px; font-size: 1.05rem; font-weight: 700; border-radius: 6px;
}
.cm-hero__actions .is-style-outline .wp-block-button__link {
  border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #fff;
}
.cm-hero__actions .is-style-outline .wp-block-button__link:hover { border-color: #fff; color: #fff; }

/* =========================================================================
   Colour handoffs the block editor sets via preset classes
   ========================================================================= */

.cm-honesty a, .cm-request a { color: var(--wp--preset--color--brand-green); }
.cm-honesty a:hover, .cm-request a:hover { color: var(--wp--preset--color--brand-green-light); }
.cm-section-head__link { margin-block: 0 !important; }

/* Stack the split sections before the columns get uncomfortably narrow. */
@media (max-width: 900px) {
  .cm-split, .cm-request__grid { gap: 40px; }
  .cm-hero__grid { gap: 40px; }
  .cm-gauge-card { justify-self: stretch; max-width: none; }
}
@media (max-width: 600px) {
  .cm-section, .cm-section--tight { padding-inline: 20px; }
  .cm-hero__grid, .cm-gauge-strip__inner, .cm-footer__inner, .cm-footer__base, .cm-header__inner { padding-inline: 20px; }
  .cm-form-shell { padding: 24px 20px; }
  .cm-gauge-strip .cm-metrics { margin-left: 0; }
}

/* ---------- Header at small widths ----------
   Order the row logo | Request access | menu button, so the call to action
   never hides behind the hamburger, and never wraps onto two lines. */
.cm-header__cta .wp-block-button__link { white-space: nowrap; }

@media (max-width: 859.98px) {
  .cm-nav { order: 3; margin-left: 0; }
  .cm-header__cta { order: 2; margin-left: auto; }
  .cm-header__inner { gap: 12px; }
}
@media (max-width: 420px) {
  .cm-header__cta .wp-block-button__link { padding-inline: 12px; font-size: 0.85rem; }
  .cm-brand__name { font-size: 0.95rem; }
}

/* The consent checkbox is the one label that runs in a row, not a column. */
.cm-form label.cm-form__check { flex-direction: row; align-items: flex-start; }

/* =========================================================================
   Seams between full-bleed bands
   WordPress inserts its 24px block gap between every top-level block — which
   here means a stripe of page background between the header and the hero, and
   between each colour band. On a design built from flush full-bleed sections
   that reads as a rendering fault, not as spacing. The gap belongs INSIDE a
   section, not between them.
   ========================================================================= */

.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks .entry-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }