@charset "utf-8";

/* ==========================================================================
   Neovlivněný 2.1 — světlý technický žurnál pro Textpattern CMS
   Odlehčená varianta: jemný kontrast, tenčí řezy, víc vzduchu, míň ozdob.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Proměnné
   -------------------------------------------------------------------------- */

:root {
    /* barvy — světlý režim */
    --bg:          #ffffff;
    --bg-subtle:   #fafbfc;
    --bg-code:     #f7f8fa;
    --text:        #2b3038;   /* měkká grafitová místo černé */
    --text-muted:  #6d7683;
    --text-faint:  #9aa2ae;
    --line:        #ecedf1;
    --line-strong: #dcdfe5;
    --accent:      #4f68d4;   /* tišší modrá */
    --accent-soft: #7f92e2;
    --accent-bg:   #f2f4fd;
    --rant:        #c25048;   /* tlumená červená */
    --rant-bg:     #fcf4f3;

    /* písmo */
    --sans:  "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --serif: "Charter", "Iowan Old Style", "Source Serif Pro", Georgia, serif;

    /* písmo běžného textu — přepni na var(--serif), chceš-li patky */
    --font-body: var(--sans);

    /* řezy — sniž/zvyš na jednom místě */
    --weight-head: 500;   /* zvyš na 600, chceš-li výraznější nadpisy */
    --weight-bold: 600;

    /* rozměry */
    --page:    68rem;
    --measure: 44rem;
    --radius:  8px;
    --rail:    8.5rem;
}

/* tmavý režim — podle systému, pokud si čtenář nevybral ručně */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:          #14171c;
        --bg-subtle:   #191d23;
        --bg-code:     #1b1f26;
        --text:        #d3d8e0;
        --text-muted:  #949cab;
        --text-faint:  #6c7482;
        --line:        #242830;
        --line-strong: #333944;
        --accent:      #93a5ec;
        --accent-soft: #6f83d4;
        --accent-bg:   #1c2233;
        --rant:        #e0857c;
        --rant-bg:     #251a19;
    }
}

/* tmavý režim — ruční volba */
:root[data-theme="dark"] {
    --bg:          #14171c;
    --bg-subtle:   #191d23;
    --bg-code:     #1b1f26;
    --text:        #d3d8e0;
    --text-muted:  #949cab;
    --text-faint:  #6c7482;
    --line:        #242830;
    --line-strong: #333944;
    --accent:      #93a5ec;
    --accent-soft: #6f83d4;
    --accent-bg:   #1c2233;
    --rant:        #e0857c;
    --rant-bg:     #251a19;
}

/* --------------------------------------------------------------------------
   2. Základ
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.72;
    font-feature-settings: "kern", "liga", "calt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, svg, iframe { max-width: 100%; height: auto; }

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 3rem 0;
}

.accessibility,
.skip-link {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link:focus {
    position: fixed; top: .5rem; left: .5rem;
    z-index: 200;
    width: auto; height: auto;
    margin: 0; padding: .55rem 1rem;
    clip: auto;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: .8rem;
}

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-family: var(--sans);
    font-weight: var(--weight-head);
    line-height: 1.24;
    letter-spacing: -.017em;
    text-wrap: balance;
    color: var(--text);
}

h1 { font-size: clamp(1.8rem, 1.25rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.12rem + .9vw, 1.7rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.2em; }

strong, b { font-weight: var(--weight-bold); }

em { font-style: italic; }

/* monospace mikrotypografie */

.mono,
.kicker,
.post-date,
.reading-time,
.tags,
.site-nav a,
.paginator,
.badge,
.post-facts,
.comment-time,
.site-footer {
    font-family: var(--mono);
    font-variant-ligatures: none;
    font-weight: 400;
}

.kicker {
    display: inline-block;
    font-size: .72rem;
    letter-spacing: .01em;
    color: var(--accent);
}

.kicker a { color: inherit; }

.post-date,
.reading-time {
    font-size: .76rem;
    color: var(--text-faint);
    white-space: nowrap;
}

