/*
 * Brick Register – front-end registration form styles.
 */

.tx-brickregister {
    /* Two-column layout maths (used from the tablet breakpoint up):
     *   column width = (100% - --brick-gap) / 2
     *   label width  = --brick-label * column width
     * --brick-label is a unitless fraction so it can be multiplied in calc(). */
    --brick-gap: 10%;
    --brick-label: 0.3;
}

/* Render the fieldset legends like the site's h3 headings. */
.tx-brickregister fieldset > legend {
    display: block;
    width: 100%;
    padding: 0;
    font-size: 1.2em;
    line-height: 1.2;
    font-weight: 700;
    margin: 0.7rem 0 0.35rem;
    color: #e74723;
}

/* --- Mobile layout -------------------------------------------------------
 * One field per row: label on the left, field fills the rest.
 */
.tx-brickregister label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Label width = the configured fraction of its flex container. On mobile the
 * container is the full row; from the tablet breakpoint it is a column. */
.tx-brickregister label > span {
    flex: 0 0 calc(var(--brick-label) * 100%);
}

.tx-brickregister label > input,
.tx-brickregister label > select,
.tx-brickregister label > textarea {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
}

/* Notes textarea: no label, spans the full width. */
.tx-brickregister-field--note {
    width: 100%;
    box-sizing: border-box;
}

/* --- Field appearance (adopted from the Solr search input) ----------------
 * Mirrors `.tx_solr .solr-form input, select` from the site stylesheet so the
 * controls match the look of the menu search field. The Solr field's tiny
 * horizontal padding comes from `.tx-solr-q` (it reserves 60px for the search
 * icon); we use a normal horizontal padding instead. The `.search-submit`
 * icon-button styling is search-specific and intentionally not adopted.
 */
.tx-brickregister input,
.tx-brickregister select,
.tx-brickregister textarea,
.tx-brickregister button {
    padding: 9px 12px;
    font-family: 'K2D', 'Arial', 'Helvetica', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    background: #ffffff;
    border: solid 1px #ced6d7;
    border-radius: 5px;
    box-sizing: border-box;
}

.tx-brickregister input[type="submit"],
.tx-brickregister button {
    cursor: pointer;
}

/* Group spacing: separate each child block (name + age) from the previous one. */
.tx-brickregister-child + .tx-brickregister-child {
    margin-top: 1.25rem;
}

/* Keep the `hidden` attribute effective even where we set `display` (e.g. the
 * `display: grid` on child blocks would otherwise override the UA `[hidden]`). */
.tx-brickregister-child[hidden] {
    display: none;
}

/* Mark required fields with an asterisk after the label text. */
.tx-brickregister-field--required > span::after {
    content: " *";
    color: #e74723;
}

/* Explanation of the required-field asterisk below the form. */
.tx-brickregister-required-note {
    margin-top: 0.75rem;
    font-size: 0.85em;
}

/* Submit button: extra top spacing, brand-coloured background, white text. */
.tx-brickregister .tx-brickregister-submit {
    margin-top: 2rem;
    background: #e74723;
    border-color: #e74723;
    color: #ffffff;
}

.tx-brickregister .tx-brickregister-submit:hover {
    background: #cf3f1f;
    border-color: #cf3f1f;
}

/* Confirmation summary: registration code, highlighted by colour only. */
.tx-brickregister-code {
    margin: 1rem 0;
}

.tx-brickregister-code strong {
    color: #e74723;
}

/* Confirmation summary: recorded registration data. */
.tx-brickregister-summary {
    margin: 1rem 0;
}

.tx-brickregister-summary dt {
    font-weight: 700;
    margin-top: 0.5rem;
}

.tx-brickregister-summary dd {
    margin: 0;
}

/* --- Tablet and up: two-column field layout ------------------------------
 * The label keeps its 30% width inside each column; the two columns are
 * separated by a 10% gap (so each column is 45% wide).
 */
@media only screen and (min-width: 768px) {
    .tx-brickregister fieldset {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--brick-gap);
    }

    /* Legend spans both columns (ignored if the browser renders it as a caption). */
    .tx-brickregister fieldset > legend {
        grid-column: 1 / -1;
    }

    /* Full-width exceptions. */
    .tx-brickregister-field--street,
    .tx-brickregister-field--note {
        grid-column: 1 / -1;
    }

    /* Number of children: left column only. */
    .tx-brickregister-field--children-number {
        grid-column: 1;
    }

    /* Each child block on its own full-width row (so the select above stays
     * alone in the left column), with name + age side by side inside it. */
    .tx-brickregister-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--brick-gap);
    }

    /* Name + age sit on one row now, so the extra group spacing isn't needed. */
    .tx-brickregister-child + .tx-brickregister-child {
        margin-top: 0;
    }

    /* Full-width fields span the whole row, so the label fraction would relate
     * to 100% instead of a column. Pin the label to the same absolute width as a
     * column label: fraction * column width = fraction * (100% - gap) / 2. */
    .tx-brickregister .tx-brickregister-field--street > span {
        flex-basis: calc(var(--brick-label) * (100% - var(--brick-gap)) / 2);
    }
}

@media only screen and (min-width: 1024px) {
    .tx-brickregister fieldset > legend {
        font-size: 1.5em;
        margin: 1.7rem 0 1rem;
    }

    /* Constrain the whole plugin output width and narrow the labels. The label
     * width and the "street" exception derive from --brick-label automatically. */
    .tx-brickregister {
        max-width: 984px;
        --brick-label: 0.2;
    }
}

/* Validation error summary above the form: red message box, plain list. */
.tx-brickregister-errors {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    color: #b91c1c;
    background-color: #fde8e8;
    border: 1px solid #f5c2c2;
    border-radius: 4px;
}

.tx-brickregister-errors ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tx-brickregister-errors li {
    margin: 0;
    padding: 0;
}