/* ============================================================
   ChoiceEx Partners — WordPress-only adjustments
   ------------------------------------------------------------
   assets/css/app.css is a verbatim copy of src/styles.css and must stay that
   way, so everything WordPress drags in that the React app never had lives
   here: the admin bar, WPForms' form markup, pagination, post chrome, and
   the block editor's own output.

   Nothing in this file restyles the design — it maps WordPress markup onto
   the classes the design already defines.
   ============================================================ */

/* ------------------------------------------------------------
   Admin bar — the header is position: fixed, so it needs pushing down
   for logged-in users. Cosmetic; visitors never see this.
   ------------------------------------------------------------ */
body.admin-bar .header { top: 32px; }
body.admin-bar .hero { min-height: calc(100vh - 32px); min-height: calc(100svh - 32px); }
body.admin-bar .nav.open .nav__links { top: calc(var(--header-h) + 32px); }
/* `.section--lead` is the clearance a page opening without a hero carries for
   the fixed header — Articles and the post body. The admin bar pushes that
   header down, so the clearance has to follow it or the first eyebrow sits
   under the bar. */
body.admin-bar .section--lead { padding-top: calc(var(--header-h) + 32px + clamp(44px, 5vw, 76px)); }
body.admin-bar .cx-banner { padding-top: calc(var(--header-h) + 32px); }

@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
  body.admin-bar .hero { min-height: calc(100vh - 46px); min-height: calc(100svh - 46px); }
  body.admin-bar .nav.open .nav__links { top: calc(var(--header-h) + 46px); }
  body.admin-bar .section--lead { padding-top: calc(var(--header-h) + 46px + clamp(44px, 5vw, 76px)); }
  body.admin-bar .cx-banner { padding-top: calc(var(--header-h) + 46px); }
}

/* ------------------------------------------------------------
   Skip link
   ------------------------------------------------------------ */
