/*
 * ARC Redesign — global rules
 *
 * Applies to every redesigned page (Gutenberg redesign track), so canonical
 * .btn behaviors stay consistent without re-patching each page individually.
 * Conditionally enqueued from realhomes-child/functions.php on the
 * is_page() guards for each redesigned slug. Add new slugs to the guard
 * list (and to the selector lists below) as new redesigned pages ship.
 *
 * Loaded at PHP_INT_MAX so it prints AFTER inspiry_enqueue_child_styles
 * and AFTER the page-scoped CSS — wins equal-specificity cascade against
 * parent-theme rules. (See CLAUDE.md cascade-discipline gotcha.)
 *
 * Semantic-intent grouping (revised ARC-EDIT-010):
 *   The two redesigned pages were built from prototypes with different
 *   button class-name conventions AND different semantic meanings for
 *   the same class names. The color blocks below are grouped by
 *   SEMANTIC INTENT (the color the text should be on the surface the
 *   button sits on), NOT by class spelling. Per-page body-class scoping
 *   (body.page-X .btn-Y) lets the same class name route to different
 *   colors per page when prototypes disagree.
 *
 *     Block A (--brand-blue-ink): primary on yellow surface
 *       Brokerage:  .btn--primary
 *       About Us:   .btn-primary
 *
 *     Block B (--on-blue): ghost on dark/blue surface (white ink)
 *       Brokerage:  .btn--ghost-on-blue
 *       About Us:   .btn-ghost          ← suffix-less name, BLUE surface
 *
 *     Block C (--brand-blue): ghost on light surface (blue ink)
 *       Brokerage:  .btn--ghost
 *       About Us:   .btn-ghost-dark     ← "-dark" names the INK color
 *
 *   Important: the suffix-less .btn-ghost class means OPPOSITE things on
 *   the two pages — light-surface on Brokerage CSS, dark/blue-surface on
 *   About Us. Each page's selector lives in the block matching ITS
 *   prototype intent.
 *
 *   For future redesigned pages: pick the block based on the SURFACE the
 *   button sits on, not the class spelling. .btn-ghost on a blue hero
 *   goes in Block B. .btn-ghost on a white card goes in Block C.
 *
 *   Each block also pairs BEM (.btn--X) and single-hyphen (.btn-X) forms
 *   defensively so either spelling works for future additions on either
 *   page. Defensive selectors are placed in the block that matches the
 *   page's likely semantic intent.
 *
 *   The full design-system reconciliation across naming conventions is a
 *   Phase 4 question — out of scope for this fix.
 *
 * Created ARC-EDIT-008. Dual-convention support ARC-EDIT-009. Re-grouped
 * by semantic intent ARC-EDIT-010 after QA caught inverted .btn-ghost
 * mappings on About Us-gb.
 */


/* ============================================================
 * Button text colors — lock against parent-theme a:hover
 * ============================================================
 *
 * Parent-theme rules along the lines of
 *     .single .entry-content a:hover { color: var(--brand-yellow); }
 * tint our button text on hover, which makes yellow primaries unreadable
 * (yellow text on yellow background) and breaks ghost-button contrast.
 * Lock the four canonical button states (default, hover, focus, active)
 * to the design-system color for each variant.
 */

/* Block A — Primary buttons on yellow surface (dark-navy ink). */
body.page-about-us .btn--primary,
body.page-about-us .btn--primary:hover,
body.page-about-us .btn--primary:focus,
body.page-about-us .btn--primary:active,
body.page-brokerage-services .btn--primary,
body.page-brokerage-services .btn--primary:hover,
body.page-brokerage-services .btn--primary:focus,
body.page-brokerage-services .btn--primary:active,
body.page-brokerage-services .btn-primary,
body.page-brokerage-services .btn-primary:hover,
body.page-brokerage-services .btn-primary:focus,
body.page-brokerage-services .btn-primary:active,
body.page-satisfied-clients .btn--primary,
body.page-satisfied-clients .btn--primary:hover,
body.page-satisfied-clients .btn--primary:focus,
body.page-satisfied-clients .btn--primary:active,
body.page-satisfied-clients .btn-primary,
body.page-satisfied-clients .btn-primary:hover,
body.page-satisfied-clients .btn-primary:focus,
body.page-satisfied-clients .btn-primary:active,
body.page-home-alt .btn--primary,
body.page-home-alt .btn--primary:hover,
body.page-home-alt .btn--primary:focus,
body.page-home-alt .btn--primary:active {
    color: var(--brand-blue-ink) !important;
}

/* NOTE (ARC-EDIT-018): home-alt's ghost buttons (.btn--ghost-on-blue /
 * .btn--ghost-on-light) INVERT text color on hover, which Blocks B and C's
 * single-color !important model cannot express. Their per-state color locks
 * live in arc-home-styles.css (item E), not here. Only the primary lock
 * (above) and the arrow micro-interaction (below) apply to home-alt. */

