/* ==========================================================================
   HABRINOL – UX polish vrstva (nacita se jako posledni, po tailwind.min.css)
   Obsah: nav hover, karty, readmore, footer, H2 akcent, worldmap, hero scrim,
   mobilni centrovani, stats grid, AJAX loading indikatory, fade-in animace.
   ========================================================================== */

/* --- 1. Hlavni navigace: animovane podtrzeni na hover (lici s aktivni polozkou) --- */
.habr-nav-link { position: relative; }
.habr-nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: #002d54;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}
.habr-nav-link:hover::after,
.habr-nav-link:focus-visible::after { transform: scaleX(1); }
.habr-nav-link.border-b-2 { border-bottom-width: 0 !important; }
.habr-nav-link.border-b-2::after { transform: scaleX(1); }

/* --- 2. Produktove karty: lift + vyraznejsi stin + akcent borderu --- */
.habr-product-card {
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.habr-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 45, 84, .12);
  border-color: #a3c9ff;
}
/* tlacitko vzdy zarovnane na spodni hranu karty */
.habr-product-card > .wp-block-buttons:last-child,
.habr-product-card > .wp-block-group:last-child { margin-top: auto; }

/* --- 3. "Cist" odkazy: vetsi tap area (44px) bez posunu layoutu + sipka --- */
.habr-readmore {
  padding-top: .75rem;
  padding-bottom: .75rem;
  margin-bottom: -.75rem;
  min-height: 44px;
}
.habr-readmore svg { transition: transform .2s ease; }
.habr-readmore:hover svg { transform: translateX(3px); }

/* --- 4. Footer: viditelne hovery (podtrzeni jen u cistych textovych odkazu),
       schovat mrtvy socialni sloupec (href="#") a zbytek gridu vycentrovat --- */
footer a { transition: color .15s ease; }
footer a:hover { color: #002d54 !important; text-decoration: underline; text-underline-offset: 3px; }
footer a:has(svg):hover,
footer a:has(img):hover,
footer a:has(.material-symbols-outlined):hover { text-decoration: none; }
footer a[href="#"] { display: none !important; }
/* cely sloupec, jehoz jediny odkaz je "#" (Sledujte nas bez URL) */
footer .grid > div:has(a[href="#"]):not(:has(a[href]:not([href="#"]))) { display: none !important; }
/* zbyle 2 linkove sloupce vycentrovat do prostoru po skrytem sloupci */
@media (min-width: 1024px) {
  /* dokud je v gridu mrtvy "#" odkaz (skryty sloupec Sledujte nas), jed na 3 sloupce */
  footer .grid:has(a[href="#"]) {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  footer .grid > div:nth-child(2),
  footer .grid > div:nth-child(3) { justify-self: center; }
}

/* --- 5. Cerveny akcent pod vsemi H2 nadpisy sekci (sjednoceni s Portfolio) --- */
main h2.wp-block-heading::after {
  content: '';
  display: block;
  width: 6rem;
  height: 4px;
  background: #b6171e;
  border-radius: 9999px;
  margin-top: .75rem;
}
main h2.wp-block-heading + .habr-divider,
main h2.wp-block-heading + .h-1,
main .habr-divider + h2.wp-block-heading::after { display: none; }
main h2.wp-block-heading.has-text-align-center::after,
main .text-center h2.wp-block-heading::after {
  margin-left: auto;
  margin-right: auto;
}

/* --- 6. Worldmap sekce: zviditelnit mapu --- */
.habr-worldmap img.wp-block-cover__image-background {
  filter: brightness(1.25) contrast(1.15);
  opacity: .9 !important;
}

/* --- 7. Hero: staticky poster (webp) dokud se nenacte video / na mobilu misto videa --- */
.habr-hero {
  background-image: url('/wp-content/uploads/2026/05/homepage-hero-bg.webp');
  background-size: cover;
  background-position: center;
}

/* --- 7a2. Hero: obsah svisle na stred celeho hero (obsahovy blok ma pevny pt-[180px],
       ktery text srazel dolu — cover uz centruje sam, padding je zbytecny) --- */
.habr-hero [class*="pt-[180px]"] { padding-top: 0 !important; }

/* --- 7b. Hero: gradient scrim pro citelnost bileho textu na svetlych zaberech videa --- */
.habr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 22, 42, .68) 0%, rgba(0, 22, 42, .38) 55%, rgba(0, 22, 42, .15) 100%);
}
.habr-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* --- 8. Mobil: centrovani hero + H2 + stats grid 2x2 --- */
@media (max-width: 767px) {
  .habr-hero .wp-block-cover__inner-container { text-align: center; }
  .habr-hero .wp-block-buttons { justify-content: center; width: 100%; }
  .habr-hero .wp-block-button { width: 100%; }
  .habr-hero .wp-block-button__link { width: 100%; }

  /* vsechna tlacitka v obsahu na plnou sirku */
  main .wp-block-buttons { width: 100%; }
  main .wp-block-button { width: 100%; }
  main .wp-block-button__link { width: 100%; text-align: center; }
  main form button[type="submit"],
  main form input[type="submit"],
  .wpforms-form button[type="submit"] { width: 100%; }

  /* i shortcodova/rucni tlacitka (Vice informaci, CTA...) na plnou sirku */
  main a.inline-flex.items-center.justify-center { width: 100%; }
  .habr-hero::before {
    background: linear-gradient(180deg, rgba(0, 22, 42, .55) 0%, rgba(0, 22, 42, .45) 100%);
  }

  main h2.wp-block-heading { text-align: center; }
  main h2.wp-block-heading::after { margin-left: auto; margin-right: auto; }
}

