/* Datahost nápověda – styly převzaté z datahost.cz (stejné proměnné, navigace, patička) + prvky nápovědy */
@font-face {
  font-family: "Datahost";
  src: url("../fonts/Datahost.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --font: "Datahost", "Segoe UI", system-ui, sans-serif;
  --color-primary: #355bfc;
  --color-primary-text: #355bfc;
  --color-white: #fff;
  --color-light: #fafbfe;
  --color-0: #fff;
  --color-50: #f4f7ff;
  --color-100: #dae3ff;
  --color-200: #bdcfff;
  --color-600: #1f39f1;
  --color-700: #1725de;
  --color-a-hover: #1f39f1;
  --color-text: #27272a;
  --color-text-secondary: #5a6a85;
  --color-black: #171717;
  --color-error: #cf6679;
  --color-yelow: #ffbb0e;
  --color-green: #08b23d;
  --icon-fill: var(--color-text);
  --icon-fill-hover: var(--color-text);
  --border-color: #e9f0f7;
  --color-light-grey: #dfe5ef;
  --input-bg-color: #fff;
  --input-bg-color-focus: #fff;
  --input-border: 1px solid var(--color-light-grey);
  --input-border-hover: 1px solid var(--color-primary);
  --drop-shadow-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
  --border-radius: 1.5rem;
  --border-radius-input: 0.5rem;
  --border-radius-max: 100rem;
  --container-max-width: 1200px;
  --bold: 700;
  --semibold: 600;
  --medium: 500;
  --big-font-size: 1.125rem;
  --small-font-size: 0.8rem;
  --h1-font-size: 2rem;
  --h2-font-size: 1.5rem;
  --h3-font-size: 1.25rem;
  --h4-font-size: 1.125rem;
  --box-padding: 2.5rem 3rem;
  --code-bg: #f2f6fa;
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
  --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);
}