blockquote {
    margin: 2rem 0;
    padding: .2rem 0 .2rem 1.4rem;
    border-left: 2px solid var(--line-strong);
    color: var(--text-muted);
}

blockquote p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Kód
   -------------------------------------------------------------------------- */

code, kbd, samp, pre {
    font-family: var(--mono);
    font-variant-ligatures: none;
}

/* inline kód */
:not(pre) > code {
    padding: .1em .35em;
    background: var(--bg-code);
    border-radius: 4px;
    font-size: .855em;
    color: var(--text-muted);
    word-break: break-word;
}

pre {
    position: relative;
    margin: 2rem 0;
    padding: 1.05rem 1.15rem;
    overflow-x: auto;
    background: var(--bg-code);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .865rem;
    line-height: 1.62;
    color: var(--text-muted);
    tab-size: 4;
}

pre code {
    padding: 0;
    background: none;
    font-size: inherit;
    color: inherit;
}

/* štítek jazyka: <pre data-lang="js"> */
pre[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: .55rem; right: .8rem;
    color: var(--text-faint);
    font-size: .66rem;
    letter-spacing: .04em;
}

/* terminál: <pre class="terminal"> — světlá varianta s barevným promptem.
   Chceš-li klasický tmavý blok, přepiš background na var(--text) a color na var(--bg). */
pre.terminal {
    background: var(--bg-subtle);
    border-color: var(--line-strong);
}

pre.terminal .prompt { color: var(--accent); user-select: none; }
pre.terminal .comment { color: var(--text-faint); }

kbd {
    padding: .1em .4em;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--bg-subtle);
    font-size: .82em;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. Hlavička
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .site-header { background: var(--bg); }
}

.header-bar {
    display: flex;
    align-items: center;
    gap: 1rem 1.75rem;
    max-width: var(--page);
    margin: 0 auto;
    padding: .85rem 1.5rem;
}

.brand {
    font-family: var(--sans);
    font-size: 1.02rem;
    font-weight: var(--weight-bold);
    letter-spacing: -.015em;
    color: var(--text);
    white-space: nowrap;
}

.brand:hover { text-decoration: none; color: var(--accent); }

.brand-mark {
    font-family: var(--mono);
    font-weight: 400;
    color: var(--text-faint);
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin: 0; padding: 0;
    list-style: none;
}

.site-nav a {
    display: inline-block;
    padding: .3rem 0;
    font-size: .8rem;
    color: var(--text-muted);
}

.site-nav a:hover {
    color: var(--text);
    text-decoration: none;
}

.site-nav li.active a { color: var(--accent); }

.header-tools {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.header-tools input[type="search"] {
    width: 8.5rem;
    padding: .3rem .6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-subtle);
    color: var(--text);
    font-family: var(--mono);
    font-size: .76rem;
}

.header-tools input[type="search"]::placeholder { color: var(--text-faint); }

.header-tools input[type="search"]:focus {
    width: 12rem;
    border-color: var(--accent-soft);
    outline: none;
    transition: width .18s ease;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem; height: 1.9rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
}