/* mobilni header: vlajka tesne vedle hamburgeru, bez border-bottom,
   main padding presne na vysku headeru (72px) = zadna mezera nad sliderem */
@media (max-width: 1023px) {
  header div:has(> .lang-switcher) { gap: .375rem; }
  header.site-header { border-bottom: 0; }
  main.site-main { padding-top: 72px; }
}

/* mobil: hero nizsi a text posunuty vys */
@media (max-width: 767px) {
  .habr-hero { min-height: 540px !important; }
  .habr-hero .wp-block-cover__inner-container { margin-top: -2.5rem; }
}

/* stats pas (tmavy pruh s 25+/30 let/ISO/15+): na mobilu 2x2 misto 1 sloupce */
@media (max-width: 781px) {
  .wp-block-group.bg-\[\#002d54\] .wp-block-columns.text-center {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem !important;
  }
  .wp-block-group.bg-\[\#002d54\] .wp-block-columns.text-center > .wp-block-column {
    flex-basis: auto !important;
    margin: 0 !important;
  }
}

/* --- 9. AJAX / navigace: top progress bar --- */
#habr-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #b6171e, #da3433);
  box-shadow: 0 0 8px rgba(182, 23, 30, .55);
  z-index: 9999;
  opacity: 0;
  transition: width .25s ease, opacity .3s ease;
  pointer-events: none;
}
#habr-progress.active { opacity: 1; }

/* --- 10. Formulare: spinner v odeslanem tlacitku --- */
.habr-btn-loading {
  position: relative;
  pointer-events: none;
  opacity: .75;
}
.habr-btn-loading::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .55em;
  vertical-align: -0.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: habr-spin .7s linear infinite;
}
@keyframes habr-spin { to { transform: rotate(360deg); } }

/* --- 11. Scroll fade-in (tridu prida polish.js, bez JS je vse videt) --- */
.habr-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.habr-fade.habr-in {
  opacity: 1;
  transform: none;
}

/* --- 13. Jednotne vizitky (produkty / sluzby / aplikace / kariera / homepage) ---
   Vzor = benefit karty na Kariere: padding 2rem, radius 32px, border #c2c6d1,
   ikona v kruhu na stredu, title 18px na stredu. */
main .wp-block-group.p-6.rounded-\[32px\],
main .wp-block-group.p-10.rounded-\[15px\],
main .wp-block-column.p-8.rounded-\[32px\] {
  padding: 2rem;
  border-radius: 32px;
  border-color: #c2c6d1;
  transition: box-shadow .25s ease, transform .25s ease;
}
main .wp-block-group.p-6.rounded-\[32px\]:hover,
main .wp-block-group.p-10.rounded-\[15px\]:hover,
main .wp-block-column.p-8.rounded-\[32px\]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 45, 84, .12);
}
.habr-product-card { padding: 2rem; border-radius: 32px; }

/* ikona v kruhu na stred */
main .wp-block-group.p-6.rounded-\[32px\] [class*="rounded-full"][class*="bg-"],
main .wp-block-group.p-10.rounded-\[15px\] [class*="rounded-full"][class*="bg-"],
.habr-product-card [class*="rounded-full"][class*="bg-"],
.habr-product-card > img:first-child,
/* ikony vlozene jako obycejny <img> (napr. Smesi na zakazku) */
main .wp-block-group.p-6.rounded-\[32px\] img.object-contain,
main .wp-block-group.p-10.rounded-\[15px\] img.object-contain,
.habr-product-card img.object-contain {
  margin-left: auto;
  margin-right: auto;
}