[data-theme="dark"] {
  --color-primary: #355bfc;
  --color-primary-text: #5d87ff;
  --color-a-hover: #90b0ff;
  --color-light: var(--color-0);
  --color-0: #26303d;
  --color-50: #202936;
  --color-100: #1e242e;
  --color-200: #13161a;
  --color-text: #f0f0f0;
  --color-text-secondary: #a9b4c6;
  --border-color: #3c4756;
  --color-light-grey: #3c4756;
  --input-bg-color: #2a3442;
  --input-bg-color-focus: #2e394b;
  --code-bg: #1e242e;
  --drop-shadow-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
  color-scheme: dark;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

body {
  background-color: var(--color-50);
  color: var(--color-text);
  font-family: var(--font);
  font-feature-settings: "ss02" 1, "ss03" 1;
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4 { letter-spacing: -0.025em; line-height: 1.25; font-weight: var(--semibold); }
h1 { font-size: var(--h1-font-size); }
h2 { font-size: var(--h2-font-size); }
h3 { font-size: var(--h3-font-size); }
h4 { font-size: var(--h4-font-size); }
p { line-height: 1.5; }
a { color: var(--color-primary-text); cursor: pointer; text-decoration: none; outline: 2px solid transparent; outline-offset: 2px; }
a:hover { color: var(--color-a-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
img, svg { max-width: 100%; height: auto; }
img { display: inline-block; }
button {
  width: fit-content; color: var(--color-white); background-color: var(--color-primary); padding: 1.2rem 2rem; border: none;
  border-radius: var(--border-radius-max); font-weight: var(--semibold); cursor: pointer; font-family: var(--font);
  font-feature-settings: "ss02" 1, "ss03" 1; font-size: 1rem; transition: background-color 0.1s;
}
button:active { background-color: var(--color-700); }
button:hover { background-color: var(--color-600); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 2000; background: var(--color-primary); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--border-radius-max); font-weight: 600; }
.skip-link:focus { top: 1rem; color: #fff; }

.container { max-width: var(--container-max-width); margin: 0 auto; width: 100%; }
.icon { display: flex; width: 2.5rem; height: 2.5rem; padding: 0.5rem; background-color: var(--color-100); border-radius: 555rem; justify-content: center; align-items: center; flex-shrink: 0; }
.icon-button { display: flex; width: 2.5rem; height: 2.5rem; padding: 0.5rem; background-color: var(--color-100); border-radius: 555rem; justify-content: center; align-items: center; flex-shrink: 0; }
.icon-button:hover { opacity: 0.8; background-color: var(--color-100); }
.icon-svg { width: 1.5rem; height: 1.5rem; color: var(--color-text); }
.icon-big { display: flex; width: 4.5rem; height: 4.5rem; padding: 0.5rem; background-color: var(--color-100); border-radius: 555rem; justify-content: center; align-items: center; flex-shrink: 0; margin: 0 auto; }
.icon-big .icon-svg { width: 2rem; height: 2rem; color: var(--color-text); }
.icon-small { display: flex; width: 2.5rem; height: 2.5rem; padding: 0.5rem; background-color: var(--color-100); border-radius: 555rem; justify-content: center; align-items: center; flex-shrink: 0; }
.icon-small-svg { width: 1.5rem; height: 1.5rem; color: var(--color-text); }
[data-theme="dark"] .icon-big, [data-theme="dark"] .icon-small, [data-theme="dark"] .icon-button { background-color: var(--color-50); }

.button {
  display: inline-flex; width: fit-content; text-decoration: none; background-color: var(--color-primary); color: var(--color-white);
  padding: 1.2rem 2rem; border-radius: 100rem; font-weight: 600; flex-wrap: nowrap; flex-shrink: 0; letter-spacing: 0.25px;
  align-items: center; transition: background-color 0.1s; text-align: center; border: 0; cursor: pointer; font-family: var(--font); font-size: 1rem;
}
.button:hover { background-color: var(--color-600); color: var(--color-white); }
.button-secondary {
  display: inline-flex; width: fit-content; text-decoration: none; background-color: var(--color-100); color: var(--color-text);
  padding: 1.2rem 2rem; border-radius: 100rem; font-weight: 600; align-items: center; transition: background-color 0.1s; text-align: center; border: 0; cursor: pointer; font-family: var(--font); font-size: 1rem;
}
.button-secondary:hover { background-color: var(--color-200); color: var(--color-text); }
[data-theme="dark"] .button-secondary { background-color: var(--color-50); }
[data-theme="dark"] .button-secondary:hover { background-color: var(--color-100); }

/* Bílé boxy („stin“ jako na starém webu) */
.stin, .box { background-color: var(--color-0); border-radius: var(--border-radius); filter: var(--drop-shadow-filter); }
.box { padding: var(--box-padding); }

/* NAVIGATION (datahost.cz) */
nav.main-nav { height: 3.5rem; display: flex; position: relative; justify-content: space-between; align-items: center; top: 0.5rem; z-index: 1000; left: 0; right: 0; gap: 0.5rem; margin: 0 auto; padding: 0 0.5rem; max-width: 1340px; width: 100%; }
nav.main-nav ul { list-style-type: none; padding: 0; margin: 0; }
nav.main-nav ul li { float: left; }
nav.main-nav ul li a { display: block; color: var(--color-text); text-align: center; padding: 17px 15px; height: 100%; }
nav.main-nav ul li a:hover { opacity: 1 !important; color: var(--color-text); }
nav.main-nav ul li a.is-active { color: var(--color-primary-text); }
.list-menu { display: flex; align-items: center; }
.list-menu:hover a { opacity: 0.7; }
.mobile-menu { display: none; }
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); z-index: 999; }
.switcher-menu { display: flex; align-items: center; gap: 0.5rem; }
nav.main-nav.sticky { position: sticky; }
.logo { width: 140px; height: auto; }
.logo-mono { --logo-mark: var(--color-text); }
.nav-left { display: flex; justify-content: space-between; align-items: center; font-weight: var(--medium); background-color: var(--color-0); filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.06)); border-radius: 100rem; padding: 0 2rem; width: 100%; height: 56px; flex-grow: 1; }
.nav-left a svg.logo { margin-bottom: -6px; }
.menu-button { display: flex; width: fit-content; height: 100%; text-decoration: none; background-color: var(--color-primary); color: var(--color-white); padding: 0 2rem; border-radius: 100rem; font-weight: 600; flex-wrap: nowrap; flex-shrink: 0; letter-spacing: 0.25px; align-items: center; transition: background-color 0.1s; }
.menu-button:hover { background-color: var(--color-600); color: var(--color-white); }
.switcher-menu button { background-color: transparent; padding: 4px 0 0 0; }
.switcher-menu button:hover { background-color: transparent; }