.cx-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--charcoal);
  color: var(--silver-light);
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 3px 0;
}
.cx-skip-link:focus {
  left: 0;
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

/* Visible focus everywhere — the SPA relied on browser defaults, and
   app.css removes outlines in a few places. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   Post body
   ------------------------------------------------------------ */
.cx-entry--narrow {
  width: 100%;
  max-width: calc(820px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* ------------------------------------------------------------
   Elementor-built posts
   ------------------------------------------------------------
   The 17 existing posts share one Elementor template, and that template is a
   whole page rather than an article: a header container with the old logo,
   tagline and nav; a full-bleed banner image; the text in a 70% column with a
   30% "Recent Posts" rail beside it; then the old footer and a copyright bar.
   functions.php puts single.php back in charge of the page, so the theme now
   supplies the header, the footer and the closing CTA — which leaves the
   template's own copies of all three to remove, and the prose to set.

   The element ids below are stable: the template was copied into every post, so
   every article carries the same ids. Each selector is also backed by a
   structural one, so a post that was rebuilt from scratch still lands right.
   Every rule below is written `body .cx-entry.cx-entry--builder …` and the
   redundant-looking parts are load-bearing. Elementor's per-post stylesheet
   scopes everything as `.elementor-NNNN .elementor-element.elementor-element-
   xxx` — three classes. Two classes plus `body` would lose to that, because an
   element name is a weaker component than a class, so the wrapper is named
   twice to get a third class in and the `body` then breaks the tie. */
/* --- 1. the chrome the theme now supplies --- */
body .cx-entry.cx-entry--builder .elementor-element-32cf279,          /* header: logo, tagline, nav */
body .cx-entry.cx-entry--builder .elementor-element-7c59403b,         /* footer: nav, socials, contact */
body .cx-entry.cx-entry--builder .elementor-element-4572d84b,         /* "Coachamit © …" bar */
body .cx-entry.cx-entry--builder .e-con-parent:has(.elementor-widget-navigation-menu),
body .cx-entry.cx-entry--builder .elementor-top-section:has(.elementor-widget-icon-list),
body .cx-entry.cx-entry--builder .elementor-widget-navigation-menu,
body .cx-entry.cx-entry--builder .hfe-nav-menu,
/* the landing banner above the title — the article opens on its headline now */
body .cx-entry.cx-entry--builder .blog-detail-hero,
body .cx-entry.cx-entry--builder .elementor-element-db39ed2,
/* the rail: the postnav and the article index below replace it, and at 30% it
   was holding the text to a measure no long-form piece should read at */
body .cx-entry.cx-entry--builder .elementor-element-6f70e57,
body .cx-entry.cx-entry--builder .elementor-widget-wp-widget-recent-posts {
  display: none !important;
}

/* --- 2. the frame around the prose --- */
/* The measure is set once, here, on the wrapper the theme owns — the same one
   a block-editor post gets — and then every Elementor box inside is collapsed
   to a plain flow. Setting it on the Elementor containers instead does not
   work: the template nests a section inside a section inside a column, so each
   level applied the measure again and the text ended up half-width and off the
   page's own left edge. */
.cx-entry--builder {
  width: 100%;
  max-width: calc(820px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* !important, and deliberately. The per-post stylesheet is generated, so the
   specificity it lands on varies by element — the article column's padding
   arrives at four classes, its width at three — and matching each one by hand
   is a guess that breaks the next time somebody nudges a setting in Elementor.
   The rule being asserted is simple enough to state flatly: inside this
   wrapper, no Elementor box has a layout of its own. */
body .cx-entry.cx-entry--builder .elementor-section,
body .cx-entry.cx-entry--builder .elementor-container,
body .cx-entry.cx-entry--builder .elementor-column,
body .cx-entry.cx-entry--builder .elementor-widget-wrap,
body .cx-entry.cx-entry--builder .elementor-element-populated,
body .cx-entry.cx-entry--builder .e-con,
body .cx-entry.cx-entry--builder .e-con-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
}

/* --- 3. the type --- */
/* Elementor's kit is Roboto / Roboto Slab at 16px in #7A7A7A. Everything below
   moves it onto Inter / Newsreader in charcoal, at the measure app.css sets for
   running prose, without touching a single post's content. */
body .cx-entry.cx-entry--builder,
body .cx-entry.cx-entry--builder .elementor-widget-text-editor {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--charcoal-light);
}
body .cx-entry.cx-entry--builder p,
body .cx-entry.cx-entry--builder li { font-size: 17px; line-height: 1.75; color: var(--charcoal-light); }
body .cx-entry.cx-entry--builder p { margin: 0 0 1.15em; }
body .cx-entry.cx-entry--builder ul,
body .cx-entry.cx-entry--builder ol { padding-left: 22px; margin: 0 0 1.15em; }
body .cx-entry.cx-entry--builder strong { color: var(--charcoal); font-weight: 600; }
body .cx-entry.cx-entry--builder em { font-style: italic; }

/* The post title. Elementor prints it as the first heading in the column; it
   takes .pagehero h1's setting so an article opens the way a page does. */
body .cx-entry.cx-entry--builder h1,
body .cx-entry.cx-entry--builder h1.elementor-heading-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  margin: 0 0 28px;
}
body .cx-entry.cx-entry--builder h2,
body .cx-entry.cx-entry--builder h2.elementor-heading-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin: 44px 0 14px;
}
body .cx-entry.cx-entry--builder h3,
body .cx-entry.cx-entry--builder h4,
body .cx-entry.cx-entry--builder h5,
body .cx-entry.cx-entry--builder h6 {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--charcoal);
}
/* The section headings inside these posts are not headings at all — they are
   set as all-caps <strong> alone in a paragraph. Treated as the section marks
   they are, they become the same gold eyebrow the rest of the site uses to
   open a block.

   The `:not(:has(em))` is what keeps that from swallowing the wrong lines. The
   author writes two things this way: a bare <strong> for a section label, and
   a <strong><em> for an emphatic sentence — "You are still upstream." — which
   is a line of the argument, not a heading, and gets the pull-quote treatment
   below instead. */
