/**
 * GFU-Forms — BEM-Komponenten für die neue Forms-Foundation
 * (inc/forms/render.php) plus Legacy-Selektoren für den
 * gfu_form-CPT-Render (inc/post-types/form.php).
 *
 * Markup-Struktur (neue Helper):
 *
 *   .gfu-form-wrap.gfu-form-wrap--{theme}
 *     .gfu-form-wrap__title
 *     .gfu-form-wrap__intro
 *     .gfu-form__notice (vom Submit-Redirect)
 *     .gfu-form (= <form>)
 *       .gfu-form__field.gfu-form__field--{type}
 *         .gfu-form__label
 *         .gfu-form__input | __select | __textarea
 *         .gfu-form__help
 *       .gfu-form__row (2-col)
 *       .gfu-form__field--checkbox > .gfu-form__label--checkbox > input + span
 *       .gfu-form__field--radio   > fieldset.gfu-form__radio-group
 *       .gfu-form__hp             (Honeypot, visually hidden)
 *       .gfu-form__turnstile
 *       .gfu-form__actions > button.btn + .gfu-form__hint
 *       .gfu-form__messages       (Async-Notice-Target)
 */

/* ──────────────────────────────────────────────────────────────
 * Wrap + Intro
 * ────────────────────────────────────────────────────────────── */

.gfu-form-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
}

.gfu-form-wrap__eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-meta);
}

.gfu-form-wrap__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-text);
}

.gfu-form-wrap__intro {
    color: var(--color-text);
    line-height: var(--lh-relaxed);
}

.gfu-form-wrap__intro > *:first-child { margin-top: 0; }
.gfu-form-wrap__intro > *:last-child  { margin-bottom: 0; }

/* ──────────────────────────────────────────────────────────────
 * Form
 * ────────────────────────────────────────────────────────────── */

.gfu-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: relative;
}

.gfu-form.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* 2-spaltiges Row-Layout (mobile → 1-spaltig). */
.gfu-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 600px) {
    .gfu-form__row {
        grid-template-columns: 1fr;
    }
}

/* ──────────────────────────────────────────────────────────────
 * Field-Wrapper
 * ────────────────────────────────────────────────────────────── */

.gfu-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.gfu-form__label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

/* Pflicht-Indikator: kleines Sternchen am Label-Ende. */
.gfu-form__field--required > .gfu-form__label::after,
.gfu-form__field--required > .gfu-form__radio-group > legend.gfu-form__label::after {
    content: "*";
    margin-left: 4px;
    color: var(--color-electric-blue);
}

.gfu-form__help {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--lh-normal);
}

/* ──────────────────────────────────────────────────────────────
 * Inputs / Select / Textarea
 * ────────────────────────────────────────────────────────────── */

.gfu-form__input,
.gfu-form__select,
.gfu-form__textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-snug);
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-dunkelbeige);
    border-radius: 4px;
    transition:
        border-color var(--duration-fast) var(--ease-default),
        box-shadow   var(--duration-fast) var(--ease-default);
}

.gfu-form__input:focus,
.gfu-form__select:focus,
.gfu-form__textarea:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: var(--focus-ring-navy);
}

/* Styled Select-Dropdown — Browser-Default-Pfeil ausblenden und durch
 * eigenes Chevron-SVG (inline data-URL) ersetzen. Konsistent zu allen
 * Input-Feldern (gleiche Token, gleiche Höhe). */
.gfu-form__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: var(--space-12);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23002398' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 12px 8px;
}

/* Dark-Theme: weißer Chevron auf dunklem BG. */
.gfu-form-wrap--dark .gfu-form__select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Placeholder-Option (value="") visuell als Muted darstellen — der
 * Browser zeigt sie nur, solange nichts anderes gewählt ist. */
.gfu-form__select:has(option[value=""]:checked) {
    color: var(--color-text-muted);
}

.gfu-form__select option {
    color: var(--color-text);
    background-color: var(--color-white);
}