/* mobile menu icon */
.menu-icon { display: none; position: relative; width: 50px; height: 50px; cursor: pointer; }
.menu-icon .menu-icon__cheeckbox { display: block; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 2; -webkit-touch-callout: none; opacity: 0; margin: 0; }
.menu-icon div { margin: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 22px; height: 11px; }
.menu-icon span { position: absolute; display: block; width: 100%; height: 2px; background-color: var(--color-text); border-radius: 1px; transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965); }
.menu-icon span:first-of-type { top: 0; }
.menu-icon span:last-of-type { bottom: 0; }
.menu-icon .menu-icon__cheeckbox:checked + div span:first-of-type { transform: rotate(45deg); top: 4.2px; }
.menu-icon .menu-icon__cheeckbox:checked + div span:last-of-type { transform: rotate(-45deg); bottom: 5px; }

/* dark / light toggle */
.sun-and-moon { width: 20px; }
.sun-and-moon > :is(.moon, .sun, .sun-beams) { transform-origin: center; }
.sun-and-moon > :is(.moon, .sun) { fill: var(--icon-fill); }
.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) { fill: var(--icon-fill-hover); }
.sun-and-moon > .sun-beams { stroke: var(--icon-fill); stroke-width: 2px; }
[data-theme="dark"] .sun-and-moon > .sun { transform: scale(1.75); }
[data-theme="dark"] .sun-and-moon > .sun-beams { opacity: 0; }
[data-theme="dark"] .sun-and-moon > .moon > circle { transform: translateX(-7px); }
@media (prefers-reduced-motion: no-preference) {
  .sun-and-moon > .sun { transition: transform 0.5s var(--ease-elastic-3); }
  .sun-and-moon > .sun-beams { transition: transform 0.5s var(--ease-elastic-4), opacity 0.5s var(--ease-3); }
  .sun-and-moon .moon > circle { transition: transform 0.25s var(--ease-out-5); }
  @supports (cx: 1) { .sun-and-moon .moon > circle { transition: cx 0.25s var(--ease-out-5); } }
  [data-theme="dark"] .sun-and-moon > .sun { transition-timing-function: var(--ease-3); transition-duration: 0.25s; transform: scale(1.75); }
  [data-theme="dark"] .sun-and-moon > .sun-beams { transition-duration: 0.15s; transform: rotateZ(-25deg); }
  [data-theme="dark"] .sun-and-moon > .moon > circle { transition-duration: 0.5s; transition-delay: 0.25s; }
}

.preview-bar { background: var(--color-yelow); color: #171717; text-align: center; padding: 0.6rem 1rem; font-weight: 500; margin-top: 1rem; }
.preview-bar a { color: #171717; text-decoration: underline; }

/* HERO – nadpis + hledání (na všech stránkách) */
.help-hero { text-align: center; padding: 4rem 1rem 2.5rem; }
.hero-title { font-size: var(--h1-font-size); font-weight: var(--semibold); letter-spacing: -0.025em; line-height: 1.25; margin-bottom: 1.5rem; }
.page-home .help-hero { padding-top: 5rem; }

.search-form { position: relative; max-width: 640px; margin: 0 auto; }
.search-box { display: flex; align-items: center; background: var(--input-bg-color); border: var(--input-border); border-radius: var(--border-radius-max); padding: 0 0.5rem 0 1.25rem; min-height: 56px; transition: border-color 0.15s, box-shadow 0.15s; filter: var(--drop-shadow-filter); }
.search-box:focus-within { border: var(--input-border-hover); box-shadow: 0 0 0 4px rgba(53, 91, 252, 0.12); }
.search-icon { color: var(--color-text-secondary); flex-shrink: 0; }
.search-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 1.05rem; padding: 0.9rem 0.85rem; margin: 0; outline: 0; -webkit-appearance: none; appearance: none; }
.search-input:focus, .search-input:focus-visible { outline: none; box-shadow: none; }
.search-input::placeholder { color: var(--color-text-secondary); opacity: 0.8; }
.search-input::-webkit-search-decoration, .search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-submit { padding: 0.7rem 1.4rem; font-size: 0.95rem; flex-shrink: 0; }
.search-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); background: var(--color-0); border-radius: 1rem; list-style: none; text-align: left; overflow: hidden; z-index: 60; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); border: 1px solid var(--border-color); }
.search-suggest li a { display: block; padding: 0.75rem 1.25rem; color: var(--color-text); border-bottom: 1px solid var(--border-color); }
.search-suggest li:last-child a { border-bottom: 0; }
.search-suggest li a:hover, .search-suggest li a[aria-selected="true"], .search-suggest li.is-active a { background: var(--color-50); color: var(--color-primary-text); }
.search-suggest li a mark { background: none; color: var(--color-primary-text); font-weight: var(--semibold); }
.search-suggest .suggest-all { font-weight: 500; color: var(--color-primary-text); }

