/* Hlavička v dvoch úrovniach a päta, spoločné pre sales.css aj site.css (_header.html, _footer.html).
   Samostatné triedy (gnav-, lnav-, gfoot-), aby nezáviseli od štýlov rámu. */
:root { --hdr: 52px; }

.gnav { position: sticky; top: 0; z-index: 41; background: rgb(11 11 13 / 96%); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); color: #f5f5f7; border-bottom: 1px solid rgb(255 255 255 / 6%); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.gnav-row { display: flex; align-items: center; gap: 24px; height: 52px; }
.gnav-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: #f5f5f7; text-decoration: none; white-space: nowrap; }
.gnav-brand .brand-mark { width: 24px; height: 24px; }
.gnav-pages { display: flex; gap: 22px; margin-left: 12px; }
.gnav-pages a { font-size: 14px; font-weight: 500; color: #a1a1aa; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.gnav-pages a:hover { color: #f5f5f7; }
.gnav-pages a[aria-current="page"] { color: #f5f5f7; border-bottom-color: #ffb020; }
.gnav-tools { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.gnav-lang { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; color: #a1a1aa; text-decoration: none; padding: 5px 9px; border: 1px solid #2e2e35; border-radius: 8px; }
.gnav-lang:hover { color: #f5f5f7; border-color: #6e6e78; }
.gnav-signin { font-size: 13px; color: #a1a1aa; text-decoration: none; white-space: nowrap; }
.gnav-signin:hover { color: #f5f5f7; }
.gnav-cta { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 999px; background: #ffb020; color: #0b0b0d; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.gnav-cta:hover { background: #ffc04d; }
.gnav-more { display: none; position: relative; }
.gnav-more summary { list-style: none; display: grid; place-items: center; width: 40px; height: 34px; border: 1px solid #2e2e35; border-radius: 10px; cursor: pointer; color: #f5f5f7; }
.gnav-more summary::-webkit-details-marker { display: none; }
.gnav-sheet { position: absolute; right: 0; top: 44px; min-width: 220px; display: grid; padding: 8px; border-radius: 16px; background: #16161a; border: 1px solid #2e2e35; box-shadow: 0 24px 48px -16px rgb(0 0 0 / 60%); }
.gnav-sheet a { padding: 11px 12px; border-radius: 10px; color: #f5f5f7; text-decoration: none; font-size: 15px; }
.gnav-sheet a:hover, .gnav-sheet a[aria-current="page"] { background: #26262c; }
.gnav a:focus-visible, .gnav summary:focus-visible, .lnav a:focus-visible { outline: 2px solid #ffb020; outline-offset: 2px; }

.lnav { position: sticky; top: 52px; z-index: 40; background: rgb(11 11 13 / 88%); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid rgb(255 255 255 / 8%); }
.lnav-row { display: flex; align-items: center; height: 44px; }
.lnav .chapters { display: flex; flex: 1; min-width: 0; justify-content: flex-start; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.lnav .chapters::-webkit-scrollbar { display: none; }
.lnav .chapters.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.lnav .chapters.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.lnav .chapters.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.lnav .chapters a { font-size: 13px; font-weight: 500; color: #a1a1aa; text-decoration: none; padding: 6px 12px; border-radius: 999px; white-space: nowrap; transition: color 160ms, background-color 160ms; }
.lnav .chapters a:hover { color: #f5f5f7; }
.lnav .chapters a.is-current { color: #0b0b0d; background: #f5f5f7; }
.lnav .progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--read, 0) * 100%); background: #ffb020; }

@media (max-width: 999px) {
  .gnav-pages, .gnav-signin { display: none; }
  .gnav-more { display: block; }
  .gnav-tools { gap: 10px; }
}
.gnav-sheet-cta { display: none; }
/* telefón: hlavné CTA ide do menu, v lište by vytlačilo menu z obrazovky */
@media (max-width: 599px) {
  .gnav-tools > .gnav-cta { display: none; }
  .gnav-sheet .gnav-sheet-cta { display: block; margin-top: 6px; background: #ffb020; color: #0b0b0d; font-weight: 600; text-align: center; }
  .gnav-sheet .gnav-sheet-cta:hover { background: #ffc04d; }
}

.gfoot { background: #0b0b0d; color: #6e6e78; font-size: 14px; }
.gfoot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding-block: 40px; }
.gfoot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.gfoot a { color: #a1a1aa; text-decoration: none; }
.gfoot a:hover, .gfoot a[aria-current] { color: #f5f5f7; }
.gfoot-langs { flex-basis: 100%; }

/* stránka s pásom kapitol: lišta webu odíde, pás ostane hore (miesto pre pripnuté kapitoly) */
body:has(.lnav) { --hdr: 44px; }
body:has(.lnav) .gnav { position: relative; }
body:has(.lnav) .lnav { top: 0; }
.lnav-row { gap: 12px; }
.lnav-home { display: inline-flex; flex: none; }
.lnav-home .brand-mark { width: 22px; height: 22px; }
.lnav-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.lnav-tools .gnav-cta { min-height: 30px; padding: 0 14px; font-size: 13px; }
.lnav-more { display: block; }
.lnav-more summary { width: 36px; height: 30px; }
.lnav-more .gnav-sheet { top: 38px; }
@media (max-width: 999px) { .lnav-tools .gnav-cta { display: none; } }
/* kým je lišta webu na obrazovke, pás ukazuje len kapitoly; bez JavaScriptu ostane všetko (is-docked chýba len pri .js) */
.lnav-home, .lnav-tools { transition: opacity 200ms, max-width 260ms, margin 260ms; }
.lnav-home { max-width: 22px; overflow: hidden; }
.lnav-tools { max-width: 360px; }
.js .lnav:not(.is-docked) .lnav-home { max-width: 0; opacity: 0; margin-right: -12px; visibility: hidden; }
.js .lnav:not(.is-docked) .lnav-tools { max-width: 0; opacity: 0; overflow: hidden; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .lnav-home, .lnav-tools { transition: none; } }

@media print { .gnav, .lnav, .gfoot { display: none !important; } }