/*
Theme Name: TL_DevOps
Theme URI: https://leszczynski.space
Author: Tomasz Leszczyński
Author URI: https://leszczynski.space
Description: Motyw "Technical Precision" – dark-mode-first, developer-centric. Wygenerowany na bazie projektu Stitch i przeniesiony 1:1 na WordPress. Inter + JetBrains Mono, system tokenów Tailwind, komponenty glass-card, CPT Realizacje.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tl-devops
Tags: dark, one-column, custom-menu, featured-images, blog, portfolio, translation-ready
*/

/* ------------------------------------------------------------------
   Cały layout opiera się na Tailwind (tokeny w assets/js/tailwind-config.js).
   Tutaj trzymamy tylko to, czego nie da się wyrazić utility-klasami:
   bazowe tło, komponent glass-card, prompt $, marker list, drawer mobilny.
------------------------------------------------------------------- */

:root {
    --tl-surface:            #0d1322;
    --tl-background-deep:     #0B1120;
    --tl-surface-elevated:    #171E2E;
    --tl-on-surface:          #dde2f8;
    --tl-border:              #1E293B;
    --tl-primary:             #a2c9ff;
    --tl-secondary:           #5adace;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--tl-surface);
    color: var(--tl-on-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Material Symbols – domyślna oś wariacyjna */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
}

/* Karta "glass" – tonalne warstwowanie zamiast cieni */
.glass-card {
    background: rgba(23, 30, 46, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--tl-border);
    transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}

/* Prompt terminala "$ " przed tekstem mono */
.syntax-highlight-prompt::before {
    content: "$ ";
    color: var(--tl-secondary);
    font-family: 'JetBrains Mono', monospace;
}

/* Header po przewinięciu */
.tl-header--scrolled {
    background-color: rgba(13, 19, 34, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Mobilny drawer */
.tl-drawer {
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.tl-drawer.is-open { transform: translateX(0); }
.tl-drawer-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.tl-drawer-overlay.is-open { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------------
   Treść wpisu (single) – "centered-constrained reading".
   Listy z markerem ">" / prompt, code blocks na surface-elevated.
------------------------------------------------------------------- */
.tl-prose {
    color: var(--tl-on-surface);
    font-size: 18px;
    line-height: 1.8;
}
.tl-prose > * + * { margin-top: 1.5rem; }
.tl-prose h2 { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin-top: 3rem; }
.tl-prose h3 { font-size: 22px; font-weight: 600; line-height: 1.3; margin-top: 2.25rem; }
.tl-prose a { color: var(--tl-primary); text-decoration: underline; text-underline-offset: 3px; }
.tl-prose a:hover { color: var(--tl-secondary); }
.tl-prose strong { color: #fff; font-weight: 600; }
.tl-prose blockquote {
    border-left: 3px solid var(--tl-primary);
    padding-left: 1.25rem;
    color: #c1c7d2;
    font-style: italic;
}
.tl-prose ul { list-style: none; padding-left: 1.25rem; }
.tl-prose ul li { position: relative; }
.tl-prose ul li::before {
    content: ">";
    position: absolute;
    left: -1.25rem;
    color: var(--tl-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}
.tl-prose ol { padding-left: 1.5rem; }
.tl-prose code {
    font-family: 'JetBrains Mono', monospace;
    font-size: .9em;
    background: var(--tl-surface-elevated);
    border: 1px solid var(--tl-border);
    border-radius: 4px;
    padding: .15em .4em;
    color: #4fd1c5;
}
.tl-prose pre {
    font-family: 'JetBrains Mono', monospace;
    background: var(--tl-surface-elevated);
    border: 1px solid var(--tl-border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.6;
}
.tl-prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.tl-prose img { border-radius: 8px; border: 1px solid var(--tl-border); }

/* WP align helpers w obrębie prose */
.tl-prose .alignwide  { width: 100%; }
.tl-prose .aligncenter { margin-left: auto; margin-right: auto; }

/* Dostępność: widoczny focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--tl-primary);
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--tl-primary);
    color: #00315c;
    padding: .75rem 1rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}
.skip-link:focus { left: 1rem; top: 1rem; }