/* Dlaždice sekcí */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 0 0 5rem; }
.cat-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 2.5rem 2rem; color: var(--color-text); transition: transform 0.15s, filter 0.15s; }
.cat-card:hover { color: var(--color-text); transform: translateY(-3px); filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.08)); }
.cat-card h2 { font-size: 1.375rem; margin-top: 0.75rem; }
.cat-card p { color: var(--color-text); }
.cat-count { font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 0.25rem; }
.cat-grid-compact { padding: 2rem 0 0; }
.cat-grid-compact .cat-card { padding: 1.75rem 1.25rem; gap: 0.3rem; }
.cat-grid-compact .cat-card h2 { font-size: 1.1rem; margin-top: 0.4rem; }
.cat-grid-compact .icon-big { width: 3.5rem; height: 3.5rem; }
.cat-grid-compact .icon-big .icon-svg { width: 1.6rem; height: 1.6rem; }

/* Hlavička sekce */
.cat-head { display: flex; align-items: center; gap: 1.25rem; justify-content: flex-start; text-align: left; margin-bottom: 1.5rem; }
.cat-head .icon-big { margin: 0; }
.cat-title { font-size: 1.75rem; }
.cat-desc { color: var(--color-text-secondary); }

/* Drobečky */
.breadcrumbs { text-align: center; margin: 0 0 2rem; font-size: 0.95rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0; }
.breadcrumbs li { display: inline; }
.breadcrumbs li + li::before { content: "/"; margin: 0 0.5rem; color: var(--color-text-secondary); }
.breadcrumbs a { color: var(--color-text); }
.breadcrumbs a:hover { color: var(--color-primary-text); }
.breadcrumbs span { color: var(--color-text-secondary); }

/* Boxy se seznamy návodů */
.list-box { margin-bottom: 1.5rem; }
.list-box:last-child { margin-bottom: 5rem; }
.container > .list-box:last-of-type, .container > .cat-grid:last-child { margin-bottom: 5rem; }
.list-title { font-size: 1.5rem; margin-bottom: 0.75rem; }
.list-title a { color: var(--color-text); }
.list-title a:hover { color: var(--color-primary-text); }
.list-intro { color: var(--color-text-secondary); margin-bottom: 1rem; }
.kicker { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.5rem; }
.kicker a { color: inherit; }
.empty { color: var(--color-text-secondary); padding: 1rem 0; }

