/* ==========================================================================
   EM3 - RELOCATED FOOTER COMPONENTS          (Plan 27, 2026-07-28)
   ==========================================================================
   The footer used to carry three things on every page: a CTA manifesto, a
   newsletter and an ISO credentials strip. Plan 27 removes those bands, so
   each becomes a component that mounts where it actually belongs.

   THIS FILE IS DELIBERATELY SELF-SUFFICIENT. It must render correctly on the
   blog, the news portal, the resource archives and the legal pages, and
   `services.css` (which owns the `--sv-*` light tokens) is enqueued on exactly
   five gated service/industry sites - NONE of them a mount surface here. So
   the light values are written literally and kept in sync by comment, not
   inherited. Every literal below is copied from services.css:52-63.

   Loaded via `em3-components` in functions.php, dependency `em3-brand`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE CLOSING CTA BAND  (.em3-ctaband)
   --------------------------------------------------------------------------
   LIGHT ON PURPOSE. The obvious base was `.em3-res-cta`, which is
   `--em3-bg-deep` #050d33. Phase 5 retargets the footer to #08124a, and a
   #050d33 band sitting directly on it is a 1.075:1 step - the exact merge
   Phase 5 exists to prevent, reproduced on every surface this mounts. Eight of
   the ten mount surfaces already sit on #f8f8f8, so light is also the smaller
   visual change.
   -------------------------------------------------------------------------- */
.em3-ctaband {
  background: #f5f7fc;                 /* = services.css --sv-soft */
  color: #0b1038;                      /* = services.css --sv-ink, 18.2:1 */
  padding: 84px 0 88px;
  border-top: 1px solid #e7ebf3;       /* = --em3-line-onwhite; separates it from the band above */
}

.em3-ctaband__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;             /* left-aligned to the 1180 edge, per the brand rule */
  gap: 0;
}

.em3-ctaband .em3-eyebrow {
  margin: 0 0 18px;
}

/* THE CAPITALIZE FIX, SCOPED. brand.css:202 sets `text-transform: capitalize`
   on every h2 site-wide, which renders his sentence-case manifesto as
   "Don't Ask A Salesperson, Ask An Engineer". Fixed here, never globally - the
   global rule is a deliberate brand law that the rest of the site relies on.

   NOTE the font-size still multiplies through var(--em3-h2-scale) so the
   client's Theme Control Center heading slider keeps working on this band. */
.em3-ctaband .em3-ctaband__h {
  text-transform: none;
  font-size: calc(clamp(30px, 3.1vw, 44px) * var(--em3-h2-scale, 1));
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #0b1038;
  opacity: 1;
  max-width: 22ch;
  margin: 0 0 16px;
}

/* `.on-light .accent` (0,2,0) already flips the accent to the light-band blue,
   but this band can mount on surfaces that never load that rule, so it is
   restated at equal intent. */
.em3-ctaband .em3-ctaband__h .accent {
  color: #2e5dff;                      /* = --em3-accent */
}

/* `.on-light p` is (0,2,1) and BEATS a single-class rule (0,2,0) - the
   recurring specificity trap in this codebase. The type selector is required
   or this paragraph silently reverts to full body ink. */
.em3-ctaband p.em3-ctaband__p {
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.65;
  color: #45506f;                      /* = services.css --sv-ink-dim, 8.0:1 */
  margin: 0 0 32px;
  max-width: 54ch;
}

.em3-ctaband__btn {
  align-self: flex-start;
}

/* THE reset.css RED LEAK GUARD. A plugin reset.css (not in this repo) sets
   `a:hover, a:active { color:#333366 }` and `button:hover, button:focus
   { background:#cc3366 }`. `.em3-btn-primary` already guards itself at
   >= (0,2,0), and this is the belt-and-braces restatement required of every
   NEW front-end control by the standing project rule. Plain `:focus` is
   included deliberately - `:focus-visible` does NOT match a mouse click, so
   without it the pink shows AFTER a click. */
.em3-ctaband .em3-ctaband__btn:hover,
.em3-ctaband .em3-ctaband__btn:focus,
.em3-ctaband .em3-ctaband__btn:focus-visible,
.em3-ctaband .em3-ctaband__btn:active {
  color: #fff;
}

