/* ============================================================
   JLV DevTools — shared.css  v1.0
   Loaded by shared/head.php on every tool page.
   Contains: reset base, header, nav dropdown, footer, float donate.
   Tool-specific styles stay in assets/css/style.css per tool.
   ============================================================ */

/* ======== RESET & BASE ======== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:       #0e0e0e;
    --bg2:      #141414;
    --bg3:      #1a1a1a;
    --bg4:      #1e1e1e;
    --border:   #2a2a2a;
    --border2:  #333;
    --text:     #e8e8e8;
    --muted:    #888;
    --muted2:   #555;
    --accent:   #c8f135;
    --accent2:  #a8d020;
    --red:      #ff5555;
    --yellow:   #f0c040;
    --blue:     #60a5fa;
    --green:    #4ade80;
    --purple:   #a78bfa;
    --font-ui:   system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Consolas", "Menlo", monospace;
    --radius: 6px;
}

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
}

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

/* ======== ACCESSIBILITY ======== */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-only:focus {
    position: static; width: auto; height: auto;
    clip: auto; white-space: normal;
    background: var(--accent); color: #000;
    padding: 8px 16px; z-index: 9999;
}

/* ======== STICKY TOP NAV ======== */
.site-nav{
    position:sticky;top:0;z-index:100;
    background:rgba(13,13,24,.92);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
}
.nav-inner{
    width:100%;max-width:100%;
    display:flex;align-items:center;gap:0;
    height:56px;padding:0 24px;
}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:8px;margin-right:8px;white-space:nowrap;flex-shrink:0;text-decoration:none}
.nav-logo-brand{
    display:flex;align-items:center;gap:6px;
    font-family:var(--font-mono);font-size:15px;font-weight:700;
    color:var(--text);text-decoration:none;transition:color .15s;
}
.nav-logo-brand:hover{color:var(--accent);text-decoration:none}
.nav-logo-tag{color:var(--muted2);font-weight:400}
.nav-logo-name{color:var(--text)}
.nav-logo-devtools{
    font-family:var(--font-mono);font-size:10px;font-weight:700;
    letter-spacing:1.5px;text-transform:uppercase;
    background:var(--accent);color:#000;
    padding:3px 9px;border-radius:4px;
    text-decoration:none;transition:opacity .15s;
}
.nav-logo-devtools:hover{opacity:.85;text-decoration:none}

/* Category strip */
.nav-cats{
    display:flex;align-items:center;gap:2px;
    flex:1;overflow-x:auto;scrollbar-width:none;padding:0 8px;
}
.nav-cats::-webkit-scrollbar{display:none}
.nav-cat-icon{font-size:13px;line-height:1}
.nav-cat-link{
    display:flex;align-items:center;gap:5px;
    padding:0 12px;height:56px;
    color:var(--muted);
    font-family:var(--font-mono);font-size:11px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;
    text-decoration:none;white-space:nowrap;flex-shrink:0;
    transition:color .15s;border-bottom:2px solid transparent;
}
.nav-cat-link:hover{color:var(--text);text-decoration:none}
.nav-cat-link--active{color:var(--accent);border-bottom-color:var(--accent)}

/* Right side */
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:8px}