.article-list { list-style: none; }
.article-list li { position: relative; border-bottom: 1px solid var(--color-100); border-radius: 0; transition: background-color 0.1s; }
.article-list li:last-child { border-bottom: 0; }
.article-list li:hover { background-color: var(--color-50); border-radius: 10px; }
[data-theme="dark"] .article-list li { border-color: var(--border-color); }
.article-list li > a { display: block; padding: 0.85rem 1rem 0.85rem 45px; color: var(--color-text); font-weight: var(--medium); }
.article-list li > a::before { content: ""; position: absolute; left: 15px; top: 0.95rem; width: 20px; height: 20px; background-color: var(--color-text-secondary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84'%3E%3Cpath d='M68.576 27.778v38.194c0 2.533-1.006 4.962-2.797 6.752a9.55 9.55 0 0 1-6.752 2.797H24.305a9.55 9.55 0 0 1-6.751-2.797 9.55 9.55 0 0 1-2.797-6.752V17.361a9.55 9.55 0 0 1 2.797-6.752 9.55 9.55 0 0 1 6.751-2.797h24.306c.704.001 1.361.284 1.841.763l17.361 17.362c.48.479.763 1.136.763 1.841zm-22.569-14.757H24.305c-1.151 0-2.255.457-3.069 1.271-.814.814-1.271 1.918-1.271 3.069v48.611c0 1.151.457 2.255 1.271 3.069.814.814 1.918 1.271 3.069 1.271h34.723c1.151 0 2.255-.457 3.068-1.271.814-.814 1.272-1.918 1.272-3.069v-35.59H52.083c-1.612 0-3.157-.64-4.296-1.78-1.14-1.139-1.78-2.685-1.78-4.296V13.021zm13.678 12.153-8.47-8.47v7.602c0 .23.091.45.254.613.163.163.384.255.614.255h7.602z'/%3E%3Cpath d='M28.055 42.21a2.71 2.71 0 0 1 .047-5.416l27.176.237a2.71 2.71 0 0 1-.047 5.416l-27.176-.237zm0 10.558a2.71 2.71 0 0 1 .047-5.417l27.176.237a2.71 2.71 0 0 1-.047 5.417l-27.176-.237zm0 10.557a2.708 2.708 0 0 1 .047-5.416l27.176.237a2.71 2.71 0 0 1-.047 5.416l-27.176-.237z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84'%3E%3Cpath d='M68.576 27.778v38.194c0 2.533-1.006 4.962-2.797 6.752a9.55 9.55 0 0 1-6.752 2.797H24.305a9.55 9.55 0 0 1-6.751-2.797 9.55 9.55 0 0 1-2.797-6.752V17.361a9.55 9.55 0 0 1 2.797-6.752 9.55 9.55 0 0 1 6.751-2.797h24.306c.704.001 1.361.284 1.841.763l17.361 17.362c.48.479.763 1.136.763 1.841zm-22.569-14.757H24.305c-1.151 0-2.255.457-3.069 1.271-.814.814-1.271 1.918-1.271 3.069v48.611c0 1.151.457 2.255 1.271 3.069.814.814 1.918 1.271 3.069 1.271h34.723c1.151 0 2.255-.457 3.068-1.271.814-.814 1.272-1.918 1.272-3.069v-35.59H52.083c-1.612 0-3.157-.64-4.296-1.78-1.14-1.139-1.78-2.685-1.78-4.296V13.021zm13.678 12.153-8.47-8.47v7.602c0 .23.091.45.254.613.163.163.384.255.614.255h7.602z'/%3E%3Cpath d='M28.055 42.21a2.71 2.71 0 0 1 .047-5.416l27.176.237a2.71 2.71 0 0 1-.047 5.416l-27.176-.237zm0 10.558a2.71 2.71 0 0 1 .047-5.417l27.176.237a2.71 2.71 0 0 1-.047 5.417l-27.176-.237zm0 10.557a2.708 2.708 0 0 1 .047-5.416l27.176.237a2.71 2.71 0 0 1-.047 5.416l-27.176-.237z'/%3E%3C/svg%3E") center / contain no-repeat; }
.article-list li > a:hover { color: var(--color-primary-text); }
.article-list-excerpt li > a { padding-bottom: 0.25rem; font-size: 1.05rem; }
.article-list-excerpt li p { padding: 0 1rem 0.9rem 45px; color: var(--color-text-secondary); font-size: 0.95rem; }

.chips-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-color); }
.chips-label { font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 0.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: var(--border-radius-max); background: var(--color-50); color: var(--color-text); font-size: 0.9rem; font-weight: 500; border: 1px solid var(--border-color); }
.chip:hover { background: var(--color-100); color: var(--color-text); }
.chip span { color: var(--color-text-secondary); font-size: 0.8rem; }
[data-theme="dark"] .chip { background: var(--color-100); }
[data-theme="dark"] .chip:hover { background: var(--color-50); }

