/*
 * Buttons
 *
 * Standalone button component with size and color variants.
 * Also covers WordPress block button overrides for mobile.
 * Dependencies: tokens.css
 */

/* ── Base ── */
.btn,
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 25px;
  height: 50px;
  line-height: 1;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight: 600; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.9px; color: #fff;
  white-space: nowrap;
  text-decoration: none;
}

/* ── Default color — blue (matches .btn--blue) ── */
.btn,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--color-primary);
  transition: background 0.2s ease;
}
.btn:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: #1B6AC0;
}

/* ── Outline default — navy border ── */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--color-navy);
  color: var(--color-navy);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-navy);
  color: #fff;
  border-color: var(--color-navy);
}

/* ── Color variants (manual class overrides) ── */
.btn--green         { background: var(--color-success); transition: background 0.2s ease; }
.btn--green:hover   { background: #029D6A; }
.btn--blue          { background: var(--color-primary); transition: background 0.2s ease; }
.btn--blue:hover    { background: #1B6AC0; }
.btn--navy          { background: var(--color-navy); transition: background 0.2s ease; }
.btn--navy:hover    { background: #1D1D48; }

/* ── Size variants ── */
.btn--sm            { height: 40px; padding: 0 24px; }

/* ── Style variants ── */
.btn--outline-white { border: 2px solid #fff; background: transparent; transition: background 0.2s ease, border-color 0.2s ease; }
.btn--outline-white:hover { background: var(--color-primary); border-color: var(--color-primary); }
/* WP block button wrapper with btn--outline-white class — target inner link */
.wp-block-button.btn--outline-white .wp-block-button__link {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.wp-block-button.btn--outline-white .wp-block-button__link:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--underline {
  border-bottom: 4px solid var(--color-success);
  background: transparent; padding: 0; border-radius: 0;
}

/* ── Focus ── */
.btn:focus-visible { outline-offset: 3px; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .btn { font-size: 15px; height: 44px; padding: 0 20px; }
  .btn--sm { height: 44px; padding: 0 18px; }
  .wp-block-button__link {
    font-size: 15px !important;
    padding: 10px 20px !important;
  }
}