body .cx-entry.cx-entry--builder p > strong:only-child:not(:has(em)) {
  display: block;
  margin: 44px 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
body .cx-entry.cx-entry--builder p > strong:only-child:has(em) {
  display: block;
  margin: 32px 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  font-style: italic;
  color: var(--charcoal);
}

body .cx-entry.cx-entry--builder blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 21px;
  font-style: italic;
  color: var(--charcoal);
}
/* app.css strips link colour globally, which is right for the marketing pages
   and wrong inside written prose. */
body .cx-entry.cx-entry--builder .elementor-widget-text-editor a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}
body .cx-entry.cx-entry--builder .elementor-widget-text-editor a:hover { color: var(--charcoal); }
body .cx-entry.cx-entry--builder img { max-width: 100%; height: auto; border-radius: 3px; }
/* the template's accent yellow (#ECBC29) is not this site's gold */
body .cx-entry.cx-entry--builder b.yellow { color: var(--gold); }

/* ------------------------------------------------------------
   Jetpack tail
   ------------------------------------------------------------
   Sharing and "Related" are appended to the_content(). The related grid
   duplicates the postnav directly under it and carries its own card design, so
   it goes; the share row stays, in the site's own type. */
#jp-relatedposts,
.sharedaddy .sd-like { display: none; }
.sharedaddy {
  width: 100%;
  max-width: calc(820px + var(--gutter) * 2);
  margin: 40px auto 0;
  padding-inline: var(--gutter);
}
.sharedaddy .sd-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chrome);
}
.sharedaddy .sd-content a { color: var(--charcoal-light); }
.sharedaddy .sd-content a:hover { color: var(--gold); }

/* post_class() puts `post` on the article element, and `.post` in the design
   system is the card on the Articles index — border, silver ground, 30px of
   padding, a hover lift. On a whole page that reads as an article sitting in a
   box, and it shifted the reading column off the page's centre line. */
article.cx-single {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  transition: none;
}
article.cx-single:hover { transform: none; box-shadow: none; }

/* The other half of that collision, and the costly one: `.post` is also in the
   scroll-reveal list, so `.reveal-init .post` starts the element at
   `opacity: 0` and waits for the observer to add `.in-view`. On an index card
   that is right. On a whole post it is fatal — the observer fires at
   `threshold: 0.12`, and an element can only ever reach a ratio of
   (viewport / its own height), so anything taller than ~8 viewports never
   crosses the line and is never revealed. A long article therefore painted,
   took `reveal-init` a moment later, and vanished for good.
   The masthead, the cover figure and the postnav still reveal on their own. */