.em3-ctaband .em3-ctaband__btn:focus-visible {
  outline: 2px solid #2e5dff;
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .em3-ctaband { padding: 64px 0 68px; }
  .em3-ctaband .em3-ctaband__h { max-width: none; }
  .em3-ctaband p.em3-ctaband__p { max-width: none; }
}

@media (max-width: 480px) {
  .em3-ctaband { padding: 52px 0 56px; }
  /* The button goes full width on phones so the tap target is unambiguous. */
  .em3-ctaband__btn { width: 100%; text-align: center; justify-content: center; }
}

/* An empty component must cost nothing, mirroring services.css:477. */
.em3-ctaband:empty { display: none; }

/* --------------------------------------------------------------------------
   2. THE NEWSLETTER SIGN-UP BAND  (.em3-signup)
   --------------------------------------------------------------------------
   The client's own approved webinar sign-up section, reproduced: eyebrow,
   headline with ONE serif accent word, paragraph, single inline input row.
   Re-skinned onto Plan 19's form kit - the reference's own styling is
   deliberately NOT imported, or the site would carry a fourth mutually
   unaware form system.

   NAMESPACE: .em3-signup__*, never .news*. Three live collisions exist:
   Plan 24's /news/ portal (theme/css/news.css), the footer's
   .em3-foot-news2, and all 21 .news* rules scoped inside each of the three
   pixel-exact webinar stylesheets.

   THE THREE CANONICAL FORM-KIT VALUES ARE REPRODUCED EXACTLY, from
   docs/em3-light-system-spec.md section 7b. They deliberately DEVIATE from
   the client's reference and must not be "corrected" back:
     - resting input border #848ea6, never rgba(11,16,56,0.12). The reference
       value is 1:1 on a white card: a WCAG 1.4.11 failure and the
       "no field boundary until focus" defect.
     - submit min-height 52px / 15px / 700   (reference says 54/16)
     - consent checkbox EXACTLY 24x24        (reference says 18x18, which
       fails WCAG 2.2 SC 2.5.8)
   Change one and you must change it in services.css .em3-form-card,
   reports.css .em3-rep-getcard and native-blocks.css .em3n-formcard too,
   and update the table in spec section 7b.
   -------------------------------------------------------------------------- */
