/* ==========================================================================
   site.css — shared design system for nethrawedage.io
   Loaded after main.css (template) and before the page file in css/pages/.
   Change brand colours, fonts and spacing here, not in the page files.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --accent:         #BFF747;
    --accent-rgb:     191, 247, 71;
    --accent-dim:     rgba(191, 247, 71, .10);
    --accent-border:  rgba(191, 247, 71, .22);
    --on-accent:      #060606;

    /* Surfaces (darkest → lightest) */
    --bg-base:             #060606;
    --surface:        #0a0a0a;
    --surface-2:      #0d0d0d;
    --surface-3:      #121212;
    --line:           rgba(193, 193, 193, .10);
    --line-soft:    rgba(193, 193, 193, .07);

    /* Text — muted and dim both meet WCAG AA (4.5:1) on every surface above */
    --text-strong:    #FFFFFF;
    --text:           #C1C1C1;
    --text-muted:     #9A9A9A;
    --text-dim:       #808080;

    /* Typography */
    --font-display:   "Big Shoulders Display", "Arial Narrow", sans-serif;
    --font-body:      "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-xs:   12px;
    --fs-sm:   14px;
    --fs-base: 16px;
    --fs-lg:   18px;
    --fs-h4:   clamp(20px, 2.2vw, 24px);
    --fs-h3:   clamp(24px, 3vw, 32px);
    --fs-h2:   clamp(34px, 5vw, 56px);
    --fs-h1:   clamp(44px, 7.5vw, 96px);

    /* Spacing & shape */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
    --section-y: clamp(72px, 10vw, 120px);
    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 20px;
    --radius-pill: 100px;

    /* Motion */
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:  .2s;
    --dur:       .35s;
    --dur-reveal: .55s;

    /* Legacy aliases — older page files use these names. New code should use
       the tokens above. */
    --ease:        var(--ease-expo);
    --acc-dim:     var(--accent-dim);
    --acc-bdr:     var(--accent-border);
    --acc-border:  var(--accent-border);
    --bg2:         var(--surface);
    --bg3:         var(--surface-2);
    --bdr:         var(--line);
    --bdr2:        var(--line-soft);
    --c-border:    var(--line);
    --txt:         var(--text);
    --txt-m:       var(--text-muted);
    --txt-muted:   var(--text-muted);
    --txt-d:       var(--text-dim);
    --txt-dim:     var(--text-dim);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html { scroll-padding-top: 96px; }
body { font-family: var(--font-body); }
::selection { background: var(--accent); color: var(--on-accent); }

/* Template buttons asked for "Manrope", which is never loaded */
.theme-btn { font-family: var(--font-body); }

/* Sticky header entrance (keyframes used to come from animate.css) */
@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   3. Accessibility
   -------------------------------------------------------------------------- */
.skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 100000;
    background: var(--accent); color: var(--on-accent);
    padding: 10px 18px; border-radius: var(--radius-sm);
    font-weight: 700; font-size: var(--fs-sm);
    transform: translateY(-200%); transition: transform var(--dur-fast);
}
.skip-link:focus { transform: none; color: var(--on-accent); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 3px;
    border-radius: 4px;
}

.visually-hidden-focusable:not(:focus) {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Shared components
   -------------------------------------------------------------------------- */

/* Footer call to action (replaces the scrolling "Let's work together" banner) */
.footer-cta {
    text-align: center;
    padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 64px);
    border-bottom: 1px solid var(--line);
    position: relative; z-index: 1;
}
.footer-cta h2 {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(40px, 7vw, 88px); line-height: .95;
    color: var(--text-strong); text-transform: none; margin-bottom: 26px;
}
.footer-cta h2 span { color: var(--accent); }

/* Testimonials — static cards instead of an auto-playing slider */
.testimonial-list { display: grid; gap: 20px; }
.testimonial-list .testimonial-box-items { margin: 0; }

/* --------------------------------------------------------------------------
   5. Reduced motion — stop decorative animation, show revealed content
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .nw-reveal, .nw-reveal-fade, .nw-stagger > *,
    .ab-reveal, .ab-reveal-l, .ab-stagger > *,
    .sv-reveal, .sv-reveal-r, .sv-stagger > *,
    .ct-reveal, .ct-reveal-r, .ct-stagger > *,
    .pf-r, .nd-r {
        opacity: 1 !important; transform: none !important;
    }
}

/* Header menu toggle is a real <button> now (keyboard accessible) */
button.sidebar__toggle { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; line-height: 1; cursor: pointer; }
.offcanvas__close button { background: none; border: 0; color: inherit; }