/* Stránkování */
.pagination { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-top: 1.5rem; }
.pagination a, .pagination span { padding: 0.5rem 0.9rem; border-radius: var(--border-radius-max); color: var(--color-text); }
.pagination a:hover { background: var(--color-50); }
.pagination .is-current { background: var(--color-primary); color: #fff; }
.pagination .is-disabled { opacity: 0.4; }

/* Článek */
.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; padding: 1.5rem; margin-bottom: 5rem; align-items: start; }
.article-main { min-width: 0; padding: 1.5rem 1.5rem 1rem; }
.article-single { padding: var(--box-padding); margin-bottom: 5rem; }
.article-head { margin-bottom: 1.5rem; }
.article-head h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.article-excerpt { color: var(--color-text-secondary); font-size: var(--big-font-size); }
.article-aside { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.aside-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.5rem; padding-left: 1rem; }
.related .article-list li > a { font-size: 0.95rem; padding: 0.7rem 0.75rem 0.7rem 42px; }
.related .article-list li > a::before { top: 0.8rem; width: 18px; height: 18px; }
.toc ol { list-style: none; }
.toc li a { display: block; padding: 0.4rem 1rem; color: var(--color-text); font-size: 0.95rem; border-left: 2px solid var(--border-color); line-height: 1.35; }
.toc li.toc-h3 a { padding-left: 1.9rem; font-size: 0.9rem; color: var(--color-text-secondary); }
.toc li a:hover, .toc li a.is-active { color: var(--color-primary-text); border-left-color: var(--color-primary); }
.toc-mobile { display: none; margin-bottom: 1.5rem; background: var(--color-50); border-radius: 1rem; padding: 0.75rem 1rem; }
.toc-mobile summary { cursor: pointer; font-weight: 600; }
.toc-mobile ol { margin-top: 0.5rem; }
[data-theme="dark"] .toc-mobile { background: var(--color-100); }

