/*
Theme Name: Trackless
Theme URI: https://trackless.cz/
Author: Trackless / OpenServis
Author URI: https://www.openservis.cz/
Description: Branded theme for the Trackless blog — cookieless analytics. Matches trackless.cz (dark sticky header, ink/sky palette, dark footer with the OpenServis credit). Brief, practical tips.
Version: 2.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: trackless
*/

:root {
    --ink: #0f172a;
    --sky: #0ea5e9;
    --sky-dk: #0369a1;
    --muted: #475569;
    --line: #e2e8f0;
    --bg: #f8fafc;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
}
a { color: var(--sky-dk); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.2rem; }

.skip-link { position: absolute; left: 0; top: -40px; background: var(--sky); color: #fff; padding: .5rem 1rem; z-index: 9999; border-radius: 0 0 .4rem 0; }
.skip-link:focus { top: 0; }
.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; }

/* ---- header (dark, mirrors trackless.cz) ---- */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(15,23,42,.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
.site-head .wrap { display: flex; align-items: center; gap: 1rem; min-height: 62px; flex-wrap: wrap; }
.site-head .brand { display: inline-flex; align-items: center; }
.site-head .brand img { display: block; }
.site-head .spacer { flex: 1; }
.site-head .navlink { color: #cbd5e1; text-decoration: none; font-size: .92rem; font-weight: 500; white-space: nowrap; }
.site-head .navlink:hover { color: #fff; }

.searchform { display: flex; align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: .5rem; padding: .15rem .2rem .15rem .55rem; }
.searchform input[type=search] { background: transparent; border: 0; color: #fff; font-size: .9rem; padding: .25rem .2rem; outline: none; width: 150px; }
.searchform input[type=search]::placeholder { color: #94a3b8; }
.searchform button { background: transparent; border: 0; color: #cbd5e1; cursor: pointer; font-size: 1rem; padding: .1rem .4rem; }
.searchform button:hover { color: #fff; }
.searchform:focus-within { border-color: var(--sky); }

.btn { display: inline-block; padding: .5rem .95rem; border-radius: .55rem; font-weight: 600; text-decoration: none; font-size: .92rem; white-space: nowrap; }
.btn-primary { background: var(--sky); color: #fff; }
.btn-primary:hover { background: #0284c7; }

/* ---- hero ---- */
.blog-hero { background: radial-gradient(1000px 400px at 70% -20%, #1e3a5f 0%, var(--ink) 60%); color: #fff; padding: 2.8rem 0; }
.blog-hero h1 { margin: 0 0 .5rem; font-size: 2rem; }
.blog-hero p { margin: 0; color: #cbd5e1; max-width: 640px; }
.blog-hero .lead-tag { display: inline-block; margin-bottom: .7rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7dd3fc; }

/* ---- listing ---- */
.main { padding: 2.2rem 0 1rem; }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.3rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.card:hover { box-shadow: 0 10px 26px rgba(15,23,42,.09); transform: translateY(-2px); }
.card .thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #e0f2fe; display: block; }
.card .body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card .cat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sky-dk); text-decoration: none; }
.card h2 { font-size: 1.15rem; margin: 0; }
.card h2 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover { color: var(--sky-dk); }
.card .excerpt { color: var(--muted); font-size: .93rem; margin: 0; flex: 1; }
.card .readmore { color: var(--sky-dk); text-decoration: none; font-weight: 600; font-size: .9rem; }
.meta { color: var(--muted); font-size: .8rem; }
.meta .dot { margin: 0 .35rem; opacity: .6; }
.post-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin:.7rem 0 1.25rem; }
.post-tags a { display:inline-flex; align-items:center; padding:.22rem .55rem; border:1px solid #dbeafe; border-radius:999px; background:#eff6ff; color:#0369a1; font-size:.78rem; font-weight:600; text-decoration:none; }
.post-tags a:hover { background:#0ea5e9; border-color:#0ea5e9; color:#fff; }

.pagination { display: flex; gap: .5rem; justify-content: center; margin: 2.2rem 0 1rem; flex-wrap: wrap; }
.pagination a, .pagination span { padding: .45rem .8rem; border: 1px solid var(--line); border-radius: .5rem; text-decoration: none; color: var(--ink); background: #fff; }
.pagination .current { background: var(--sky); color: #fff; border-color: var(--sky); }

/* ---- single / page ---- */
.backlink { display: inline-block; margin: 0 0 1rem; color: var(--sky-dk); text-decoration: none; font-weight: 600; }
article.post { background: #fff; border: 1px solid var(--line); border-radius: .9rem; padding: 2rem 2.2rem 2.4rem; max-width: 760px; margin: 0 auto; }
article.post .cat { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sky-dk); text-decoration: none; }
article.post h1 { font-size: 2rem; margin: .35rem 0 .5rem; }
article.post .content { font-size: 1.05rem; }
article.post .content > p:first-of-type { font-size: 1.12rem; color: #1e293b; }
article.post .content h2 { font-size: 1.45rem; margin: 2rem 0 .6rem; }
article.post .content h3 { font-size: 1.18rem; margin: 1.5rem 0 .5rem; }
article.post .content ul, article.post .content ol { padding-left: 1.3rem; }
article.post .content li { margin: .3rem 0; }
article.post .content pre { background: var(--ink); color: #e2e8f0; padding: 1rem 1.1rem; border-radius: .55rem; overflow: auto; font-size: .88rem; line-height: 1.5; }
article.post .content code { background: #f1f5f9; padding: .12rem .35rem; border-radius: .3rem; font-size: .9em; }
article.post .content pre code { background: none; padding: 0; }
article.post .content blockquote { border-left: 3px solid var(--sky); margin: 1.3rem 0; padding: .35rem 1rem; color: var(--muted); background: #f8fafc; }
article.post .content a { color: var(--sky-dk); }

/* call-to-action box after an article */
.post-cta { max-width: 760px; margin: 1.4rem auto 0; background: linear-gradient(120deg, #0ea5e9, #0369a1); color: #fff; border-radius: .9rem; padding: 1.4rem 1.6rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.post-cta p { margin: 0; font-size: 1.02rem; }
.post-cta .btn { background: #fff; color: var(--sky-dk); }

/* ---- footer ---- */
.site-foot { background: var(--ink); color: #cbd5e1; padding: 2.4rem 0; margin-top: 2.5rem; }
.site-foot .cols { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; }
.site-foot .col { min-width: 160px; }
.site-foot .brand { color: #fff; font-weight: 700; display: block; margin-bottom: .3rem; }
.site-foot .tagline { color: #94a3b8; font-weight: 400; font-size: .9rem; }
.site-foot h3 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .5rem; }
.site-foot a { color: #cbd5e1; text-decoration: none; font-size: .92rem; }
.site-foot a:hover { color: #fff; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.site-foot .credit { flex-basis: 100%; color: #cbd5e1; font-size: .85rem; border-top: 1px solid rgba(255,255,255,.08); margin-top: 1.6rem; padding-top: 1rem; }

@media (max-width: 640px) {
    .wrap { padding: 0 .8rem; }
    .site-head .wrap { padding-top: .55rem; padding-bottom: .55rem; }
    .searchform input[type=search] { width: 110px; }
    .blog-hero h1 { font-size: 1.55rem; }
    .card .body { padding: .9rem .85rem 1rem; }
    article.post { padding: 1.3rem .95rem 1.7rem; }
    article.post h1 { font-size: 1.6rem; }
    .post-cta { padding: 1.2rem 1rem; }
    .author-box { padding: 1rem .9rem; }
}

.blog-hero .cadence { margin-top:.8rem; font-size:.92rem; color:#7dd3fc; font-weight:600; }

.post-cta .cta-demo { color:#fff; text-decoration:underline; font-size:.92rem; white-space:nowrap; align-self:center; }


/* glossary */
.gl-intro{font-size:1.05rem;color:#475569;margin-bottom:1.4rem}
.gl-az{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 2rem;padding:.7rem .8rem;background:#f1f5f9;border:1px solid #e8edf3;border-radius:.6rem}
.gl-az a{display:inline-flex;min-width:1.85rem;height:1.85rem;align-items:center;justify-content:center;background:#fff;border:1px solid #e2e8f0;border-radius:.4rem;font-weight:700;color:#0369a1;text-decoration:none}
.gl-az a:hover{background:#0ea5e9;border-color:#0ea5e9;color:#fff}
.gl-letter{font-size:1.45rem;color:#0ea5e9;border-bottom:2px solid #e8edf3;padding-bottom:.25rem;margin:2.2rem 0 1rem;scroll-margin-top:90px}
.gl-list{margin:0}
.gl-list dt{font-weight:700;font-size:1.06rem;color:#0f172a;margin-top:1.15rem;scroll-margin-top:90px}
.gl-list dd{margin:.3rem 0 0;color:#334155;line-height:1.65}
.gl-more{display:inline-block;margin-top:.15rem;color:#0369a1;font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap}
.gl-more:hover{text-decoration:underline}

/* xxx5 */
.navdrop{position:relative;cursor:pointer}
.navdrop .submenu{display:none;position:absolute;top:100%;left:0;z-index:70;min-width:220px;background:#0f172a;border:1px solid #1e293b;border-radius:.5rem;padding:.4rem;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.navdrop:hover .submenu,.navdrop:focus .submenu,.navdrop:focus-within .submenu{display:block}
.navdrop .submenu a{display:block;padding:.45rem .6rem;color:#cbd5e1;text-decoration:none;border-radius:.35rem;font-size:.9rem}
.navdrop .submenu a:hover{background:#1e293b;color:#fff}
.crumbs{font-size:.85rem;color:#64748b;margin:0 0 1rem}
.crumbs a{color:#0369a1;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{margin:0 .35rem;color:#cbd5e1}
.crumbs .here{color:#475569}
.author-box{display:flex;gap:.9rem;align-items:flex-start;margin:2rem 0 0;padding:1.1rem 1.2rem;background:#f8fafc;border:1px solid #e8edf3;border-radius:.7rem}
.author-box img{flex:0 0 auto;border-radius:.5rem}
.author-box strong{display:block;color:#0f172a;margin-bottom:.2rem}
.author-box p{margin:0;color:#475569;font-size:.92rem;line-height:1.55}
.author-box a{color:#0369a1;text-decoration:none;font-weight:600}
.found-links{margin-top:1rem}
.found-links .sep{color:#cbd5e1;margin:0 .3rem}