/* Email addresses must not be auto-capitalised by template heading/link styles */
a[href^="mailto:"] { text-transform: none !important; }

/* --------------------------------------------------------------------------
   6. Code blocks in writeups (toolbar + syntax colours, see js/code.js)
   -------------------------------------------------------------------------- */
.code-block {
    margin: 20px 0 24px; border: 1px solid var(--line); border-radius: 12px;
    background: #08090a; overflow: hidden;
}
.code-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.025);
}
.code-lang {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-muted);
}
.code-copy {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--line); border-radius: 6px;
    color: var(--text); font-size: 12px; font-weight: 600; padding: 5px 10px; cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}
.code-copy:hover { border-color: var(--accent-border); color: var(--accent); }
.code-copy.is-copied { border-color: var(--accent); color: var(--accent); }
.code-block pre {
    margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; padding: 18px 20px !important;
    overflow-x: auto; font-size: 13px; line-height: 1.7;
}
.code-block pre::before { content: none !important; }
.code-block pre code {
    font-family: var(--font-mono) !important; font-size: 13px !important;
    color: #d4d8de !important; background: none !important; border: 0 !important; padding: 0 !important;
    white-space: pre;
}
.tok-c  { color: #7d8590; font-style: italic; }   /* comments */
.tok-s  { color: #a5d6a7; }                         /* strings */
.tok-k  { color: #c792ea; }                         /* keywords */
.tok-fn { color: var(--accent); font-weight: 600; } /* commands / cmdlets */
.tok-f  { color: #82aaff; }                         /* flags */
.tok-v  { color: #ffcb6b; }                         /* variables */
.tok-n  { color: #f78c6c; }                         /* numbers, IPs */

/* --------------------------------------------------------------------------
   7. Command palette (Ctrl/⌘ + K) — see js/palette.js
   -------------------------------------------------------------------------- */
.cmdk-trigger {
    display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; height: 32px;
    background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px;
    color: var(--text-muted); padding: 0 8px; font-size: 12px; line-height: 1; cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}
.cmdk-trigger:hover { border-color: var(--accent-border); color: var(--accent); }
.cmdk-trigger kbd, .cmdk kbd {
    font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
    background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px;
    box-shadow: none;
}
.cmdk-trigger kbd { font-size: 9.5px; padding: 1px 4px; }
@media (max-width: 767px) { .cmdk-trigger kbd { display: none; } .cmdk-trigger { margin-right: 10px; width: 32px; padding: 0; justify-content: center; } }

html.cmdk-open { overflow: hidden; }
.cmdk { position: fixed; inset: 0; z-index: 100001; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.cmdk[hidden] { display: none; }
.cmdk-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.cmdk-panel {
    position: relative; width: 100%; max-width: 640px; max-height: 70vh;
    display: flex; flex-direction: column;
    background: #0b0c0b; border: 1px solid var(--accent-border); border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--accent-rgb),.05);
    overflow: hidden; animation: cmdkIn .18s var(--ease-expo);
}
@keyframes cmdkIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.cmdk-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cmdk-prompt { font-family: var(--font-mono); color: var(--accent); font-size: 18px; }
.cmdk-input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: none !important;
    color: var(--text-strong); font-family: var(--font-mono); font-size: 16px;
}
.cmdk-input::placeholder { color: var(--text-dim); }
.cmdk-esc { background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 6px; color: var(--text-muted); font-size: 11px; padding: 4px 8px; cursor: pointer; }
.cmdk-term {
    margin: 0; padding: 14px 18px; max-height: 220px; overflow: auto;
    font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: #cfe8a0;
    background: rgba(var(--accent-rgb),.04); border-bottom: 1px solid var(--line); white-space: pre-wrap;
}
.cmdk-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.cmdk-group { padding: 10px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.cmdk-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
    color: var(--text); font-size: 15px; cursor: pointer;
}
.cmdk-item i { width: 18px; text-align: center; color: var(--text-muted); }
.cmdk-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item small { font-size: 12px; color: var(--text-dim); }
.cmdk-item.is-active { background: rgba(var(--accent-rgb),.1); color: var(--text-strong); }
.cmdk-item.is-active i { color: var(--accent); }
.cmdk-item code { font-family: var(--font-mono); color: var(--accent); background: none; padding: 0; }
.cmdk-empty { padding: 22px 12px; color: var(--text-muted); font-size: 14px; text-align: center; }
.cmdk-empty code { color: var(--accent); }
.cmdk-foot { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-dim); }
.cmdk-foot kbd { margin-right: 3px; }
@media (max-width: 575px) { .cmdk { padding-top: 8vh; } .cmdk-foot { display: none; } }