/**
 * PK mobil urlapok 1.0 (minden nem-admin oldalon)
 *
 * Mobil-atnezes (2026-09-25, 375 px, bejelentkezve):
 * - multiselect (Nyelvek, Cimkek, Problemakorok): a Hozzaadas / Eltavolitas
 *   gombsor (ul, position: relative, left: ~35% + 20px margo) +80 px-szel
 *   kilogott -> profil, blog-, program- es valasz-bekuldo urlap.
 * - CKEditor 5 eszkoztar: a csoportositas (ck-toolbar_grouping) a rejtett
 *   fulon inicializalt szerkesztonel nem szamol ujra, a gombsor 502 px
 *   szeles maradt 323 px-es helyen -> tordeljen.
 * - field_group vizszintes fulek (profilszerkeszto): keskeny helyen a fulsor
 *   nem epul fel (ul.horizontal-tabs-list.visually-hidden), a panelek
 *   osszecsukhato <details>-kent maradnak, a cimuk viszont formazatlan szurke
 *   sor volt -> nem latszott, hogy az Elerhetosegek / Rendelo(k) /
 *   Szolgaltatasok/Arak kattinthato szakasz ("mobilrol nem szerkesztheto").
 *   A szakaszok kartyalistakent jelennek meg (lasd a fajl vegen).
 *   Nincs media query: csak akkor hat, ha a fulsor rejtett.
 */
@media (max-width: 991.98px) {
  .multiselect-wrapper .multiselect-btns ul {
    left: 0;
    margin-left: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }
  .multiselect-wrapper .multiselect-available,
  .multiselect-wrapper .multiselect-selected,
  .multiselect-wrapper select.form-multiselect {
    max-width: 100%;
  }
  .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
    flex-wrap: wrap;
  }
}

/* Admin: a smink lebego fulpanelje (.user-logged-in nav.tabs: fixed,
 * left: 0, z-index: 1000 - Megtekintes / Szerkesztes / Torles...) a
 * fuggoleges admin menu (toolbar-tray, 240 px, z-index: 501) FOLE ult.
 * Nyitott fuggoleges menunel a fulpanel a menu melle csuszik; a Drupal
 * toolbar a menu szelesseget a --drupal-displace-offset-left valtozoban
 * adja, a smink sajat 0.5 s-os atmenete miatt csusztatva kovet. */
body.toolbar-tray-open.toolbar-vertical nav.tabs {
  left: var(--drupal-displace-offset-left, 0px) !important;
}

/* Profilszerkeszto telefonon (2026-09-25, 375 px, szakember-fiokkal merve):
 * 1) A CKEditor 5 sajat, futasidoben beszurt stilusa (.ck-toolbar_grouping >
 *    .ck-toolbar__items { flex-wrap: nowrap }) felulirta a tordelest: az
 *    eszkoztar 502 px szeles maradt, az EGESZ oldal 586 px szeles lett, es a
 *    telefon kicsinyitve (osszenyomva) mutatta. -> !important.
 * 2) Kilenc egymasba agyazott keret (urlap 32 px, kartya, container, ful-
 *    szakasz, bekezdes, rendelesi ido...) 375 px-bol 142 px-t hagyott a
 *    mezoknek (idopont-mezo 53 px). A belso margok osszehuzva: a cim 303 px,
 *    az idopont 106 px, a megjegyzes 223 px szeles lett.
 * 3) A tobbszoros valasztolistak (Nyelvek, Problemakor, Vegzettseg...) ne
 *    legyenek kepernyonyi magasak. */
@media (max-width: 767.98px) {
  .ck.ck-editor .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
    flex-wrap: wrap !important;
  }
  form.node-listing-form,
  form.node-listing-edit-form {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  form.node-listing-form details > .container,
  form.node-listing-edit-form details > .container,
  form.node-listing-form details > .details-wrapper,
  form.node-listing-edit-form details > .details-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
  form.node-listing-form .layout-region-node-main,
  form.node-listing-edit-form .layout-region-node-main {
    padding-left: 0;
    padding-right: 0;
  }
  form.node-listing-form .content.clearfix.row,
  form.node-listing-edit-form .content.clearfix.row {
    margin-left: 0;
    margin-right: 0;
  }
  form.node-listing-form .paragraphs-subform,
  form.node-listing-edit-form .paragraphs-subform {
    padding-left: 8px;
    padding-right: 8px;
  }
  form.node-listing-form table.field-multiple-table > tbody > tr,
  form.node-listing-edit-form table.field-multiple-table > tbody > tr {
    padding-left: 0;
    padding-right: 0;
  }
  form.node-listing-form .field--type-office-hours .table-responsive > table.table > tbody > tr,
  form.node-listing-edit-form .field--type-office-hours .table-responsive > table.table > tbody > tr {
    padding-left: 8px;
    padding-right: 8px;
  }
  form.node-listing-form select.form-multiselect,
  form.node-listing-edit-form select.form-multiselect {
    width: 100%;
    max-width: 100%;
    height: 11rem;
  }
}

/* A LENYITHATO SZAKASZOK VALODI HIBAJA (2026-09-25): a gin-bridge.css
 *   [data-drupal-admin-styles] details summary { pointer-events: none; ... }
 * szabalya a frontend urlapokon MINDEN <summary>-t kattinthatatlanna tett
 * (a kattintas a details-re esett, nem a summary-ra). Ezert nem nyilt a
 * telefonon az Elerhetosegek / Rendelo(k) / Szolgaltatasok/Arak, es a
 * Rendelesi ido, valamint asztalon az oldalsav szakaszai (Allapot,
 * Webcimalnev...) sem. A data-drupal-admin-styles attributum magan a
 * <form>-on van. */
form[data-drupal-admin-styles] details > summary {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Lenyithato szakaszok kartyalistakent (keskeny kijelzo, rejtett fulsor).
 * Az arculati tokenekkel: keret #e3e3e3, lekerekites 10px, cim #33607f,
 * nyitott cim hattere #edf2fc (--main-color-soft), nyil #5b9dc6. */
.horizontal-tabs:has(> [data-horizontal-tabs-list].visually-hidden) {
  border: 0;
  margin-bottom: 0;
}
.field-group-tabs-wrapper:has([data-horizontal-tabs-list].visually-hidden) {
  margin-bottom: 0;
}
[data-horizontal-tabs-list].visually-hidden ~ [data-horizontal-tabs-panes] > details {
  margin: 0 0 10px;
  border: 1px solid #e3e3e3 !important;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 40, 80, 0.05);
}
[data-horizontal-tabs-list].visually-hidden ~ [data-horizontal-tabs-panes] > details > summary {
  display: block;
  position: relative;
  margin: 0;
  padding: 14px 44px 14px 16px;
  border: 0;
  background: #fff;
  color: #33607f;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
}
[data-horizontal-tabs-list].visually-hidden ~ [data-horizontal-tabs-panes] > details > summary::-webkit-details-marker {
  display: none;
}
[data-horizontal-tabs-list].visually-hidden ~ [data-horizontal-tabs-panes] > details > summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid #5b9dc6;
  border-bottom: 2px solid #5b9dc6;
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
[data-horizontal-tabs-list].visually-hidden ~ [data-horizontal-tabs-panes] > details[open] > summary {
  background: #edf2fc;
  border-bottom: 1px solid #e3e3e3;
}
[data-horizontal-tabs-list].visually-hidden ~ [data-horizontal-tabs-panes] > details[open] > summary::after {
  margin-top: -8px;
  transform: rotate(45deg);
}