/* tymove vizitky: pozice pod jmenem na stred (jmeno uz centruje pravidlo nize) */
main .wp-block-column.p-8.rounded-\[32px\]:has(figure) h3 + p { text-align: center; }

/* title vizitky: jednotna velikost + na stred */
main .wp-block-group.p-6.rounded-\[32px\] h3,
main .wp-block-group.p-10.rounded-\[15px\] h3,
main .wp-block-column.p-8.rounded-\[32px\] h3,
.habr-product-card h3 {
  font-size: 1.125rem;
  line-height: 1.4;
  text-align: center;
}

/* --- 14. Formulare: vic vzduchu, zadny zbytecny spodni padding --- */
main form label { margin-bottom: .5rem; }
main form input[type="text"],
main form input[type="email"],
main form input[type="tel"],
main form textarea {
  padding: .8rem 1.1rem;
}
main form .flex.flex-col.gap-6 { gap: 1.75rem; }
main form .grid.gap-6 { gap: 1.75rem; }
main form { margin-bottom: 0; }
main form > :last-child { margin-bottom: 0; }
main .wpforms-container { margin-bottom: 0 !important; }
main div[class*="p-10"]:has(> form) { padding-bottom: 2rem; }

/* --- 15. Footer na mobilu: vse na stred --- */
@media (max-width: 767px) {
  footer .grid > div { text-align: center; }
  footer .grid img { margin-left: auto; margin-right: auto; }
  footer .grid .flex.flex-col { align-items: center; }
  footer .grid ul { display: flex; flex-direction: column; align-items: center; }
}

/* --- 16. Jednotny card-grid: flex-wrap, neuplny posledni radek na stred ---
   (sluzby 4, aplikace 14 -> 4+4+4+2 s centrovanou dvojici) */
main .wp-block-group.grid.lg\:grid-cols-4.gap-6 {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
main .wp-block-group.grid.lg\:grid-cols-4.gap-6 > *,
main .wp-block-group.grid.lg\:grid-cols-4.gap-6 > .wp-block-group__inner-container > * {
  flex: 0 0 calc(25% - 1.125rem);
  min-width: 0;
  /* h-full (height:100%) by ve flexu vypnul stretch -> karty v radku by mely ruznou vysku */
  height: auto !important;
  align-self: stretch;
}
@media (max-width: 1023px) {
  main .wp-block-group.grid.lg\:grid-cols-4.gap-6 > *,
  main .wp-block-group.grid.lg\:grid-cols-4.gap-6 > .wp-block-group__inner-container > * { flex-basis: calc(50% - .75rem); }
}
@media (max-width: 639px) {
  main .wp-block-group.grid.lg\:grid-cols-4.gap-6 > *,
  main .wp-block-group.grid.lg\:grid-cols-4.gap-6 > .wp-block-group__inner-container > * { flex-basis: 100%; }
}

/* kariera benefity: misto 5 namackanych v radku wrap 3+2 na stred */
main .wp-block-columns:has(> .wp-block-column.p-8.rounded-\[32px\]) {
  flex-wrap: wrap !important;
  justify-content: center;
  gap: 1.5rem !important;
}
main .wp-block-columns:has(> .wp-block-column.p-8.rounded-\[32px\]) > .wp-block-column {
  flex: 0 0 calc(33.333% - 1rem) !important;
}
/* radek s PRESNE 4 kartami (tym na kontaktu): 4 vedle sebe, ne 3+1 */
main .wp-block-columns:has(> .wp-block-column.p-8.rounded-\[32px\]:nth-child(4)):not(:has(> :nth-child(5))) > .wp-block-column {
  flex: 0 0 calc(25% - 1.125rem) !important;
}
@media (max-width: 1023px) {
  main .wp-block-columns:has(> .wp-block-column.p-8.rounded-\[32px\]) > .wp-block-column,
  main .wp-block-columns:has(> .wp-block-column.p-8.rounded-\[32px\]:nth-child(4)):not(:has(> :nth-child(5))) > .wp-block-column { flex-basis: calc(50% - .75rem) !important; }
}
@media (max-width: 639px) {
  main .wp-block-columns:has(> .wp-block-column.p-8.rounded-\[32px\]) > .wp-block-column,
  main .wp-block-columns:has(> .wp-block-column.p-8.rounded-\[32px\]:nth-child(4)):not(:has(> :nth-child(5))) > .wp-block-column { flex-basis: 100% !important; }
}

/* --- 17. Sipka nahoru (vklada polish.js) --- */
#habr-totop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 0;
  background: #002d54;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 45, 84, .35);
  z-index: 90;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
#habr-totop.visible { opacity: 1; transform: none; pointer-events: auto; }
#habr-totop:hover { background: #b6171e; }

/* --- 18. Complianz: jemny blur obsahu, dokud neni banner potvrzen --- */
body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed)) .site-header,
body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed)) .site-main,
body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed)) footer {
  filter: blur(4px);
  transition: filter .35s ease;
}
.site-header, .site-main, footer { transition: filter .35s ease; }

