/**
 * Gestaltung der wp-members-Formulare (Anmeldung, Registrierung, Profil,
 * Passwort) in der Sprache des neuen Webauftritts.
 *
 * Diese Datei lag im Plugin, wurde aber nie eingebunden -- ihr Inhalt war eine
 * Abschrift der Voreinstellung von wp-members. Eingebunden wird sie jetzt in
 * Klingner_Plugin_Public::enqueue_wpmembers_style(), und zwar nach
 * assets/css/forms/generic-no-float.css von wp-members: dessen Regeln haengen
 * an Kennungen (#wpmem_login, #wpmem_reg, #wp-members), deshalb tun unsere das
 * hier auch. Sonst gewinnt bei gleicher Spezifitaet, was spaeter geladen wird.
 *
 * Aufbau der Formulare (Stand wp-members 3.5):
 *
 *   div#wpmem_login  -> Anmelden, Passwort aendern, Passwort vergessen
 *   div#wpmem_reg    -> Registrieren, Profil bearbeiten
 *   div#wp-members   -> Anmeldeformular in der Seitenleiste
 *     form.form#wpmem_{login,register,profile,pwdchange,pwdreset}_form
 *       fieldset > legend
 *                > label.text + span.req
 *                > div.div_text > input.textbox|.username|.password
 *                > div.button_div > input.buttons
 *                > div.req-text, div.link-text > span.link-text-*
 *
 * Farben und Masse sind dieselben wie in klingner-plugin-public.css; die
 * Variablen stehen hier noch einmal, weil diese Formulare nicht in .fda-upload
 * oder .fda-auftraege liegen.
 */

#wpmem_login,
#wpmem_reg,
#wp-members,
#wpmem_msg,
.wpmem_msg,
p.login_status,
p.register_status,
ul.register_links,
ul.fda-profilmenue,
.fda-profilkarte {
    --fda-linie:      #e6e6e6;
    --fda-flaeche:    #f7f9f5;
    --fda-text:       #1d1d1d;
    --fda-leise:      #5f6b57;
    --fda-akzent:     #79cd2a;
    --fda-akzent-tief:#6ab822;
    --fda-auf-akzent: #1d1d1d;
    --fda-dunkel:     #376b00;
    --fda-fehler:     #b32d2e;
    --fda-radius:     10px;
}

#wpmem_login *,
#wpmem_login *::before,
#wpmem_login *::after,
#wpmem_reg *,
#wpmem_reg *::before,
#wpmem_reg *::after,
#wp-members *,
#wp-members *::before,
#wp-members *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------- Breite ---- */

/* wp-members setzt hier 75% -- das laeuft in einer breiten Inhaltsspalte
   auseinander. Wie beim Upload-Formular: begrenzen und mittig setzen. */
#wpmem_login,
#wpmem_reg {
    width: 100%;
    max-width: 30em;
    margin: 0 auto;
    color: var(--fda-text);

    /* Gemessen wird an der Spalte, die das Theme dem Formular laesst, nicht am
       Fenster -- wie beim Upload-Formular. Ein Media Query haette den Knopf in
       einer schmalen Inhaltsspalte auf einem breiten Bildschirm nebeneinander
       gelassen. */
    container-type: inline-size;
}

/* Registrieren und Profil haben viele Felder und duerfen breiter sein. */
#wpmem_reg {
    max-width: 34em;
}

#wp-members {
    width: 100%;
    color: var(--fda-text);
}

/* -------------------------------------------------------------- Karte ---- */

/* Das fieldset ist die Karte, die legend ihre Kopfzeile. */
#wpmem_login .form fieldset,
#wpmem_reg .form fieldset,
#wp-members fieldset {
    margin: 0 0 1.5em;
    padding: 1.25em;
    border: 2px solid var(--fda-linie);
    border-radius: var(--fda-radius);
    background: #fff;
}

#wpmem_login .form legend,
#wpmem_reg .form legend,
#wp-members legend {
    /* float+width:100% statt der Voreinstellung: eine legend sitzt sonst im
       Rahmen des fieldset und schneidet dort eine Luecke heraus -- an einer
       Karte sieht das nach Fehler aus. So liegt die Ueberschrift als eigene
       Zeile darin, der Rahmen bleibt durchgezogen. */
    float: left;
    width: 100%;
    margin: 0 0 1em;
    padding: 0;
    border: none;
    color: var(--fda-dunkel);
    font-size: 1.15em;
    font-weight: 600;
    line-height: 1.3;
}

