/* =============================================================
 *  contact-fab.css — a lebegő kapcsolat-gomb (M360-273)
 *
 *  MIÉRT KÜLÖN FÁJL. A `main.css` a design rendszer változatlan másolata
 *  (lásd README), a `frame.css` pedig csak a WordPress-keretet illeszti.
 *  Ez a komponens egyikbe sem való, viszont önmagában zárt: saját fájlt kap,
 *  és csak arra az oldalra megy ki, ahol a gomb be van kapcsolva.
 *
 *  AZ ÉRTÉKEK A LÁTVÁNYTERVBŐL jönnek (`mobile-sticky.jsx`): a pirulák
 *  méretei, színei és árnyékai onnan másoltak. A színek megegyeznek a téma
 *  palettájával (theme.json), ezért állnak itt ugyanazok a hexák, mint a
 *  `main.css`-ben.
 * ============================================================= */

/* A GOMB A FEJLÉC FÖLÖTT ÜL a rétegsorban (a fejléc `z-index: 100`). A fátyol
   ennek a keretnek a gyereke, tehát pontosan addig ér, ameddig a keret: 100
   alatt maradva a ragadós fejléc és a mega sor világosan állt volna a
   sötétített lap fölött.

   AMINEK VISZONT ÁTADJA A HELYET, az a nyitott mobil menü. Az a fejléc
   gyereke, és nyitva az egész képernyőt betakarja; egy fölötte lebegő gomb
   a menü tetején úszna. A `:has()` a lap állapotát olvassa, tehát nem kell
   hozzá se közös szülő, se szkript. Ahol nincs `:has()` támogatás, ott a
   gomb ottmarad a menü fölött, ami kevésbé szép, de nem törött. */
body:has(.mobile-nav[data-open='true']) .contact-fab {
  display: none;
}

.contact-fab {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  display: flex;
  /* FORDÍTOTT OSZLOP. A gomb áll elöl a markupban, hogy a billentyűzet
     előbb érje el, mint a pirulákat (lásd inc/contact-fab.php); a látvány
     viszont fordított: a gomb alul, a pirulák fölötte. */
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  /* A törzsszöveg 1.6-os sorköze ide beszivárogva megnyújtaná a pirulákat,
     ugyanaz a hiba, mint a fejlécnél (main.css `.site-header`). */
  line-height: normal;
}

/* ASZTALI GÉPEN TÁGABB A SZEGÉLY. A 16/18 pixel a telefon képernyőjének
   mérete (a látványterv ott is ennyit rajzol); egy 1440 pixel széles ablak
   sarkában ugyanez odatapadna a szélhez. A gomb mérete nem változik, csak
   beljebb ül. */