.gfu-form__textarea {
    min-height: 140px;
    resize: vertical;
}

.gfu-form__field--readonly .gfu-form__input,
.gfu-form__field--readonly .gfu-form__select,
.gfu-form__field--readonly .gfu-form__textarea {
    background-color: var(--color-beige);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────
 * Checkbox + Radio
 * ────────────────────────────────────────────────────────────── */

.gfu-form__field--checkbox {
    gap: var(--space-2);
}

.gfu-form__label--checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-weight: var(--fw-regular);
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: var(--lh-normal);
    cursor: pointer;
}

.gfu-form__checkbox {
    margin-top: 4px;
    flex-shrink: 0;
    accent-color: var(--color-navy);
}

.gfu-form__radio-group {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gfu-form__radio-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.gfu-form__radio-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-beige);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-default);
}

.gfu-form__radio-item:hover {
    border-color: var(--color-dunkelbeige);
}

.gfu-form__radio-item:has(.gfu-form__radio:checked) {
    border-color: var(--color-navy);
    background-color: var(--color-white);
}

.gfu-form__radio {
    margin-top: 4px;
    flex-shrink: 0;
    accent-color: var(--color-navy);
}

.gfu-form__radio-label {
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
}

/* ──────────────────────────────────────────────────────────────
 * Success-Takeover (Newsletter): nach erfolgreichem Submit wird der
 * Form + Header ausgeblendet, dieser Container nimmt seinen Platz ein.
 * Die enthaltene `.gfu-form__notice--success` liefert das Box-Styling.
 * ────────────────────────────────────────────────────────────── */

.gfu-form-wrap__success {
    margin-top: 0;
}

.gfu-form-wrap__success:not([hidden]) {
    /* Wenn sichtbar: minimaler Abstand zu vorherigem Content (falls
     * der Wrap noch andere sichtbare Elemente enthält). Die Notice
     * selbst bringt ihr Padding mit. */
    margin-top: var(--space-4);
}

/* ──────────────────────────────────────────────────────────────
 * Conditional-Felder (Newsletter: Website nur bei Press-Auswahl)
 *
 * .gfu-form__field--press-only ist default-hidden. JS (forms.js)
 * setzt `.is-visible` an, sobald der Press-Radio ausgewählt wird.
 * Fallback ohne JS: Feld bleibt ausgeblendet — die Backend-Validierung
 * fängt fehlendes Website-Feld bei target=press separat ab.
 * ────────────────────────────────────────────────────────────── */

.gfu-form__field--press-only {
    display: none;
}

.gfu-form__field--press-only.is-visible {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ──────────────────────────────────────────────────────────────
 * Honeypot (visually hidden)
 * ────────────────────────────────────────────────────────────── */

.gfu-form__hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────
 * Turnstile-Wrapper
 * ────────────────────────────────────────────────────────────── */

.gfu-form__turnstile {
    margin-top: var(--space-2);
}

.gfu-form__turnstile:empty {
    display: none;
}

/* ──────────────────────────────────────────────────────────────
 * Actions (Submit + Hint)
 * ────────────────────────────────────────────────────────────── */

.gfu-form__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.gfu-form__submit {
    /* nutzt das .btn-System aus global.css */
    min-width: 200px;
}

.gfu-form__hint {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--lh-normal);
}

/* ──────────────────────────────────────────────────────────────
 * Notice (Success / Error)
 * ────────────────────────────────────────────────────────────── */

.gfu-form__notice {
    padding: var(--space-3) var(--space-4);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
}

.gfu-form__notice--success {
    background-color: var(--color-electric-blue);
    color: var(--color-navy);
}

.gfu-form__notice--error {
    background-color: var(--color-rot);
    color: var(--color-white);
}

.gfu-form__messages:empty {
    display: none;
}

/* ──────────────────────────────────────────────────────────────
 * Theme-Variante „dark" (über dunklem BG, z. B. Navy-Section)
 * ────────────────────────────────────────────────────────────── */