/* Was nach der ausgeflossenen legend kommt, muss unter ihr anfangen. */
#wpmem_login .form legend + *,
#wpmem_reg .form legend + *,
#wp-members legend + * {
    clear: left;
}

/* ------------------------------------------------------------- Felder ---- */

#wpmem_login .form label,
#wpmem_reg .form label,
#wp-members label {
    display: block;
    width: auto;
    margin: 0 0 .35em;
    font-size: .9em;
    font-weight: 600;
}

/* Pflichtstern wie im Upload-Formular. */
#wpmem_login .req,
#wpmem_reg .req,
#wp-members .req {
    color: var(--fda-fehler);
    margin-left: .1em;
}

#wpmem_login div[class^="div_"],
#wpmem_reg div[class^="div_"],
#wp-members div[class^="div_"] {
    width: auto;
    margin: 0 0 1.1em;
}

#wpmem_login input[type="text"],
#wpmem_login input[type="email"],
#wpmem_login input[type="password"],
#wpmem_login input[type="url"],
#wpmem_login input[type="tel"],
#wpmem_login input[type="number"],
#wpmem_login select,
#wpmem_login textarea,
#wpmem_reg input[type="text"],
#wpmem_reg input[type="email"],
#wpmem_reg input[type="password"],
#wpmem_reg input[type="url"],
#wpmem_reg input[type="tel"],
#wpmem_reg input[type="number"],
#wpmem_reg input[type="date"],
#wpmem_reg select,
#wpmem_reg textarea,
#wp-members input[type="text"],
#wp-members input[type="password"] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: .55em .7em;
    border: 1px solid var(--fda-linie);
    border-radius: var(--fda-radius);
    background: #fff;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}

#wpmem_login textarea,
#wpmem_reg textarea {
    resize: vertical;
    min-height: 4.5em;
}

#wpmem_login input:focus,
#wpmem_login select:focus,
#wpmem_login textarea:focus,
#wpmem_reg input:focus,
#wpmem_reg select:focus,
#wpmem_reg textarea:focus,
#wp-members input:focus {
    outline: none;
    border: 1px solid var(--fda-akzent);
    box-shadow: 0 0 0 3px rgba(121, 205, 42, .3);
}

/* Erst bemaengeln, wenn das Feld angefasst wurde -- mit :invalid stuenden alle
   Pflichtfelder schon beim Oeffnen rot da. */
#wpmem_login input:user-invalid,
#wpmem_reg input:user-invalid,
#wpmem_reg select:user-invalid,
#wpmem_reg textarea:user-invalid {
    border-color: #e2a5a5;
}

/* Ankreuzfelder und Auswahlknoepfe bleiben klein und stehen neben ihrer
   Beschriftung. */
#wpmem_login input[type="checkbox"],
#wpmem_login input[type="radio"],
#wpmem_reg input[type="checkbox"],
#wpmem_reg input[type="radio"],
#wp-members input[type="checkbox"] {
    width: auto;
    margin: 0 .4em 0 0;
    vertical-align: middle;
}

#wpmem_login input[type="checkbox"] + label,
#wpmem_reg input[type="checkbox"] + label,
#wpmem_reg input[type="radio"] + label,
#wp-members input[type="checkbox"] + label {
    display: inline;
    margin: 0;
    font-weight: 400;
}

/* Felder, die nur angezeigt werden (im Profil etwa der Benutzername). */
#wpmem_login .noinput,
#wpmem_reg .noinput {
    padding: .55em .7em;
    border: 1px solid var(--fda-linie);
    border-radius: var(--fda-radius);
    background: var(--fda-flaeche);
    color: var(--fda-leise);
}

/* ------------------------------------------------------------ Knoepfe ---- */

/* Enthaelt bei der Anmeldung auch "Angemeldet bleiben" -- deshalb umbrechend
   und mit Abstand, damit Haekchen und Knopf nicht zusammenkleben. */
#wpmem_login .button_div,
#wpmem_reg .button_div,
#wp-members .button_div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em .75em;
    margin: 1.25em 0 0;
    text-align: left;
}

