/* NYMI component styles.
 *
 * These seven classes used to live in an inline <style> block in base.html,
 * written with Tailwind @apply. The Play CDN only compiles @apply inside
 * <style type="text/tailwindcss">, so in a plain <style> the browser discarded
 * every rule and the classes resolved to nothing -- which is why every .btn-*
 * CTA on the site rendered as unstyled serif link text.
 *
 * Written as plain CSS so they apply at first paint instead of waiting on the
 * CDN, and so they can be toggled off in devtools for before/after review.
 *
 * IMPORTANT: base.html loads this file BEFORE cdn.tailwindcss.com. That order
 * is deliberate -- Tailwind's generated utilities are injected afterwards, so
 * per-call-site overrides (px-8 py-4, block, w-full) still win over the
 * defaults below. Moving this <link> after the CDN script would silently
 * revert ~15 CTAs to the base padding and collapse the mobile sticky ticket
 * bar in event_promo.html.
 *
 * Palette mirrors the tailwind.config in base.html.
 *   nymi-blue #24678d   blue-dark #1a4d6b
 *   nymi-gold #8d7824   gold-light #dab844
 *   nymi-dark #151e24
 */

/* --- Buttons -------------------------------------------------------------
 * Radius and shadow match the hand-rolled CTAs that were never broken
 * (index.html "Register Now", give.html "CONTINUE TO PAYMENT") so the site
 * ends up with one button vocabulary rather than two.
 */
.btn-primary,
.btn-secondary,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    transition: background-color 200ms, color 200ms, box-shadow 200ms;
    cursor: pointer;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.btn-primary {
    background-color: #24678d;
    color: #ffffff;
    border: 2px solid transparent;
}

.btn-primary:hover {
    background-color: #1a4d6b;
    color: #ffffff;
}

.btn-secondary {
    background-color: #dab844;
    color: #151e24;
    border: 2px solid transparent;
}

.btn-secondary:hover {
    background-color: #8d7824;
    color: #151e24;
}

.btn-outline {
    background-color: transparent;
    color: #24678d;
    border: 2px solid #24678d;
    box-shadow: none;
}

.btn-outline:hover {
    background-color: #24678d;
    color: #ffffff;
}

/* Keyboard focus. Preflight strips the UA outline, so without this the
 * buttons have no visible focus state at all. */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible {
    outline: 2px solid #24678d;
    outline-offset: 2px;
}

/* --- Form controls ------------------------------------------------------- */
.form-input,
.form-textarea {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #ffffff;
    color: #151e24;
    transition: border-color 150ms, box-shadow 150ms;
}

.form-textarea {
    resize: none;
}

/* Equivalent of focus:ring-2 focus:ring-nymi-blue focus:border-transparent */
.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px #24678d;
}

/* The originals carried text-nymi-blue, which does nothing to a native
 * checkbox or radio. accent-color is the property that actually tints them. */
.form-checkbox,
.form-radio {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: #24678d;
    border: 1px solid #d1d5db;
    cursor: pointer;
}

.form-checkbox {
    border-radius: 0.25rem;
}

.form-radio {
    border-radius: 9999px;
}

.form-checkbox:focus-visible,
.form-radio:focus-visible {
    outline: 2px solid #24678d;
    outline-offset: 2px;
}