/*
 * buttons.css -- CTA / button treatment, 2026-07-28 client round.
 * ============================================================================
 * WHY THIS FILE EXISTS
 * The button work touches three stylesheets: components.css (.btn--ghost-light,
 * the phone + mega-menu ghost affordance), sections.css (the hover colour fix,
 * .cgh-authority__link, the stretched action rows) and editorial-ledger.css
 * (.el-catch's secondary CTA). Those three sheets ALSO carry a lot of unrelated
 * site-wide work that has not been signed off, so shipping them to get the
 * buttons would drag everything else along.
 *
 * Worse, shipping only components.css would introduce a BUG: live's
 * sections.css still says `.cgh-cta-band .cgh-phone:hover { color: white }`,
 * and components.css adds a white hover fill -- white text on a white fill.
 * The fix for that lives in sections.css.
 *
 * So every button rule from this round is collected here and this sheet is
 * enqueued LAST (after sections + editorial-ledger, before motion), which lets
 * it win on source order at equal specificity. Upload this file plus
 * inc/enqueue.php and the whole button round goes live on its own.
 *
 * The rules are intentionally duplicated from the three sheets rather than cut
 * out of them, so local rendering is unchanged and there is no half-migrated
 * state. They are identical declarations -- nothing conflicts. Fold them back
 * and delete this file once the three sheets ship in a full release.
 * ============================================================================
 */

/* ------------------------------------------------------------
   1. Ghost-on-dark is GOLD, not white.
   White-on-white-border read as a second primary and matched
   nothing else on the ink panels. Gold-on-ink is 9.4:1.
   Hover fills WHITE, never gold: this codebase's rule is that
   gold is never a button background (gold + white text = 1.9:1).
   ------------------------------------------------------------ */

.btn--ghost-light {
  background-color: transparent;
  color: var(--gp-accent);
  border-color: var(--gp-accent);
}

.btn--ghost-light:hover {
  background-color: var(--gp-static-white);
  color: var(--gp-ink);
  border-color: var(--gp-static-white);
}

/* The hero keeps its solid backing for contrast over photography, but the
   outline and label follow the gold treatment. */
.cgh-hero-mega__actions .btn--ghost-light {
  border-width: 2px;
  border-color: var(--gp-accent);
  background-color: rgba(3, 20, 40, 0.55);
  color: var(--gp-accent);
}

.cgh-hero-mega__actions .btn--ghost-light:hover {
  background-color: var(--gp-static-white);
  color: var(--gp-ink);
  border-color: var(--gp-static-white);
}

/* ------------------------------------------------------------
   2. Links that carry real intent, rendered as plain text.
   The phone beside the primary in .cgh-cta-band__actions, the
   mega-menu "View all ..." link, and "See verdicts & settlements"
   on /about/. All three now take the ghost button box.

   Border uses currentColor on purpose: those phone links carry a
   per-page inline colour (gold on the ink band, primary blue on
   the light process band), so the outline inherits whichever
   applies instead of fighting it.
   ------------------------------------------------------------ */

.cgh-cta-band__actions .cgh-phone--lg,
.cgh-megamenu__all-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-2);
  min-height: 48px;              /* >=44x44 tap target (WCAG 2.5.8) */
  padding: 0.7rem 1.4rem;
  border: 1.5px solid currentColor;
  border-radius: var(--gp-btn-radius);
  background-color: transparent;
  transition:
    background-color var(--gp-transition-base),
    color var(--gp-transition-base),
    border-color var(--gp-transition-base);
}

.cgh-cta-band__actions .cgh-phone--lg:hover,
.cgh-megamenu__all-link:hover {
  background-color: var(--gp-static-white);
  color: var(--gp-ink);
  /* NOT white: on the light process band a white border on a white fill left
     the button edgeless -- a floating white box on bone. */
  border-color: currentColor;
}

/* THE CRITICAL ONE. Live's sections.css has
   `.cgh-cta-band .cgh-phone:hover { color: var(--gp-static-white) }` at the
   same specificity as the rule above. Without this the label goes white on a
   white fill and the number disappears on hover. */
.cgh-cta-band__actions .cgh-phone--lg:hover { color: var(--gp-ink); }

/* Any plain-text phone left in a band (not the button) keeps the inversion. */
.cgh-cta-band .cgh-phone:not(.cgh-phone--lg):hover { color: var(--gp-static-white); }

.cgh-cta-band__actions .cgh-phone--lg:focus-visible,
.cgh-megamenu__all-link:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-btn-radius);
}

.cgh-megamenu__all-link {
  align-self: center;
  font-weight: var(--gp-weight-bold);
}

@media (max-width: 639px) {
  .cgh-cta-band__actions .cgh-phone--lg { width: 100%; }
}

/* "See verdicts & settlements" on /about/ -- INK outline, not gold: it sits on
   a white section and gold text on white is 1.9:1. */
.cgh-authority__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-2);
  min-height: 48px;
  padding: 1.1rem 1.8rem;
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-lg);
  font-weight: var(--gp-weight-bold);
  line-height: 1.1;
  color: var(--gp-ink);
  background-color: transparent;
  border: 1.5px solid var(--gp-ink);
  border-radius: var(--gp-btn-radius);
  text-decoration: none;
  transition:
    background-color var(--gp-btn-transition),
    color var(--gp-btn-transition),
    border-color var(--gp-btn-transition);
}

.cgh-authority__link:hover {
  background-color: var(--gp-ink);
  color: var(--gp-static-white);
  border-color: var(--gp-ink);
  text-decoration: none;
}

.cgh-authority__link:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
}

/* .el-catch's secondary CTA ships as .btn--ghost (built for light grounds) and
   would sit near-invisible on that ink band. Mirror the gold ghost. */
.el-catch .btn--ghost {
  background-color: transparent;
  color: var(--gp-accent);
  border-color: var(--gp-accent);
}

.el-catch .btn--ghost:hover {
  background-color: var(--gp-static-white);
  color: var(--gp-ink);
  border-color: var(--gp-static-white);
}

/* ------------------------------------------------------------
   3. Equal button heights.
   These rows pair buttons with no shared size modifier -- e.g.
   .btn--primary (49px) beside the phone ghost (60px), or
   .btn--primary.btn--sm (38px) beside the mega-menu ghost (49px).
   The 1.5px .btn border also rounds to 1px or 2px depending on
   where the box lands on the pixel grid, so even two identical
   .btn--lg siblings measured 58px and 60px.

   !important is scoped to this one property and is there for the
   ~290 pages whose markup carries an inline
   `style="...align-items:center..."` on the row.
   ------------------------------------------------------------ */

.cgh-cta-band__actions,
.cgh-hero-mega__actions {
  align-items: stretch !important;
}

.cgh-megamenu__cta-block,
.cgh-authority__actions {
  align-items: stretch;
}

/* Non-button children keep their own centring. */
.cgh-cta-band__actions > :not(a):not(button),
.cgh-hero-mega__actions > :not(a):not(button),
.cgh-megamenu__cta-block .cgh-megamenu__cta-text {
  align-self: center;
}