.reveal-init article.cx-single {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ------------------------------------------------------------
   Article banner
   ------------------------------------------------------------
   These are not photographs. Most of the library is a composed title card with
   the headline, a standfirst and a diagram set into the artwork — so the image
   is type, and cropping it to a fixed band cuts the headline in half. It is
   shown whole, at its own aspect, always.

   That costs a constant height across posts, which is the right trade: the
   ratios run 1.98, 1.78, 1.74, 1.50 and one 1:1, so a band tight enough to
   suit the widest would have beheaded the rest.

   The black ground continues the header's own black, so the 100px held back
   for the fixed bar reads as one strip rather than a gap, and the dark cards
   sit in it seamlessly. */
.cx-banner {
  background: #000;
  padding-top: var(--header-h);
  padding-inline: var(--gutter);
  padding-bottom: clamp(20px, 3vw, 44px);
}
.cx-banner__img {
  display: block;
  width: 100%;
  /* narrower than --maxw (1360): a 3:2 card at full container width stands
     907px tall and pushes the article off the screen entirely. At 1140 the
     same card lands at 760, which is the cap below. */
  max-width: 1140px;
  height: auto;
  /* Bites on one image in the library — the 1:1 "Pursuit of Capitalism" card,
     which would otherwise open 1140px tall. `contain` letterboxes it rather
     than cropping its type, and since that card's own ground is black the
     bars are invisible against this one. Every other ratio clears the cap. */
  max-height: 760px;
  object-fit: contain;
  margin-inline: auto;
}
/* the banner has already cleared the header, so this only needs section air */
.cx-article--banner { padding-top: clamp(40px, 5vw, 72px); }

/* ------------------------------------------------------------
   Article masthead
   ------------------------------------------------------------
   What is left of the old black page hero: an eyebrow and a date, set on the
   page's own ground. A builder post prints its own <h1> immediately under
   this; a post written in the block editor gets one from the template.

   Everything on a post runs down one centred column — the masthead, the cover,
   the body and the postnav — rather than .container's full width. An article
   is a column of prose, and a date sitting three hundred pixels left of the
   paragraph it dates belongs to a different page. */
.cx-article__rail {
  width: 100%;
  max-width: calc(820px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.cx-article__head { margin-bottom: clamp(28px, 4vw, 44px); }
.cx-article__title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  margin: 0 0 18px;
}
.cx-article__date {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome);
  margin: 0;
}
.cx-single--builder .cx-article__head { margin-bottom: clamp(18px, 2.4vw, 28px); }

.cx-entry--narrow p,
.cx-entry--narrow li { font-size: 17px; line-height: 1.75; color: var(--charcoal-light); }
.cx-entry--narrow h2 { font-size: clamp(24px, 3vw, 32px); margin: 44px 0 14px; }
.cx-entry--narrow h3 { font-size: clamp(20px, 2.4vw, 24px); margin: 34px 0 12px; }
.cx-entry--narrow ul,
.cx-entry--narrow ol { padding-left: 22px; margin: 0 0 1.15em; }
.cx-entry--narrow img { border-radius: 3px; }
.cx-entry--narrow blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 21px;
  font-style: italic;
  color: var(--charcoal);
}
/* app.css strips link colour and underline globally, which is right for the
   marketing pages and wrong inside written prose. */
.cx-entry--narrow a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}
.cx-entry--narrow a:hover { color: var(--charcoal); }

.cx-single__back { margin: 28px 0 0; }
.cx-link-pages { font-size: 14px; color: var(--chrome); }

/* Block editor alignments, in case a page is written in Gutenberg. */
.cx-entry--narrow .alignwide { width: min(1100px, 92vw); margin-inline: calc(50% - min(550px, 46vw)); max-width: none; }
.cx-entry--narrow .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.cx-entry--narrow .alignleft { float: left; margin: 6px 28px 20px 0; }
.cx-entry--narrow .alignright { float: right; margin: 6px 0 20px 28px; }
.cx-entry--narrow .aligncenter { margin-inline: auto; }
.wp-caption-text,
.wp-element-caption { font-size: 13px; color: var(--chrome); margin-top: 8px; }

/* ------------------------------------------------------------
   Post navigation
   ------------------------------------------------------------ */
.cx-postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 0.5px solid var(--silver-mid);
}
.cx-postnav__link {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  background: var(--silver-warm);
  border: 0.5px solid var(--silver-mid);
  border-radius: 3px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cx-postnav__link:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -26px rgba(0, 0, 0, 0.35); }
.cx-postnav__link--next { text-align: right; }
.cx-postnav__link--next:only-child { grid-column: 2; }
.cx-postnav__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chrome); }
.cx-postnav__title { font-size: 17px; font-weight: 500; color: var(--charcoal); line-height: 1.35; }

@media (max-width: 860px) {
  .cx-postnav { grid-template-columns: 1fr; }
  .cx-postnav__link--next { text-align: left; }
  .cx-postnav__link--next:only-child { grid-column: 1; }
}

/* ------------------------------------------------------------
   Pagination
   ------------------------------------------------------------ */
.cx-pagination { margin-top: 56px; }
.cx-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cx-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal-light);
  border: 0.5px solid var(--silver-mid);
  border-radius: 2px;
  background: var(--silver-light);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cx-pagination .page-numbers:hover { border-color: var(--charcoal); color: var(--charcoal); }
