/* Form fields. Loaded only by the pages that have a form, via {% block extra_css %}. */

@layer components {
    .form {
        display: grid;
        gap: var(--space-4);
    }

    /* Two short fields on one line, stacked on a phone */
    .field-row {
        display: grid;
        gap: var(--space-4);
    }

    @media (min-width: 520px) {
        .field-row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .field {
        display: grid;
        gap: var(--space-1);
    }

    .field label,
    .field legend {
        color: var(--heading);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
    }

    fieldset.field {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .field input:not([type="checkbox"]):not([type="radio"]),
    .field select,
    .field textarea {
        width: 100%;
        min-height: 2.5rem;
        padding: 0.4rem var(--space-3);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--heading);
        font: inherit;
        font-size: var(--text-sm);
        transition: border-color var(--fast) var(--ease);
    }

    .field textarea {
        min-height: 6.5rem;
        resize: vertical;
    }

    .field input::placeholder,
    .field textarea::placeholder {
        color: var(--text-muted);
    }

    .field input:hover,
    .field select:hover,
    .field textarea:hover {
        border-color: var(--green);
    }

    .field input:focus-visible,
    .field select:focus-visible,
    .field textarea:focus-visible {
        border-color: var(--green);
        outline-offset: 0;
    }

    .field [aria-invalid="true"] {
        border-color: var(--error);
    }

    .field-error {
        color: var(--error);
        font-size: var(--text-sm);
    }

    .field-help {
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .form-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4);
    }

    .form-note {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    /* Phone, email and address, one per line */
    .contact-details {
        display: grid;
        gap: var(--space-3);
        font-style: normal;
    }

    .contact-details > * {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    /* Opening hours: a day on the left, the hours on the right */
    .hours {
        display: grid;
    }

    .hours > div {
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        padding-block: var(--space-3);
        border-bottom: var(--line);
    }

    .hours > div:last-child {
        border-bottom: 0;
    }

    .hours dt {
        color: var(--heading);
        font-weight: var(--weight-semibold);
    }

    .hours dd {
        margin: 0;
    }

    /* Search and sort bar above a list of posts or projects */
    .filter-bar {
        display: grid;
        gap: var(--space-3);
        align-items: end;
        margin-bottom: var(--space-7);
    }

    .filter-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    @media (min-width: 700px) {
        .filter-bar {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1100px) {
        .filter-bar {
            grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        }

        .filter-bar-short {
            grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        }
    }

    /* A colour swatch input, sized like a small button rather than a full-width field */
    .field input[type="color"] {
        width: 3.5rem;
        min-height: 2.5rem;
        padding: 0.25rem;
        cursor: pointer;
    }

    .field input[type="range"] {
        min-height: auto;
        padding: 0;
        border: 0;
        background: none;
        accent-color: var(--heading);
    }

    /* A row of checkboxes with their labels, used by the favicon tools' size picker */
    .checkbox-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
    }

    .checkbox-list label {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--heading);
        font-size: var(--text-sm);
    }

    /* Drag-and-drop upload zone, used by the image optimiser */
    .dropzone {
        padding: var(--space-6);
        border: 2px dashed var(--border-strong);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--text-muted);
        text-align: center;
        cursor: pointer;
        transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
    }

    .dropzone:hover,
    .dropzone.is-dragover {
        border-color: var(--green);
        background: var(--surface-muted);
    }

    .dropzone strong {
        display: block;
        color: var(--heading);
    }

    .upload-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .upload-item {
        position: relative;
        width: 5.5rem;
        height: 5.5rem;
        overflow: hidden;
        border-radius: var(--radius-sm);
        background: var(--surface-muted);
    }

    .upload-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .upload-item .icon-button {
        position: absolute;
        top: var(--space-1);
        right: var(--space-1);
        --size: 1.5rem;
        background: rgb(255 255 255 / 0.85);
    }

    .upload-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: rgb(255 255 255 / 0.6);
    }

    .upload-progress-bar {
        height: 100%;
        width: 0%;
        background: var(--green);
        transition: width var(--fast) linear;
    }

    /* Live preview box on the favicon tools */
    .tool-preview {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6rem;
        height: 6rem;
        margin-top: var(--space-2);
        border: var(--line);
        background: #fff;
        color: #000;
        font-size: 3.5rem;
        line-height: 1;
        object-fit: cover;
    }
}