/* ==========================================================================
   Marketing page sections
   Styles for the block patterns, so a page assembled from them matches the
   original design instead of looking like default Gutenberg output.
   ========================================================================== */

.ca-page-content > .wp-block-group { margin-block: 0; }

/* --- Bands -------------------------------------------------------------- */

.ca-mk-band {
  padding-inline: var(--ca-gutter);
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}
.ca-mk-band > * { max-width: var(--ca-width); margin-inline: auto; }

/* These already sit inside .ca-mk-band, so they must not add a second inset. */
.ca-mk-band .ca-mk-hero,
.ca-mk-band .ca-mk-media,
.ca-mk-band .ca-mk-callout,
.ca-mk-band .ca-mk-cta { padding-inline: 0; }

.ca-mk-band--sky  { background: var(--ca-sky); }
.ca-mk-band--sand { background: var(--ca-sand); }

.ca-mk-measure { max-width: 62ch; margin-inline: auto; }

/* --- Split hero --------------------------------------------------------- */

.ca-mk-hero__cols { gap: clamp(20px, 4vw, 48px); }
.ca-mk-hero__image img {
  width: 100%;
  border-radius: var(--ca-r-2xl);
  box-shadow: var(--ca-shadow-lg);
}
.ca-mk-hero h1 { margin-bottom: 14px; }

@media (max-width: 820px) {
  .ca-mk-hero__cols { flex-direction: column; }
}

/* --- Icon grid ---------------------------------------------------------- */

.ca-mk-icon {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-md);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--ca-shadow-sm);
}
.ca-mk-icon__glyph { font-size: 30px; line-height: 1; margin: 0 0 10px; }
.ca-mk-icon__label {
  margin: 0;
  font-family: var(--ca-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ca-ink);
}

/* --- Tick list ---------------------------------------------------------- */

.ca-mk-tick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-sm);
  padding: 14px 16px;
  font-size: var(--ca-text-base);
  color: var(--ca-body);
}
.ca-mk-tick__mark {
  flex: none;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ca-teal-tint);
  color: var(--ca-teal);
  font-size: 12px;
  font-weight: 700;
}

/* --- Chips -------------------------------------------------------------- */

.ca-mk-chip {
  margin: 0;
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline-str);
  border-radius: var(--ca-r-pill);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ca-ink);
}

/* --- Callout ------------------------------------------------------------ */

.ca-mk-callout {
  background: linear-gradient(180deg, var(--ca-peach), var(--ca-white));
  border: 1px solid var(--ca-orange-line);
  border-radius: var(--ca-r-2xl);
  padding-block: var(--ca-section-pad);
  margin-block: var(--ca-section-y);
  text-align: center;
}
.ca-mk-callout__glyph { font-size: 34px; line-height: 1; margin: 0 0 12px; }

/* --- CTA band ----------------------------------------------------------- */

.ca-mk-cta {
  background: var(--ca-sand);
  border-radius: var(--ca-r-2xl);
  padding-block: var(--ca-section-pad);
  margin-block: var(--ca-section-y);
  text-align: center;
}

/* --- Buttons in patterns ------------------------------------------------ */

.ca-mk-button .wp-block-button__link,
.ca-page-content .wp-block-button__link {
  background: var(--ca-orange);
  color: var(--ca-cream);
  border-radius: var(--ca-r-pill);
  padding: 14px 28px;
  font-family: var(--ca-font-body);
  font-weight: 700;
  font-size: var(--ca-text-base);
}
.ca-mk-button .wp-block-button__link:hover,
.ca-page-content .wp-block-button__link:hover { background: var(--ca-orange-dark); }

.wp-block-buttons { margin-top: 24px; }

/* --- Simple hero -------------------------------------------------------- */

.ca-mk-hero--simple { text-align: center; }
.ca-mk-hero--simple h1 { margin-inline: auto; max-width: 18ch; }

/* --- Numbered steps ----------------------------------------------------- */

