/* fx/touch-a11y.css - modul touch-a11y
   Stlačenie (.is-pressed), fokusové prstence, odkaz „Preskočiť na obsah“, dotykové plochy v pätičke.
   Transform tu nastavujeme iba cez .is-pressed s !important (zdokumentovaná výnimka: stlačenie musí
   prebiť hover a vlastné transformy prvku; JS stlačenie vynechá, ak na prvku beží animácia). */

/* ---------- STLAČENIE ----------
   .is-pressed  = prst / myš je dole (JS pridá po 70 ms alebo pri rýchlom ťuknutí)
   .is-released = 420 ms návrat po pustení (iba pod .motion)
   .ta-tp       = prvok nemá vo vlastnom transition transform: počas stlačenia a návratu doplníme zoznam vlastností */

.is-pressed:not(:where(.mnav a:not(.mnav__phone), .citem, .faq summary)){ transform:scale(.972) !important; }
:is(.btn, .filter, .tool, .cartbtn, .back, .chips a, .mnav__phone).is-pressed{ transform:scale(.96) !important; }
.footer__social a.is-pressed{ transform:scale(.92) !important; }

/* riadky a rozbaľovačky: bez zmenšenia, iba jemný tón (inset tieň, aby prekryl aj sivé / farebné pozadie) */
:is(.mnav a:not(.mnav__phone), .citem).is-pressed{ box-shadow:inset 0 0 0 100vmax rgba(29,31,29,.04); }
.faq summary:is(.is-pressed, .is-released, :focus-visible){ border-radius:8px; }
.faq summary.is-pressed{ background:rgba(29,31,29,.04); box-shadow:0 0 0 7px rgba(29,31,29,.04); }

.motion .is-pressed{
  transition-duration:.12s !important; transition-delay:0s !important;
  transition-timing-function:cubic-bezier(.2,.7,.2,1) !important;
}
.motion .is-released{
  transition-duration:.42s !important; transition-delay:0s !important;
  transition-timing-function:var(--ease) !important;
}
.motion .ta-tp:is(.is-pressed, .is-released){
  transition-property:transform, color, background-color, border-color, box-shadow !important;
}

/* presné ukazovadlo: stlačenie nadväzuje na hover zdvih (žiadny skok z -6 px na 0) */
@media (hover:hover) and (pointer:fine){
  .tile:hover.is-pressed{ transform:translateY(-4px) scale(.985) !important; }
  .btn:hover.is-pressed{ transform:translateY(-1px) scale(.97) !important; }
  .lecturer:hover.is-pressed{ transform:translateY(-1px) scale(.985) !important; }
  .back:hover.is-pressed{ transform:translateX(-2px) scale(.96) !important; }
}

/* ---------- FOKUS ----------
   Prstenec sa objaví a rozíde sa von (0 -> 3 px) za 160 ms. Keyframe namiesto transition,
   aby sme neprepisovali vlastné zoznamy transition komponentov (nulová špecificita cez :where). */
@keyframes ta-ring{ from{ outline-offset:0; outline-color:rgba(58,170,55,0); } }
@keyframes ta-ring2{ from{ box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(58,170,55,0), var(--ta-drop, 0 0 0 0 transparent); } }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--green); outline-offset:3px;
}
:where(.motion) :where(a, button, summary, [tabindex]):focus-visible{ animation:ta-ring .16s var(--ease) both; }
:where(summary):focus-visible{ border-radius:8px; }
/* formulárové polia majú vlastný zelený rámik (site.css), prstenec k nim nepridávame */
.form :is(input, textarea):focus-visible{ outline:none; }
.form .check input:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* fotky: dvojfarebný prstenec (biela medzera + zelená), viditeľný na akejkoľvek fotke.
   --ta-drop = vlastný mäkký tieň prvku zo site.css, pridaný za prstenec (fokus nesmie fotku sploštiť) */
.tile, .moment{ --ta-drop:0 18px 40px -30px rgba(29,31,29,.35); }
.course__photo{ --ta-drop:var(--shadow-soft); }
.person__photo{ --ta-drop:0 14px 30px -24px rgba(29,31,29,.35); }
:is(.tile, .course__photo, .moment, .vcard):focus-visible,
.person:focus-visible .person__photo,
.lecturer:focus-visible .lecturer__photo{
  outline:none;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--green), var(--ta-drop, 0 0 0 0 transparent);
}
.person:focus-visible, .lecturer:focus-visible{ outline:none; }
.lecturer:focus-visible{ border-color:var(--green); }
:where(.motion) :is(.tile, .course__photo, .moment, .vcard):focus-visible,
:where(.motion) .person:focus-visible .person__photo,
:where(.motion) .lecturer:focus-visible .lecturer__photo{ animation:ta-ring2 .16s var(--ease) both; }

/* ---------- PRESKOČIŤ NA OBSAH ---------- */
.skip,
.skip:focus{
  left:16px; top:12px;
  display:inline-flex; align-items:center; min-height:40px;
  padding:.55rem 1.1rem; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink); font-size:.85rem; font-weight:600;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.22);
  transform:translateY(calc(-100% - 24px)); opacity:0;
}
.motion .skip{ transition:transform .24s var(--ease), opacity .24s var(--ease); }
.skip:focus, .skip:focus-visible{ transform:none; opacity:1; outline:2px solid var(--green); outline-offset:3px; animation:none; }

/* ---------- MALÉ CIELE: väčšia dotyková plocha bez zmeny vzhľadu (44 px) ---------- */
.citem__rm, .uitem .btn, .contact__list a, .stoma__contact a{ position:relative; }
.citem__rm::after, .uitem .btn::after, .contact__list a::after, .stoma__contact a::after{ content:""; position:absolute; }
.citem__rm::after{ inset:-13px -10px; }
.uitem .btn::after{ inset:-8px -4px; }
.contact__list a::after{ inset:-11px -6px; }
.stoma__contact a::after{ inset:-13px -8px; }
@media (hover:none){
  .btn{ position:relative; }
  .btn:not(.uitem .btn)::after{ content:""; position:absolute; inset:-5px 0; }
}

/* ---------- PÄTIČKA NA DOTYKU ---------- */
.footer__social a{ position:relative; }
.footer__social a::after{ content:""; position:absolute; inset:50% auto auto 50%; width:44px; height:44px; transform:translate(-50%, -50%); }
@media (max-width:760px){
  .footer__nav{ row-gap:0; }
  .footer__nav a{ display:inline-flex; align-items:center; min-height:44px; }
}

@media (prefers-reduced-motion: reduce){
  .skip{ transition:none; }
}