/* buttons — primary/accent/outline/ghost, legacy names, inline CTA
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* ============================== GROUP 2 · SURFACES ======================= */

/* Buttons. Three variants are in the system: primary, accent (.btn--lime),
   outline. The colour-named rest are legacy — see notes.md. */
.btn, .button, .cta,
.cta-black, .cta-white, .cta-red, .cta-blue, .cta-green, .cta-lime, .cta-navy, .cta-magenta, .cta-grey {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-min);
  /* Wrap long labels to the container instead of overflowing it (white-space
     was nowrap). Short labels still sit on one line; max-width keeps even an
     unbreakable string inside its parent. */
  text-decoration: none; text-align: center; white-space: normal; overflow-wrap: break-word; max-width: 100%;
  padding: .9375rem 1.875rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer;
  /* A bare .btn / .button / .cta with no colour modifier previously got layout
     only, so it fell through to `a { color: var(--link) }` on a transparent
     background: a link-coloured label on whatever was behind it, measured 1.73:1
     on a carousel slide overlay. Default to the primary palette; every modifier
     below overrides it. */
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* In-content buttons authored inline in a WYSIWYG paragraph have no row gap, so
   two or three of them wrap and collide vertically (and sit tight horizontally).
   Space them out. Deliberate button groups live in a flex/grid wrapper with its
   own gap, never a bare <p>, so this only reaches free-flowing content buttons. */
p > .btn, p > .button, p > .cta,
p > .cta-black, p > .cta-white, p > .cta-red, p > .cta-blue, p > .cta-green,
p > .cta-lime, p > .cta-navy, p > .cta-magenta, p > .cta-grey {
  margin: .4rem .75rem .4rem 0;
}

/* Inline icon inside any button/CTA. The blocks now ship decorative inline SVGs
   (markup exception #1: Font Awesome -> inline SVG) that carry a viewBox but no
   width/height; unconstrained they size to the SVG default (~66px in a flex
   button, 300px+ elsewhere) and collapse the label. Pin them to the type size. */
.btn svg, .button svg, .cta svg,
.cta-black svg, .cta-white svg, .cta-red svg, .cta-blue svg, .cta-green svg,
.cta-lime svg, .cta-navy svg, .cta-magenta svg, .cta-grey svg {
  flex: 0 0 auto; width: 1.15em; height: 1.15em;
}

/* TEMPORARY (pre-launch): legacy in-content .cta-* colour classes mapped onto
   the new button palette so old page-content buttons still render styled. To be
   REMOVED after a site-wide DB find/replace swaps .cta-* -> .btn--* (see
   docs/decisions.md / the cta-migration note). cta-black -> primary, cta-white
   -> outline, the rest -> their nearest brand colour. */
.cta-black { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.cta-black:hover { background: var(--link-hover); color: var(--btn-primary-text); }
.cta-white { background: transparent; color: var(--navy); border-color: var(--navy); }
.cta-white:hover { background: var(--navy); color: var(--white); }
.cta-red, .cta-magenta { background: var(--surface-brand); color: var(--white); }
.cta-red:hover, .cta-magenta:hover { background: var(--magenta-dark); color: var(--white); }
.cta-blue { background: var(--surface-blue); color: var(--white); }
.cta-blue:hover { background: var(--blue-dark); color: var(--white); }
.cta-green { background: var(--aud-employers-text); color: var(--white); }
.cta-lime { background: var(--btn-accent-bg); color: var(--btn-accent-text); }
.cta-lime:hover { background: var(--lime-dark); color: var(--btn-accent-text); }
.cta-navy { background: var(--navy); color: var(--white); }
.cta-grey { background: var(--surface-muted); color: var(--white); }
.btn--primary, .button--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn--primary:hover, .button--primary:hover { background: var(--link-hover); color: var(--btn-primary-text); }

.btn--lime, .button--lime { background: var(--btn-accent-bg); color: var(--btn-accent-text); }
.btn--lime:hover, .button--lime:hover { background: var(--lime-dark); color: var(--btn-accent-text); }

.btn--outline, .button--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover, .button--outline:hover { background: var(--navy); color: var(--white); }

.btn--ghost, .btn--white-outline, .button--ghost { background: transparent; color: var(--white); border-color: rgba(var(--on-dark-rgb), .6); }
.btn--ghost:hover, .btn--white-outline:hover { background: rgba(var(--on-dark-rgb), .12); border-color: var(--white); }

/* Legacy colour-named variants, kept so existing pages don't break. */
.btn--magenta, .btn--pink, .button--magenta { background: var(--surface-brand); color: var(--white); }
.btn--navy, .button--navy { background: var(--navy); color: var(--white); }
.btn--blue { background: var(--surface-blue); color: var(--white); }
.btn--dark-blue { background: var(--dblue); color: var(--white); }
.btn--green { background: var(--aud-employers-text); color: var(--white); }

/* The inline text CTA. */
.cta--inline {
  padding: 0 0 3px; border: 0; border-bottom: 3px solid var(--link);
  border-radius: 0; color: var(--link); background: transparent;
}
:is(.bg-dark-blue, .bg-navy, .bg-black) .cta--inline { color: var(--accent-on-dark); border-bottom-color: var(--accent-on-dark); }