/* =============================================================================
   19-search.css — fejléc-kereső (felugró) és a találati oldal

   Markup: template-parts/search/dialog.php, search.php.
   Ügyfél-kérés, 2026-09-30: az élő oldal Elementor-keresője hiányzott.
   ============================================================================= */

@layer components {

  /* ========================================================================
     A FEJLÉC JOBB OLDALA — kereső + Belépés + Csatlakozz egy csoportban

     1280px alatt a két gomb a menüpanelbe költözik (`.site-header__actions`
     rejtve, 09-home.css), a kereső viszont a sávban marad, a hamburger
     mellett. A jobbra tolást ilyenkor ez a csoport kapja, nem a hamburger.
     ======================================================================== */

  .site-header__tools {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-3);
  }

  /* Csupasz ikon, keret nélkül (a user kérése, 2026-09-30: „elég az
     ikon"). A kattintható felület a padding miatt így is 36px-es. */
  .site-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-full);

    background: transparent;
    color: var(--color-text-invert);
    cursor: pointer;

    transition: color var(--duration-base) var(--ease);

    &:hover {
      color: var(--icf-yellow);
    }

    &:focus-visible {
      outline: 2px solid var(--icf-yellow);
      outline-offset: 3px;
    }
  }

  @media (max-width: 1280px) {
    .site-header__tools {
      margin-inline-start: auto;
    }

    /* A 09-home.css a hamburgert tolja jobbra — most már a csoport teszi */
    .site-header__toggle {
      margin-inline-start: 0;
    }
  }

  /* ========================================================================
     FELUGRÓ KERESŐ — natív <dialog>, top layerben

     Felülről lóg be, nem középre ül: a találati lista lefelé nő, és ha a
     panel középen állna, gépelés közben ugrálna fel-le.
     ======================================================================== */

  .search-dialog {
    inline-size: min(100% - var(--space-8), 44rem);
    max-inline-size: none;
    max-block-size: calc(100dvh - var(--space-16));
    margin-block: var(--space-16) auto;
    margin-inline: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-card);

    background-color: var(--color-bg-alt);
    box-shadow: var(--shadow-card);
    color: var(--color-text);

    &::backdrop {
      background-color: color-mix(in srgb, var(--icf-deep-blue) 70%, transparent);
      backdrop-filter: blur(4px);
    }
  }

  .search-dialog__panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
  }

  .search-dialog__form {
    display: flex;
    align-items: center;
    gap: var(--space-3);

    padding-block-end: var(--space-4);
    border-block-end: 2px solid var(--color-border);

    &:focus-within {
      border-block-end-color: var(--color-primary);
    }
  }

  .search-dialog__icon {
    flex-shrink: 0;
    color: var(--color-primary);
  }

  .search-dialog__input {
    flex: 1;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: transparent;

    color: var(--icf-deep-blue);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);

    &::placeholder {
      color: var(--color-text-subtle);
      font-weight: var(--fw-regular);
    }

    &:focus {
      outline: none;
    }

    /* A böngésző saját törlő-X-e a bezáró gomb mellett zavaró duplikát */
    &::-webkit-search-cancel-button {
      appearance: none;
    }
  }

  .search-dialog__close {
    display: inline-flex;
    flex-shrink: 0;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    color: var(--icf-deep-blue);
    cursor: pointer;

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

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

  .search-dialog__body {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
  }

  .search-dialog__status {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .search-dialog__hits {
    display: grid;
    gap: var(--space-1);
    inline-size: 100%;
    margin: 0;
    padding: 0;
    list-style: none;

    /* A 05-base.css szövegre szánt `li + li` térköze itt nem kell */
    & li + li {
      margin-block-start: 0;
    }
  }

  /* A címke-oszlop FIX széles (a leghosszabb, „Esemény" címkéhez mérve),
     különben soronként máshol kezdődne a cím. */
  .search-hit {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
    gap: var(--space-3);

    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);

    color: var(--icf-deep-blue);
    text-decoration: none;

    &:hover,
    &:focus-visible {
      background-color: var(--color-bg);
      outline: none;
    }

    &:focus-visible {
      box-shadow: inset 0 0 0 2px var(--color-border-focus);
    }
  }

  /* Típus-címke — a popupban ÉS a találati oldalon is */
  .search-hit__label {
    --label-bg: var(--color-primary-soft);
    --label-color: var(--color-primary);

    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);

    background-color: var(--label-bg);
    color: var(--label-color);

    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    justify-self: start;

    &[data-type="post"] {
      --label-bg: var(--color-secondary-soft);
      --label-color: var(--icf-deep-blue);
    }

    &[data-type="esemenyek"] {
      --label-bg: var(--color-accent-soft);
      --label-color: var(--icf-deep-blue);
    }
  }

  .search-hit__title {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
  }

  .search-hit__date {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .search-dialog__all {
    margin-block-start: var(--space-2);
  }

  @media (max-width: 639px) {
    .search-dialog {
      margin-block-start: var(--space-4);
      max-block-size: calc(100dvh - var(--space-8));
    }

    .search-dialog__panel {
      padding: var(--space-4);
    }

    .search-dialog__input {
      font-size: var(--text-lg);
    }

    /* Keskenyen a dátum a cím alá kerül, a címke fölé */
    .search-hit {
      grid-template-columns: 1fr;
      gap: var(--space-1);
      justify-items: start;
    }
  }

  /* ========================================================================
     TALÁLATI OLDAL — search.php
     ======================================================================== */

  .search-page {
    padding-block: var(--space-8) var(--space-32);
  }

  .search-page__inner {
    inline-size: min(100% - var(--space-8), 54rem);
    margin-inline: auto;
  }

  .search-page__form {
    display: flex;
    align-items: center;
    gap: var(--space-3);

    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-alt);

    &:focus-within {
      border-color: var(--color-primary);
    }
  }

  .search-page__icon {
    flex-shrink: 0;
    color: var(--color-primary);
  }

  .search-page__input {
    flex: 1;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-lead);

    &:focus {
      outline: none;
    }
  }

  .search-page__empty {
    margin-block-start: var(--space-8);
    color: var(--color-text-muted);
  }

  .search-results {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-10) 0 0;
    padding: 0;
    list-style: none;

    & li + li {
      margin-block-start: 0;
    }
  }

  .search-result {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-6);
    border-radius: var(--radius-3xl);
    background-color: var(--color-bg-alt);
  }

  .search-result__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .search-result__date {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .search-result__title {
    margin: 0;
    font-size: var(--text-xl);

    & a {
      color: var(--icf-deep-blue);
      text-decoration: none;

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

  .search-result__excerpt {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
}

@layer components {
  /* 404: a kezdőlap-gomb a keresőmező alatt, középen */
  .search-page__home {
    margin-block-start: var(--space-8);
    text-align: center;
  }
}