.cx-pagination .page-numbers.current {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--silver-light);
}
.cx-pagination .page-numbers.dots { border-color: transparent; background: transparent; }
.cx-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ------------------------------------------------------------
   WPForms contact form — Connect page
   ------------------------------------------------------------
   WPForms owns this markup, so the design is reproduced onto its elements
   rather than authored. The targets in app.css are .form, .form__row, .field,
   .checks, .check, .form__note and .form__success; each block below says which
   one it is standing in for.

   Two structural differences from src/pages/Connect.jsx drive the odd bits:

   1. There is no .form__row element — WPForms emits one flat
      .wpforms-field-container. So that container is the two-column grid, and
      every field spans both columns except the two carrying `cx-half` (set per
      field under Advanced -> CSS Classes in the form builder).
   2. A checkbox input is a *sibling* of its label inside an <li>, where React
      nests the input inside the .check label. So the pill is the <li>, and the
      checked state keys off `li:has(input:checked)`.

   On the doubled `.cx-form-slot.cx-form-slot` and the `.wpforms-form`
   qualifier: WPForms' full stylesheet skins controls with selectors of the
   shape `div.wpforms-container-full .wpforms-form input[type=text]`, which
   outranks a plain `.cx-form-slot input[type=text]` no matter which file loads
   last. Doubling the wrapper class and naming the form buys enough specificity
   to win without `!important`, and keeps the design correct even if WPForms'
   "Include Form Styling" setting is left on full.

   Selectors otherwise prefer elements over WPForms' own class names wherever
   one will do, so a plugin update is less likely to take the design with it.
   ------------------------------------------------------------ */

/* ---- .form ---- */
.cx-form-slot.cx-form-slot .wpforms-container,
.cx-form-slot.cx-form-slot .wpforms-container-full {
  margin: 0;
  padding: 0;
}
.cx-form-slot.cx-form-slot .wpforms-form {
  display: grid;
  gap: 20px;
}

/* ---- .form__row + .field ----
   The field container is the row grid; fields opt into a half column. */
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0; /* choice fields can render as a <fieldset>. */
}
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field.cx-half {
  grid-column: span 1;
}
/* Mirrors `.form__row { grid-template-columns: 1fr }` in app.css. */
@media (max-width: 900px) {
  .cx-form-slot.cx-form-slot .wpforms-form .wpforms-field.cx-half { grid-column: 1 / -1; }
}

/* The anti-spam honeypot is a real field in the container; keep it out of the
   grid whatever WPForms' own stylesheet is doing. */
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-hp { display: none !important; }

/* ---- .field label ---- */
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-label,
.cx-form-slot.cx-form-slot .wpforms-form legend.wpforms-field-label {
  display: block;
  float: none;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  font-weight: 500;
  margin: 0;
  padding: 0;
}
/* The design carries no required asterisk — `required` on the input does the
   work. Delete this rule to show WPForms' marker. */
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-required-label { display: none; }

.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-sublabel {
  font-size: 12px;
  font-weight: 400;
  color: var(--chrome);
  margin: 0;
}
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-description {
  font-size: 13px;
  color: var(--chrome);
  margin: 0;
}

/* ---- .field input, .field textarea ----
   width/max-width are overrides: WPForms sizes controls with
   .wpforms-field-small/-medium/-large, and -medium caps at 60%. */
.cx-form-slot.cx-form-slot .wpforms-form input[type='text'],
.cx-form-slot.cx-form-slot .wpforms-form input[type='email'],
.cx-form-slot.cx-form-slot .wpforms-form input[type='tel'],
.cx-form-slot.cx-form-slot .wpforms-form input[type='url'],
.cx-form-slot.cx-form-slot .wpforms-form input[type='number'],
.cx-form-slot.cx-form-slot .wpforms-form select,
.cx-form-slot.cx-form-slot .wpforms-form textarea {
  width: 100%;
  max-width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--charcoal);
  background: var(--silver-light);
  border: 0.5px solid var(--silver-mid);
  border-bottom: 1px solid var(--chrome);
  border-radius: 2px;
  padding: 14px 16px;
  margin: 0;
  height: auto;
  box-shadow: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cx-form-slot.cx-form-slot .wpforms-form input[type='text']:focus,