#wpmem_login input[type="submit"],
#wpmem_login button,
#wpmem_reg input[type="submit"],
#wpmem_reg button,
#wp-members input[type="submit"] {
    order: 2;
    margin: 0;
    padding: .7em 1.5em;
    border: none;
    border-radius: var(--fda-radius);
    background: var(--fda-akzent);
    color: var(--fda-auf-akzent);
    font: inherit;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.4;
    /* Das Theme setzt seine Knoepfe in Grossbuchstaben mit Sperrschrift
       (body button, body input[type="submit"]). font: inherit holt das nicht
       zurueck -- text-transform und letter-spacing gehoeren nicht zur
       font-Kurzform. Hier stand deshalb "ANMELDEN" und "REGISTRIEREN",
       waehrend die Formulare darueber normal gesetzt sind. Dasselbe steht aus
       demselben Grund an .fda-upload .fda-knopf. */
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: background .15s;
}

#wpmem_login input[type="submit"]:hover,
#wpmem_login button:hover,
#wpmem_reg input[type="submit"]:hover,
#wp-members input[type="submit"]:hover {
    background: var(--fda-akzent-tief);
}

/* Der Knopf steht rechts, "Angemeldet bleiben" davor. */
#wpmem_login .button_div input[type="checkbox"],
#wpmem_login .button_div label {
    order: 1;
}

#wpmem_login .button_div input[type="submit"] {
    margin-left: auto;
}

/* ------------------------------------------------------------ Hinweise --- */

#wpmem_login .req-text,
#wpmem_reg .req-text {
    margin: .9em 0 0;
    font-size: .8em;
    line-height: 1.45;
    color: var(--fda-leise);
}

/* Fusszeilen der Formulare: "Passwort vergessen?", "Neuer Benutzer?".
   Streng an #wpmem_login/#wpmem_reg gebunden -- .link-text benutzt auch das
   Theme im Hauptmenue. */
#wpmem_login .link-text,
#wpmem_reg .link-text {
    margin: .6em 0 0;
    font-size: .88em;
    line-height: 1.5;
    color: var(--fda-leise);
    text-align: left;
}

/* Die Unterstreichung kommt vom Theme und bleibt: es setzt sie ueber
   .page:not(...) .entry a:not(...) -- Spezifitaet (0,6,1), dagegen kaeme hier
   nur !important an. Beim Ueberfahren wechselt darum die Farbe, sonst laege
   eine zweite Linie unter dem Text. */
#wpmem_login .link-text a,
#wpmem_reg .link-text a {
    color: var(--fda-dunkel);
    font-weight: 600;
}

#wpmem_login .link-text a:hover,
#wpmem_login .link-text a:focus-visible,
#wpmem_reg .link-text a:hover,
#wpmem_reg .link-text a:focus-visible {
    color: var(--fda-akzent-tief);
}

/* --------------------------------------------------------- Meldungen ---- */

/* Nachrichten von wp-members: Registrierung erfolgreich, Passwort geaendert,
   fehlgeschlagene Anmeldung. */
#wpmem_msg,
.wpmem_msg {
    width: 100%;
    max-width: 34em;
    margin: 0 auto 1.5em;
    padding: 1em 1.25em;
    border: 2px solid var(--fda-linie);
    border-left: 4px solid var(--fda-akzent);
    border-radius: var(--fda-radius);
    background: #fff;
    color: var(--fda-text);
    text-align: left;
}

#wpmem_msg p,
.wpmem_msg p {
    margin: 0;
    font-size: .92em;
    line-height: 1.5;
}

#wpmem_msg p + p,
.wpmem_msg p + p {
    margin-top: .5em;
}

/* Fehler: roter Streifen statt gruener. */
#wpmem_msg.wpmem_msg_error,
.wpmem_msg.wpmem_msg_error,
#wpmem_msg.err,
.wpmem_msg.err {
    border-left-color: var(--fda-fehler);
    background: #fcf0f0;
}

/* Feldbezogene Fehlermeldung im Formular. */
#wpmem_login .err,
#wpmem_reg .err,
#wp-members .err {
    display: block;
    width: 100%;
    margin: 0 0 1em;
    padding: .7em .9em;
    border: 1px solid #f0c6c6;
    border-radius: var(--fda-radius);
    background: #fcf0f0;
    color: var(--fda-fehler);
    font-size: .9em;
    text-align: left;
}