.article-footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-color); }
.article-meta { font-size: 0.9rem; color: var(--color-text-secondary); }
.feedback { margin-top: 1.25rem; background: var(--color-50); border-radius: 1rem; padding: 1.25rem 1.5rem; }
[data-theme="dark"] .feedback { background: var(--color-100); }
.feedback-q { font-weight: 600; margin-bottom: 0.75rem; }
.feedback-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.feedback-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.1rem; background: var(--color-0); color: var(--color-text); border: 1px solid var(--border-color); font-size: 0.95rem; }
.feedback-btn:hover { background: var(--color-100); color: var(--color-text); }
.feedback-btn.is-selected { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.feedback-form { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.feedback-form label { font-size: 0.9rem; }
.feedback-form textarea { width: 100%; border: var(--input-border); background: var(--input-bg-color); color: var(--color-text); border-radius: var(--border-radius-input); padding: 0.7rem 0.9rem; font: inherit; resize: vertical; }
.feedback-form textarea:focus { border: var(--input-border-hover); outline: 0; }
.feedback-form .button { padding: 0.75rem 1.5rem; font-size: 0.95rem; }
.feedback-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.feedback-thanks { font-weight: 500; color: var(--color-green); }

/* Obsah návodu (prose) */
.prose { font-size: 1rem; line-height: 1.65; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.25rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.75rem; }
.prose h4 { font-size: 1.05rem; margin-top: 1.5rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li + li { margin-top: 0.35rem; }
.prose li > ul, .prose li > ol { margin-top: 0.35rem; }
.prose a { text-decoration: underline; text-decoration-color: var(--color-200); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: var(--semibold); }
.prose img { border-radius: 0.75rem; display: block; margin: 0 auto; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.prose figure { margin: 1.5rem 0; text-align: center; }
.prose figure img { margin: 0 auto; }
.prose figcaption { font-size: 0.85rem; color: var(--color-text-secondary); margin-top: 0.5rem; }
.prose blockquote { border-left: 3px solid var(--color-primary); padding: 0.5rem 1.25rem; background: var(--color-50); border-radius: 0 0.75rem 0.75rem 0; color: var(--color-text); }
[data-theme="dark"] .prose blockquote { background: var(--color-100); }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--code-bg); padding: 0.15em 0.4em; border-radius: 0.3em; }
.prose pre { background: var(--code-bg); border-radius: 0.75rem; padding: 1rem 1.25rem; overflow-x: auto; font-size: 0.9rem; line-height: 1.5; position: relative; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose kbd { font-family: inherit; font-size: 0.85em; border: 1px solid var(--color-light-grey); border-bottom-width: 2px; border-radius: 0.3em; padding: 0.05em 0.45em; background: var(--color-0); }
.prose hr { border: 0; border-top: 1px solid var(--border-color); margin: 2rem 0; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 0.75rem; }
.prose .table-wrap { overflow-x: auto; margin: 1.25rem 0; border-radius: 0.75rem; border: 1px solid var(--border-color); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-color); }
.prose th { background: var(--color-50); font-weight: var(--semibold); }
[data-theme="dark"] .prose th { background: var(--color-100); }
.prose tr:last-child td { border-bottom: 0; }
.prose .text-center { text-align: center; }
.prose .box-tip, .prose .box-warning, .prose .box-info, .prose .box-success { border-radius: 0.75rem; padding: 1rem 1.25rem 1rem 3.25rem; position: relative; background: var(--color-50); }
[data-theme="dark"] .prose .box-tip, [data-theme="dark"] .prose .box-warning, [data-theme="dark"] .prose .box-info, [data-theme="dark"] .prose .box-success { background: var(--color-100); }
.prose .box-tip::before, .prose .box-warning::before, .prose .box-info::before, .prose .box-success::before { content: ""; position: absolute; left: 1.1rem; top: 1.05rem; width: 1.4rem; height: 1.4rem; background-color: var(--color-primary); -webkit-mask: var(--box-icon) center / contain no-repeat; mask: var(--box-icon) center / contain no-repeat; }
.prose .box-tip { --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.7.6 1 1.4 1 2.5h6c0-1.1.3-1.9 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.prose .box-info { --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); }
.prose .box-warning { --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19L12 3zM12 10v4M12 17h.01'/%3E%3C/svg%3E"); background: #fff7e0; }
.prose .box-warning::before { background-color: #d99a00; }
[data-theme="dark"] .prose .box-warning { background: #3a3220; }
.prose .box-success { --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); background: #e8f8ee; }
.prose .box-success::before { background-color: var(--color-green); }
[data-theme="dark"] .prose .box-success { background: #1f3a2a; }
.prose .box-label { font-weight: 600; display: block; margin-bottom: 0.2rem; }
.prose .steps { list-style: none; padding-left: 0; counter-reset: step; }
.prose .steps > li { position: relative; padding-left: 2.75rem; counter-increment: step; min-height: 2rem; }
.prose .steps > li + li { margin-top: 0.9rem; }
.prose .steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; }
.prose .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.3rem 0.7rem; font-size: 0.75rem; background: var(--color-0); color: var(--color-text); border: 1px solid var(--border-color); opacity: 0; transition: opacity 0.15s; }
.prose pre:hover .copy-btn, .prose .copy-btn:focus-visible { opacity: 1; }
.prose .copy-btn:hover { background: var(--color-100); }

.ip-value { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.ip-value code { font-size: 2rem; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--color-50); padding: 0.5rem 1.25rem; border-radius: 0.75rem; }
.ip-value .button-secondary { padding: 0.8rem 1.4rem; font-size: 0.95rem; }
.not-found .cat-grid { padding-bottom: 0; }

/* Kontakt „Nenašli jste co hledáte?“ */
.contact-section { padding: 0 0 3rem; }
.contact-box { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 3rem; flex-wrap: wrap; }
.contact-box-text h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.contact-box-text p { color: var(--color-text-secondary); }
.contact-box-items { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.contact-item { display: flex; align-items: center; gap: 1rem; color: var(--color-text); }
.contact-item:hover { color: var(--color-text); }
.contact-item:hover .icon-small { background: var(--color-200); }
.contact-item-text { display: flex; flex-direction: column; }
.contact-item-text strong { font-weight: var(--semibold); font-size: 1.05rem; }
.contact-item-text small { color: var(--color-text-secondary); font-size: 0.85rem; }

/* FOOTER (datahost.cz) */
footer { background-color: var(--color-0); color: var(--color-text); border-radius: var(--border-radius) var(--border-radius) 0 0; padding-top: 50px; }
footer a { color: var(--color-text); }
footer a:hover { color: var(--color-text); opacity: 0.8; }
.footer-content { display: flex; justify-content: space-between; max-width: var(--container-max-width); margin: 30px auto; align-items: end; padding: 0 1rem; }
.footer-section svg { margin-bottom: 10px; }
.footer-section ul { display: flex; list-style: none; gap: 2rem; flex-wrap: wrap; }
.footer-section li { padding-bottom: 5px; }
.footer-bottom { color: var(--color-text); padding: 25px 1rem; text-align: left; border-top: 1px solid var(--border-color); }
.footer-bottom-wrapper { display: flex; justify-content: space-between; max-width: var(--container-max-width); margin: 0 auto; flex-wrap: wrap; gap: 0.5rem; }
.footer-bottom a { color: var(--color-text); }
.back-to-top { display: none; position: fixed; bottom: 3.3rem; right: 2rem; transition: transform 0.2s; z-index: 50; padding: 0.5rem; }
.back-to-top:hover { transform: translateY(-3px); background-color: var(--color-100); }
.back-to-top.is-visible { display: flex; }

/* RESPONSIVE */
@media (max-width: 1240px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .cat-grid { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1131px) { nav.main-nav ul li a { padding: 17px 5.5px; } }
@media (max-width: 992px) {
  :root { --container-max-width: 95%; --box-padding: 2rem 1.5rem; }
  .container { padding-left: 0; padding-right: 0; }
  .mobile-menu { display: none; position: absolute; flex-direction: column; justify-content: space-between; top: 70px; left: 0; background-color: var(--color-0); width: 100%; border-radius: var(--border-radius); padding: 2rem 2rem; align-items: center; filter: var(--drop-shadow-filter); z-index: 50; }
  .mobile-menu.is-open { display: flex; }
  .mobile-menu ul { display: flex; flex-direction: column; align-items: center; width: 100%; }
  nav.main-nav .mobile-menu li { width: 100%; float: none; }
  nav.main-nav .mobile-menu li a { display: block; height: auto; font-size: 1.1rem; padding: 1rem 3rem; border-bottom: 1px solid var(--color-light-grey); }
  nav.main-nav .mobile-menu li a.button { display: flex; width: fit-content; margin: 1rem auto; padding: 1rem 3rem; border-bottom: none; color: var(--color-white); background-color: var(--color-primary); }
  nav.main-nav .mobile-menu li a.button:hover { background-color: var(--color-600); }
  .lastmenu { border-bottom: none !important; }
  .list-menu { display: none; }
  .menu-button { display: none; }
  .menu-icon { display: block; }
  .overlay.is-open { display: block; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .article-wrap { grid-template-columns: 1fr; padding: 1rem; }
  .article-aside { position: static; }
  .toc-desktop { display: none; }
  .toc-mobile { display: block; }
  .help-hero { padding: 3rem 0 2rem; }
}
@media (max-width: 767.98px) {
  .cat-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cat-card { padding: 2rem 1.5rem; }
  .contact-box { padding: 2rem 1.5rem; }
  .contact-box-items { flex-direction: column; gap: 1.25rem; }
  .search-submit { display: none; }
  .search-box { padding-right: 0.75rem; }
  .article-head h1 { font-size: 1.6rem; }
  .hero-title { font-size: 1.6rem; }
  .cat-head { flex-direction: column; align-items: flex-start; text-align: left; }
  .cat-head .icon-big { margin: 0; }
  .breadcrumbs { font-size: 0.85rem; }
}
@media (max-width: 479.98px) {
  .nav-left { padding: 0 1rem; }
  .menu-button { display: none; }
  footer { border-radius: 0; }
  .footer-content { flex-direction: column; gap: 3rem; align-items: start; }
  .footer-section ul { gap: 1rem; flex-direction: column; }
  :root { --box-padding: 1.5rem 1.15rem; }
  .article-main { padding: 1rem 0.5rem 0.5rem; }
  .prose { font-size: 0.98rem; }
  .article-list li > a { padding-left: 40px; }
  .article-list li > a::before { left: 12px; }
  .article-list-excerpt li p { padding-left: 40px; }
  .stin, .box { border-radius: 1rem; }
}
@media print {
  nav, .help-hero, .contact-section, footer, .article-aside, .feedback, .toc-mobile, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .stin, .box { filter: none; box-shadow: none; }
  .prose a { text-decoration: none; }
}