/* ──────────────────────────────────────────────────────────────────
 * Outliyr — site-wide button focus / hover states.
 * Loaded by outliyr-button-states.php (mu-plugin).
 *
 * Two targets:
 *
 * (A) DEFAULTS for buttons no one else styled — declared inside
 *     @layer outliyr-base so any non-layered author CSS automatically
 *     wins. Authors who don't care get the default; authors with
 *     explicit styles keep theirs.
 *
 * (B) HARDENING against the GeneratePress theme's button hover/focus
 *     rule, which is emitted by `inc/css-output.php` based on the
 *     customizer color settings:
 *
 *         button:hover, …, button:focus, …,
 *         a.wp-block-button__link:not(.has-background):active,
 *         a.wp-block-button__link:not(.has-background):focus,
 *         a.wp-block-button__link:not(.has-background):hover {
 *           color: var(--gold);
 *           background-color: var(--light-blue);
 *         }
 *
 *     That rule has two problems we need to fix at the source:
 *       1. Uses :focus (not :focus-visible) → state sticks after a
 *          mouse click instead of clearing.
 *       2. Hardcodes `var(--gold)` → low contrast on dark/blue
 *          buttons (gold-on-blue).
 *
 *     Since GP's CSS is non-layered, we can't fix this from inside
 *     a layer. The override below is non-layered, uses the same
 *     selector specificity, and loads AFTER GP (priority 999) so
 *     it wins on cascade order. We swap :focus → :focus-visible and
 *     read --btn-active-text instead of var(--gold) — light buttons
 *     keep gold (the variable defaults to gold), dark buttons get
 *     white via the variable override.
 *
 * Default active text = gold (#B8941E)
 * Default focus ring  = gold (visible against any color)
 * Dark-bg buttons     = white text via variable override
 * Post-click state    = cleared (no stuck active styling after mouse click)
 * ────────────────────────────────────────────────────────────────── */

/* ============================================================
 * (A) LAYERED DEFAULTS — author CSS automatically wins
 * ============================================================ */

@layer outliyr-base;

@layer outliyr-base {

  :root {
    --btn-focus-ring: #B8941E;
    --btn-active-text: var(--gold, #B8941E);
  }

  /* Generic hover / keyboard-focus styling for any button-like element
   * that wasn't explicitly styled by a plugin or theme. */
  button:hover,
  button:focus-visible,
  input[type="submit"]:hover,
  input[type="submit"]:focus-visible,
  input[type="button"]:hover,
  input[type="button"]:focus-visible,
  input[type="reset"]:hover,
  input[type="reset"]:focus-visible,
  a.button:hover,
  a.button:focus-visible,
  .button:hover,
  .button:focus-visible,
  .btn:hover,
  .btn:focus-visible,
  [role="button"]:hover,
  [role="button"]:focus-visible,
  .wp-block-button__link:hover,
  .wp-block-button__link:focus-visible,
  .wp-element-button:hover,
  .wp-element-button:focus-visible {
    color: var(--btn-active-text);
    outline: 2px solid var(--btn-focus-ring);
    outline-offset: 2px;
  }

  /* Dark / saturated background buttons → white active text via variable.
   * The focus ring stays gold (visible against blue / black / dark colors). */
  .has-vivid-cyan-blue-background-color,
  .has-cyan-bluish-gray-background-color,
  .has-pale-cyan-blue-background-color,
  .has-luminous-vivid-orange-background-color,
  .has-vivid-red-background-color,
  .has-luminous-vivid-amber-background-color,
  .has-vivid-purple-background-color,
  .has-black-background-color,
  .has-dark-background-color,
  .bioage-btn--primary,
  .bioage-cta,
  [data-btn-bg="dark"] {
    --btn-active-text: #FFFFFF;
  }
}

/* ============================================================
 * (B) NON-LAYERED OVERRIDES — beat GeneratePress's emitted rule
 * Same selectors GP uses, loaded later, so we win on cascade.
 * Authors who set their own :focus / :hover rules with equal-or-
 * higher specificity still win (their rule loads after ours, or
 * matches more specifically).
 * ============================================================ */

/* 1. Replace GP's :focus with :focus-visible so the active state does
 *    not stick after a mouse click. Read --btn-active-text instead of
 *    the hardcoded var(--gold) so dark-bg buttons can override to white. */
button:hover,
button:focus-visible,
html input[type="button"]:hover,
html input[type="button"]:focus-visible,
input[type="reset"]:hover,
input[type="reset"]:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
a.button:hover,
a.button:focus-visible,
a.wp-block-button__link:not(.has-background):active,
a.wp-block-button__link:not(.has-background):focus-visible,
a.wp-block-button__link:not(.has-background):hover {
  color: var(--btn-active-text);
}

/* 2. Clear the stuck post-click state. After a mouse click, :focus
 *    matches but :focus-visible does not. Read the same variable as
 *    the hover/focus-visible rule above so dark-bg buttons keep their
 *    white text and light-bg buttons keep their gold text — i.e. the
 *    post-click color matches the intended hover-active color, which
 *    is what the user sees on hover anyway. Just kill the outline. */
button:focus:not(:focus-visible),
html input[type="button"]:focus:not(:focus-visible),
input[type="reset"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible),
a.button:focus:not(:focus-visible),
a.wp-block-button__link:not(.has-background):focus:not(:focus-visible) {
  color: var(--btn-active-text);
  outline: none;
}

/* 3. Per-class overrides for buttons whose BASE color differs from the
 *    "active" color we computed above. After a mouse click those buttons
 *    should look like their resting state, not like a frozen hover.
 *    Add new dark-base buttons to this block as the design grows. */
.bioage-btn--primary:focus:not(:focus-visible),
.bioage-cta:focus:not(:focus-visible) {
  color: #FFFFFF;
  background-color: var(--blue, #1e7fd2);
}