/* KOMPONENT tlacidla — .f-btn, .f-btn-ghost, .f-link (krok 4 knižnice, 30. 10. 2026).
   Vybraté z: style-a5de0145ecc1.css, userStyles-b7accc8e732d.css. Hodnoty z tokeny.css.
   Vytvoril tools/komponent_vyber.py — pravidlá v pôvodnom poradí. */

/* --- z style-a5de0145ecc1.css --- */
.f-btn { height: 52px; display: inline-flex; font-size: 15px; column-gap: 14px; align-items: center; font-weight: 500; padding: 0px 22px; }
.f-btn-ghost { height: 40px; display: inline-flex; font-size: 14px; box-shadow: var(--c-line2) 0px 0px 0px 1px inset; column-gap: 10px; align-items: center; padding: 0px 16px; }
.f-link { display: inline-flex; align-self: flex-start; }
.ph-menu .f-btn { color: var(--f-ink); width: 100%; box-sizing: border-box; background: var(--f-paper); justify-content: space-between; }

/* --- z userStyles-b7accc8e732d.css --- */
html body .f-link { font-family: var(--font-f-font-sans); font-size: var(--ts-ui); font-weight: 500; line-height: var(--lh-text); letter-spacing: 0; font-style: normal; }
html body .f-btn { --b-bg: var(--c-fg); --b-fg: var(--c-on); }
html body .f-btn { background: linear-gradient(90deg, var(--b-fg) 50%, var(--b-bg) 50%) 100% 0 / 201% 100% no-repeat; color: var(--b-fg); box-shadow: inset 0 0 0 1px var(--b-bg); transition: background-position var(--t-zmena) var(--f-ease), color var(--t-rychlo) linear 180ms; }
html body :is(.f-btn, .lpc-cta .f-btn):is(:hover, :focus-visible) { background-position: 0 0; color: var(--b-bg); }
html body :is(.f-btn-ghost, .ph-burger) { --g-fg: var(--c-fg); --g-on: var(--c-on); }
html body :is(.f-btn-ghost, .ph-burger) { background: linear-gradient(90deg, var(--g-fg) 50%, transparent 50%) 100% 0 / 201% 100% no-repeat; transition: background-position var(--t-zmena) var(--f-ease), color var(--t-rychlo) linear 180ms, box-shadow var(--t-rychlo) var(--f-ease); /* text stmavne až pod bielou výplňou */ }
html body :is(.f-btn, .f-btn-ghost, .ph-burger, .f-link):hover { opacity: 1; }
html body :is(.f-btn-ghost, .ph-burger):is(:hover, :focus-visible) { background-position: 0 0; color: var(--g-on); box-shadow: inset 0 0 0 1px var(--g-fg); }
html body .f-link { border-bottom: 0; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
html body .f-link:is(:hover, :focus-visible) { animation: ph-link-line var(--t-nabeh) var(--f-ease); }
html body :is(.f-btn, .f-btn-ghost, .f-link) .ph-ico { transition: transform var(--t-zmena) var(--f-ease); }
html body :is(.f-btn, .f-btn-ghost, .f-link):is(:hover, :focus-visible) .ph-ico--right { transform: translateX(4px); }
html body :is(.f-btn, .f-btn-ghost, .f-link):is(:hover, :focus-visible) .ph-ico--left { transform: translateX(-4px); }
html body :is(.f-btn, .f-btn-ghost, .f-link):is(:hover, :focus-visible) .ph-ico--down { transform: translateY(3px); }
html body :is(.f-btn, .f-btn-ghost, .f-link):is(:hover, :focus-visible) .ph-ico--up-right { transform: translate(3px, -3px); }
html body :is(.f-btn, .f-btn-ghost, .ph-burger, .f-link):focus-visible { outline: 2px solid var(--f-signal-max); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html body :is(.f-btn, .f-btn-ghost, .ph-burger, .f-link, .f-btn .ph-ico, .f-btn-ghost .ph-ico, .f-link .ph-ico) { transition: none; animation: none; } }
html:root body .f-btn, html:root body .f-btn-ghost { line-height: var(--lh-text); }

/* --- IKONKY Z ATÓMOV (1. 11. 2026, krok 9 — z userStyles, bez zmeny) ---
   Skript _instatic/js/ph-icons.js obalí textové šípky ← → ↑ ↓ ↗ a samostatné „@“ do .ph-ico (v tlačidlách, odkazoch,
   menu, kartách aj v texte). Tvar = maska zo SVG v uploads/icons/, farba = currentColor, veľkosť podľa písma okolo (em).
   .ph-ico--up a .ph-ico-wrap dnes na webe nie sú, ale skript ich vytvára (šípka ↑, obal) — preto ostávajú. */
.ph-ico {
  display: inline-block; vertical-align: -0.02em; height: 0.62em; flex-shrink: 0;
  background: currentColor; overflow: hidden; text-indent: 200%; white-space: nowrap;
  -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain;
}
.ph-ico { align-self: center; }   /* vo flex odkazoch (.f-link) by inak sedela hore */
.ph-ico.is-after { margin-left: 0.3em; }
.ph-ico.is-before { margin-right: 0.3em; }
.ph-ico--right    { --ico: url(../../../uploads/icons/arrow-right.svg);    aspect-ratio: 6 / 5; }
.ph-ico--left     { --ico: url(../../../uploads/icons/arrow-left.svg);     aspect-ratio: 6 / 5; }
.ph-ico--down     { --ico: url(../../../uploads/icons/arrow-down.svg);     aspect-ratio: 5 / 6; height: 0.72em; }
.ph-ico--up       { --ico: url(../../../uploads/icons/arrow-up.svg);       aspect-ratio: 5 / 6; height: 0.72em; }
.ph-ico--up-right { --ico: url(../../../uploads/icons/arrow-up-right.svg); aspect-ratio: 1 / 1; }
.ph-ico--at       { --ico: url(../../../uploads/icons/at.svg);             aspect-ratio: 1 / 1; height: 0.72em; }   /* samostatné „@“ (E-mail) */
.ph-ico-wrap { display: inline; }