/* --- 19. Formulare: e-mail a telefon kazdy na vlastni radek (vsude) --- */
main form .grid.sm\:grid-cols-2 { grid-template-columns: 1fr !important; }
main .wpforms-form .wpforms-one-half,
main .wpforms-form .wpforms-one-third,
main .wpforms-form .wpforms-two-thirds {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
}

/* --- 20a. Kontakt: ICO / DIC jako dva 50% sloupce, obsah na stred (vsechna rozliseni) --- */
body.page-id-11 main .flex.gap-8:has(a[href*="justice"]) > div,
body.page-id-120 main .flex.gap-8:has(a[href*="justice"]) > div,
body.page-id-121 main .flex.gap-8:has(a[href*="justice"]) > div {
  flex: 1 1 0;
  text-align: center;
}

/* --- 20. Kontakt (CS 11 / EN 120 / DE 121) na mobilu: centrovat kontakty --- */
@media (max-width: 767px) {
  body.page-id-11 main a[href^="tel:"],
  body.page-id-11 main a[href^="mailto:"],
  body.page-id-120 main a[href^="tel:"],
  body.page-id-120 main a[href^="mailto:"],
  body.page-id-121 main a[href^="tel:"],
  body.page-id-121 main a[href^="mailto:"] {
    justify-content: center;
    text-align: center;
    width: 100%;
  }
  /* tymove karty: jmeno, role i kontakty na stred */
  body.page-id-11 main div:has(> figure),
  body.page-id-120 main div:has(> figure),
  body.page-id-121 main div:has(> figure) { text-align: center; }
  body.page-id-11 main div:has(> figure) .flex.flex-col,
  body.page-id-120 main div:has(> figure) .flex.flex-col,
  body.page-id-121 main div:has(> figure) .flex.flex-col { align-items: center; }
  /* ICO / DIC dvojice na stred */
  body.page-id-11 main .flex.gap-8:has(a[href*="justice"]),
  body.page-id-120 main .flex.gap-8:has(a[href*="justice"]),
  body.page-id-121 main .flex.gap-8:has(a[href*="justice"]) {
    justify-content: center;
    text-align: center;
  }
  /* sidlo blok: adresa, spisova znacka, datovka na stred */
  body.page-id-11 main div:has(> .flex.gap-8 a[href*="justice"]),
  body.page-id-120 main div:has(> .flex.gap-8 a[href*="justice"]),
  body.page-id-121 main div:has(> .flex.gap-8 a[href*="justice"]) { text-align: center; }
  body.page-id-11 main div:has(> .flex.gap-8 a[href*="justice"]) .flex:not(.gap-8),
  body.page-id-120 main div:has(> .flex.gap-8 a[href*="justice"]) .flex:not(.gap-8),
  body.page-id-121 main div:has(> .flex.gap-8 a[href*="justice"]) .flex:not(.gap-8) { justify-content: center; }
}

/* --- 21. Mobilni menu: kompaktnejsi polozky, oddelovace, slide animace --- */
.habr-mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
  overflow: hidden;
  padding: 0 !important;
  border-top-width: 0;
}
.habr-mobile-menu.open {
  grid-template-rows: 1fr;
  border-top-width: 1px;
}
.habr-mobile-menu > div {
  min-height: 0;
  overflow: hidden;
  padding: 0 2rem; /* zadny svisly padding v zavrenem stavu = zadny bily pruh pod headerem */
  transition: padding .3s ease;
}
.habr-mobile-menu.open > div {
  padding: .25rem 2rem .75rem;
}
@media (min-width: 1024px) {
  .habr-mobile-menu { display: none; }
}
.habr-mobile-menu .flex.flex-col { gap: 0; }
.habr-mobile-menu__list { display: block; }
.habr-mobile-menu__item + .habr-mobile-menu__item { border-top: 1px solid #edf0f3; }
.habr-mobile-menu__link {
  display: block;
  padding: .7rem 0;
}
.habr-mobile-menu__link--active { border-bottom: 0 !important; }

/* --- 22. Formulare: nevalidni / chybejici povinna pole vyrazne --- */
main .wpforms-form input.wpforms-error,
main .wpforms-form textarea.wpforms-error,
main .wpforms-form select.wpforms-error,
main form input:user-invalid,
main form textarea:user-invalid {
  border: 1px solid #b6171e !important;
  background-color: #fdf2f2 !important;
}
main .wpforms-form input.wpforms-error:focus,
main form input:user-invalid:focus,
main form textarea:user-invalid:focus {
  outline-color: #b6171e;
}

/* --- 23. Jazykovy doporucovaci bar (geo-IP, vklada polish.js) --- */
#habr-langbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 0 3rem 0 1rem;
  background: #002d54;
  color: #fff;
  font-size: .875rem;
  line-height: 1.2;
}
#habr-langbar a {
  color: #ffd9d6;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