.em3-signup { padding: 76px 0 80px; }
.em3-signup--soft  { background: #f5f7fc; color: #0b1038; }
.em3-signup--white { background: #ffffff; color: #0b1038; }

.em3-signup__inner { display: flex; flex-direction: column; align-items: flex-start; }
.em3-signup .em3-eyebrow { margin: 0 0 16px; }

/* Same capitalize fix as the CTA band, same reason: brand.css:202 would render
   his sentence-case headline as Title Case. Font-size still multiplies through
   var(--em3-h2-scale) so the Theme Control heading slider keeps working. */
.em3-signup .em3-signup__h {
  text-transform: none;
  font-size: calc(clamp(26px, 2.6vw, 38px) * var(--em3-h2-scale, 1));
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: #0b1038;
  opacity: 1;
  max-width: 24ch;
  margin: 0 0 14px;
}
.em3-signup .em3-signup__h .accent { color: #2e5dff; }

/* .on-light p is (0,2,1) and beats a single-class rule - the type selector is
   required or this reverts to full body ink. */
.em3-signup p.em3-signup__p {
  font-size: clamp(15.5px, 1.25vw, 17px);
  line-height: 1.65;
  color: #45506f;
  margin: 0 0 28px;
  max-width: 62ch;
}

.em3-signup__form { width: 100%; max-width: 760px; }

/* THE INLINE ROW. Gravity Forms puts .gform_footer as a SIBLING of the field
   grid, not inside it, so the submit cannot join the field grid directly.
   The form itself becomes the grid: [fields][submit]. */
.em3-signup__form form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.em3-signup__form .gform_fields {
  display: grid;
  grid-template-columns: 1fr 1.6fr;   /* the reference's own ratio */
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.em3-signup__form .gfield { margin: 0; min-width: 0; }

/* Gravity Forms' stylesheet is disabled site-wide (rg_gforms_disable_css), so
   .gform_hidden arrives with NO display rule. In a CSS grid the hidden SOURCE
   field would otherwise claim a full grid cell and open a gap. */
.em3-signup__form .gform_hidden,
.em3-signup__form .gfield--type-hidden,
.em3-signup__form .gform_validation_container { display: none !important; }

/* The consent row spans the whole field grid. */
.em3-signup__form .gfield--type-consent { grid-column: 1 / -1; }

.em3-signup__form .gfield_label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #45506f;
  margin: 0 0 6px;
}

.em3-signup__form input[type="text"],
.em3-signup__form input[type="email"] {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  font: inherit;
  font-size: 15px;
  color: #0b1038;
  background: #ffffff;
  border: 1px solid #848ea6;          /* CANONICAL - see the header note */
  border-radius: var(--em3-radius, 1px);
  transition: border-color .2s, box-shadow .2s;
}
.em3-signup__form input::placeholder { color: #69718a; opacity: 1; }

/* FOCUS AFFORDANCE RESTORED. brand.css sets outline:none on
   .gform_wrapper input:focus and nothing ever restored it - a WCAG 2.4.7
   failure on every EM3 form field. Restored here for this component. */
.em3-signup__form input[type="text"]:focus,
.em3-signup__form input[type="email"]:focus,
.em3-signup__form input[type="text"]:focus-visible,
.em3-signup__form input[type="email"]:focus-visible {
  outline: 2px solid #2e5dff;
  outline-offset: 2px;
  border-color: #2e5dff;
}

/* THE REQUIRED INDICATOR MUST BE VISIBLE. Anchored on the DIRECT CHILD so it
   prints ONCE - both the outer wrapper and the inner text carry
   .gfield_required, and an unanchored rule prints two asterisks. */
.em3-signup__form .gfield_label > .gfield_required { color: #b3261e; margin-left: 3px; }
.em3-signup__form .gfield_required .gfield_required_text {
  /* kept in the DOM for screen readers, hidden visually only */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* CONSENT. 24x24 exactly (WCAG 2.2 SC 2.5.8); the reference's 18x18 fails. */
.em3-signup__form .gfield--type-consent .ginput_container_consent {
  display: flex; align-items: flex-start; gap: 10px;
}
.em3-signup__form input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; flex: 0 0 24px;
  margin: 0; padding: 0;
  border: 1px solid #848ea6;
  border-radius: var(--em3-radius, 1px);
  background: #fff;
  cursor: pointer;
  position: relative;
}
.em3-signup__form input[type="checkbox"]:checked {
  background: #2e5dff; border-color: #2e5dff;
}
.em3-signup__form input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 8px; top: 4px;
  width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.em3-signup__form input[type="checkbox"]:focus-visible {
  outline: 2px solid #2e5dff; outline-offset: 2px;
}
.em3-signup__form .gfield_consent_label,
.em3-signup__form .gfield--type-consent label {
  font-size: 13.5px; line-height: 1.5; color: #45506f; text-transform: none;
  letter-spacing: 0; font-weight: 400; margin: 0;
}
/* The privacy-policy anchor inside the consent text. The plugin reset.css
   leaks a:hover,a:active{color:#333366}, so the hover is re-asserted
   at >= (0,2,0). */
.em3-signup__form .gfield--type-consent a { color: #2e5dff; text-decoration: underline; }
.em3-signup__form .gfield--type-consent a:hover,
.em3-signup__form .gfield--type-consent a:focus,
.em3-signup__form .gfield--type-consent a:active { color: #1c3fd6; }

/* SUBMIT - canonical 52px / 15px / 700. */
.em3-signup__form .gform_footer { margin: 0; padding: 0; }
.em3-signup__form .gform_button {
  min-height: 52px;
  padding: 14px 26px;
  font: inherit; font-size: 15px; font-weight: 700;
  color: #fff;
  background: #0b5cfc;
  border: 0;
  border-radius: var(--em3-radius, 1px);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
/* THE reset.css RED LEAK. button:hover, button:focus { background:#cc3366 }
   is (0,1,1). Plain :focus is included because :focus-visible does NOT match
   a mouse click, so without it the pink shows AFTER a click. */
.em3-signup__form .gform_button:hover,
.em3-signup__form .gform_button:focus,
.em3-signup__form .gform_button:focus-visible,
.em3-signup__form .gform_button:active {
  background: #0048d6; color: #fff;
}
.em3-signup__form .gform_button:focus-visible {
  outline: 2px solid #0b1038; outline-offset: 2px;
}

/* Validation + confirmation. */
.em3-signup__form .gfield_description.validation_message,
.em3-signup__form .validation_error {
  color: #b3261e; font-size: 13.5px; margin-top: 6px;
}
.em3-signup__done { max-width: 60ch; }
.em3-signup__donehead {
  font-size: clamp(19px, 1.7vw, 23px); font-weight: 700;
  color: #0b1038; margin: 0 0 8px;
}
.em3-signup .em3-signup__done p { color: #45506f; }

@media (max-width: 780px) {
  .em3-signup { padding: 58px 0 62px; }
  .em3-signup__form form { grid-template-columns: 1fr; }
  .em3-signup__form .gform_fields { grid-template-columns: 1fr; }
  .em3-signup__form .gform_button { width: 100%; }
  .em3-signup .em3-signup__h { max-width: none; }
}

/* --------------------------------------------------------------------------
   2b. THE INLINE ROW, PINNED EXPLICITLY
   --------------------------------------------------------------------------
   The first attempt made the <form> a two-column grid and TRUSTED auto-placement
   to put .gform-body in column 1 and .gform_footer in column 2. Measured live,
   it did not: the footer landed on row 2 at full width, so the submit sat under
   the fields instead of beside them, and the form's second track computed to 0px.

   Gravity Forms emits more children than the two you can see (validation
   containers, honeypot wrappers, hidden state inputs), and any one of them can
   claim a track. So both real children are now PINNED to an explicit column and
   row. Auto-placement is not trustworthy inside third-party markup.

   Note also: .gform_fields lives one level deeper, inside .gform-body - it is a
   GRANDCHILD of the form, not a child. That is why the field grid is declared
   separately above rather than as part of the form grid.
   -------------------------------------------------------------------------- */
.em3-signup__form form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.em3-signup__form .gform-body,
.em3-signup__form .gform_body {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.em3-signup__form .gform_footer {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  align-self: start;
  /* Clears the field LABEL height so the button's top edge lines up with the
     inputs rather than with the labels above them. */
  margin-top: 22px;
}

@media (max-width: 780px) {
  .em3-signup__form .gform-body,
  .em3-signup__form .gform_body,
  .em3-signup__form .gform_footer {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   3. THE CREDENTIALS STRIP  (.em3-creds)
   --------------------------------------------------------------------------
   The footer's ISO seal band, relocated to the Services hub (Sam's ruling 4)
   and re-skinned for a LIGHT band - the footer version was built for navy.

   The plaque keeps the brand's 1px corner and the circular lens, which is the
   ONE sanctioned rounded element in this system (the other is the author
   avatar). Do not propagate roundness elsewhere.

   C1 was "improve the design". The footer version was a lit navy panel with a
   heavy under-glow. On a white band that reads as a foreign object, so this is
   a quieter, more technical treatment: a hairline plate, restrained accent
   rings, and a hover lift instead of a glow.
   -------------------------------------------------------------------------- */
.em3-creds { margin: 26px 0 30px; }

.em3-creds__lead {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #69718a;
  margin: 0 0 18px;
}

.em3-creds__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.em3-creds .em3-cred {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 10px 16px;
  background: #ffffff;
  border: 1px solid #e7ebf3;
  border-radius: var(--em3-radius, 1px);   /* near-square: the #1 brand signal */
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.em3-creds .em3-cred:hover {
  transform: translateY(-2px);
  border-color: #c9d4ea;
  box-shadow: 0 10px 26px -18px rgba(11, 16, 56, 0.45);
}

.em3-creds .em3-cred__plaque { display: block; line-height: 0; }

/* The circular lens + knurl, inherited from the footer seal language. */
.em3-creds .em3-cred__knurl {
  fill: none;
  stroke: #c9d4ea;
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.em3-creds .em3-cred__ring {
  fill: #f5f7fc;
  stroke: #2e5dff;
  stroke-width: 1.2;
}
/* em3_seal_glyph() emits house line-art that inherits currentColor where it
   can; on a light plate it must read navy rather than the footer's white. */
.em3-creds .em3-cred__art { color: #0b1038; }
.em3-creds .em3-cred__art path,
.em3-creds .em3-cred__art line,
.em3-creds .em3-cred__art polyline,
.em3-creds .em3-cred__art circle:not(.em3-cred__knurl):not(.em3-cred__ring) {
  stroke: #2e5dff;
}

.em3-creds .em3-cred__official img {
  display: block;
  height: 48px;
  width: auto;
  margin: 0 auto;
}

.em3-creds .em3-cred__cap { display: block; }
.em3-creds .em3-cred__std {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #0b1038;
}
.em3-creds .em3-cred__desc {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  color: #69718a;          /* 4.85:1 on white */
  margin-top: 3px;
}

/* .on-light p is (0,2,1); the type selector is required or this reverts. */
.em3-creds p.em3-creds__note {
  font-size: 13px;
  line-height: 1.6;
  color: #69718a;
  margin: 16px 0 0;
  max-width: 68ch;
}

@media (max-width: 640px) {
  .em3-creds__grid { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
  .em3-creds .em3-cred { padding: 14px 8px 12px; }
}

/* ==========================================================================
   4. QA FIXES  (Plan 27 Phase 9, 2026-07-28)
   ==========================================================================
   Every rule below fixes a defect that was MEASURED on the live site by the
   Phase 9 QA sweep. Each carries the measurement that justifies it.
   ========================================================================== */

/* --- BLOCKER 2: the consent required-asterisk failed WCAG 1.4.3 ------------
   MEASURED: the Work email asterisk renders #b3261e = 6.54:1 PASS, but the
   CONSENT asterisk rendered #6a8aff = 3.14:1 FAIL, in the same form.

   WHY only the consent one: a consent field's label is a <legend>, not a
   <label>. brand.css `.gform_wrapper legend.gfield_label > .gfield_required`
   is (0,3,1) because of that legend TYPE selector, and beats the component
   rule at (0,3,0). The email field's <label> loses to the component on source
   order; the <legend> does not. axe cannot see this - the glyph is ::after
   generated content, so it needs a computed-style read to catch.

   Matching (0,3,1) with the same legend qualifier, later in the cascade. */
.em3-signup__form legend.gfield_label > .gfield_required { color: #b3261e; }

/* --- The CTA band's responsive padding ladder was DEAD on 44 of 47 pages ---
   MEASURED: identical component, 104px top padding at 1440 and 72px at 390 on
   service and pillar pages, versus its own intended 84px / 52px on the About
   pages - so it rendered 40-80px taller on the service spine.

   CAUSE: services.css `.em3-svc .em3-section { padding: 104px 0 }` is (0,2,0)
   and outranks `.em3-ctaband` at (0,1,0), so the component's own media queries
   never fired. Scoped to match, rather than reaching for !important. */
/* CORRECTED after the first attempt failed. `.em3-svc .em3-ctaband` is (0,2,0) - the SAME
   specificity as services.css `.em3-svc .em3-section`, and services.css is enqueued AFTER
   em3-components.css on service views, so it still won on source order. The band carries BOTH
   classes, so qualifying with the class it shares lifts this to (0,3,0) and the outcome no
   longer depends on load order. Measured before: 104px/472px. */
.em3-svc .em3-section.em3-ctaband { padding: 84px 0 88px; }
@media (max-width: 860px) { .em3-svc .em3-section.em3-ctaband { padding: 64px 0 68px; } }
@media (max-width: 480px) { .em3-svc .em3-section.em3-ctaband { padding: 52px 0 56px; } }

/* --- The newsletter form kept a PHANTOM second grid track below 780px ------
   MEASURED: grid-template-columns computed `692.8px 0px` at 768 and
   `331.2px 0px` at 390, with a 12px column-gap still applied - so the form sat
   12px narrower than its own heading and the right edges stopped aligning.

   CAUSE: the stacking rule lives in a @media block that appears EARLIER in the
   file than the unconditional two-column rule. Media queries add NO
   specificity, so at equal (0,1,1) the later unconditional rule won. Restated
   here, after it. */
@media (max-width: 780px) {
  .em3-signup__form form {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

/* --- The credentials strip orphaned a card at desktop ---------------------
   MEASURED: at 1440 the grid resolved to 4 tracks for 5 cards (149.65px each),
   stranding SEAI alone on a second row. `minmax(122px, 1fr)` plus a 14px gap
   fits exactly four in the 641px column it sits in. A 5-across strip reads as
   one set; 4+1 reads as an accident. */
@media (min-width: 1100px) {
  .em3-creds__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}