/*
 * walachowski-theme/assets/css/tools.css
 * Wspólne style dla wszystkich narzędzi SEO.
 * Ładowane TYLKO na stronach z szablonem "Narzędzie SEO".
 */

.tool-header { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--border); }
.tool-breadcrumb { display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--ink-4);margin-bottom:1.5rem;font-family:var(--mono); }
.tool-breadcrumb a { color:var(--ink-4);transition:color .2s; }
.tool-breadcrumb a:hover { color:var(--orange); }
.tool-breadcrumb span { color:var(--border); }

.tool-tag { display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);background:var(--orange-bg);border:1px solid var(--orange-border);padding:.25rem .7rem;border-radius:100px;margin-bottom:1rem;font-family:var(--mono); }

.tool-title { font-family:var(--display);font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:.8rem; }
.tool-title .hl { color:var(--orange); }

.tool-desc { font-size:1rem;color:var(--ink-2);line-height:1.65;max-width:640px;margin:0; }

.tool-meta { display:flex;align-items:center;gap:1.5rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-light);flex-wrap:wrap; }
.tool-meta-item { display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--ink-3);font-family:var(--mono); }
.tool-meta-dot { width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0; }

/* Layout */
.tool-body { padding:3rem 0; }
.tool-layout { display:grid;grid-template-columns:1fr 300px;gap:2rem;align-items:start; }

/* Tool card */
.tool-card { background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden; }
.tool-card-body { padding:1.5rem; }

/* Results */
.results-card { background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:1.5rem;display:none;animation:toolFadeUp .35s var(--ease); }
.results-card.visible { display:block; }
@keyframes toolFadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.results-header { display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border-light);background:#fafaf6;flex-wrap:wrap;gap:.75rem; }
.results-stats { display:flex;align-items:center;gap:1rem; }
.results-count { font-family:var(--display);font-size:1.4rem;font-weight:800;color:var(--orange);letter-spacing:-.03em; }
.results-count-label { font-size:.8rem;color:var(--ink-3);line-height:1.3; }
.results-actions { display:flex;gap:.5rem; }
.results-body { padding:1rem 1.5rem; }
.results-textarea { width:100%;height:280px;padding:.75rem;border:1.5px solid var(--border-light);border-radius:var(--radius);background:var(--bg);font-family:var(--mono);font-size:.78rem;color:var(--ink-2);resize:vertical;line-height:1.8; }
.results-textarea:focus { outline:none;border-color:var(--orange); }

/* Form elements */
.wl-label { font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:.5rem; }
.wl-input,.wl-textarea,.wl-select { width:100%;padding:.65rem .85rem;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg);font-family:var(--body);font-size:.88rem;color:var(--ink);transition:border-color .2s,background .2s; }
.wl-input:focus,.wl-textarea:focus,.wl-select:focus { outline:none;border-color:var(--orange);background:var(--surface); }
.wl-input::placeholder,.wl-textarea::placeholder { color:var(--ink-4); }
.wl-textarea { font-family:var(--mono);font-size:.82rem;resize:vertical;line-height:1.7; }
.wl-select { cursor:pointer; }
.wl-checkbox-wrap { display:flex;align-items:center;gap:.4rem;cursor:pointer; }
.wl-checkbox-wrap input[type=checkbox] { accent-color:var(--orange);width:15px;height:15px;cursor:pointer; }
.wl-checkbox-wrap label { font-size:.82rem;color:var(--ink-2);cursor:pointer; }
.wl-field { margin-bottom:1.25rem; }
.wl-field:last-child { margin-bottom:0; }
.wl-row { display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap; }
.wl-divider { border:none;border-top:1px solid var(--border-light);margin:1.25rem 0; }

