/**
 * Blue Ridge Core Theme — Buttons
 * See docs/design-system/10-buttons.md for full rationale.
 *
 * theme.json's styles.elements.button already styles every core Button
 * block (`.wp-block-button__link`) with the primary variant by default — a
 * plain <!-- wp:button --> needs no extra class to look correct. This file
 * adds the secondary/ghost/destructive/size variants as classes usable
 * either on a core Button block (via "className") or on a hand-written
 * `<a class="btn ...">` outside the block system.
 *
 * PRIMARY COLOR: buttons use the raw brand orange (#F08C08, --brand-orange-raw)
 * per explicit client direction to match the approved mockup's saturation —
 * this is a deliberate accessibility trade-off flagged to the client: white
 * text on #F08C08 is ~2.5:1 contrast, below WCAG AA's 4.5:1 for normal text.
 * Hover darkens to the AA-safe heatingOrangeHover (#8E5305, ≥4.5:1) which
 * also happens to improve contrast on interaction. If this needs to become
 * AA-compliant later, swap the base color back to heating-orange-text
 * (#AD6506, ≥4.5:1) — see git history for the prior accessible version.
 *
 * Every variant/state rule below is written as a *compound* selector
 * (`.wp-block-button__link.btn--secondary`, not just `.btn--secondary`) so
 * it always wins against theme.json's single-class `.wp-block-button__link`
 * global style regardless of stylesheet load order — two same-specificity
 * single-class selectors would otherwise depend on source order, which is
 * not guaranteed between WordPress's inline global-styles output and this
 * enqueued stylesheet. This is the one deliberate specificity bump in the
 * system; every other rule in this design system stays single-class.
 */

.btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--tiny);
  height: 48px;
  padding-inline: var(--wp--preset--spacing--lg);
  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--typography--font-weight-semibold);
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out),
    box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out),
    transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out);
}

/* .wp-block-button__link already gets background/text color and radius from
   theme.json's styles.elements.button (the flat, accessible baseline). A
   hand-written .btn used outside the block system needs the same defaults
   set explicitly, here enriched with the gradient + glow treatment layered
   on top via background-image (background-color stays as the safe fallback
   if a gradient ever fails to render). */
.btn,
.wp-block-button__link {
  color: var(--wp--preset--color--white);
  background-color: var(--brand-orange-raw);
  background-image: linear-gradient(135deg, var(--brand-orange-raw), var(--wp--custom--color--heating-orange-hover));
  border: none;
  border-radius: var(--wp--custom--radius--md);
  box-shadow: 0 14px 32px -10px rgba(240, 140, 8, 0.45);
}

.btn:hover,
.wp-block-button__link:hover {
  background-color: var(--wp--custom--color--heating-orange-hover);
  background-image: linear-gradient(135deg, var(--wp--custom--color--heating-orange-hover), var(--wp--custom--color--heating-orange-hover));
  box-shadow: 0 18px 40px -8px rgba(240, 140, 8, 0.55);
  transform: translateY(-1px);
}

.btn:active,
.wp-block-button__link:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background-color: var(--wp--custom--color--gray-300);
  background-image: none;
  box-shadow: none;
  color: var(--wp--preset--color--gray-500);
  cursor: not-allowed;
  transform: none;
}

/* --- Secondary (solid light background) --- */
.btn--secondary,
.wp-block-button__link.btn--secondary {
  color: var(--wp--preset--color--navy);
  background-color: var(--wp--preset--color--white);
  background-image: none;
  border: 1.5px solid var(--wp--preset--color--navy);
  box-shadow: var(--wp--preset--shadow--sm);
}

.btn--secondary:hover,
.wp-block-button__link.btn--secondary:hover {
  background-color: var(--wp--preset--color--navy-tint);
  box-shadow: var(--wp--preset--shadow--sm);
  transform: translateY(-1px);
}

.btn--secondary:active,
.wp-block-button__link.btn--secondary:active {
  background-color: var(--wp--preset--color--navy-tint);
}

/* --- Glass (outlined, for use over a photo/dark background — e.g. hero) --- */
.btn--glass,
.wp-block-button__link.btn--glass {
  color: var(--wp--preset--color--white);
  background-color: rgba(255, 255, 255, 0.08);
  background-image: none;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

.btn--glass:hover,
.wp-block-button__link.btn--glass:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  box-shadow: none;
  transform: translateY(-1px);
}

/* --- Ghost --- */
.btn--ghost,
.wp-block-button__link.btn--ghost {
  color: var(--wp--preset--color--navy);
  background-color: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
}

.btn--ghost:hover,
.wp-block-button__link.btn--ghost:hover {
  background-color: var(--wp--preset--color--navy-tint);
}

/* --- Destructive --- */
.btn--destructive,
.wp-block-button__link.btn--destructive {
  color: var(--wp--preset--color--white);
  background-color: var(--wp--preset--color--error);
  background-image: none;
  box-shadow: none;
}

.btn--destructive:hover,
.wp-block-button__link.btn--destructive:hover {
  background-color: var(--wp--custom--color--error-hover);
}

/* --- On dark backgrounds (e.g. the navy final-CTA band) --- */
.btn--on-dark,
.wp-block-button__link.btn--on-dark {
  color: var(--wp--preset--color--navy);
  background-color: var(--wp--preset--color--white);
  background-image: none;
  box-shadow: var(--wp--preset--shadow--md);
}

.btn--on-dark:hover,
.wp-block-button__link.btn--on-dark:hover {
  background-color: var(--wp--preset--color--navy-tint);
  transform: translateY(-1px);
}

/* --- Sizes --- */
.btn--sm,
.wp-block-button__link.btn--sm {
  height: 36px;
  padding-inline: var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--sm);
}

.btn--lg,
.wp-block-button__link.btn--lg {
  height: 52px;
  padding-inline: var(--wp--preset--spacing--xl);
  font-size: var(--wp--preset--font-size--lg);
}

/* --- Icon button --- */
.btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--wp--custom--radius--full);
}