.cx-form-slot.cx-form-slot .wpforms-form input[type='email']:focus,
.cx-form-slot.cx-form-slot .wpforms-form input[type='tel']:focus,
.cx-form-slot.cx-form-slot .wpforms-form input[type='url']:focus,
.cx-form-slot.cx-form-slot .wpforms-form input[type='number']:focus,
.cx-form-slot.cx-form-slot .wpforms-form select:focus,
.cx-form-slot.cx-form-slot .wpforms-form textarea:focus {
  outline: none;
  border-color: var(--charcoal);
  background: #fff;
}
.cx-form-slot.cx-form-slot .wpforms-form textarea { resize: vertical; min-height: 130px; }

/* WPForms sizes its controls with .wpforms-field-small/-medium/-large, which
   caps width at 60% and pins a fixed height — both of which fight the design's
   padding-driven sizing. Outranking that means naming the size class. */
.cx-form-slot.cx-form-slot .wpforms-form input.wpforms-field-small,
.cx-form-slot.cx-form-slot .wpforms-form input.wpforms-field-medium,
.cx-form-slot.cx-form-slot .wpforms-form input.wpforms-field-large,
.cx-form-slot.cx-form-slot .wpforms-form select.wpforms-field-small,
.cx-form-slot.cx-form-slot .wpforms-form select.wpforms-field-medium,
.cx-form-slot.cx-form-slot .wpforms-form select.wpforms-field-large,
.cx-form-slot.cx-form-slot .wpforms-form textarea.wpforms-field-small,
.cx-form-slot.cx-form-slot .wpforms-form textarea.wpforms-field-medium,
.cx-form-slot.cx-form-slot .wpforms-form textarea.wpforms-field-large {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.cx-form-slot.cx-form-slot .wpforms-form textarea.wpforms-field-small,
.cx-form-slot.cx-form-slot .wpforms-form textarea.wpforms-field-medium,
.cx-form-slot.cx-form-slot .wpforms-form textarea.wpforms-field-large {
  min-height: 130px;
}

/* ---- .checks / .check ----
   The <ul> is the .checks row; each <li> is a .check pill. */
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-checkbox ul,
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-radio ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-checkbox li,
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-radio li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  margin: 0;
  border: 0.5px solid var(--silver-mid);
  border-radius: 2px;
  background: var(--silver-light);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  user-select: none;
}
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-checkbox li:has(input:checked),
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-radio li:has(input:checked) {
  border-color: var(--charcoal);
  background: var(--silver-warm);
}
/* The option's own label. In React this text sits inside `.field`, where
   `.field label` (0,1,1) outranks `.check` (0,1,0) — so the pills really render
   at the 13px/500 label treatment, not the 15px/400 `.check` nominally asks
   for. Matching what is on screen means repeating the label treatment here. */
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-field-label-inline {
  display: block;
  float: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  margin: 0;
  padding: 0;
  cursor: pointer;
}
/* `.check input` in app.css sets only width/height, so React keeps the browser's
   default checkbox margin and the pill is ~7px wider than the box alone. WPForms
   zeroes that margin, so it has to be restated here to land on the same pill. */
.cx-form-slot.cx-form-slot .wpforms-form input[type='checkbox'],
.cx-form-slot.cx-form-slot .wpforms-form input[type='radio'] {
  accent-color: var(--charcoal);
  width: 16px;
  height: 16px;
  min-width: 0;
  margin: 3px 3px 3px 4px;
  padding: 0;
  flex: none;
}

/* ---- .btn.btn--primary ----
   Repeated rather than shared, because WPForms owns the button element. */
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-submit-container {
  margin: 0;
  padding: 0;
  justify-self: start;
}
.cx-form-slot.cx-form-slot .wpforms-form button[type='submit'],
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 15px 28px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--charcoal);
  color: var(--silver-light);
  text-transform: none;
  box-shadow: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}
/* The ArrowRight glyph from inc/icons.php. currentColor cannot resolve inside
   a background image, so the stroke is --silver-light spelled out. */
