/* ==========================================================================
   15-account.css — Fiók-oldalak: bejelentkezés, jelszó-visszaállítás

   A /bejelentkezes/ oldal három nézete (belépés, elfelejtett jelszó, új
   jelszó) ugyanazt a kártyát és űrlap-készletet használja, ezért egy
   komponens-család szolgálja ki mindet.

   Az űrlapelemek pill formája szándékos: az ICF formanyelvben a gomb, a
   chip és a jelvény is lekerekített, a szögletes input kilógna belőle. Az
   alapszínt és a fókusz keretet az 05-base.css adja, itt csak a méret, a
   forma és az elrendezés van.

   Ide jön később a tagi profilszerkesztő (/account/user-settings/) is.
   ========================================================================== */

@layer components {

  .login-main {
    /* A kártya a csontszín háttéren úszik, ahogy a hírek és az események
       tartalomhasábja is. */
    background-color: var(--color-bg);
  }

  /* Az oldalfej alatt ugyanaz a levegő, mint a többi belső oldalon (a
     .page-body 32px-e) — a .section alap 96px-e a cím és a kártya közé
     akkora lyukat vágott, mintha hiányozna onnan egy szekció.
     ⚠️ A .section--compact itt NEM segít: a 07-components.css a
     --section-padding változó helyett fix értéket ír a .section-re. */
  .login-main .section {
    padding-block: var(--space-8) var(--space-24);
  }

  /* ========================================================================
     KÁRTYA — a nézetek közös kerete
     ======================================================================== */

  .login-card {
    max-width: 30rem; /* 480px — az űrlap ennél szélesebben szétesik */
    margin-inline: auto;
    padding: var(--space-8) var(--space-6);

    background-color: var(--color-bg-alt);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }

  @media (min-width: 768px) {
    .login-card {
      padding: var(--space-10);
    }
  }

  .login-card__title {
    margin-block: 0 var(--space-2);
    font-size: var(--text-h4);
    text-align: center;
  }

  .login-card__lead {
    margin-block: 0 var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-base);
    text-align: center;
    text-wrap: pretty;
  }

  .login-card__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  /* ========================================================================
     ÉRTESÍTÉS — hibaüzenet és visszajelzés az űrlap felett
     ======================================================================== */

  .login-notice {
    --login-notice-bg:     var(--color-info-soft);
    --login-notice-border: var(--color-info);

    margin-block: 0 var(--space-6);
    padding: var(--space-3) var(--space-4);

    background-color: var(--login-notice-bg);
    border-inline-start: 3px solid var(--login-notice-border);
    border-radius: var(--radius-lg);

    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    text-wrap: pretty;
  }

  .login-notice--error {
    --login-notice-bg:     var(--color-error-soft);
    --login-notice-border: var(--color-error);
  }

  .login-notice--success {
    --login-notice-bg:     var(--color-success-soft);
    --login-notice-border: var(--color-success);
  }

  /* ========================================================================
     ŰRLAP
     ======================================================================== */

  .login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  /* Csali mező (honeypot) — lásd icf_login_honeypot_field().

     SZÁNDÉKOSAN nem `display: none` és nem `hidden` attribútum: a botok egy
     része átugorja a nem renderelt mezőket, az eltoltat viszont kitölti. A
     képernyőolvasónak az aria-hidden szól, a billentyűzetnek a tabindex="-1"
     — ember tehát semmiképp nem találkozik vele. */
  .login-hp {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
  }

  .login-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .login-field label {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
  }

  .login-field input {
    width: 100%;
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
  }

  .login-field__hint {
    margin: 0;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
  }

  /* „Maradjak bejelentkezve" + „Elfelejtett jelszó?" egy sorban, mobilon
     egymás alatt. */
  .login-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .login-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
    cursor: pointer;
  }

  .login-check input {
    width: 1rem;
    height: 1rem;
    padding: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
  }

  .login-form__submit {
    width: 100%;
  }

  .login-form__foot {
    margin-block: var(--space-5) 0;
    text-align: center;
  }

  /* ========================================================================
     PROFILSZERKESZTŐ

     Szélesebb, mint a bejelentkező kártya (820px, mint a belső oldalak
     tartalomhasábja), és szekciónként külön fehér kártya — a négy blokk
     így akkor is átlátható, ha a tag csak egy adatot javít.
     ======================================================================== */

  /* A szerkesztő SZÉLESEBB, mint a belső oldalak 820px-es olvasóhasábja: itt
     nem olvasni kell, hanem űrlapot kitölteni, és a nagy képernyőn egymás
     mellett elférő kártyák kevesebb görgetést jelentenek. */
  .profile-form {
    --profile-measure: 71rem;   /* 1136px */

    inline-size: min(100%, var(--profile-measure));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  .profile-notice {
    inline-size: min(100%, 71rem);
    margin-inline: auto;
  }

  /* Két kártya egymás mellett, ha van rá hely. A töréspont nem a viewportra,
     hanem arra van szabva, hogy egy fél kártyában a rövid mezők kéthasábos
     rácsa (2 × 17rem) még kiférjen — ez alatt egy kártya-oszlop marad. */
  @media (min-width: 1080px) {
    .profile-form {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Amiben széles vezérlő van (profilkép sor, szerkesztők), az egész sort
       megkapja — a séma 'wide' kulcsa dönt róla, nem a sorrend. */
    .profile-section--wide,
    .profile-form__actions {
      grid-column: 1 / -1;
    }
  }

  .profile-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);

    /* A fieldset alapértelmezett kerete és belső tere böngészőnként más —
       itt mindkettőt magunk adjuk meg. */
    margin: 0;
    padding: var(--space-6);
    border: 0;

    background-color: var(--color-bg-alt);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }

  @media (min-width: 768px) {
    .profile-section {
      padding: var(--space-8);
    }
  }

  .profile-section__title {
    /* A legend alapból kivágja a keretet és nem tördel jól — blokk-elemként
       viselkedjen, mint egy szekciócím. */
    display: block;
    inline-size: 100%;
    padding: 0;
    margin-block-end: var(--space-2);

    font-family: var(--font-display);
    font-size: var(--text-h5);
    font-weight: var(--fw-bold);
    color: var(--color-text);
  }

  .profile-section__intro {
    margin-block: calc(var(--space-2) * -1) 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-wrap: pretty;
  }

  /* Két hasáb, ha elfér. Az `auto-fit` + `minmax` páros azért jó ide, mert
     nem breakpointhoz köt: ahol a 17rem-es minimum kétszer kifér, ott két
     oszlop lesz, ahol nem, ott egy — mobilon és szűk kártyában is. */
  .profile-section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--space-5);
    align-items: start;
  }

  /* A hosszú mezők a teljes sort elfoglalják. A `1 / -1` egy oszlopnál is
     helyes marad, nem kell külön mobil szabály. */
  .profile-field--wide {
    grid-column: 1 / -1;
  }

  .profile-field textarea {
    inline-size: 100%;
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-xl);   /* pill helyett lekerekített, több sorhoz */
    font-family: var(--font-sans);
    font-size: var(--text-base);
    resize: vertical;
  }

  .profile-field__label {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
  }

  .profile-field__required {
    color: var(--color-error);
  }

  .profile-field__error {
    margin: 0;
    color: var(--color-error);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
  }

  .profile-field--error :is(input, textarea) {
    border-color: var(--color-error);
  }

  /* Választó-felhő — a 22 régió listaként hosszú lenne, chipként átlátható.
     A natív jelölőnégyzetet elrejtjük, de FÓKUSZÁLHATÓ marad (nem
     display:none), és a chip a :has() alapján színeződik. */
  .profile-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .profile-choice {
    display: inline-flex;
    align-items: center;

    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    background-color: var(--color-bg);
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;

    transition:
      background-color var(--duration-fast) var(--ease),
      border-color var(--duration-fast) var(--ease),
      color var(--duration-fast) var(--ease);

    &:hover {
      border-color: var(--color-primary);
      color: var(--color-text);
    }

    &:has(input:checked) {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-text-invert);
    }

    &:has(input:focus-visible) {
      outline: 2px solid var(--color-border-focus);
      outline-offset: 2px;
    }
  }

  .profile-choice input {
    /* A natív négyzet felesleges a chip mellett, de a billentyűzetnek és a
       képernyőolvasónak ott kell lennie — ezért méret nélkül, nem elrejtve. */
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* ------------------------------------------------------------------------
     WP SZERKESZTŐ (TinyMCE) a bemutatkozó mezőkben

     A wp_editor a saját markupját hozza (.wp-editor-wrap), a stílusát pedig a
     wp-admin CSS-e — ami a fronton nincs betöltve teljesen. Itt csak annyit
     igazítunk, hogy a doboz a többi mezőhöz illeszkedjen; a szerkesztő belső
     működéséhez NEM nyúlunk.
     ------------------------------------------------------------------------ */

  .profile-field .wp-editor-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-color: var(--color-bg-alt);
  }

  .profile-field .wp-editor-container,
  .profile-field .mce-panel {
    background-color: var(--color-bg-alt);
  }

  /* A TinyMCE eszköztára és a szövegdoboz kerete duplázódna a wrapperrel. */
  .profile-field .mce-tinymce,
  .profile-field .mce-toolbar-grp,
  .profile-field .mce-edit-area {
    border-color: var(--color-border) !important;   /* a mce inline stílusa ellen */
    box-shadow: none !important;
  }

  .profile-field .wp-editor-area {
    /* A „Szöveg" fül nyers HTML nézete — legyen monospace és keret nélküli. */
    inline-size: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0;
    background-color: var(--color-bg-alt);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-sm);
  }

  .profile-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
  }

  .profile-photo__preview {
    display: grid;
    place-items: center;
    inline-size: 5rem;
    block-size: 5rem;
    overflow: hidden;

    background-color: var(--color-bg-muted);
    border-radius: var(--radius-full);

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  .profile-photo__controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1 1 12rem;
  }

  .profile-photo__controls input[type="file"] {
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
  }

  .profile-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .login-link {
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 3px;

    &:hover {
      color: var(--color-primary-hover);
    }
  }

}