#habr-langbar a:hover { color: #fff; }
#habr-langbar .habr-langbar-close {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: #a3c9ff;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 9999px;
}
#habr-langbar .habr-langbar-close:hover { color: #fff; background: rgba(255,255,255,.1); }
body.habr-langbar-on .site-header { top: 44px; }
body.habr-langbar-on main.site-main { padding-top: calc(5rem + 44px); }
@media (max-width: 1023px) {
  body.habr-langbar-on main.site-main { padding-top: calc(72px + 44px); }
}
@media (max-width: 480px) {
  #habr-langbar { font-size: .8rem; gap: .5rem; }
  #habr-langbar span.habr-langbar-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* --- 24. Kontrast (WCAG AA): svetle sede labely ztmavit o odstin --- */
.text-slate-400 { color: #475569 !important; }   /* z #94a3b8; slate-600 projde AA i na sedych podkladech */

/* --- 25. Právní stránky: samostatný obsah potřebuje vlastní kontejner --- */
/* Prohlášení o přístupnosti nemá v editoru obalový Gutenberg blok. Bez něj
   začínal text na hraně okna a pod pevným záhlavím. */
body.page-id-848 .site-page > .entry-content {
  box-sizing: border-box;
  max-width: 64rem;
  margin: 0 auto;
  padding: 5rem 2rem 6rem;
}
body.page-id-848 .site-page > .entry-content > :first-child { margin-top: 0; }
body.page-id-848 .site-page > .entry-content > :last-child { margin-bottom: 0; }
body.page-id-848 .site-page > .entry-content > * + * { margin-top: 1.5rem; }
body.page-id-848 .site-page > .entry-content > h2 { margin-top: 3rem; }

/* Cookie dialog must retain a visible gutter on phones instead of touching
   both viewport edges. */
@media (max-width: 768px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
  }

  body.page-id-848 .site-page > .entry-content {
    padding: 3rem 1.25rem 4rem;
  }
}
/* cervena hvezdicka povinnych poli WPForms: #b6171e na svetlem = 4.06, ztmavit */
.wpforms-form .wpforms-required-label { color: #9f1219 !important; }
.wpforms-error-noscript { color: #9f1219 !important; }
/* worldmap: bily text na fotce mapy; tmavy bg fallback = korektni kontrast i bez obrazku */
.habr-worldmap { background-color: #1e3a52 !important; }
.habr-worldmap h2, .habr-worldmap p { color: #fff !important; }
/* cervene letopocty na casove ose sedi na NAVY pozadi -> svetla cervena kvuli AA */
main .habr-timeline span[style*="color:#b6171e"],
main .habr-timeline span[class*="b6171e"],
main span[style*="font-size:1.25rem"][style*="color:#b6171e"] { color: #ffb3ac !important; }
/* prilis svetle mikro-labely (ICO/DIC na kontaktu): #c2c6d1 -> citelna seda */
main p[class*="c2c6d1"] { color: #64748b !important; }
/* slate-500 na sedych sekcich (#eceef0/#f2f4f6) nedava AA -> slate-600 */
.bg-\[\#eceef0\] .text-slate-500,
.bg-\[\#f2f4f6\] .text-slate-500 { color: #475569; }
footer .text-slate-500 { color: #475569; }        /* z #64748b */

/* --- 25. Skip-link pro klavesnici / screen readery --- */
.habr-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #002d54;
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 12px 0;
  font-weight: 600;
  text-decoration: none;
}
.habr-skip-link:focus {
  left: 0;
}
#main-content:focus { outline: none; }

/* --- 12. Pristupnost + respekt k omezeni pohybu --- */
a:focus-visible, button:focus-visible {
  outline: 2px solid #b6171e;
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .habr-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
  .habr-product-card, .habr-product-card:hover { transform: none; }
  .habr-nav-link::after { transition: none; }
  #habr-progress { transition: none; }
  html { scroll-behavior: auto !important; }
}