.theme-toggle:hover { color: var(--accent); border-color: var(--line-strong); }
.theme-toggle svg { width: .95rem; height: .95rem; display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* proužek se sloganem */

.tagline > div {
    max-width: var(--page);
    margin: 0 auto;
    padding: 1.1rem 1.5rem 0;
    font-family: var(--mono);
    font-size: .74rem;
    line-height: 1.6;
    color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   6. Rozvržení
   -------------------------------------------------------------------------- */

.wrapper {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 1.5rem;
}

main { padding: 3.5rem 0 5rem; }

.page-head { margin-bottom: 3rem; }

.page-head h1 { margin-bottom: .3rem; }

.lede {
    margin: 0 0 1rem;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.page-head .lede { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   7. Výpis článků
   -------------------------------------------------------------------------- */

.post-item {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: 0 2rem;
    padding: 0 0 3.25rem;
}

.post-rail {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding-top: .5rem;
}

.post-main { max-width: 46rem; }

.post-title {
    margin: .25rem 0 .5rem;
    font-size: 1.35rem;
    line-height: 1.3;
}

.post-title a { color: var(--text); }
.post-title a:hover { color: var(--accent); text-decoration: none; }

.summary {
    margin-bottom: .85rem;
    color: var(--text-muted);
}

.summary p:last-child { margin-bottom: 0; }

/* nejnovější příspěvek dostane víc prostoru */

.post-list > .post-item:first-child { padding-bottom: 3.75rem; }

.post-list > .post-item:first-child .post-title {
    font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.1rem);
}

.post-list > .post-item:first-child .summary { font-size: 1.08rem; }

/* rubrika „Naštvaně“ */

.post-item.is-rant .post-main {
    padding-left: 1.15rem;
    border-left: 2px solid var(--rant);
}

.is-rant .kicker { color: var(--rant); }
.is-rant .post-title a:hover { color: var(--rant); }

.badge {
    display: inline-block;
    color: var(--rant);
    font-size: .72rem;
}

/* patka položky ve výpisu */

.post-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
}

.comment-link {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--text-faint);
}

.comment-link:hover { color: var(--accent); }

/* štítky (klíčová slova) */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tags li {
    font-size: .72rem;
    color: var(--text-faint);
}

.tags li::before { content: "#"; opacity: .55; }

/* --------------------------------------------------------------------------
   8. Jednotlivý článek
   -------------------------------------------------------------------------- */

.post {
    max-width: var(--measure);
    margin: 0 auto;
}

.post-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.post-header h1 { margin: .5rem 0 .6rem; }

.post-header .dek {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.post-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .8rem;
    font-size: .76rem;
    color: var(--text-faint);
}

.post-facts a { color: var(--text-muted); }
.post-facts .sep { opacity: .35; }
.post-facts .reading-time::before { content: "/ "; opacity: .35; }

.post.is-rant .post-header {
    padding-left: 1.2rem;
    border-left: 2px solid var(--rant);
}

.article-body {
    font-size: 1.1rem;
    line-height: 1.8;
}

.article-body > :first-child { margin-top: 0; }

.article-body h2 {
    margin-top: 3rem;
    scroll-margin-top: 5rem;
}

.article-body h3 {
    margin-top: 2.25rem;
    scroll-margin-top: 5rem;
}

.article-body ul,
.article-body ol {
    margin: 0 0 1.2em;
    padding-left: 1.35rem;
}

.article-body li { margin-bottom: .4em; }

.article-body figure { margin: 2.5rem 0; }

.article-body figure img,
.article-body figure svg {
    display: block;
    width: 100%;
    border-radius: var(--radius);
}

.article-body figcaption {
    margin-top: .65rem;
    font-family: var(--mono);
    font-size: .73rem;
    line-height: 1.55;
    color: var(--text-faint);
}

.post-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

/* poznámka v textu: <div class="note"> */
.note {
    margin: 2rem 0;
    padding: 0 0 0 1.4rem;
    border-left: 2px solid var(--accent-soft);
    color: var(--text-muted);
    font-size: .98em;
}

.note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. Stránkování
   -------------------------------------------------------------------------- */

.paginator {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    font-size: .78rem;
}

.paginator a { color: var(--text-muted); }
.paginator a:hover { color: var(--accent); text-decoration: none; }
.paginator a[rel="next"] { margin-left: auto; }

/* --------------------------------------------------------------------------
   10. Komentáře a formuláře
   -------------------------------------------------------------------------- */

#comments-head,
#comments-form {
    max-width: var(--measure);
    margin: 4rem auto 0;
}

#comments-head h3,
#comments-form h3 {
    margin-bottom: 1.5rem;
    font-family: var(--mono);
    font-size: .82rem;
    font-weight: 400;
    color: var(--text-faint);
}

.comments-list {
    margin: 0; padding: 0;
    list-style: none;
}

