/*
 * k28k Base — components.css
 * Buttons, badges, general interactive elements.
 * Colours reference child theme CSS tokens.
 * Layout and sizing are defined here; brand colours come from child style.css.
 */

/* ============================================================
   BUTTONS
   ============================================================ */

/* ── Base ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.7rem 1.5rem;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: var(--text-card-size-body, 0.9375rem);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        background var(--transition-duration, 0.18s) var(--transition-easing, ease),
        color var(--transition-duration, 0.18s) var(--transition-easing, ease),
        border-color var(--transition-duration, 0.18s) var(--transition-easing, ease),
        box-shadow var(--transition-duration, 0.18s) var(--transition-easing, ease);
    white-space: nowrap;
    appearance: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

.btn:focus-visible {
    outline: 2px solid var(--brand-accent, #2463eb);
    outline-offset: 3px;
}

/* ── Filled primary ── */
.btn--primary {
    background: var(--brand-accent, #2463eb);
    border-color: var(--brand-accent, #2463eb);
    color: #fff;
}
.btn--primary:hover,
.btn--primary:focus-visible {
    background: hsla(var(--brand-accent-h, 220), var(--brand-accent-s, 90%), calc(var(--brand-accent-l, 48%) - 8%), 1);
    border-color: hsla(var(--brand-accent-h, 220), var(--brand-accent-s, 90%), calc(var(--brand-accent-l, 48%) - 8%), 1);
    color: #fff;
}

/* ── Filled secondary ── */
.btn--secondary {
    background: var(--bg-subtle, #f4f4f5);
    border-color: var(--border-subtle, #e4e4e7);
    color: var(--text-heading, #18181b);
}
.btn--secondary:hover {
    background: var(--bg-page, #fff);
    border-color: var(--border-strong, #a1a1aa);
}

/* ── Ghost (outline) ── */
.btn--ghost {
    background: transparent;
    border-color: var(--brand-accent, #2463eb);
    color: var(--brand-accent-text, #2463eb);
}
.btn--ghost:hover {
    background: hsla(var(--brand-accent-h, 220), var(--brand-accent-s, 90%), var(--brand-accent-l, 48%), 0.08);
}

/* ── Ghost on dark (for dark section / hero backgrounds) ── */
.btn--ghost-invert {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}
.btn--ghost-invert:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

/* ── Sizes ── */
.btn--sm  { padding: 0.45rem 1rem;   font-size: 0.8125rem; }
.btn--lg  { padding: 0.9rem 2rem;    font-size: 1.0625rem; }
.btn--xl  { padding: 1.1rem 2.5rem;  font-size: 1.125rem;  }
.btn--full { width: 100%; }

/* ── Disabled state ── */
.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Icon helpers ── */
.btn svg { flex-shrink: 0; }
.btn--icon-only { padding: 0.65rem; }

/* ============================================================
   LINK ACTIONS (text links with arrow / underline)
   ============================================================ */
.link-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-weight: 600;
    color: var(--brand-accent-text, #2463eb);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition:
        color var(--transition-duration, 0.18s) var(--transition-easing, ease),
        border-color var(--transition-duration, 0.18s) var(--transition-easing, ease);
}
.link-action:hover {
    border-bottom-color: currentColor;
}
.link-action--card {
    font-size: var(--text-card-size-body, 0.9375rem);
    font-weight: 700;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.6em;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    border-radius: var(--radius-sm, 4px);
    white-space: nowrap;
}
.badge--primary {
    background: hsla(var(--brand-accent-h, 220), var(--brand-accent-s, 90%), var(--brand-accent-l, 48%), 0.1);
    color: var(--brand-accent-text, #2463eb);
}
.badge--neutral {
    background: var(--bg-subtle, #f4f4f5);
    color: var(--text-muted, #71717a);
}

/* ============================================================
   GENERAL FORM RESETS
   (Gravity Forms has its own file: gravity-forms.css)
   These apply to all native HTML forms not handled by GF.
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
    width: 100%;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: var(--text-card-size-body, 0.9375rem);
    color: var(--text-body, #18181b);
    background: var(--bg-page, #fff);
    border: 1px solid var(--border-subtle, #e4e4e7);
    border-radius: var(--radius-sm, 4px);
    padding: 0.65rem 0.875rem;
    transition:
        border-color var(--transition-duration, 0.18s) var(--transition-easing, ease),
        box-shadow var(--transition-duration, 0.18s) var(--transition-easing, ease);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--brand-accent, #2463eb);
    box-shadow: 0 0 0 3px hsla(var(--brand-accent-h, 220), var(--brand-accent-s, 90%), var(--brand-accent-l, 48%), 0.15);
}

textarea { resize: vertical; min-height: 120px; }

label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-heading, #18181b);
    margin-bottom: 0.35rem;
}