.gfu-form-wrap--dark .gfu-form-wrap__title,
.gfu-form-wrap--dark .gfu-form__label,
.gfu-form-wrap--dark .gfu-form__label--checkbox,
.gfu-form-wrap--dark .gfu-form__radio-label,
.gfu-form-wrap--dark .gfu-form-wrap__intro {
    color: var(--color-text-on-navy);
}

.gfu-form-wrap--dark .gfu-form__input,
.gfu-form-wrap--dark .gfu-form__select,
.gfu-form-wrap--dark .gfu-form__textarea {
    background-color: rgb(var(--color-white-rgb) / 0.08);
    border-color: var(--border-on-navy-soft);
    color: var(--color-white);
}

.gfu-form-wrap--dark .gfu-form__input::placeholder,
.gfu-form-wrap--dark .gfu-form__select::placeholder,
.gfu-form-wrap--dark .gfu-form__textarea::placeholder {
    color: var(--color-text-on-navy-muted);
}

.gfu-form-wrap--dark .gfu-form__input:focus,
.gfu-form-wrap--dark .gfu-form__select:focus,
.gfu-form-wrap--dark .gfu-form__textarea:focus {
    border-color: var(--color-electric-blue);
    box-shadow: var(--focus-ring-cyan);
}

.gfu-form-wrap--dark .gfu-form__help,
.gfu-form-wrap--dark .gfu-form__hint {
    color: var(--color-text-on-navy-soft);
}

.gfu-form-wrap--dark .gfu-form__radio-item {
    background-color: rgb(var(--color-white-rgb) / 0.06);
}

.gfu-form-wrap--dark .gfu-form__radio-item:has(.gfu-form__radio:checked) {
    background-color: rgb(var(--color-white-rgb) / 0.12);
    border-color: var(--color-electric-blue);
}

/* ──────────────────────────────────────────────────────────────
 * Legacy-Selektoren — bestehender gfu_form-CPT-Render
 * (siehe inc/post-types/form.php → gfu_render_form()).
 *
 * Markup: .gfu-form__form > .gfu-form__row > <label> + <input>.
 * Wird parallel zur neuen Helper-API gepflegt, damit FlexGrid-Blöcke,
 * die schon einen gfu_form referenzieren, weiterhin sauber rendern.
 * ────────────────────────────────────────────────────────────── */

.gfu-form__intro {
    color: var(--color-text);
    line-height: var(--lh-relaxed);
}

.gfu-form__intro > *:first-child { margin-top: 0; }
.gfu-form__intro > *:last-child  { margin-bottom: 0; }

.gfu-form__success {
    padding: var(--space-4) var(--space-6);
    background-color: var(--color-electric-blue);
    color: var(--color-navy);
    font-weight: var(--fw-semibold);
}

.gfu-form__error {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-rot);
    color: var(--color-white);
    font-weight: var(--fw-semibold);
}

.gfu-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Legacy: .gfu-form__row als Field-Wrapper (label + input vertikal). */
.gfu-form__form > .gfu-form__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    grid-template-columns: none;
}

.gfu-form__form > .gfu-form__row > label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.gfu-form__form > .gfu-form__row input[type="text"],
.gfu-form__form > .gfu-form__row input[type="email"],
.gfu-form__form > .gfu-form__row textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-snug);
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-dunkelbeige);
}

.gfu-form__form > .gfu-form__row input[type="text"]:focus,
.gfu-form__form > .gfu-form__row input[type="email"]:focus,
.gfu-form__form > .gfu-form__row textarea:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: var(--focus-ring-navy);
}

.gfu-form__form > .gfu-form__row textarea {
    min-height: 140px;
    resize: vertical;
}

.gfu-form__row--consent label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-weight: var(--fw-regular);
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: var(--lh-normal);
}

.gfu-form__row--consent input[type="checkbox"] {
    margin-top: 4px;
    accent-color: var(--color-navy);
}

.gfu-form__row--submit {
    margin-top: var(--space-2);
}

.gfu-form__row--honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}