/* Open Sans is served locally, including its license in assets/fonts. */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('/assets/fonts/open-sans-latin-wght-normal.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
        U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('/assets/fonts/open-sans-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

/* The public brand palette is independent of the administration interface. */
.public-shell {
    --brand-green: #ccd5c2;
    --brand-gray: #585856;
    --brand-red: #813744;
    --brand-red-hover: #692c37;
    --bg: #fff;
    --paper: #fff;
    --ink: var(--brand-gray);
    --muted: var(--brand-gray);
    --green: var(--brand-red);
    --accent: var(--brand-red);
    --line: #e2e6dd;
    --serif: 'Open Sans', Arial, sans-serif;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    background: var(--bg);
    color: var(--ink);
}

.public-shell h1 {
    font-weight: 600;
    letter-spacing: -0.04em;
}

.public-shell .eyebrow {
    color: var(--brand-red);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 1.5px;
}

.public-shell .field label {
    font-size: 15px;
}

.public-shell .field input,
.public-shell .field textarea,
.public-shell .field select {
    font-size: 16px;
}

.public-shell .field input::placeholder,
.public-shell .field textarea::placeholder {
    font-size: 15px;
}

.public-shell .field small,
.public-shell .field-error,
.public-shell .section-heading p,
.public-shell .page-heading p,
.public-shell .alert {
    font-size: 14px;
    line-height: 1.7;
}

.public-shell .field label .optional {
    font-size: 13px;
}

.public-shell .button,
.public-shell .back-link {
    font-size: 14px;
}

.public-shell :focus-visible {
    outline-color: var(--brand-red);
}

.public-shell .button:hover {
    background: var(--brand-red-hover);
    border-color: var(--brand-red-hover);
}

.public-shell .button.secondary {
    border-color: var(--brand-gray);
    color: var(--brand-gray);
}

.public-shell .button.secondary:hover {
    background: var(--brand-green);
    border-color: var(--brand-gray);
}

.public-shell .field input:focus,
.public-shell .field textarea:focus,
.public-shell .field select:focus {
    border-color: var(--brand-red);
}

/* Two windows onto the original logo: the image itself is unchanged.
   The horizontal arrangement keeps the header compact on small screens. */
.nier-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.nier-logo-symbol,
.nier-logo-wordmark {
    display: block;
    background-image: url('/assets/images/fleischerei-nier.png');
    background-repeat: no-repeat;
}

.nier-logo-symbol {
    width: 100px;
    height: 80px;
    background-size: 100px auto;
    background-position: center top;
}

.nier-logo-wordmark {
    width: 150px;
    height: 70px;
    background-size: 150px auto;
    background-position: center bottom;
}

.public-shell .public-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin: 0 5vw;
    padding: 32px 20px;
    border-top: 1px solid var(--line);
    text-align: left;
    font-size: 14px;
    letter-spacing: 0;
}

.footer-logo {
    display: block;
    width: 88px;
    height: auto;
    flex: 0 0 auto;
}

.footer-copy p {
    margin-bottom: 10px;
    font-weight: 600;
}

.footer-copy a {
    color: var(--brand-red);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 600px) {
    .nier-logo-symbol {
        width: 80px;
        height: 64px;
        background-size: 80px auto;
    }

    .nier-logo-wordmark {
        width: 124px;
        height: 58px;
        background-size: 124px auto;
    }

    .public-shell .public-footer {
        gap: 20px;
        padding-inline: 0;
    }
}