/* ============================================================
   SWISS CLUSTER BUTTONS — component styles
   Framework-free. Three button types.

   Base class:  .sc-btn
   Modifiers:   .sc-btn--basic    transparent, gray outline
                .sc-btn--accent   solid dark fill, white text
                .sc-btn--ghost    text only, accent colour

   Usage:  <button class="sc-btn sc-btn--accent">Talk to an Expert</button>

   Theming: override the CSS variables in :root or on the button.
   ============================================================ */

.sc-btn {
  /* ---- design tokens (override to re-theme) ---- */
  --sc-btn-accent: var(--sc-accent); /* brand accent colour          */
  --sc-btn-solid: var(--sc-ink); /* accent-action fill           */
  --sc-btn-solid-hover: #383838;
  --sc-btn-solid-active: #1f1f1f;
  --sc-btn-outline: #606060; /* basic button border          */
  --sc-btn-text-dark: var(--sc-ink);
  --sc-btn-text-light: var(--sc-white);
  --sc-btn-radius: 12px; /* pill shape                   */
  --sc-btn-pad-y: 14px; /* vertical padding             */
  --sc-btn-pad-x: 60px; /* horizontal padding (wider)   */
  --sc-btn-font: var(--sc-font-sans);

  /* ---- shared layout ---- */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sc-btn-font);
  font-size: var(--sc-text-md);
  font-weight: var(--sc-weight-semibold);
  line-height: 1;
  padding: var(--sc-btn-pad-y) var(--sc-btn-pad-x);
  border-radius: var(--sc-btn-radius);
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  text-decoration: none; /* works on <a> too */
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  transition:
    background 0.195s ease,
    color 0.195s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.sc-btn:focus-visible {
  outline: 2px solid var(--sc-btn-accent);
  outline-offset: 2px;
}

.sc-btn:disabled,
.sc-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- TYPE 1: BASIC — transparent, gray outline ---- */
.sc-btn--basic {
  background: transparent;
  color: var(--sc-btn-text-dark);
  border-color: var(--sc-btn-outline);
}
.sc-btn--basic:hover {
  background: rgba(0, 0, 0, 0.04);
}
.sc-btn--basic:active {
  background: rgba(0, 0, 0, 0.08);
}

/* ---- TYPE 2: ACCENT ACTION — solid dark fill ---- */
.sc-btn--accent {
  background: var(--sc-btn-solid);
  color: var(--sc-btn-text-light);
  border-color: var(--sc-btn-solid);
}
.sc-btn--accent:hover {
  background: var(--sc-btn-solid-hover);
  border-color: var(--sc-btn-solid-hover);
}
.sc-btn--accent:active {
  background: var(--sc-btn-solid-active);
  border-color: var(--sc-btn-solid-active);
}

/* ---- TYPE 3: GHOST — text only, accent colour ----
   Ghost stays edge-to-edge (no horizontal padding) so it reads as
   inline text rather than a wide button. */
.sc-btn--ghost {
  background: transparent;
  color: var(--sc-btn-accent);
  border-color: transparent;
  font-weight: var(--sc-weight-bold);
  padding-left: 0;
  padding-right: 0;
}
.sc-btn--ghost:hover {
  text-decoration: underline;
}