/* Nav search */
.nav-search-wrap{position:relative}
.nav-search{
    font-family:var(--font-mono);font-size:12px;color:var(--text);
    background:rgba(255,255,255,.04);border:1px solid var(--border);
    border-radius:6px;padding:7px 32px 7px 32px;width:200px;
    outline:none;transition:border-color .2s,background .2s,width .2s;
}
.nav-search::placeholder{color:#444}
.nav-search:focus{border-color:rgba(232,244,28,.35);background:rgba(255,255,255,.06);width:260px}
.nav-search-icon{
    position:absolute;left:10px;top:50%;transform:translateY(-50%);
    color:#444;pointer-events:none;transition:color .2s;
}
.nav-search:focus ~ .nav-search-icon,
.nav-search-wrap:focus-within .nav-search-icon{color:#888}
.nav-search-clear{
    position:absolute;right:8px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:#444;cursor:pointer;
    font-size:14px;padding:2px 4px;border-radius:4px;
    opacity:0;pointer-events:none;transition:all .15s;
}
.nav-search-clear.visible{opacity:1;pointer-events:all}
.nav-search-clear:hover{color:var(--text)}

/* Donate */
.nav-donate{
    display:flex;align-items:center;gap:6px;
    padding:7px 14px;
    background:rgba(232,244,28,.08);border:1px solid rgba(232,244,28,.2);
    border-radius:6px;
    font-family:var(--font-mono);font-size:11px;font-weight:600;
    color:var(--accent);text-decoration:none;
    transition:all .2s;white-space:nowrap;flex-shrink:0;
}
.nav-donate:hover{background:rgba(232,244,28,.15);border-color:rgba(232,244,28,.4);text-decoration:none}

/* Mobile hamburger */
.nav-mobile-toggle{
    display:none;background:none;border:none;
    color:var(--muted);cursor:pointer;
    font-size:20px;padding:4px 8px;margin-left:8px;line-height:1;flex-shrink:0;
}

/* Tag pills on cards */
.tool-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tool-tag{
    font-family:var(--font-mono);font-size:9.5px;font-weight:600;
    padding:2px 7px;border-radius:100px;
    border:1px solid rgba(255,255,255,.08);
    color:var(--muted2);text-decoration:none;
    transition:all .15s;white-space:nowrap;line-height:1.4;
}
.tool-tag:hover{color:var(--accent);border-color:rgba(200,241,53,.3);background:rgba(200,241,53,.06);text-decoration:none}
.tool-tag.active{color:var(--accent);background:rgba(200,241,53,.1);border-color:rgba(200,241,53,.3)}

/* Card top row */
.tool-card-top{display:flex;align-items:center;gap:10px}
.tool-card-name{
    font-family:'JetBrains Mono','IBM Plex Mono',monospace;
    font-size:13px;font-weight:700;
    color:var(--text);flex:1;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    line-height:1.3;text-decoration:none;
}
.tool-card-name:hover{color:var(--accent);text-decoration:none}

/* ======== TOOL HERO (centered, below nav) ======== */
.tool-hero{
    text-align:center;
    padding:40px 20px 24px;
    border-bottom:1px solid var(--border);
}
.tool-hero-logo{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:clamp(26px,5vw,42px);font-weight:800;
    color:var(--text);text-decoration:none;
    margin-bottom:8px;
}
.tool-hero-bracket{color:var(--muted2)}
.tool-hero-name{color:var(--accent)}
.tool-hero-logo:hover .tool-hero-name{text-decoration:none}
.tool-tagline{font-family:var(--font-mono);font-size:15px;color:var(--muted)}

/* Lang pills (kept for JS compatibility — hidden, nav-lang-btn used instead) */
.lang-pills{display:none}

/* ======== FOOTER ======== */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 28px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--muted2);
}
.footer-inner { max-width: 900px; margin: 0 auto; }

.footer-donate-row {
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--muted);
}
.footer-donate-row a { color: var(--accent); margin-left: 6px; }
.footer-donate-row a:hover { text-decoration: underline; }

.footer-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px auto;
    max-width: 400px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
}
.footer-brand {
    font-family: var(--font-mono);
    font-weight: 800;
    color: var(--muted2);
}
.footer-bottom a { color: var(--muted2); }
.footer-bottom a:hover { color: var(--accent); }

/* ======== FLOAT DONATE ======== */
.jlv-float-donate {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(14,14,14,.92);
    border: 1px solid rgba(200,241,53,.2);
    border-radius: 100px;
    color: var(--accent);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(8px);
    transition: all .2s;
}
.jlv-float-donate:hover {
    background: rgba(200,241,53,.1);
    border-color: rgba(200,241,53,.5);
    text-decoration: none;
}

.nav-drop-link--all {
    color: var(--accent) !important;
    font-weight: 600;
    font-size: 12px;
}
.nav-drop-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
    pointer-events: none;
}

.nav-drop-link--all{
    color:var(--accent)!important;
    font-weight:600;font-size:12px;
    border-bottom:none;
}
.nav-drop-link--all:hover{background:rgba(200,241,53,.06)!important}

/* ======== RESPONSIVE ======== */
@media (max-width: 900px) {
    .nav-cats { display: none; }
    .nav-cats--open {
        display: flex !important; flex-direction: column;
        position: fixed; top: 56px; left: 0; right: 0;
        background: rgba(13,13,24,.97);
        border-bottom: 1px solid var(--border);
        padding: 8px 0; z-index: 99;
    }
    .nav-cats--open .nav-cat-link { padding: 12px 24px; border-bottom: none; font-size: 14px; }
    .nav-search-wrap { display: none; }
    .nav-donate .nav-donate-label { display: none; }
    .nav-donate { padding: 7px 10px; }
    .nav-mobile-toggle { display: block; }
}
@media (max-width: 600px) {
    .nav-inner { padding: 0 14px; }
    .tool-hero { padding: 28px 16px 18px; }
    .jlv-float-donate .float-label { display: none; }
    .jlv-float-donate { padding: 12px; border-radius: 50%; }
}