.ca-mk-step {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-md);
  padding: 24px 20px;
  box-shadow: var(--ca-shadow-sm);
}
.ca-mk-step__n {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 12px;
  border-radius: 50%;
  background: var(--ca-orange);
  color: var(--ca-cream);
  font-family: var(--ca-font-display);
  font-weight: 800;
  font-size: 15px;
}
.ca-mk-step__title {
  margin: 0 0 6px;
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ca-ink);
}
.ca-mk-step__body { margin: 0; color: var(--ca-muted); font-size: 14px; line-height: 1.55; }

/* --- Plain info list ---------------------------------------------------- */

.ca-mk-infolist__item {
  margin: 0;
  background: var(--ca-white);
  border-left: 3px solid var(--ca-teal);
  border-radius: 0 var(--ca-r-sm) var(--ca-r-sm) 0;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ca-body);
}

/* --- Media + text ------------------------------------------------------- */

.ca-mk-media .wp-block-columns { gap: clamp(20px, 4vw, 52px); }
.ca-mk-media__image img {
  width: 100%;
  border-radius: var(--ca-r-xl);
  box-shadow: var(--ca-shadow-lg);
}

/* On narrow screens the alternating layout would stack image-under-text on
   every other section, which reads oddly. Force image first throughout. */
@media (max-width: 820px) {
  .ca-mk-media--alt .wp-block-columns { flex-direction: column-reverse; }
}

.ca-mk-diamonds { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.ca-mk-diamond {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: var(--ca-text-base);
  color: var(--ca-body);
}
.ca-mk-diamond__mark { color: var(--ca-orange); font-size: 11px; padding-top: 4px; }

/* --- Card grid ---------------------------------------------------------- */

.ca-mk-card {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-lg);
  overflow: hidden;
  box-shadow: var(--ca-shadow-sm);
  text-align: left;
}
.ca-mk-card__image { margin: 0; }
.ca-mk-card__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ca-mk-card__title {
  margin: 18px 20px 6px;
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ca-ink);
}
.ca-mk-card__body { margin: 0 20px 20px; color: var(--ca-muted); font-size: 14px; }

/* --- Location picker ---------------------------------------------------- */

.ca-mk-picker { max-width: 620px; margin-inline: auto; text-align: center; }
.ca-mk-picker__title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: var(--ca-text-h2);
  color: var(--ca-ink);
  margin: 0 0 12px;
}
.ca-mk-picker__label {
  display: block;
  margin: 22px 0 8px;
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-xs);
  letter-spacing: var(--ca-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ca-faint);
  text-align: left;
}
.ca-mk-picker select { margin-bottom: 14px; }
.ca-mk-picker .ca-btn { width: 100%; }
.ca-mk-picker .ca-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ca-mk-picker__note {
  margin-top: 14px;
  background: var(--ca-sand);
  border-radius: var(--ca-r-sm);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ca-body);
  text-align: left;
}

/* --- FAQ ---------------------------------------------------------------- */

.ca-mk-faq { max-width: 780px; margin-inline: auto; }
.ca-mk-faq__title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: var(--ca-text-h2);
  color: var(--ca-ink);
  text-align: center;
  margin: 0 0 26px;
}
.ca-mk-faq__list { display: flex; flex-direction: column; gap: 10px; }

/* --- Contact form ------------------------------------------------------- */

.ca-mk-form { max-width: 640px; margin-inline: auto; text-align: left; }
.ca-mk-form__row { display: flex; gap: 14px; flex-wrap: wrap; }
.ca-mk-form__row > * { flex: 1 1 220px; }
.ca-mk-form__field { margin: 0 0 16px; }
.ca-mk-form fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.ca-mk-form__radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-size: 14px; }
.ca-mk-form__consent { font-size: 14px; margin-bottom: 20px; }
.ca-input--area { border-radius: var(--ca-r-md); resize: vertical; }

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

.ca-mk-form__error {
  background: #FDE7E5;
  border-left: 4px solid var(--ca-red);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 14px;
}

