/*
 * Shared reset for every AgreeMake marketing page. Ported verbatim from the
 * approved Design Artifact's own <helmet><style> block (identical on every
 * page) -- see dev-plan-agreemake-site.md for the artifact this was built
 * from. Section/component styling stays inline, matching the artifact's own
 * convention, so this file only carries the page-wide reset.
 */
body {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  color: #222222;
}

a {
  color: #011049;
  text-decoration: none;
}

a:hover {
  color: #1877bc;
}

.am-link:hover {
  color: #1877bc;
}

/*
 * dev-plan-block-level-editing -- the homepage hero's layered 3-phone
 * stack. Everything else in the converted pages is built from native
 * block supports (color/typography/spacing/border via theme.json) or the
 * agreemake/phone-mockup and agreemake/progress-bars custom blocks; this
 * is the one remaining bit of genuinely bespoke layout (absolute
 * positioning + rotation for a fixed 3-item stack) that has no native
 * block support to express it safely, so it's a plain className on
 * ordinary core/group blocks -- a safe, validated block attribute, not
 * inline style on the saved content.
 */
/*
 * dev-plan-block-level-editing follow-up -- the hero row's own two-column
 * balance. Ported from the approved design artifact's literal values
 * (OptionB.dc.html: text column `flex: 999 1 420px`, image column
 * `flex: 1 1 520px; min-width: 500px`, row `gap: 56px`) rather than the
 * Group block's "justifyContent: space-between" layout option, which
 * doesn't produce the same result -- with no flex-basis on either side,
 * space-between just pushes both columns to the row's outer edges,
 * leaving however much space happens to remain between their natural
 * content widths (confirmed live: a much wider gap than the design, and
 * the block editor's own "blockGap" attribute silently isn't emitted as
 * CSS for this container at all, so `gap` needs setting here directly
 * regardless). The explicit flex-basis values are what actually balance
 * the two columns the way the design does.
 */
.am-hero-row {
  gap: 56px;
}

.am-hero-text-col {
  flex: 999 1 420px;
  min-width: 0;
}

.am-hero-lead {
  max-width: 480px;
}

.am-hero-image-col {
  flex: 1 1 520px;
  min-width: 500px;
  display: flex;
  justify-content: center;
}

.am-hero-phone-stack {
  position: relative;
  width: 540px;
  height: 420px;
}

.am-phone-pos-left-underlay {
  position: absolute;
  left: 0;
  top: 60px;
  transform: rotate(-9deg);
  z-index: 1;
}

.am-phone-pos-right-underlay {
  position: absolute;
  right: 0;
  top: 60px;
  transform: rotate(9deg);
  z-index: 2;
}

/*
 * Review fix -- the same unconstrained-flex bug as the hero (no
 * flex-basis on either side of a flex-wrap row, so the columns just
 * balance however their own content happens to size them) was also
 * present in every page's secondary "text + small UI card" section --
 * never caught earlier because only the hero was checked. Ported each
 * page's own exact values from the design artifact (every page's
 * version of this section uses slightly different flex-basis numbers
 * for its card, tuned to that specific card's content) rather than one
 * shared size. Text column is identical across every page
 * (`flex: 999 1 380px; min-width: 0`) so it's one shared class; the
 * image/card column is per-page since the basis values differ.
 */
.am-visual-row {
  gap: 48px;
}

.am-visual-text-col {
  flex: 999 1 380px;
  min-width: 0;
}

/*
 * Review fix -- the real cause of "huge empty whitespace inside the
 * card's own border, content only fills the left half": these cards
 * are `wp:group`s with `"layout":{"orientation":"vertical"}`, and
 * WordPress's own generated CSS for that layout always sets
 * `align-items: flex-start` (confirmed in core-block-supports-inline-
 * css), meaning the card's own children -- the label and the raw
 * wp:html list -- never stretch to the card's full width, they just
 * size to their own content. The card's OUTER box was always the
 * right width (flex-basis below matches design exactly); it was the
 * INSIDE that wasn't filling it. `align-items: stretch` overrides
 * WordPress's default for these specific cards only. `!important` is
 * required, not stylistic -- WordPress's own per-instance rule for
 * this same property is injected via core-block-supports-inline-css,
 * which this theme enqueues AFTER agreemake-theme.css (confirmed by
 * the actual <head> order), so at equal specificity it would
 * otherwise win and silently defeat this fix.
 */