.comments-list > li + li {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

.comments h4 {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .1rem;
    font-size: .95rem;
    font-weight: var(--weight-bold);
}

.comments .is-author {
    color: var(--accent);
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 400;
}

.comments-author { padding-left: 1.15rem; border-left: 2px solid var(--accent-soft); }

.comment-anchor a { color: var(--text-faint); font-family: var(--mono); }
.comment-anchor a:hover { color: var(--accent); }

.comment-time {
    display: block;
    margin-bottom: .6rem;
    font-size: .72rem;
    color: var(--text-faint);
}

.comment-body p:last-child { margin-bottom: 0; }

/* formuláře */

label {
    display: block;
    margin-bottom: .3rem;
    font-family: var(--mono);
    font-size: .73rem;
    color: var(--text-faint);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: .98rem;
}

textarea { font-family: var(--mono); font-size: .88rem; line-height: 1.65; }

input:focus, textarea:focus {
    border-color: var(--accent-soft);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-bg);
}

input[type="submit"],
button.btn {
    width: auto;
    padding: .45rem 1.1rem;
    border: 1px solid var(--accent-soft);
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    font-family: var(--mono);
    font-size: .78rem;
    cursor: pointer;
}

input[type="submit"]:hover { border-color: var(--accent); background: var(--accent-bg); }

input[type="submit"]:last-of-type {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

input[type="submit"]:last-of-type:hover { filter: brightness(1.06); }

input[type="submit"].disabled { opacity: .4; cursor: not-allowed; }

.comment-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0 1.25rem;
}

.comment-actions { display: flex; gap: .6rem; }

.required { color: var(--rant); }

.error_message {
    padding: .7rem 1rem;
    border-left: 2px solid var(--rant);
    background: var(--rant-bg);
    color: var(--rant);
    list-style-position: inside;
}

.file-download {
    padding: 1.25rem 0;
    border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   11. Chybová stránka a patička
   -------------------------------------------------------------------------- */

.error-page main { text-align: center; }

.error-status {
    font-family: var(--mono);
    font-weight: 400;
    font-size: clamp(2.75rem, 2rem + 5vw, 4.5rem);
    color: var(--text-faint);
}

.site-footer {
    border-top: 1px solid var(--line);
    font-size: .8rem;
    color: var(--text-muted);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 2.5rem;
    max-width: var(--page);
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
}

.footer-grid h4 {
    margin-bottom: .9rem;
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 400;
    color: var(--text-faint);
}

.footer-grid ul { margin: 0; padding: 0; list-style: none; }
.footer-grid li { margin-bottom: .5rem; line-height: 1.5; }
.footer-grid a { color: var(--text-muted); }
.footer-grid a:hover { color: var(--accent); }

.footer-base {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    font-size: .72rem;
    color: var(--text-faint);
}

.footer-base a { color: var(--text-faint); }
.footer-base a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   12. Responzivita
   -------------------------------------------------------------------------- */

@media screen and (max-width: 54rem) {
    .header-bar { flex-wrap: wrap; gap: .5rem 1.25rem; }
    .site-nav { order: 3; width: 100%; }
    .site-nav ul { gap: .25rem 1.1rem; }
    .header-tools { margin-left: auto; }
    .header-tools input[type="search"] { width: 7rem; }

    .post-item {
        grid-template-columns: minmax(0, 1fr);
        gap: .55rem;
    }

    .post-rail {
        flex-direction: row;
        align-items: center;
        gap: .75rem;
        padding-top: 0;
    }
}

@media screen and (max-width: 34rem) {
    body { font-size: 1rem; }
    main { padding: 2.5rem 0 3.5rem; }
    .article-body { font-size: 1.05rem; }
    .post-item { padding-bottom: 2.75rem; }
    .post-list > .post-item:first-child { padding-bottom: 3rem; }
}

/* --------------------------------------------------------------------------
   13. Tisk
   -------------------------------------------------------------------------- */

@media print {
    :root { --bg: #fff; --text: #000; --line: #ddd; }
    body { font-size: 11pt; }
    .site-header, .tagline, .site-footer, .paginator,
    #comments-form, .skip-link, .theme-toggle { display: none; }
    .post { max-width: none; }
    a { color: #000; }
    .article-body a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    pre { border: 1px solid #ddd; background: #fafafa; }
}