/* Block B — Ghost on dark/blue surfaces (white ink).
 * About Us .btn-ghost lives here despite the suffix-less name, because
 * About Us's prototype CSS sets `color: var(--on-blue)` on .btn-ghost
 * (it's "ghost on blue surface" semantically). Brokerage's blue-surface
 * ghost uses the explicit -on-blue suffix. */
body.page-about-us .btn--ghost-on-blue,
body.page-about-us .btn--ghost-on-blue:hover,
body.page-about-us .btn--ghost-on-blue:focus,
body.page-about-us .btn--ghost-on-blue:active,
body.page-brokerage-services .btn--ghost-on-blue,
body.page-brokerage-services .btn--ghost-on-blue:hover,
body.page-brokerage-services .btn--ghost-on-blue:focus,
body.page-brokerage-services .btn--ghost-on-blue:active,
body.page-brokerage-services .btn-ghost-on-blue,
body.page-brokerage-services .btn-ghost-on-blue:hover,
body.page-brokerage-services .btn-ghost-on-blue:focus,
body.page-brokerage-services .btn-ghost-on-blue:active,
body.page-satisfied-clients .btn--ghost-on-blue,
body.page-satisfied-clients .btn--ghost-on-blue:hover,
body.page-satisfied-clients .btn--ghost-on-blue:focus,
body.page-satisfied-clients .btn--ghost-on-blue:active,
body.page-satisfied-clients .btn-ghost-on-blue,
body.page-satisfied-clients .btn-ghost-on-blue:hover,
body.page-satisfied-clients .btn-ghost-on-blue:focus,
body.page-satisfied-clients .btn-ghost-on-blue:active {
    color: var(--on-blue) !important;
}

/* Block C — Ghost on light surfaces (brand-blue ink).
 * About Us .btn-ghost-dark lives here: the "-dark" suffix names the
 * INK color (dark blue), not the surface. About Us's prototype CSS
 * sets `color: var(--brand-blue)` on .btn-ghost-dark and uses it on
 * --surface-warm (the leadership section). Defensive entries cover
 * future BEM/single-hyphen additions on either page. */
body.page-about-us .btn--ghost-on-light,
body.page-about-us .btn--ghost-on-light:hover,
body.page-about-us .btn--ghost-on-light:focus,
body.page-about-us .btn--ghost-on-light:active,
body.page-brokerage-services .btn--ghost,
body.page-brokerage-services .btn--ghost:hover,
body.page-brokerage-services .btn--ghost:focus,
body.page-brokerage-services .btn--ghost:active,
body.page-brokerage-services .btn-ghost,
body.page-brokerage-services .btn-ghost:hover,
body.page-brokerage-services .btn-ghost:focus,
body.page-brokerage-services .btn-ghost:active,
body.page-brokerage-services .btn-ghost-dark,
body.page-brokerage-services .btn-ghost-dark:hover,
body.page-brokerage-services .btn-ghost-dark:focus,
body.page-brokerage-services .btn-ghost-dark:active,
body.page-satisfied-clients .btn--ghost,
body.page-satisfied-clients .btn--ghost:hover,
body.page-satisfied-clients .btn--ghost:focus,
body.page-satisfied-clients .btn--ghost:active,
body.page-satisfied-clients .btn-ghost,
body.page-satisfied-clients .btn-ghost:hover,
body.page-satisfied-clients .btn-ghost:focus,
body.page-satisfied-clients .btn-ghost:active {
    color: var(--brand-blue) !important;
}


/* ============================================================
 * Arrow shift on .btn:hover
 * ============================================================
 *
 * Subtle micro-interaction shared with the standalone link arrows
 * (.picker-card__arrow svg, .type-card__arrow). Two cases handled:
 *   - SVG arrows inside .btn          → .btn svg
 *   - Inline character arrows (→)     → .btn .btn-arrow
 *     (literal → characters in button text are wrapped in
 *     <span class="btn-arrow"> at the markup level so we have a
 *     transformable element.)
 */

body.page-about-us .btn svg,
body.page-about-us .btn .btn-arrow,
body.page-brokerage-services .btn svg,
body.page-brokerage-services .btn .btn-arrow,
body.page-satisfied-clients .btn svg,
body.page-satisfied-clients .btn .btn-arrow,
body.page-home-alt .btn svg,
body.page-home-alt .btn .btn-arrow {
    display: inline-block;
    transition: transform var(--dur) var(--ease);
}

body.page-about-us .btn:hover svg,
body.page-about-us .btn:hover .btn-arrow,
body.page-brokerage-services .btn:hover svg,
body.page-brokerage-services .btn:hover .btn-arrow,
body.page-satisfied-clients .btn:hover svg,
body.page-satisfied-clients .btn:hover .btn-arrow,
body.page-home-alt .btn:hover svg,
body.page-home-alt .btn:hover .btn-arrow {
    transform: translateX(4px);
}