/* =====================================================================
   site.css — minimal overrides on top of the RBKC boilerplate.
   ===================================================================== */

/* Clear focus ring for keyboard navigation */
:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

body {
    margin-bottom: 2rem;
}

/* Prefix wrapper for the £ sign on the amount field */
.input-prefix-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.input-prefix {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.input-prefix__input {
    flex: 1;
}

/* Summary list (read-only key/value display) */
.summary-list {
    border-top: 1px solid #b1b4b6;
    margin-bottom: 1.5rem;
}

.summary-list__row {
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid #b1b4b6;
    padding: 0.5rem 0;
}

.summary-list__key {
    flex: 0 0 40%;
    font-weight: 600;
    margin: 0;
}

.summary-list__value {
    flex: 1;
    margin: 0;
}

/* Alert banners */
.alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-left: 5px solid transparent;
}

.alert__heading {
    margin-top: 0;
}

.alert--danger {
    border-color: #d4351c;
    background-color: #fdf3f2;
}

.alert--success {
    border-color: #00703c;
    background-color: #f3faf5;
}

.alert--warning {
    border-color: #ffbf47;
    background-color: #fffbf0;
}

/* Form hint text */
.form-item__hint {
    color: #505a5f;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

/* Form error styling */
.form-group--error .form-item__textfield {
    border-color: #d4351c;
    border-width: 3px;
}

.form-item__error {
    color: #d4351c;
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

/* Form actions row */
.form-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
}

/* Hint text below the form */
.hint-text {
    color: #505a5f;
    font-size: 0.9rem;
    margin-top: 1rem;
}