/* --- Legal -------------------------------------------------------------- */

.ca-mk-legal { max-width: 780px; margin-inline: auto; }
.ca-mk-legal__item {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-sm);
  padding: 16px 20px;
  margin-bottom: 10px;
}
.ca-mk-legal__item summary {
  cursor: pointer;
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ca-ink);
}

/* --- Homepage feature blocks -------------------------------------------- */

/*
 * Flex rather than grid so each card has a real pixel basis and grows to fill
 * the row, instead of every column being forced to an equal track. Cards wrap
 * naturally: three across on desktop, two on tablet, one on a phone.
 *
 * The doubled class is deliberate, not a typo.
 *
 * WordPress's constrained layout emits
 * `.wp-block-group.is-layout-constrained > * { margin-inline: auto }`, and in a
 * flex row auto margins swallow every scrap of free space, so exactly one card
 * fits per line and the section stacks full width. Core prints that rule inline
 * in <head>, which lands AFTER enqueued stylesheets — so matching its two-class
 * specificity is not enough, because source order then decides and core wins.
 * Repeating the class buys a third class (0,3,0) and settles it outright.
 */
.wp-block-group.ca-mk-features.ca-mk-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 34px;
  align-items: stretch;
}

/*
 * Fixed width, no growing.
 *
 * `flex: 1 1 280px` let cards absorb the leftover space on their line, so a row
 * of two ended up wider than a row of three and the same page showed cards at
 * two different sizes. `flex: 0 0 300px` pins the width: overflow wraps to the
 * next line unchanged, and the container centres a short row.
 */
.wp-block-group.ca-mk-features.ca-mk-features > * {
  /*
   * 352px, so three cards and their two 16px gaps come to 1088px inside the
   * 1120px content width — filling the measure rather than leaving 188px of
   * air either side, which is what 300px cards left on a wide screen.
   *
   * Still a fixed basis, not `1fr`: a short final row must keep the same card
   * size as a full one and simply centre.
   */
  flex: 0 0 352px;
  max-width: 100%;
  margin-inline: 0;
  margin-block: 0;
}

/* Below three-across, let cards use the width rather than stranding a gap. */
@media (max-width: 700px) {
  .wp-block-group.ca-mk-features.ca-mk-features > * {
    flex-basis: 100%;
  }
}

.ca-mk-feature {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-lg);
  overflow: hidden;
  box-shadow: var(--ca-shadow-sm);
  text-align: left;
}
.ca-mk-feature__image { margin: 0; }
.ca-mk-feature__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.ca-mk-feature__title {
  margin: 18px 20px 6px;
  font-size: 18px;
  font-weight: 700;
}
.ca-mk-feature__body {
  margin: 0 20px 20px;
  color: var(--ca-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* --- All-locations grid -------------------------------------------------- */

.ca-mk-locations { max-width: var(--ca-width); margin-inline: auto; }
.ca-mk-locations .ca-loc-card__name { font-size: 17px; margin: 0 0 6px; }
.ca-mk-locations .ca-loc-card__name a { color: var(--ca-ink); }
.ca-mk-locations .ca-loc-card__name a:hover { color: var(--ca-orange-dark); }
.ca-mk-locations .ca-status { align-self: flex-start; margin-top: 10px; }

/* Editor-only hint where a dynamic section has no content behind it. */
.ca-empty-notice {
  max-width: var(--ca-width);
  margin: 20px auto;
  padding: 14px 18px;
  border-left: 4px solid var(--ca-orange);
  border-radius: 0 var(--ca-r-sm) var(--ca-r-sm) 0;
  background: var(--ca-sand);
  color: var(--ca-body);
  font-size: 14px;
}

/*
 * Page content sits at the site measure by default. Full-bleed sections such as
 * the tinted bands break out of it themselves, so this only affects plain
 * paragraphs, headings and lists typed straight into a page.
 */
.ca-page-content > *:not(.ca-mk-band):not(.ca-page-hero):not(.ca-hero):not(.ca-promos):not(.ca-marquee) {
  max-width: var(--ca-width);
  margin-inline: auto;
  padding-inline: var(--ca-gutter);
}

/* --- Legal document tabs -------------------------------------------------- */

.ca-legal { max-width: 820px; margin-inline: auto; }

.ca-legal__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}

.ca-legal__tab {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline-str);
  border-radius: var(--ca-r-pill);
  padding: 10px 22px;
  font-family: var(--ca-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ca-muted);
  cursor: pointer;
}
.ca-legal__tab[aria-selected="true"] {
  background: var(--ca-ink);
  border-color: var(--ca-ink);
  color: var(--ca-cream);
}