.am-visual-image-col--matters,
.am-visual-image-col--small-business,
.am-visual-image-col--templates {
  flex: 1 1 360px;
  min-width: 300px;
  align-items: stretch !important;
}

.am-visual-image-col--tradies {
  flex: 1 1 380px;
  min-width: 320px;
  align-items: stretch !important;
}

.am-visual-image-col--real-estate {
  flex: 1 1 320px;
  min-width: 280px;
  align-items: stretch !important;
}

.am-visual-image-col--how-it-works {
  flex: 1 1 420px;
  min-width: 360px;
  align-items: stretch !important;
}

/*
 * Templates' second visual section ("Matter Templates, for
 * multi-document work") is a symmetric 50/50 row, not the
 * text-grows/card-fixed pattern above -- both sides share the same
 * basis in the design (OptionB.dc.html: `flex: 1 1 320px; min-width:
 * 280px` on both columns, `gap: 40px`).
 */
.am-visual-row-equal {
  gap: 40px;
}

.am-visual-col-equal--card {
  align-items: stretch !important;
}

.am-visual-col-equal {
  flex: 1 1 320px;
  min-width: 280px;
}

/*
 * Full-site audit follow-up -- the homepage's own "Library" section
 * (its second text+image row, after the hero) had the same missing
 * flex-basis bug as the hero, just never checked. Design values
 * (OptionB.dc.html's #vault section): row `gap: 56px`; text column is
 * `flex: 999 1 420px; min-width: 0` -- identical to the hero's own
 * text column, reuses .am-hero-text-col rather than duplicating it;
 * image column `flex: 1 1 320px; min-width: 300px`, centered.
 */
.am-library-row {
  gap: 56px;
}

.am-library-image-col {
  flex: 1 1 320px;
  min-width: 300px;
  display: flex;
  justify-content: center;
}

/*
 * Individuals & Families' 3-up icon row ("No legal jargon required" /
 * "Review before you sign" / "Kept safely, for both of you") -- a
 * different shape of the same bug: three equal items, not text+image,
 * but still no flex-basis on any of them. Design
 * (Individuals.dc.html): `flex: 1 1 260px` on each.
 */
.am-feature-col-3up {
  flex: 1 1 260px;
}

.am-phone-pos-front {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 3;
}

/*
 * Editor-canvas-only approximation of the phone-mockup frame (the real,
 * pixel-exact frame is rendered server-side by
 * blocks/phone-mockup/render.php for the front end) -- just enough for
 * an editor to recognise the block visually while placing/editing its
 * InnerBlocks content.
 */
.am-phone-mockup-editor {
  border-radius: 26px;
  border: 6px solid #242c3e;
  background: #f8fafc;
  padding: 8px 12px 16px;
  box-shadow: 0 16px 36px rgba(1, 16, 73, 0.16);
}

.am-phone-mockup-editor--large {
  max-width: 300px;
  margin: 0 auto;
}

.am-phone-mockup-editor--mini {
  max-width: 232px;
  margin: 0 auto;
}

.am-phone-mockup-editor-header {
  font-family: 'DM Serif Display', serif;
  font-size: 14px;
  color: #011049;
  padding: 6px 0 10px;
}

/*
 * dev-plan-block-level-editing -- small utility classes for the handful
 * of fixed-size/decorative treatments native block supports (color,
 * typography, spacing, border) can't express: uppercase eyebrow labels,
 * fixed-size numbered/icon badges. Everything else (fonts, colors, card
 * shapes, section backgrounds, spacing) is theme.json presets applied via
 * ordinary block attributes, not custom CSS -- see theme.json.
 */
.am-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.am-step-badge {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.am-icon-badge {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}