/* Components/Shared/Button.razor — link-styled-as-button for marketing CTAs.
 *
 * Global rather than scoped, so every selector is qualified with the `a` the
 * component actually renders. `btn` and `btn-primary` are generic enough to
 * appear in the stored page HTML that ContentPage emits verbatim, and without
 * the element qualifier this file would restyle that markup too.
 *
 * The --color-* / --space-* / --radius- * custom properties came from the
 * deleted css/tokens.css and are undefined at runtime, so the declarations
 * using them are dropped by the parser — exactly as they already were under
 * CSS isolation. The compiled Tailwind bundle's own .btn-primary and
 * .btn-secondary rules carry !important and win over these regardless. Left as
 * authored rather than trimmed, so restoring the tokens restores the design. */

a.btn {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color 120ms ease, color 120ms ease;
}

a.btn:focus-visible {
    outline: 3px solid var(--color-indigo);
    outline-offset: 3px;
}

a.btn-primary {
    background: var(--color-violet);
    color: #fff;
}

a.btn-primary:hover {
    background: var(--color-indigo);
}

a.btn-secondary {
    background: var(--color-gold);
    color: var(--color-ink);
}

a.btn-secondary:hover {
    filter: brightness(0.95);
}

a.btn-ghost {
    background: transparent;
    color: var(--color-violet);
    border-color: var(--color-violet);
}

a.btn-ghost:hover {
    background: var(--color-violet);
    color: #fff;
}


/* ── two-line CTA label ───────────────────────────────────────────────
 *
 * The site's two standing CTAs carry a quieter second line under the
 * label — "Start All-Modules Free Trial" over "Test the complete QHRM
 * platform". The stack is deliberately button-system agnostic: it sits
 * inside .qh-btn, .qh-btn-ghost, .startFreeTrial, .bookADemo, .qb-btn,
 * .qps-btn, .pp-btn and .qfh-btn, none of which share a base class, so
 * the only thing it may assume is that its parent is a flex row.
 *
 * No colour is set here on purpose. The sub-line is the button's own
 * colour at 82% opacity, which reads on the violet gradient and on the
 * white outline pills alike without one rule per button system.
 *
 * The compact CTAs — the header pill, the sitemap list, the noscript
 * links — carry the new label on a single line and never this stack.
 */
.qcta-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.25;
    text-align: left;
}

/* Centred pills (.startFreeTrial, .bookADemo, .pp-btn, .qps-btn, .qfh-btn)
   centre their own text, so the stack has to follow or the two lines sit
   left of a button that is otherwise symmetrical. */
.qcta-stack--center {
    align-items: center;
    text-align: center;
}

.qcta-stack__sub {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .1px;
    opacity: .82;
}