/* Before the tabs exist, each document still needs its own visible heading. */
.ca-legal__doc-title {
  font-size: clamp(20px, 3vw, 28px);
  margin-bottom: 18px;
}

.ca-legal__doc[hidden] { display: none; }.ca-mk-legal__item p {
  margin-top: 12px;
  color: var(--ca-muted);
  font-size: 15px;
}
.ca-mk-legal__item p + p { margin-top: 10px; }

/* Widths tuned per grid: an icon tile is small, a step needs room to read. */

/* Chips size to their text, so they only need centring. */

@media (max-width: 700px) {
  .wp-block-group.ca-mk-icons.ca-mk-icons > *,
  .wp-block-group.ca-mk-cards.ca-mk-cards > *,
  .wp-block-group.ca-mk-ticks.ca-mk-ticks > *,
  .wp-block-group.ca-mk-steps.ca-mk-steps > *,
  .wp-block-group.ca-mk-infolist.ca-mk-infolist > * {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   Card grids — the single definition

   Every pattern grid behaves the same way: cards keep one width, wrap when
   they run out of room, and a short final row centres rather than stretching.

   Three things this rule has to survive, which is why it looks defensive:

   1. Core's constrained layout puts `margin-inline: auto` on every child of a
      group. In a flex row auto margins swallow all free space, so exactly one
      item fits per line — the cards end up stacked.
   2. Core's own selectors are two classes, so a single class loses. The class
      is repeated to win on specificity without reaching for !important.
   3. `flex-direction` is stated outright rather than relied on, because a
      stacked column and a wrapped row look identical in a screenshot and are
      a nuisance to tell apart after the fact.
   ========================================================================== */

.wp-block-group.ca-mk-icons.ca-mk-icons,
.wp-block-group.ca-mk-cards.ca-mk-cards,
.wp-block-group.ca-mk-ticks.ca-mk-ticks,
.wp-block-group.ca-mk-steps.ca-mk-steps,
.wp-block-group.ca-mk-infolist.ca-mk-infolist,
.wp-block-group.ca-mk-chips.ca-mk-chips,
.ca-mk-icons,
.ca-mk-cards,
.ca-mk-ticks,
.ca-mk-steps,
.ca-mk-infolist,
.ca-mk-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  margin-top: 34px;
  width: 100%;
}

.wp-block-group.ca-mk-icons.ca-mk-icons > *,
.wp-block-group.ca-mk-cards.ca-mk-cards > *,
.wp-block-group.ca-mk-ticks.ca-mk-ticks > *,
.wp-block-group.ca-mk-steps.ca-mk-steps > *,
.wp-block-group.ca-mk-infolist.ca-mk-infolist > *,
.wp-block-group.ca-mk-chips.ca-mk-chips > *,
.ca-mk-icons > *,
.ca-mk-cards > *,
.ca-mk-ticks > *,
.ca-mk-steps > *,
.ca-mk-infolist > *,
.ca-mk-chips > * {
  margin-inline: 0;
  margin-block: 0;
  max-width: 100%;
  min-width: 0;
}

/* Widths tuned per grid: an icon tile is small, a step needs room to read. */
.ca-mk-icons > *,
.wp-block-group.ca-mk-icons.ca-mk-icons > *       { flex: 0 1 172px; }
.ca-mk-cards > *,
.wp-block-group.ca-mk-cards.ca-mk-cards > *       { flex: 0 1 300px; }
.ca-mk-ticks > *,
.wp-block-group.ca-mk-ticks.ca-mk-ticks > *       { flex: 0 1 330px; }
.ca-mk-steps > *,
.wp-block-group.ca-mk-steps.ca-mk-steps > *       { flex: 0 1 250px; }
.ca-mk-infolist > *,
.wp-block-group.ca-mk-infolist.ca-mk-infolist > * { flex: 0 1 250px; }

/* Chips size to their own text rather than a set width. */
.ca-mk-chips,
.wp-block-group.ca-mk-chips.ca-mk-chips { gap: 10px; align-items: center; }
.ca-mk-chips > *,
.wp-block-group.ca-mk-chips.ca-mk-chips > * { flex: 0 0 auto; }

@media (max-width: 700px) {
  .ca-mk-icons > *,
  .ca-mk-cards > *,
  .ca-mk-ticks > *,
  .ca-mk-steps > *,
  .ca-mk-infolist > *,
  .wp-block-group.ca-mk-icons.ca-mk-icons > *,
  .wp-block-group.ca-mk-cards.ca-mk-cards > *,
  .wp-block-group.ca-mk-ticks.ca-mk-ticks > *,
  .wp-block-group.ca-mk-steps.ca-mk-steps > *,
  .wp-block-group.ca-mk-infolist.ca-mk-infolist > * {
    flex-basis: 100%;
  }
}

/* --- Contact form -------------------------------------------------------- */

.ca-req { color: var(--ca-red); }
.ca-optional { color: var(--ca-faint); font-weight: 400; font-size: 13px; }.ca-mk-form__field > label, .ca-mk-form__field > legend {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ca-ink);
}.ca-mk-form__consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
}
.ca-mk-form__consent input { margin-top: 3px; flex: none; }
.ca-mk-form__submit { width: 100%; margin-top: 8px; }.ca-mk-form__sent {
  background: var(--ca-teal-tint);
  border-left: 4px solid var(--ca-teal);
  padding: 18px 20px;
  border-radius: 0 var(--ca-r-sm) var(--ca-r-sm) 0;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.ca-mk-form__sent-mark { font-size: 40px; margin: 0 0 8px; }
.ca-mk-form__sent h3 { font-size: clamp(20px, 3vw, 28px); margin: 0 0 10px; }

/* --- Main office --------------------------------------------------------- */

.ca-office { text-align: center; }
.ca-office__title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 24px);
  color: var(--ca-ink);
  margin: 0 0 12px;
}
.ca-office__line { margin: 0 0 6px; color: var(--ca-body); font-size: var(--ca-text-base); }

/* --- Paycor embed -------------------------------------------------------- */

/* The widget writes an iframe in; give it room and stop it overflowing. */
.ca-paycor__frame { min-height: 420px; }
.ca-paycor__frame iframe { width: 100% !important; border: 0; }
.ca-paycor__title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 30px);
  margin: 0 0 20px;
  text-align: center;
}

/* ==========================================================================
   Page width — the last few holdouts

   Side pages built from plain blocks, and anything dropped straight into a
   page, now sit on the same measure as every designed section.
   ========================================================================== */

.ca-page-content > .wp-block-group:not(.ca-mk-band),
.ca-page-content > .wp-block-columns,
.ca-page-content > .wp-block-image,
.ca-page-content > .wp-block-buttons,
.ca-page-content > .wp-block-details,
.ca-page-content > ul,
.ca-page-content > ol,
.ca-page-content > table {
  max-width: var(--ca-width);
  margin-inline: auto;
  padding-inline: var(--ca-gutter);
}

/* Checkbox fields in a built form sit inline with their label. */
.ca-mk-form__consent-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.ca-mk-form__consent-inline input { margin-top: 3px; flex: none; }