/* ------------------------------------------------------ Profilmenue ----- */

/* Die Linkliste der Profilseite ("Meine Daten bearbeiten", "Passwort
   aendern") und dieselbe Liste nach einer Registrierung. Die Klasse
   fda-profilmenue kommt aus wpmembers_member_links_filter(); register_links
   bringt wp-members selbst mit. */
ul.fda-profilmenue,
ul.register_links {
    margin: 0 auto 1.5em;
    padding: 0;
    border: 2px solid var(--fda-linie);
    border-radius: var(--fda-radius);
    background: #fff;
    list-style: none;
    overflow: hidden;
}

/* Auf der Profilseite stehen drei Dinge untereinander: diese Liste, das
   Formular (#wpmem_reg, 34em) und der Kasten zur Auftragsbestaetigung
   (.fda-benachrichtigung). Alle drei sind mittig gesetzt -- bei
   unterschiedlicher Breite standen ihre Kanten deshalb versetzt zueinander,
   und beim Wechsel zwischen Menue und Formular sprang die Breite. Deshalb
   ueberall dasselbe Mass. */
.fda-profilkarte {
    /* Dieselbe Schriftbasis wie die Formulare: wp-members setzt
       "#wpmem_reg, #wpmem_login { font-size: 16px }", waehrend der Inhalt des
       Themes auf 14px steht. Ohne das waeren beide zwar "34em" breit, das
       Formular aber 544px und diese Karte 476px -- mittig gesetzt standen ihre
       Kanten dann versetzt zueinander. In rem laesst es sich nicht ausdruecken,
       das Theme stellt die Wurzel auf 10px. */
    font-size: 16px;
    max-width: 34em;
    margin: 0 auto 1.5em;
}

/* In der Karte traegt diese den Rahmen -- die Liste darin waere sonst ein
   zweiter Kasten im Kasten. */
.fda-profilkarte ul.fda-profilmenue {
    max-width: none;
    margin: 0;
    border: none;
    border-radius: 0;
}

/* Die Liste nach einer Registrierung steht unter dem Anmeldeformular
   (#wpmem_login) und richtet sich nach dessen Breite. */
ul.register_links {
    max-width: 30em;
}

ul.fda-profilmenue li,
ul.register_links li {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--fda-linie);
    list-style: none;
}

ul.fda-profilmenue li:first-child,
ul.register_links li:first-child {
    border-top: none;
}

ul.fda-profilmenue a,
ul.register_links a {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .85em 1.25em;
    color: var(--fda-dunkel);
    font-weight: 600;
}

/* Winkel am Zeilenende, damit die Zeile als Weg erkennbar ist. */
ul.fda-profilmenue a::after,
ul.register_links a::after {
    content: "";
    width: .4em;
    height: .4em;
    margin-left: auto;
    border-top: 2px solid var(--fda-akzent);
    border-right: 2px solid var(--fda-akzent);
    transform: rotate(45deg);
}

ul.fda-profilmenue a:hover,
ul.fda-profilmenue a:focus-visible,
ul.register_links a:hover,
ul.register_links a:focus-visible {
    background: var(--fda-flaeche);
    color: var(--fda-akzent-tief);
}

/* Angemeldet: "Sie sind angemeldet als ..." samt Abmeldelink. */
p.login_status,
p.register_status {
    max-width: 34em;
    margin: 0 auto 1.5em;
    padding: 1em 1.25em;
    border: 2px solid var(--fda-linie);
    border-left: 4px solid var(--fda-akzent);
    border-radius: var(--fda-radius);
    background: #fff;
    font-size: .92em;
    line-height: 1.6;
}

p.login_status a,
p.register_status a {
    color: var(--fda-dunkel);
    font-weight: 600;
}

p.login_status a:hover,
p.login_status a:focus-visible,
p.register_status a:hover,
p.register_status a:focus-visible {
    color: var(--fda-akzent-tief);
}

/* ------------------------------------------------- Nutzungsbedingungen --- */

/* Das Feld mit den Nutzungsbedingungen (wp-members: #tos). */
#tos {
    max-width: 100%;
}

