/* =============================================================
 * UK Coin Hunt — Shared Components (2026)
 *
 * Single definition of buttons, form fields, cards and the
 * visually-hidden helper. Loaded after design-tokens.css and
 * BEFORE any per-page CSS (homepage-2026, contact-2026, etc.)
 * so component CSS can override these defaults when it needs
 * to but the baseline is consistent.
 * ============================================================= */


/* ====================== Buttons ====================== */

/* Base — shared by every variant. Don't apply this class on its own;
 * always pair with one of the variant classes below. */
.ukch-btn {
    display:           inline-flex;
    align-items:       center;
    justify-content:   center;
    gap:               8px;
    padding:           12px 24px;
    border:            1px solid transparent;
    border-radius:     var(--ukch-radius-sm);
    font-family:       var(--ukch-font-sans);
    font-size:         var(--ukch-fs-base);
    font-weight:       var(--ukch-fw-medium);
    line-height:       1;
    letter-spacing:    var(--ukch-tracking-normal);
    text-align:        center;
    text-decoration:   none;
    white-space:       nowrap;
    cursor:            pointer;
    user-select:       none;
    -webkit-appearance: none;
    appearance:        none;
    transition:
        background-color var(--ukch-duration-fast) var(--ukch-easing-standard),
        border-color     var(--ukch-duration-fast) var(--ukch-easing-standard),
        color            var(--ukch-duration-fast) var(--ukch-easing-standard),
        transform        var(--ukch-duration-fast) var(--ukch-easing-standard),
        box-shadow       var(--ukch-duration-fast) var(--ukch-easing-standard);
}
.ukch-btn:focus-visible {
    outline:    none;
    box-shadow: var(--ukch-shadow-focus);
}
.ukch-btn:disabled,
.ukch-btn[aria-disabled="true"],
.ukch-btn.is-disabled {
    opacity:        0.55;
    cursor:         not-allowed;
    pointer-events: none;
}

/* Primary — gold filled. The site's main CTA. */
.ukch-btn-primary {
    background-color: var(--ukch-color-gold);
    border-color:     var(--ukch-color-gold);
    color:            #ffffff;
}
.ukch-btn-primary:hover,
.ukch-btn-primary:focus-visible {
    background-color: var(--ukch-color-gold-dark);
    border-color:     var(--ukch-color-gold-dark);
    color:            #ffffff;
}
.ukch-btn-primary:active {
    transform: translateY(1px);
}

/* Secondary — gold stroke on transparent. */
.ukch-btn-secondary {
    background-color: transparent;
    border-color:     var(--ukch-color-gold);
    color:            var(--ukch-color-gold-dark);
}
.ukch-btn-secondary:hover,
.ukch-btn-secondary:focus-visible {
    background-color: var(--ukch-color-gold-bg);
    border-color:     var(--ukch-color-gold-dark);
    color:            var(--ukch-color-gold-dark);
}

/* Ghost — text-only with hover background. */
.ukch-btn-ghost {
    background-color: transparent;
    border-color:     transparent;
    color:            var(--ukch-color-ink);
}
.ukch-btn-ghost:hover,
.ukch-btn-ghost:focus-visible {
    background-color: var(--ukch-color-ivory);
    color:            var(--ukch-color-ink);
}

/* Danger — for destructive actions (remove, delete). */
.ukch-btn-danger {
    background-color: var(--ukch-color-danger);
    border-color:     var(--ukch-color-danger);
    color:            #ffffff;
}
.ukch-btn-danger:hover,
.ukch-btn-danger:focus-visible {
    background-color: #963933;
    border-color:     #963933;
    color:            #ffffff;
}
.ukch-btn-danger:focus-visible {
    box-shadow: var(--ukch-shadow-focus-danger);
}

/* Modifiers */
.ukch-btn-sm  { padding: 8px 16px; font-size: var(--ukch-fs-sm); }
.ukch-btn-lg  { padding: 16px 32px; font-size: var(--ukch-fs-md); }
.ukch-btn-block { width: 100%; }
.ukch-btn-pill  { border-radius: var(--ukch-radius-pill); }


/* ====================== Form fields ====================== */

.ukch-field {
    display:        block;
    width:          100%;
    padding:        12px 14px;
    background:     var(--ukch-color-paper);
    color:          var(--ukch-color-ink);
    font-family:    var(--ukch-font-sans);
    font-size:      var(--ukch-fs-base);
    line-height:    var(--ukch-lh-snug);
    border:         1px solid var(--ukch-color-line);
    border-radius:  var(--ukch-radius-sm);
    box-shadow:     none;
    transition:
        border-color var(--ukch-duration-fast) var(--ukch-easing-standard),
        box-shadow   var(--ukch-duration-fast) var(--ukch-easing-standard),
        background   var(--ukch-duration-fast) var(--ukch-easing-standard);
    -webkit-appearance: none;
    appearance:        none;
}
.ukch-field::placeholder {
    color:    var(--ukch-color-muted);
    opacity:  1;
}
.ukch-field:hover {
    border-color: var(--ukch-color-gold-soft);
}
.ukch-field:focus,
.ukch-field:focus-visible {
    outline:      none;
    border-color: var(--ukch-color-gold);
    box-shadow:   var(--ukch-shadow-focus);
}
.ukch-field[aria-invalid="true"],
.ukch-field.has-error {
    border-color: var(--ukch-color-danger);
}
.ukch-field[aria-invalid="true"]:focus,
.ukch-field.has-error:focus {
    box-shadow: var(--ukch-shadow-focus-danger);
}
.ukch-field:disabled {
    background: var(--ukch-color-ivory);
    color:      var(--ukch-color-muted);
    cursor:     not-allowed;
}

/* Textarea */
textarea.ukch-field {
    min-height: 120px;
    resize:     vertical;
    line-height: var(--ukch-lh-normal);
}

/* Select — keep the chevron from native and add some breathing room. */
select.ukch-field {
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, var(--ukch-color-muted) 50%),
                      linear-gradient(135deg, var(--ukch-color-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size:
        6px 6px,
        6px 6px;
    background-repeat: no-repeat;
}

/* Label + helper */
.ukch-label {
    display:        block;
    margin-bottom:  6px;
    font-size:      var(--ukch-fs-sm);
    font-weight:    var(--ukch-fw-medium);
    color:          var(--ukch-color-ink);
}
.ukch-label .required,
.ukch-label-required::after {
    content:     "*";
    margin-left: 4px;
    color:       var(--ukch-color-danger);
}
.ukch-help {
    margin-top:  6px;
    font-size:   var(--ukch-fs-sm);
    color:       var(--ukch-color-muted);
}
.ukch-error {
    margin-top:  6px;
    font-size:   var(--ukch-fs-sm);
    color:       var(--ukch-color-danger);
}


/* ====================== Cards ====================== */

.ukch-card {
    background:     var(--ukch-color-paper);
    border:         1px solid var(--ukch-color-line);
    border-radius:  var(--ukch-radius-md);
    padding:        var(--ukch-space-6);
    box-shadow:     var(--ukch-shadow-1);
}
.ukch-card-elevated {
    box-shadow: var(--ukch-shadow-2);
    border-color: transparent;
}


/* ====================== Helpers ====================== */

/* Visually-hidden — for screen-reader-only content. Used for the
 * homepage H1 and similar SEO/a11y anchors. */
.ukch-sr-only {
    position:  absolute !important;
    width:     1px !important;
    height:    1px !important;
    padding:   0 !important;
    margin:    -1px !important;
    overflow:  hidden !important;
    clip:      rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border:    0 !important;
}