@media (min-width: 1025px) {
  .contact-fab {
    right: calc(24px + env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* A SZŰKÍTŐ KAPCSOLÓ. Alapból minden képernyőn ott a gomb; ez az osztály
     csak akkor kerül ki, ha a beállításban mobilra korlátozták. 1024 pixel
     az a határ, ahol a fejléc fiókra vált és a telefonszám kiesik belőle
     (main.css `@media (max-width: 1024px)`), tehát efölött a fejléc már
     kínálja ugyanazt. */
  .contact-fab--mobile-only {
    display: none;
  }
}

/* Nyomtatásban nincs mire koppintani. */
@media print {
  .contact-fab {
    display: none;
  }
}

/* ---------- Fátyol ------------------------------------------
 * A megnyitott menü mögött tompul a tartalom, és bárhova koppintva bezár.
 * `fixed`, mert a szülő is az: a rögzített pozíció a nézetablakhoz igazodik,
 * nem a szülő dobozához, tehát a jobb alsó sarokból is az egész képernyőt
 * takarja.
 * ------------------------------------------------------------- */
.contact-fab__scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(11, 18, 32, 0.28);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* AZ ANIMÁCIÓ A NYITOTT ÁLLAPOTHOZ VAN KÖTVE, nem az elemhez. Feltétel
   nélkül kiírva a lap BETÖLTÉSEKOR futna le, még rejtett listán, és mire a
   látogató a gombhoz ér, már véget is ért volna: a `hidden` levétele
   önmagában nem indít újra egy lefutott animációt. Az állapothoz kötve
   viszont minden nyitás új animáció, mert a szabály olyankor kapcsolódik be.
   A React-előkép ezt azzal oldotta meg, hogy nyitáskor be is illesztette az
   elemeket a DOM-ba; itt a markup végig ott áll, tehát az állapotnak kell
   kapcsolnia. */
.contact-fab[data-open='true'] .contact-fab__scrim {
  animation: m360-fab-fade 0.18s ease both;
}

/* ---------- A pirulák ---------------------------------------- */
.contact-fab__menu {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* A `main.css` listaszabályai ellen: ez nem szövegtörzsbeli felsorolás. */
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-fab__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ugyanaz az állapothoz kötés, mint a fátyolnál: enélkül a lépcsőzés a lap
   betöltésekor játszódna le, rejtett listán. */
.contact-fab[data-open='true'] .contact-fab__item {
  animation: m360-fab-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) var(--m360-fab-in, 0ms) both;
}

/* ZÁRÁSKOR A SOR VISSZAFELÉ FOGY EL. A `data-closing` addig áll a kereten,
   amíg az utolsó pirula ki nem úszott; a szkript csak utána teszi vissza a
   `hidden` attribútumot, különben a lista egy szempillantás alatt eltűnne,
   és a kilépő animációnak nem maradna mit mozgatnia. */
.contact-fab[data-closing='true'] .contact-fab__item {
  animation: m360-fab-out 0.18s ease-in var(--m360-fab-out, 0ms) both;
}

.contact-fab__item::before,
.contact-fab__item::marker {
  content: none;
}

.contact-fab__action {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px 10px 12px;
  background: #FFFFFF;
  color: #0B1220;
  border: 1px solid #E5E9EE;
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(11, 18, 32, 0.35);
  text-decoration: none;
  cursor: pointer;
}

.contact-fab__action:hover,
.contact-fab__action:focus-visible {
  text-decoration: none;
  color: #0B1220;
}

/* A HÍVÁS A KIEMELT ÚT. A látványterv is márkaszínűre festi: aki telefonon
   nyit meg egy lebegő kapcsolat-gombot, jellemzően beszélni akar. */
.contact-fab__action--accent {
  background: #287FAA;
  color: #FFFFFF;
  border-color: transparent;
}

.contact-fab__action--accent:hover,
.contact-fab__action--accent:focus-visible {
  color: #FFFFFF;
}

.contact-fab__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #F4F9FC;
  color: #287FAA;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-fab__action--accent .contact-fab__icon {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

.contact-fab__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.contact-fab__text {
  text-align: left;
}

.contact-fab__label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.15;
}

.contact-fab__sub {
  display: block;
  margin-top: 1px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  opacity: 0.55;
}

.contact-fab__action--accent .contact-fab__sub {
  opacity: 0.8;
}

/* ---------- A fő gomb ---------------------------------------- */
.contact-fab__toggle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 20px 0 18px;
  background: #287FAA;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  box-shadow: 0 14px 30px -8px rgba(40, 127, 170, 0.6);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.contact-fab[data-open='true'] .contact-fab__toggle {
  padding: 0 18px;
  background: #0B1220;
  box-shadow: 0 12px 28px -8px rgba(11, 18, 32, 0.5);
}

/* A KÉT ARC KÖZÜL A CSS VÁLASZT. `display: none`, nem áttetszőség: a rejtett
   arc így a hozzáférhetőségi fából is kiesik, tehát a képernyőolvasó nem
   olvassa fel mindkét feliratot egyszerre. */
.contact-fab__face {
  display: flex;
  align-items: center;
  gap: 9px;
}

.contact-fab__face--close,
.contact-fab[data-open='true'] .contact-fab__face--open {
  display: none;
}

.contact-fab[data-open='true'] .contact-fab__face--close {
  display: flex;
}

.contact-fab__face svg {
  display: block;
}

.contact-fab__toggle-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* A fókuszgyűrű LÁTHATÓ marad. A gomb sötét háttéren ül, ezért fehér a
   külső gyűrű: a böngésző alapértelmezett sötét körvonala elveszne rajta. */
.contact-fab__toggle:focus-visible,
.contact-fab__action:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(40, 127, 170, 0.55);
}

/* ---------- Mozgás ------------------------------------------- */
@keyframes m360-fab-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes m360-fab-out {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
}

@keyframes m360-fab-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Aki kérte, hogy ne mozogjon a felület, annál a pirulák megjelennek, de nem
   úsznak be. Az információ megmarad, az animáció nem. */
@media (prefers-reduced-motion: reduce) {
  /* A ZÁRÓ SZABÁLY IS IDE KELL. Az fajsúlyosabb az alapnál
     (`.contact-fab[data-closing]` három osztály), a médialekérdezés pedig
     nem ad fajsúlyt: kihagyva a kilépő animáció itt is lefutna. */
  .contact-fab[data-open='true'] .contact-fab__item,
  .contact-fab[data-closing='true'] .contact-fab__item,
  .contact-fab[data-open='true'] .contact-fab__scrim {
    animation: none;
  }

  .contact-fab__toggle {
    transition: none;
  }
}

/* ---------- Keskeny telefon ---------------------------------- */
/* 380 pixelen a pirula alcíme és a fő gomb felirata együtt kiszorítja a
   gombot a képernyőről. A pirulák maradnak (azok a lényeg), a fő gomb
   viszont feliratot vesztve, körré húzva ül a sarokban. */
@media (max-width: 380px) {
  .contact-fab__toggle {
    width: 54px;
    padding: 0;
    justify-content: center;
  }

  .contact-fab[data-open='true'] .contact-fab__toggle {
    padding: 0;
  }

  .contact-fab__toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}