/* =============================================================================
 * CmdVault Pages — Stylesheet  v3.0.0
 *
 * Design contract:
 *  - Inherits :root CSS variables from the CmdVault Theme (main.css).
 *  - Falls back to its own token values if the theme is not active (standalone).
 *  - NO inline <style> blocks. All rules are here, loaded via wp_enqueue_style.
 *  - Uses .cv2-* namespace. Does NOT override core WordPress or theme rules.
 * ============================================================================= */

/* --- Font import (only when not already loaded by theme) --- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Cairo:wght@400;600;700&display=swap');

/* --- Fallback tokens (theme's :root takes precedence if present) --- */
.cv2-root {
    --cv2-bg-void:        var(--bg-void,        #050508);
    --cv2-bg-deep:        var(--bg-deep,        #0a0a0f);
    --cv2-bg-base:        var(--bg-base,        #0f0f17);
    --cv2-bg-surface:     var(--bg-surface,     #14141f);
    --cv2-bg-elevated:    var(--bg-elevated,    #1a1a28);
    --cv2-bg-hover:       var(--bg-hover,       #2a2a3a);
    --cv2-accent-cyan:    var(--accent-cyan,    #00e5ff);
    --cv2-accent-magenta: var(--accent-magenta, #ff2d75);
    --cv2-accent-lime:    var(--accent-lime,    #39ff14);
    --cv2-accent-blue:    var(--accent-blue,    #448aff);
    --cv2-text-primary:   var(--text-primary,   #eeeef5);
    --cv2-text-secondary: var(--text-secondary, #b0b0c0);
    --cv2-text-muted:     var(--text-muted,     #7b7b90);
    --cv2-border-subtle:  var(--border-subtle,  rgba(255,255,255,0.09));
    --cv2-border-medium:  var(--border-medium,  rgba(255,255,255,0.15));
    --cv2-font-mono:      var(--font-mono,      'JetBrains Mono', monospace);
    --cv2-font-sans:      var(--font-arabic,    'Cairo', sans-serif);
    --cv2-radius-md:      var(--radius-md,      8px);
    --cv2-radius-lg:      var(--radius-lg,      12px);
    --cv2-radius-pill:    var(--radius-pill,    100px);
    --cv2-transition:     var(--transition-base, 250ms ease);
    --cv2-space-xs:       var(--space-xs,  4px);
    --cv2-space-sm:       var(--space-sm,  8px);
    --cv2-space-md:       var(--space-md,  12px);
    --cv2-space-lg:       var(--space-lg,  16px);
    --cv2-space-xl:       var(--space-xl,  24px);
    --cv2-space-2xl:      var(--space-2xl, 32px);

    /* Base */
    background-color: var(--cv2-bg-base);
    color: var(--cv2-text-secondary);
    font-family: var(--cv2-font-mono);
    line-height: 1.7;
    width: 100%;
}

/* RTL font switch */
.cv2-root[dir="rtl"] {
    font-family: var(--cv2-font-sans);
}
.cv2-root[dir="rtl"] code,
.cv2-root[dir="rtl"] pre,
.cv2-root[dir="rtl"] .cv2-code-block {
    font-family: var(--cv2-font-mono);
    direction: ltr;
    text-align: left;
}

/* --- Content area integration with CmdVault Theme --- */
.cv2-root .cv2-content-area {
    width: 100%;
}

/* ─── Shell ───────────────────────────────────────────────────────────────── */
.cv2-root .cv2-shell {
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--cv2-space-xl) var(--cv2-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--cv2-space-2xl);
}

/* ─── Page Header (cv2-specific, lives inside theme's #content) ──────────── */
.cv2-root .cv2-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--cv2-space-lg);
    border-bottom: 1px solid var(--cv2-border-subtle);
    flex-wrap: wrap;
    gap: var(--cv2-space-md);
}

.cv2-root .cv2-brand {
    display: flex;
    align-items: center;
    gap: var(--cv2-space-md);
    text-decoration: none;
}

.cv2-root .cv2-brand img {
    width: 36px;
    height: 36px;
    border-radius: var(--cv2-radius-md);
    background: var(--cv2-bg-surface);
    flex-shrink: 0;
}

.cv2-root .cv2-brand-name {
    font-family: var(--cv2-font-mono);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cv2-text-primary);
    text-decoration: none;
    transition: color var(--cv2-transition);
}
.cv2-root .cv2-brand-name:hover {
    color: var(--cv2-accent-cyan);
}

/* ─── Navigation Pills ───────────────────────────────────────────────────── */
#optool {
    color: #000 !important;
}
#optool:hover {
    color:var(--cv2-accent-cyan) !important;}

.cv2-root .cv2-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cv2-space-sm);
}

.cv2-root .cv2-pill {
    display: inline-block;
    padding: 6px 18px;
    border-radius: var(--cv2-radius-pill);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all var(--cv2-transition);
    border: 1px solid var(--cv2-accent-cyan);
    background-color: var(--cv2-accent-cyan);
    color: var(--cv2-bg-deep);
    white-space: nowrap;
}
.cv2-root .cv2-pill:hover {
    background-color: transparent;
    color: var(--cv2-accent-cyan);
}
.cv2-root .cv2-pill.secondary,
.cv2-root .cv2-pill.active {
    background-color: transparent;
    border-color: var(--cv2-border-medium);
    color: var(--cv2-text-secondary);
}
.cv2-root .cv2-pill.secondary:hover,
.cv2-root .cv2-pill.active {
    border-color: var(--cv2-accent-cyan);
    color: var(--cv2-accent-cyan);
}
.cv2-root .cv2-pill.active {
    background-color: rgba(0, 229, 255, 0.08);
}
.cv2-root .cv2-pill-tool {
    background-color: var(--cv2-accent-magenta);
    border-color: var(--cv2-accent-magenta);
    color: #fff;
}
.cv2-root .cv2-pill-tool:hover {
    background-color: transparent;
    color: var(--cv2-accent-magenta);
}

/* Lang toggle */
.cv2-root .cv2-lang-toggle {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--cv2-radius-pill);
    border: 1px solid var(--cv2-border-medium);
    color: var(--cv2-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--cv2-transition);
    margin-left: var(--cv2-space-sm);
}
.cv2-root .cv2-lang-toggle:hover {
    border-color: var(--cv2-accent-cyan);
    color: var(--cv2-accent-cyan);
}
.cv2-root[dir="rtl"] .cv2-lang-toggle {
    margin-left: 0;
    margin-right: var(--cv2-space-sm);
}

/* ─── Main Content & Typography ──────────────────────────────────────────── */
.cv2-root .cv2-main {
    display: flex;
    flex-direction: column;
    gap: var(--cv2-space-2xl);
}

.cv2-root .cv2-main h1,
.cv2-root .cv2-main h2,
.cv2-root .cv2-main h3 {
    font-family: var(--cv2-font-mono);
    color: var(--cv2-text-primary);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: var(--cv2-space-md);
}
.cv2-root .cv2-main h1 { font-size: 2.1rem; }
.cv2-root .cv2-main h2 {
    font-size: 1.5rem;
    margin-top: var(--cv2-space-2xl);
    padding-bottom: var(--cv2-space-sm);
    border-bottom: 1px solid var(--cv2-border-subtle);
}
.cv2-root .cv2-main h3 {
    font-size: 1.15rem;
    color: var(--cv2-accent-cyan);
}
.cv2-root .cv2-main p  { margin-top: 0; margin-bottom: var(--cv2-space-md); }
.cv2-root .cv2-main ul,
.cv2-root .cv2-main ol { padding-left: 1.5rem; margin-bottom: var(--cv2-space-md); }
.cv2-root[dir="rtl"] .cv2-main ul,
.cv2-root[dir="rtl"] .cv2-main ol { padding-left: 0; padding-right: 1.5rem; }
.cv2-root .cv2-main li { margin-bottom: var(--cv2-space-xs); }
.cv2-root .cv2-main a  { color: var(--cv2-accent-blue); text-decoration: none; }
.cv2-root .cv2-main a:hover { text-decoration: underline; }
.cv2-root .cv2-main code {
    font-family: var(--cv2-font-mono);
    background-color: var(--cv2-bg-elevated);
    color: var(--cv2-accent-cyan);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

/* ─── Muted subtitle ─────────────────────────────────────────────────────── */
.cv2-root .cv2-muted {
    color: var(--cv2-text-muted);
    font-size: 1.05rem;
    max-width: 640px;
}

/* ─── Hero Section ───────────────────────────────────────────────────────── */
.cv2-root .cv2-hero {
    text-align: center;
    padding: var(--cv2-space-2xl) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cv2-space-lg);
}
.cv2-root .cv2-hero h1 { margin-bottom: 0; }
.cv2-root .cv2-hero .cv2-muted { margin: 0 auto; }

.cv2-root .cv2-kicker {
    display: block;
    font-family: var(--cv2-font-mono);
    color: var(--cv2-accent-magenta);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.text-cyan { color: var(--cv2-accent-cyan); }

.cv2-hero-actions,
.cv2-cta-actions {
    display: flex;
    gap: var(--cv2-space-md);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--cv2-space-md);
}

/* ─── CTA Section ────────────────────────────────────────────────────────── */
.cv2-cta {
    text-align: center;
    padding: var(--cv2-space-2xl);
    background-color: var(--cv2-bg-surface);
    border: 1px solid var(--cv2-border-subtle);
    border-radius: var(--cv2-radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cv2-space-md);
}

/* ─── Cards Grid ─────────────────────────────────────────────────────────── */
.cv2-grid {
    padding: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--cv2-space-lg);
}

.cv2-card {
    background-color: var(--cv2-bg-surface);
    border: 1px solid var(--cv2-border-subtle);
    border-radius: var(--cv2-radius-lg);
    padding: var(--cv2-space-xl);
    transition: all var(--cv2-transition);
}
.cv2-card:hover {
    transform: translateY(-3px);
    border-color: var(--cv2-border-medium);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.cv2-card h3 { margin-top: 0; margin-bottom: var(--cv2-space-sm); }
.cv2-card p  { margin: 0; color: var(--cv2-text-secondary); }

/* ─── Docs Layout ────────────────────────────────────────────────────────── */
.cv2-root .cv2-doc-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--cv2-space-2xl);
    align-items: start;
}

.cv2-root .cv2-doc-toc {
    position: sticky;
    top: var(--cv2-space-xl);
    background-color: var(--cv2-bg-surface);
    border: 1px solid var(--cv2-border-subtle);
    border-radius: var(--cv2-radius-lg);
    padding: var(--cv2-space-lg);
}
.cv2-root .cv2-doc-toc h3 {
    font-family: var(--cv2-font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cv2-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--cv2-space-md);
}
.cv2-root .cv2-doc-toc ul { list-style: none; padding: 0; margin: 0; }
.cv2-root .cv2-doc-toc li { margin-bottom: var(--cv2-space-xs); }
.cv2-root .cv2-doc-toc a  {
    color: var(--cv2-text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    display: block;
    padding: 3px 0;
    transition: color var(--cv2-transition);
}
.cv2-root .cv2-doc-toc a:hover { color: var(--cv2-accent-cyan); }

.cv2-root .cv2-doc-content h2 { scroll-margin-top: 80px; }

/* ─── Code Blocks ────────────────────────────────────────────────────────── */
.cv2-root .cv2-code-block {
    background-color: var(--cv2-bg-deep);
    border: 1px solid var(--cv2-border-subtle);
    border-left: 3px solid var(--cv2-accent-cyan);
    border-radius: var(--cv2-radius-md);
    padding: var(--cv2-space-lg);
    margin: var(--cv2-space-md) 0;
    overflow-x: auto;
    font-family: var(--cv2-font-mono);
    font-size: 0.88rem;
    direction: ltr;
    text-align: left;
}
.cv2-root .cv2-code-block code {
    background: none;
    padding: 0;
    color: var(--cv2-accent-cyan);
    font-size: inherit;
}
.cv2-root .cv2-code-block pre {
    margin: var(--cv2-space-sm) 0 0;
    color: var(--cv2-text-primary);
    white-space: pre;
    overflow-x: auto;
}
.cv2-root .cv2-code-response { border-left-color: var(--cv2-accent-lime); }
.cv2-root .cv2-code-response code { color: var(--cv2-accent-lime); }

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.cv2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: var(--cv2-space-md) 0;
}
.cv2-table th {
    text-align: left;
    padding: var(--cv2-space-sm) var(--cv2-space-md);
    background-color: var(--cv2-bg-elevated);
    color: var(--cv2-text-primary);
    font-weight: 600;
    border-bottom: 1px solid var(--cv2-border-medium);
}
.cv2-root[dir="rtl"] .cv2-table th { text-align: right; }
.cv2-table td {
    padding: var(--cv2-space-sm) var(--cv2-space-md);
    border-bottom: 1px solid var(--cv2-border-subtle);
    color: var(--cv2-text-secondary);
    vertical-align: top;
}
.cv2-table tr:last-child td { border-bottom: none; }
.cv2-table tr:hover td { background-color: var(--cv2-bg-hover); }

/* ─── Notices ─────────────────────────────────────────────────────────────── */
.cv2-notice {
    padding: var(--cv2-space-md) var(--cv2-space-lg);
    border-radius: var(--cv2-radius-md);
    border-left: 4px solid var(--cv2-accent-cyan);
    background-color: rgba(0, 229, 255, 0.06);
    color: var(--cv2-text-secondary);
    font-size: 0.9rem;
    margin: var(--cv2-space-md) 0;
}
.cv2-notice-warn {
    border-left-color: var(--cv2-accent-magenta);
    background-color: rgba(255, 45, 117, 0.06);
}
.cv2-root[dir="rtl"] .cv2-notice,
.cv2-root[dir="rtl"] .cv2-notice-warn {
    border-left: none;
    border-right: 4px solid var(--cv2-accent-cyan);
}
.cv2-root[dir="rtl"] .cv2-notice-warn {
    border-right-color: var(--cv2-accent-magenta);
}
.cv2-notice strong { color: var(--cv2-text-primary); }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.cv2-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cv2-space-sm);
    padding-top: var(--cv2-space-xl);
    border-top: 1px solid var(--cv2-border-subtle);
    color: var(--cv2-text-muted);
    font-size: 0.85rem;
    text-align: center;
}
.cv2-footer img {
    width: 20px;
    height: 20px;
    opacity: 0.5;
    filter: drop-shadow(0 0 6px var(--cv2-accent-cyan));
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 800px) {
    .cv2-root .cv2-doc-layout {
        grid-template-columns: 1fr;
    }
    .cv2-root .cv2-doc-toc {
        position: static;
    }
    .cv2-root .cv2-shell {
        padding: var(--cv2-space-md);
    }
    .cv2-root .cv2-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .cv2-root .cv2-nav {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .cv2-root .cv2-hero-actions,
    .cv2-root .cv2-cta-actions {
        flex-direction: column;
        align-items: center;
    }
    .cv2-root .cv2-main h1 { font-size: 1.6rem; }
    .cv2-root .cv2-main h2 { font-size: 1.25rem; }
    .cv2-root .cv2-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Theme integration: hide theme's own header on cv2 pages if needed ───
   The CmdVault Theme already renders its site-header above #content.
   The cv2-header inside the shell is the *page-level* nav, not a duplicate.
   Both coexist intentionally — site nav + page-level CmdVault nav.
   If you want to hide the theme site-header on CmdVault pages, add this
   to the theme's functions.php or a custom CSS block in the customizer:

   .cmdvault-page #masthead { display: none; }
─────────────────────────────────────────────────────────────────────────── */