/* ==========================================================================
   AcmaCorp Conversion / UX layer
   --------------------------------------------------------------------------
   Load order: after blog.css.
   Measured baseline: header position was relative/absolute on every page (no
   sticky nav or persistent CTA), trust signals appeared only on home and
   product, and all 38 form fields across 4 forms were unlabelled.
   Evidence: /docs/conversion-changes.md
   ========================================================================== */

/* ==========================================================================
   1. STICKY HEADER
   The header scrolled away on every page, taking the primary CTA and the whole
   navigation with it. It now pins after the hero, so "Contact us" is reachable
   from any scroll depth without a trip back to the top.
   ========================================================================== */

body.acma-sticky-ready header {
  position: sticky;
  top: 0;
  z-index: 999;
  transition: background-color 220ms var(--ds-ease, ease),
              box-shadow 220ms var(--ds-ease, ease);
}

/* The homepage header is `position: absolute` by design: it floats over the
   dark hero imagery, which is why its nav text is white. Letting the rule
   above promote it to `sticky` put it back into normal flow, which pushed
   <main> down 130px on load (0.0903 CLS, 96% of the page's total) and left
   white nav text on the header's own white ground at 1.00:1.
   It stays out of flow instead: absolute at rest, fixed once stuck. Neither
   occupies flow space, so pinning costs no layout shift. */
body.acma-sticky-ready header.home-header {
  position: absolute;
}
body.acma-sticky-ready.acma-header-stuck header.home-header {
  position: fixed;
  top: 0;
}