#wpmem_reg .div_checkbox,
#wpmem_reg .div_multicheckbox,
#wpmem_reg .div_radio {
    margin-bottom: 1.1em;
}

/* ----------------------------------------------------------- Captcha ---- */

#wpmem_reg .captcha {
    margin: 0 0 1.1em;
}

#wpmem_reg .captcha table {
    margin: 0;
    border: none;
    background: transparent;
}

/* ------------------------------------------- Registrieren zweispaltig ---- */

/* Elf Felder untereinander machen die Registrierung ueber zwei Bildschirme
   lang. Ab genug Breite steht die Beschriftung deshalb links neben dem Feld.
 *
 * Zwei Feldspalten nebeneinander waeren der andere Weg, taugen hier aber
 * nicht: das fieldset enthaelt label und div.div_text als Geschwister, ohne
 * Huelle je Paar. Ein Raster ueber vier Spalten muesste die Zugehoerigkeit
 * ueber :nth-of-type erraten -- und die Feldliste steht im Backend von
 * wp-members, sie aendert sich, sobald jemand dort ein Feld hinzunimmt. Die
 * Reihenfolge label, div, label, div ... traegt dagegen von selbst: das Raster
 * fuellt zeilenweise, jedes Paar bleibt beieinander, egal wie viele Felder es
 * gibt.
 *
 * Die Grenze liegt wie beim Knopf bei 26em: darunter braucht das Feld die
 * ganze Breite. */
@container (min-width: 26em) {
    #wpmem_reg .form fieldset {
        display: grid;
        /* Feste Obergrenze statt max-content: die Feldliste steht im Backend
           von wp-members, ein langer Name duerfte sonst die Feldspalte
           zusammendruecken. So bricht die Beschriftung um und das Feld behaelt
           seine Breite. */
        grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
        /* center, nicht baseline: baseline richtet die Textgrundlinien aus und
           schiebt dafuer Platz ueber die niedrigere Zelle -- die Zeilen standen
           damit rund 20% weiter auseinander als noetig. */
        align-items: center;
        column-gap: 1.25em;
        row-gap: .9em;
    }

    /* Ueberschrift und Hinweise gehen ueber beide Spalten. Die legend traegt
       weiter float: left -- ohne das waere sie die "rendered legend" und
       sortierte sich in den Rahmen des fieldset ein, statt Zeile im Raster zu
       werden. */
    #wpmem_reg .form legend,
    #wpmem_reg .form .req-text,
    #wpmem_reg .form .link-text,
    #wpmem_reg .form .captcha {
        grid-column: 1 / -1;
    }

    /* Der Knopf steht in der Feldspalte, nicht am Kartenrand: er gehoert zu dem,
       was ausgefuellt wurde, und die gemeinsame Kante fuehrt das Auge. */
    #wpmem_reg .form .button_div {
        grid-column: 2 / -1;
        margin-top: .4em;
    }

    /* Die Abstaende macht jetzt das Raster. */
    #wpmem_reg .form label {
        margin: 0;
    }

    #wpmem_reg .form div[class^="div_"] {
        margin: 0;
    }

    #wpmem_reg .form legend {
        margin-bottom: 0;
    }
}

/* -------------------------------------------------------------- Klein --- */

/* Enge Spalte: Knopf ueber die ganze Breite und nach oben, damit er nicht
   neben dem Haekchen eingequetscht steht. Die Grenze liegt bei 26em, weil
   "Angemeldet bleiben" und der Knopf schon knapp darunter nicht mehr
   nebeneinander passen -- der Knopf rutschte sonst allein und rechts
   ausgerichtet in die naechste Zeile. */
@container (max-width: 26em) {
    #wpmem_login .form fieldset,
    #wpmem_reg .form fieldset {
        padding: 1em;
    }

    #wpmem_login input[type="submit"],
    #wpmem_reg input[type="submit"] {
        width: 100%;
        order: 0;
        margin-left: 0;
    }
}

/* Die Seitenleiste (#wp-members) ist kein Container -- dort bleibt es beim
   Fenstermass. */
@media screen and (max-width: 480px) {
    #wp-members fieldset {
        padding: 1em;
    }

    #wp-members input[type="submit"] {
        width: 100%;
    }
}