.cx-form-slot.cx-form-slot .wpforms-form button[type='submit']::after,
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-submit::after {
  content: '';
  flex: none;
  width: 17px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='12' viewBox='0 0 17 12' fill='none'%3E%3Cpath d='M11 1l5 5-5 5M16 6H0' stroke='%23f2f2f0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s ease;
}
.cx-form-slot.cx-form-slot .wpforms-form button[type='submit']:hover,
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-submit:hover {
  background: #2c2c2a;
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -14px rgba(58, 58, 56, 0.7);
}
.cx-form-slot.cx-form-slot .wpforms-form button[type='submit']:hover::after,
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-submit:hover::after {
  transform: translateX(4px);
}
.cx-form-slot.cx-form-slot .wpforms-form button[type='submit']:active,
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-submit:active {
  transform: translateY(0) scale(0.99);
}
.cx-form-slot.cx-form-slot .wpforms-form .wpforms-submit-spinner { margin-left: 10px; }

/* ---- .form__success ----
   AJAX submission swaps the form for this, matching the React state swap. The
   confirmation is a sibling of the form, not a descendant, so these rules hang
   off the slot rather than off .wpforms-form. */
.cx-form-slot.cx-form-slot .wpforms-confirmation-container,
.cx-form-slot.cx-form-slot .wpforms-confirmation-container-full {
  background: var(--silver-warm);
  border: 0.5px solid var(--silver-mid);
  border-left: 2px solid var(--chrome);
  padding: 20px 24px;
  border-radius: 3px;
  color: var(--charcoal);
  margin: 0;
}
.cx-form-slot.cx-form-slot .wpforms-confirmation-container-full p { margin: 0 0 8px; }
.cx-form-slot.cx-form-slot .wpforms-confirmation-container-full p:last-child { margin: 0; }
.cx-form-slot.cx-form-slot .wpforms-confirmation-container-full p:first-child { font-weight: 600; }
/* Connect.jsx sets the trailing copy to --charcoal-light inline. */
.cx-form-slot.cx-form-slot .wpforms-confirmation-container-full p ~ p { color: var(--charcoal-light); }
.cx-form-slot.cx-form-slot .wpforms-confirmation-container-full strong { font-weight: 600; }

/* ---- Validation ---- */
.cx-form-slot.cx-form-slot .wpforms-form label.wpforms-error,
.cx-form-slot.cx-form-slot .wpforms-error-container {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: #8a2f2f;
  margin: 0;
}
.cx-form-slot.cx-form-slot .wpforms-error-container { margin: 0 0 8px; }
.cx-form-slot.cx-form-slot .wpforms-form input.wpforms-error,
.cx-form-slot.cx-form-slot .wpforms-form textarea.wpforms-error,
.cx-form-slot.cx-form-slot .wpforms-form select.wpforms-error {
  border-color: #8a2f2f;
}

/* The note lives outside the <form> in page-connect.php, so the slot has to
   carry the same 20px rhythm the form does. */
.cx-form-slot { display: grid; gap: 20px; align-content: start; }
.cx-form-slot.cx-form-slot .form__note { margin-top: 0; }

/* ------------------------------------------------------------
   Comments are not part of this design; if one slips through, keep it quiet.
   ------------------------------------------------------------ */
.comments-area { max-width: 820px; margin: 0 auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------
   Image paths inside app.css
   ------------------------------------------------------------
   app.css is a verbatim copy of src/styles.css, where the React app serves
   its images from the site root (/assets/…). Under WordPress that path is the
   site root, not the theme, so the one background-image the stylesheet carries
   has to be re-pointed at assets/img/. Relative to this file, that is ../img/.

   Everything else in the design takes its images from markup, where the
   templates already resolve them through cx_img().
   ------------------------------------------------------------ */
.missing {
  background:
    url('../img/missing-link-banner.webp') right center / auto 100% no-repeat,
    #080705;
}
/* app.css re-declares the band at this width with its own size and position,
   so the override has to be repeated inside the same query or the wide rule
   wins on the phone. --plate-h is set by app.css alongside it. */
@media (max-width: 900px) {
  .missing {
    background:
      url('../img/missing-link-banner.webp') right bottom / auto var(--plate-h) no-repeat,
      #080705;
  }
}