/* Solid surface only once scrolled, so the transparent-over-hero look is kept. */
body.acma-header-stuck header {
  background: var(--ds-white, #fff);
  box-shadow: var(--ds-shadow-md, 0 2px 4px rgba(0, 20, 39, .06), 0 8px 20px -6px rgba(0, 20, 39, .12));
}
/* Over the hero the header sits on dark imagery and its text is white; once it
   pins to a white surface that text has to flip to the ink tone.

   Desktop only. The mobile drawer is a child of <header>, so an unscoped rule
   here recoloured every link inside it: ink #28282B on the drawer's own navy
   #001427, which measures 1.26:1 -- the whole menu unreadable after any
   scroll. Below 1024px there is no header text for this to act on anyway; the
   pinned bar there shows the logo and the toggle and nothing else. */
@media (min-width: 1024px) {
  body.acma-header-stuck header :is(a, span, .supernav-link) { color: var(--ds-text, #28282B); }
  body.acma-header-stuck header .menu-main-nav-container > .main-menu > ul > li > a:hover { color: var(--ds-primary, #B65002); }
}

@media (prefers-reduced-motion: reduce) {
  body.acma-sticky-ready header { transition: none; }
}


/* ==========================================================================
   2. PERSISTENT CTA BAR (mobile)
   On mobile the header collapses to a burger, so the primary action was two
   taps away from anywhere on the page. This puts it one tap away, and only
   appears once the visitor has shown intent by scrolling past the hero.
   ========================================================================== */

.acma-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 998;
  display: flex;
  gap: var(--ds-space-2, 8px);
  padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px)
           calc(var(--ds-space-3, 12px) + env(safe-area-inset-bottom, 0px));
  background: var(--ds-white, #fff);
  border-top: 1px solid var(--ds-border, #DDE3EC);
  box-shadow: 0 -4px 20px -8px rgba(0, 20, 39, .25);
  transform: translateY(110%);
  transition: transform 260ms var(--ds-ease, ease);
}
.acma-cta-bar.is-visible { transform: translateY(0); }
.acma-cta-bar a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px);
  border-radius: var(--ds-radius-pill, 999px);
  font-size: var(--ds-text-sm, 1rem);
  font-weight: var(--ds-weight-medium, 500);
  letter-spacing: var(--ds-tracking-wide, .03em);
  text-decoration: none;
  text-align: center;
  line-height: var(--ds-leading-tight);
  white-space: nowrap;
}
/* At 390px the bar has ~298px for two buttons once the launcher lane is
   reserved, so the labels need to be a touch tighter to stay on one line. */
@media (max-width: 420px) {
  .acma-cta-bar { gap: var(--ds-space-1, 4px); padding-left: var(--ds-space-3, 12px); }
  .acma-cta-bar a { font-size: var(--ds-text-xs, 0.875rem); padding-inline: var(--ds-space-2, 8px); letter-spacing: 0; }
}
.acma-cta-bar__primary { background: var(--ds-primary, #B65002); color: var(--ds-white, #fff); }
.acma-cta-bar__primary:hover { background: var(--ds-primary-hover, #974302); color: var(--ds-white, #fff); }
.acma-cta-bar__secondary {
  background: transparent;
  color: var(--ds-primary, #B65002);
  border: 1px solid var(--ds-primary, #B65002);
}
.acma-cta-bar__secondary:hover { background: var(--ds-primary-soft, #FDF0E7); }

/* The assistant launcher is a 52px fixed bubble 16px from the right at
   z-index 99999, and it sat on top of the second CTA. Reserve its lane and
   lift it clear of the bar so both stay tappable. */
.acma-cta-bar { padding-right: calc(52px + var(--ds-space-5, 24px)); }
body.acma-cta-bar-on [class*="aw5-"][class*="launch"],
body.acma-cta-bar-on #aw5-launcher,
body.acma-cta-bar-on .aw5-fab { bottom: 88px !important; }

@media (min-width: 1024px) { .acma-cta-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .acma-cta-bar { transition: none; } }

/* Keep the bar off the page's own footer CTA and the chat launcher. */
body.acma-cta-bar-on { padding-bottom: 76px; }
@media (min-width: 1024px) { body.acma-cta-bar-on { padding-bottom: 0; } }


/* ==========================================================================
   3. FORM UX
   All 38 fields across the four public forms were placeholder-only. Labels are
   now associated in the markup; this makes them look deliberate, marks what is
   optional, and gives submit a real busy state.
   ========================================================================== */

/* The floating labels sat after the input with no styling contract. */
.form-control-wrap > label {
  display: block;
  order: -1;
  margin-bottom: var(--ds-space-1, 4px);
  font-size: var(--ds-text-xs, .875rem);
  font-weight: var(--ds-weight-medium, 500);
  color: var(--ds-text, #28282B);
  line-height: var(--ds-leading-snug);
}
.form-control-wrap { display: flex; flex-direction: column; }

.form-control:focus-visible,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
  outline: 2px solid var(--ds-secondary, #0450BD);
  outline-offset: 1px;
  border-color: var(--ds-secondary, #0450BD);
}
.form-control[aria-invalid="true"] { border-color: var(--ds-danger, #B3261E); }

/* Submit: busy state, so nobody double-submits a lead. */
.submit-btn.is-busy, .form-btn.is-busy {
  opacity: .75;
  cursor: progress;
  pointer-events: none;
}
.submit-btn.is-busy::after, .form-btn.is-busy::after {
  content: "";
  width: 14px; height: 14px;
  margin-left: var(--ds-space-2, 8px);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: acma-spin .6s linear infinite;
}
@keyframes acma-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .submit-btn.is-busy::after, .form-btn.is-busy::after { animation: none; }
}

a[target="_blank"]:not([class])::after {
  content: " \2197";
  font-size: .85em;
  color: var(--ds-text-muted, #5F5A54);
}

/* ==========================================================================
   1b. PINNED HOMEPAGE HEADER — invert the over-hero treatment
   At rest the homepage header floats over dark hero imagery, so the theme
   paints its nav, icons and wordmark white. Once pinned it sits on its own
   white ground and that treatment makes the entire primary navigation
   invisible (measured 1.00:1 across all 8 links).
   The theme applies the white treatment through ~60 rules scoped to
   `header.home-header`, several at specificity (0,5,3). No practical
   stuck-state selector outranks that, so these overrides use !important
   deliberately; they are confined to the pinned homepage header and revert
   the moment it unpins.
   ========================================================================== */

/* Desktop only, for the same reason as the rule above: this one carries
   !important, so on a phone it beat every drawer colour there was. */
@media (min-width: 1024px) {
body.acma-header-stuck header.home-header :is(a, span, .supernav-link) {
  color: var(--ds-text, #28282B) !important;
}

body.acma-header-stuck header.home-header .menu-main-nav-container a:hover,
body.acma-header-stuck header.home-header .header-right-supernav a:hover {
  color: var(--ds-primary, #B65002) !important;
}

/* White icon strokes vanish on the pinned ground; darken inline SVG the same way. */
body.acma-header-stuck header.home-header svg :is(path, circle, line, rect, polyline, polygon) {
  stroke: var(--ds-text, #28282B) !important;
}
body.acma-header-stuck header.home-header svg[fill]:not([fill="none"]) {
  fill: var(--ds-text, #28282B) !important;
}

/* The supernav icons and menu chevrons are dark assets whitened for the hero
   with `filter: brightness(0) invert(1)`. On the pinned white ground that
   filter makes them disappear, so cancel it and let the source art show. */
body.acma-header-stuck header.home-header :is(a, span, li, div)::before,
body.acma-header-stuck header.home-header :is(a, span, li, div)::after {
  -webkit-filter: none !important;
  filter: none !important;
}

/* The dropdown chevrons are rotated CSS border triangles with an explicit
   white border-color, which does not inherit from the link colour above. */
body.acma-header-stuck header.home-header .menu-main-nav-container a::after,
body.acma-header-stuck header.home-header .menu-main-nav-container a::before {
  border-color: var(--ds-text, #28282B) !important;
}

}
/* end of the desktop-only pinned-header overrides */

/* The white wordmark on the pinned white ground, at every width.

   This lived inside the desktop-only block above, which was scoped to
   >=1024px because its other rules carry !important and were beating the
   mobile drawer's colours. This rule carries no !important and touches only
   the wordmark, so it was never part of that problem -- but sharing the
   block meant that on a phone the pinned homepage header kept the white
   logo on its own white background, leaving just the orange glyph fragments
   floating with the wordmark invisible.

   `content: url()` replaces the rendered image without disturbing the
   element's width/height attributes, so nothing shifts. The narrow-screen
   rule picks the 400px asset the markup would have chosen itself; content
   replacement does not consult srcset. */
body.acma-header-stuck header.home-header .site-branding img {
  content: url("../images/acmacorp.webp");
}

@media (max-width: 767px) {
  body.acma-header-stuck header.home-header .site-branding img {
    content: url("../images/acmacorp-400.webp");
  }
}

/* The burger's orange/white asset swap used to live here. The hamburger is
   now drawn in CSS with currentColor (sections.css), so it inverts with the
   rest of the nav automatically and the second asset is unnecessary. */

/* ==========================================================================
   HONEYPOT
   Hidden from people without display:none — some bots skip display:none
   fields. Kept out of the tab order and the accessibility tree.

   This lived in blog.css until blog.css was made conditional, at which point
   it stopped loading on /contact-us/, /request-a-demo/, /career-form/ and
   /media-room/ — the four pages that actually carry the honeypot. The field
   rendered as a visible "Leave this field empty" input on every lead form,
   and anything a visitor typed into it silently rejected their submission.
   It belongs with the rest of the form CSS, which always loads.
   ========================================================================== */
.acma-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}