/* Buttons */
.btn-primary { font-family:var(--body);font-size:.9rem;font-weight:700;padding:.7rem 1.75rem;background:var(--orange);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;transition:all .2s var(--ease);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.5rem; }
.btn-primary:hover { background:#e64400;transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,77,0,.3); }
.btn-primary:active { transform:translateY(0); }
.btn-secondary { font-family:var(--body);font-size:.85rem;font-weight:600;padding:.7rem 1.25rem;background:var(--surface);color:var(--ink);border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.4rem; }
.btn-secondary:hover { border-color:var(--ink-3);background:var(--bg); }
.btn-export { font-family:var(--body);font-size:.78rem;font-weight:600;padding:.4rem .9rem;background:var(--bg);color:var(--ink-2);border:1.5px solid var(--border);border-radius:6px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.35rem; }
.btn-export:hover { border-color:var(--ink);color:var(--ink); }
.btn-export.success { border-color:#22c55e;color:#22c55e; }
.btn-ghost { font-family:var(--body);font-size:.82rem;font-weight:500;padding:.7rem 1rem;background:none;color:var(--ink-3);border:none;cursor:pointer;transition:color .2s; }
.btn-ghost:hover { color:var(--ink); }
.actions-row { display:flex;gap:.75rem;align-items:center;flex-wrap:wrap; }

/* Sidebar */
.sidebar { display:flex;flex-direction:column;gap:1rem; }
.sidebar-card { background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden; }
.sidebar-card-header { padding:.9rem 1.25rem;border-bottom:1px solid var(--border-light);font-family:var(--display);font-size:.82rem;font-weight:700;letter-spacing:-.01em;background:#fafaf6;display:flex;align-items:center;gap:.5rem; }
.sidebar-card-icon { width:20px;height:20px;background:var(--orange-bg);border:1px solid var(--orange-border);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--orange); }
.sidebar-card-body { padding:1.1rem 1.25rem; }
.related-tools { display:flex;flex-direction:column;gap:.5rem; }
.related-tool-link { display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border:1px solid var(--border-light);border-radius:8px;font-size:.82rem;color:var(--ink-2);font-weight:500;transition:all .2s; }
.related-tool-link:hover { border-color:var(--orange);color:var(--orange);background:var(--orange-bg); }
.sidebar-post-link { display:block;font-size:.82rem;color:var(--ink-2);font-weight:500;padding:.5rem 0;border-bottom:1px solid var(--border-light);line-height:1.4;transition:color .2s; }
.sidebar-post-link:last-child { border-bottom:none; }
.sidebar-post-link:hover { color:var(--orange); }
.btn-sidebar-cta { display:inline-block;font-size:.82rem;font-weight:600;color:var(--orange);border:1.5px solid var(--orange-border);background:var(--orange-bg);padding:.4rem .9rem;border-radius:6px;transition:all .2s; }
.btn-sidebar-cta:hover { background:var(--orange);color:#fff;border-color:var(--orange); }

/* Article */
.tool-article { padding:4rem 0;border-top:1px solid var(--border); }
.article-body h2 { font-family:var(--display);font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin:2rem 0 .75rem;max-width:800px; }
.article-body h2:first-child { margin-top:0; }
.article-body h3 { font-family:var(--display);font-size:1.05rem;font-weight:700;margin:1.5rem 0 .5rem; }
.article-body p { font-size:.92rem;line-height:1.75;color:var(--ink-2);margin-bottom:1rem;max-width:800px; }
.article-body ul,.article-body ol { padding-left:1.5rem;margin-bottom:1rem;max-width:780px; }
.article-body li { font-size:.9rem;line-height:1.7;color:var(--ink-2);margin-bottom:.3rem; }
.article-body li::marker { color:var(--orange); }

/* Toast */
.toast { position:fixed;bottom:2rem;right:2rem;background:var(--ink);color:#fff;padding:.75rem 1.25rem;border-radius:8px;font-size:.85rem;font-weight:500;z-index:10000;display:flex;align-items:center;gap:.5rem;transform:translateY(100px);opacity:0;transition:all .3s var(--ease);pointer-events:none; }
.toast.show { transform:translateY(0);opacity:1; }
.toast-dot { width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0; }

/* Responsive */
@media(max-width:960px) {
  .tool-layout { grid-template-columns:1fr; }
  .sidebar { display:grid;grid-template-columns:1fr 1fr; }
  .tool-header { padding:2rem 0 1.75rem; }
}
@media(max-width:600px) {
  .tool-header { padding:1.5rem 0; }
  .tool-body { padding:1.5rem 0; }
  .sidebar { grid-template-columns:1fr; }
  .tool-article { padding:2.5rem 0; }
  .actions-row { flex-wrap:wrap; }
}