/*
 * Archery Handicap Calculator — structural styles only.
 * Colours, fonts, borders and focus rings all come from the active theme.
 * Only layout, spacing and a couple of convenience rules are defined here.
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.ahc-wrap {
    max-width: 480px;          /* reasonable reading width */
    margin: 1.5em 0;           /* sit flush left like body text, not auto-centred */
}

/* ── Individual field rows ────────────────────────────────────────────────── */
.ahc-field {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    margin-bottom: 1em;
}

/* Make inputs fill their container so they align neatly */
.ahc-wrap select,
.ahc-wrap input[type="number"] {
    width: 100%;
    box-sizing: border-box;
}

/* ── Button row ───────────────────────────────────────────────────────────── */
.ahc-actions {
    margin-top: 0.25em;
    margin-bottom: 1.25em;
}

/* The button uses the theme's own button class when possible.
   We add .wp-element-button for block themes and the classic fallback. */
#ahc-btn {
    cursor: pointer;
}

/* ── Result panel ─────────────────────────────────────────────────────────── */
.ahc-result {
    margin-top: 1em;
    padding: 1em 1.25em;
    /* border/background come from the theme — we only define the box model */
    border-width: 1px;
    border-style: solid;
}

/* The handicap number — large but sized relative to the theme's base font */
.ahc-result-value {
    display: block;
    font-size: 3em;
    line-height: 1.1;
    font-weight: 700;
    margin: 0.1em 0 0.2em;
}

/* Label above the number */
.ahc-result-label {
    display: block;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

/* Small metadata line below the number */
.ahc-result-meta {
    display: block;
    font-size: 0.8em;
    opacity: 0.7;
}

/* Error state — just fades the value area; colour comes from the theme */
.ahc-result--error .ahc-result-value {
    display: none;
}

.ahc-result--error .ahc-result-label {
    display: none;
}