/* ═══════════════════════════════════════════════════════════════════════════
   sk-buttons.css — the Skylor marketing button system
   ───────────────────────────────────────────────────────────────────────────
   OWNS:      .sk-btn and its modifiers.
   REQUIRES:  sk-tokens.css loaded first.
   NEVER:     `!important`, and never a selector that also matches legacy
              `.btn-cta-*` / `.nav-cta` / Bootstrap `.btn` markup.

   THE CONTRACT
   One base, three tiers, three sizes, widths free.

     tiers   .sk-btn--primary   filled indigo — the conversion action
             .sk-btn--outline   hairline border — the considered alternative
             .sk-btn--ghost     no chrome — tertiary, e.g. Sign in

     sizes   (default)          40px — navbar and inline
             .sk-btn--lg        48px — page-level CTA
             .sk-btn--sm        32px — dense, e.g. the mobile navbar pill

     extras  .sk-btn--block     full width (mobile CTA rows)
             .sk-btn--on-dark   re-tints all three tiers for dark backgrounds

   WHY NOT EXTEND `.btn-cta-primary`
   That class is declared as a top-level block four separate times in
   landing.css (:2684, :3223, :3706, :4170) and carries heights of 54, 50
   !important, 48, 44 !important and 40 !important. It cannot be normalised in
   place without adding a fifth `!important`. A fresh class with the legacy
   class removed from the element sidesteps the cascade entirely.

   DENSITY RESET (UI_STANDARDS Part 3)
   The base asserts box-sizing, line-height, font-size and padding rather than
   inheriting them. Without this, a `.sk-btn` inside a section that sets a
   different line-height renders taller than its declared height — the "fat
   button" regression.

   PRESERVED BEHAVIOUR
   landing.js reads `#submitBtn > .btn-text` and `> .spinner-border` to drive the
   submit spinner. Those inner spans are untouched by this file and MUST be kept
   in any button that is migrated to `.sk-btn` (UI_STANDARDS Part 2.2).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────────────────────── */
.sk-btn {
    /* Density reset — assert, never inherit. */
    box-sizing: border-box;
    line-height: 1;
    font-family: var(--font-body);
    font-size: var(--sk-btn-fs);
    font-weight: var(--sk-btn-fw);
    letter-spacing: -0.01em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sk-btn-gap);

    height: var(--sk-btn-h);
    padding: 0 var(--sk-btn-pad-x);
    margin: 0;

    border: 1px solid transparent;
    border-radius: var(--sk-btn-radius);
    background: transparent;
    color: inherit;

    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: relative;          /* anchors the ≥44px touch overlay below */
    transition: background-color var(--sk-transition),
                border-color var(--sk-transition),
                color var(--sk-transition);
}

.sk-btn:hover,
.sk-btn:focus,
.sk-btn:focus-visible { text-decoration: none; }

/* Visible focus on every interactive element (UI_STANDARDS Part 12 / DS-10). */
.sk-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sk-btn[disabled],
.sk-btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

/* Icons sit optically with the label rather than dominating it. */
.sk-btn > i,
.sk-btn > svg { font-size: 0.875em; flex: none; }

/* ── Sizes ─────────────────────────────────────────────────────────────────── */
.sk-btn--lg {
    height: var(--sk-btn-h-lg);
    padding: 0 var(--sk-btn-pad-x-lg);
    font-size: var(--sk-btn-fs-lg);
}

.sk-btn--sm {
    height: var(--sk-btn-h-sm);
    padding: 0 var(--sk-btn-pad-x-sm);
    font-size: var(--sk-btn-fs-sm);
}

.sk-btn--block { width: 100%; }

/* ── Field-matched: a button that sits directly under a form input ─────────
   For the signup funnel, where the button's job is to line up with the field
   above it rather than to match a marketing CTA.

   The numbers come from measuring the rendered input, not from reading a
   stylesheet. auth.css declares `.form-control { height: 38px }`, but the
   signup form's widgets also carry `.premium-input`, which landing.css forces
   to `height: 48px !important` with a 10px radius. So the funnel was really
   rendering 48px fields above 38px buttons — the button was the mismatched
   element, and reproducing 38px would have preserved the defect.

   48px / 10px / 15px matches the field it sits under. */
.sk-btn--field {
    height: 48px;
    padding: 0 20px;
    font-size: 0.9375rem;   /* 15px, to the field's ~14.7px */
    border-radius: 10px;
}

/* ── Tier 1: primary ───────────────────────────────────────────────────────── */
.sk-btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.sk-btn--primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

/* ── Tier 2: outline ───────────────────────────────────────────────────────── */
.sk-btn--outline {
    background: var(--bg-body);
    border-color: var(--border-color);
    color: var(--text-main);
}
.sk-btn--outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

/* ── Tier 3: ghost ─────────────────────────────────────────────────────────── */
.sk-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.sk-btn--ghost:hover {
    background: var(--bg-surface-2);
    color: var(--text-main);
}

/* ── On dark backgrounds ───────────────────────────────────────────────────
   Used by the final-CTA band and the pain-points section, both of which sit on
   --bg-dark. Replaces the legacy `.btn-cta-white`. */
.sk-btn--on-dark.sk-btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--primary);
}
.sk-btn--on-dark.sk-btn--primary:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary-dark);
}

.sk-btn--on-dark.sk-btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
.sk-btn--on-dark.sk-btn--outline:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sk-btn--on-dark.sk-btn--ghost { color: rgba(255, 255, 255, 0.85); }
.sk-btn--on-dark.sk-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sk-btn--on-dark:focus-visible {
    outline-color: #fff;
}

/* ── Touch targets ─────────────────────────────────────────────────────────
   At ≤991px every button must be tappable at ≥44px without growing visually.
   A centred pseudo-element carries the hit area; the painted box stays put.
   Inside a link/button the overlay is part of the same control, so it adds
   reach without capturing a neighbour's clicks. */
@media (max-width: 991px) {
    .sk-btn::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        min-width: var(--sk-touch-min);
        min-height: var(--sk-touch-min);
    }
}

/* ── Stacked CTA rows on small screens ─────────────────────────────────────
   A row of three CTAs cannot sit side by side at 390px without either
   overflowing or dropping below the readable type floor. It stacks instead. */
@media (max-width: 575px) {
    .sk-btn-row--stack-sm { flex-direction: column; align-items: stretch; }
    .sk-btn-row--stack-sm > .sk-btn { width: 100%; }
}

/* ── Reduced motion (UI_STANDARDS Part 12 — hard requirement) ──────────────── */
@media (prefers-reduced-motion: reduce) {
    .sk-btn { transition: none; }
}