/* =========================================================
   mobil.css – mobil használhatósági javítások
   =========================================================

   Ez a fájl MINDEN más stíluslap UTÁN töltődik be (head.php), mert az itteni
   szabályoknak felül kell írniuk az oldalspecifikus `css_post` fájlokat is.
   Kizárólag `@media` blokkokat tartalmaz, tehát asztali nézetben nem hat.

   Minden szabály MÉRÉSBŐL származik – 375 px-en végigmért oldalakról:
     – az űrlapmezők 14,72 px-esek voltak → iOS Safari érintésre RÁNAGYÍT
     – 24-43 link/gomb magassága 16 px volt → ujjal alig eltalálható
     – 11–11,84 px-es mikrofeliratok → olvashatatlanul kicsi telefonon
   ========================================================= */


/* ---------------------------------------------------------
   1) ŰRLAPMEZŐK – iOS automatikus nagyítás megszüntetése
   ---------------------------------------------------------
   Az iOS Safari minden 16 px-nél kisebb betűs mezőnél ránagyít az oldalra,
   amikor a felhasználó belekattint. A nagyítás után az oldal elcsúszik, és
   a látogatónak kézzel kell visszahúznia – ez a leggyakoribb ok, amiért egy
   mobilos érdeklődő félbehagyja az űrlapot. 16 px a küszöb, nem esztétika.

   Az `!important` itt nem lustaság: a mezők osztályt kapnak (`.cx-input`,
   `#kg-chat-input`), és egy osztály-szelektor (0,1,0) MINDIG veri az
   elem-szelektort (0,0,1), akárhányadikként töltődik be ez a fájl. Mérve:
   nélküle a kapcsolati űrlap textareája 14,72 px maradt.                    */
@media (max-width: 900px) {
  input[type="text"], input[type="tel"], input[type="email"], input[type="url"],
  input[type="number"], input[type="search"], input[type="password"],
  input[type="date"], select, textarea {
    font-size: 16px !important;
  }
}


/* ---------------------------------------------------------
   2) ÉRINTŐFELÜLETEK – legalább 40 px magas kattintható sáv
   ---------------------------------------------------------
   A sorokba tördelt szöveglinkek (lábléc, kártyák „Tovább” linkje) natúran
   csak a betű magasságát foglalják el – mérve 16 px. Az `inline-flex` +
   `min-height` úgy növeli a találati felületet, hogy a szöveg helyben marad;
   a `margin` negatív ellensúlyozása nélkül a listák nem lazulnak fel. */
@media (max-width: 900px) {
  .ftr-links a,
  .ftr-contact-row a,
  .ftr-bottom__links a,
  .cookie-banner__small a,
  .kg-bc__item a,
  .grev-card__link,
  .cx-contact-row__value,
  .rf-kartya__tovabb,
  .rf-kartya__video,
  .vd-kartya__ref,
  .psheet__rows dd a,
  .mobile-menu__phone {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* A lábléc-listáknál a nagyobb sáv miatt csökkenthető a sorköz, különben
     a menü kétszer olyan hosszú lenne. */
  .ftr-links li { margin-block: 0; }

  /* Gombként viselkedő elemek: legyen valódi ujjnyi felületük. */
  .cx-tag,
  .rf-kereso button {
    min-height: 40px;
    padding-block: 8px;
  }

  /* A chatablak bezáró gombja 29 px volt – pont az a gomb, amit a látogató
     akkor keres, amikor útban van neki a panel. */
  #kg-chat-close {
    min-width: 40px;
    min-height: 40px;
  }

  /* Valódi gombok, amik mégis 20-22 px magasak voltak. A géppark-kártyák
     „Részletek” és „Kérdés / egyeztetés” gombja a legfontosabb: ez a
     továbblépés az oldalról. */
  .mcard__actions .btn,
  .hero-badge,
  .cx-link,
  .gf-type h3 > a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* FIGYELEM: a folyószövegbe ágyazott linkek (jogi oldalak `p > a`,
     „…az ajánlatkérőben…”) SZÁNDÉKOSAN maradnak sormagasságúak. Ott a 40 px-es
     sáv szétverné a bekezdést, és a szomszédos sorok kattintható sávjai
     egymásra csúsznának – az rosszabb, mint a kis felület. */
}


/* ---------------------------------------------------------
   3) MIKROFELIRATOK – 12 px alá ne menjen a szöveg
   ---------------------------------------------------------
   Ezek szándékosan apró, nagybetűs címkék (szekció-felütés, kártya-típus,
   dátum). Asztali nézetben rendben vannak; telefonon viszont 11–11,84 px-en
   már nem olvashatók kényelmesen. A `!important` azért kell, mert több
   ilyen szabály oldalspecifikus `css_post` fájlból jön, ami betöltési
   sorrendben ugyan előbb van, de azonos specificitás mellett nyerne. */
@media (max-width: 600px) {
  .lp-kicker,
  .gf-kicker,
  .grev-kicker,
  .lp-cta-panel__badge,
  .lp-refcard__tipus,
  .lp-svc-card__ref,
  .rf-cimke,
  .rf-kartya__meta span,
  .vd-kartya__meta span,
  .cx-hero__badge,
  .cx-hero__stat,
  .cx-stat-item__k,
  .mmenu__parent,
  .partners-head__kicker,
  .partners-hero__kicker,
  .psheet__flag,
  .tp-cimke,
  .tp-miert__cim,
  .page-hero__kicker,
  #kg-chat-header__sub,
  #kg-chat-hint {
    font-size: 12px !important;
  }
}