/* ============================================================================
   7NodeIT — Design System
   Tokens, resets, base typography, and shared primitives.
   Brand: navy ink + violet accent, light / premium / technical.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand — ink (navy) scale. Aligned to the 7NodeIT palette:
       #1A2F4B navy slate · #2C3E50 deep slate blue. */
    --ink-900: #0d1b30;
    --ink-800: #16233d;
    --ink-700: #1a2f4b; /* primary navy — "Navy Slate" */
    --ink-600: #2c3e50; /* "Deep Slate Blue" */
    --ink-500: #3a5170;

    /* Neutral slate (body + muted text) */
    --slate-700: #3f4f6a;
    --slate-600: #526080;
    --slate-500: #6b7897;
    --slate-400: #8b96b1;
    --slate-300: #aab3c9;

    /* Brand accent — "7node blue" #4A86E8. Primary accent across the site.
       (Token names kept as --violet-* so every section reblues at once; the
       values are the blue scale. Prefer the --blue-* aliases in new code.) */
    --violet-700: #2d67c9; /* darker blue — hover / strong */
    --violet-600: #4a86e8; /* primary accent — "7node blue" */
    --violet-500: #6fa0ee; /* lighter blue */
    --violet-200: #bcd3f7; /* light tint (borders, selection) */
    --violet-100: #dfeafc; /* very light tint */
    --violet-50: #f0f5fd;  /* faintest tint (surfaces) */

    --blue-700: var(--violet-700);
    --blue-600: var(--violet-600);
    --blue-500: var(--violet-500);
    --blue-200: var(--violet-200);
    --blue-100: var(--violet-100);
    --blue-50: var(--violet-50);

    /* Support accents from the palette — used sparingly for flow/AI motifs */
    --mint-400: #a0dde2;      /* "Lagoon Mint" */
    --mint-300: #a8dadc;      /* "Soft Mint" */
    --mint-100: #e2f4f5;
    --periwinkle-400: #9fa8da; /* "Muted Periwinkle" */
    --periwinkle-100: #e8eaf6;
    --steel-500: #56819b;      /* "Steel Blue" */
    --ash-300: #d6dade;        /* "Cool Ash Gray" */

    /* Legacy alias (kept for any lingering references) */
    --cyan-600: var(--mint-400);
    --cyan-100: var(--mint-100);

    /* Surfaces */
    --bg: #ffffff;
    --bg-subtle: #f8f9fd;
    --bg-muted: #f1f3fa;
    --bg-ink: var(--ink-800);

    /* Borders */
    --border: #e6e9f4;
    --border-strong: #d5dae9;

    /* Semantic */
    --text: var(--ink-700);
    --text-muted: var(--slate-600);
    --text-faint: var(--slate-500);
    --heading: var(--ink-800);
    --primary: var(--violet-600);
    --primary-hover: var(--violet-700);
    --on-primary: #ffffff;

    /* Gradients */
    --grad-brand: linear-gradient(135deg, var(--ink-700) 0%, var(--violet-600) 100%);
    --grad-accent: linear-gradient(135deg, var(--violet-600) 0%, var(--violet-500) 100%);
    --grad-surface: linear-gradient(180deg, #ffffff 0%, var(--bg-subtle) 100%);
    --grad-halo: radial-gradient(60% 60% at 50% 0%, rgba(74, 134, 232, 0.12) 0%, rgba(74, 134, 232, 0) 70%);

    /* Typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

    --text-xs: 0.8125rem; /* 13px */
    --text-sm: 0.9375rem; /* 15px */
    --text-base: 1.0625rem; /* 17px */
    --text-lg: 1.1875rem; /* 19px */
    --text-xl: 1.375rem; /* 22px */

    --lh-tight: 1.1;
    --lh-snug: 1.3;
    --lh-normal: 1.6;

    /* Spacing scale (rem) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 5rem;
    --space-16: 7rem;
    --section-y: clamp(4rem, 8vw, 7.5rem);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(16, 21, 38, 0.05);
    --shadow-sm: 0 1px 2px rgba(16, 21, 38, 0.04), 0 2px 6px rgba(16, 21, 38, 0.05);
    --shadow-md: 0 4px 14px rgba(16, 21, 38, 0.07), 0 2px 4px rgba(16, 21, 38, 0.04);
    --shadow-lg: 0 16px 40px rgba(16, 21, 38, 0.10), 0 4px 10px rgba(16, 21, 38, 0.04);
    --shadow-glow: 0 12px 44px rgba(74, 134, 232, 0.24);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition: 200ms var(--ease);
    --transition-slow: 400ms var(--ease);

    /* Layout */
    --container: 1200px;
    --container-narrow: 900px;
    --header-h: 72px;
}

/* ----------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: var(--lh-tight);
}

p {
    margin: 0;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--primary-hover);
}

img, svg {
    max-width: 100%;
    display: block;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--violet-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Blazor's FocusOnNavigate lands focus on the page <h1> (given tabindex="-1")
   after navigation, for screen-reader users. It's a non-interactive heading, so
   suppress the focus ring — otherwise a blue box flashes around the headline on
   load until the next click. Keyboard focus on real controls is unaffected. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

::selection {
    background: var(--violet-200);
    color: var(--ink-800);
}

/* ----------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--section-y);
    position: relative;
}

.section--subtle {
    background: var(--bg-subtle);
}

.section--muted {
    background: var(--bg-muted);
}

.section--ink {
    background: var(--bg-ink);
    color: #c5cbe0;
}

.section--ink h1,
.section--ink h2,
.section--ink h3 {
    color: #ffffff;
}

/* ----------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.display {
    font-size: clamp(2.5rem, 5.2vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 800;
}

.h1 {
    font-size: clamp(2.25rem, 4.4vw, 3.25rem);
    letter-spacing: -0.025em;
}

.h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    letter-spacing: -0.02em;
}

.h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.lead {
    font-size: clamp(1.125rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    color: var(--text-muted);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--violet-600);
}

.eyebrow::before {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: var(--violet-500);
}

.text-muted {
    color: var(--text-muted);
}

.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ----------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition),
        background-color var(--transition), border-color var(--transition), color var(--transition);
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn--primary {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-md);
}

.btn--primary:hover {
    background: var(--primary-hover);
    color: #fff;
    box-shadow: var(--shadow-glow);
}

.btn--secondary {
    background: #fff;
    color: var(--ink-700);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}

.btn--secondary:hover {
    color: var(--ink-800);
    border-color: var(--slate-400);
    box-shadow: var(--shadow-sm);
}

.btn--ghost {
    background: transparent;
    color: var(--ink-700);
}

.btn--ghost:hover {
    background: var(--violet-50);
    color: var(--violet-700);
}

.btn--on-ink {
    background: #fff;
    color: var(--ink-800);
}

.btn--on-ink:hover {
    color: var(--ink-900);
    background: #fff;
    box-shadow: var(--shadow-glow);
}

.btn--lg {
    min-height: 54px;
    padding: 0.9rem 1.9rem;
    font-size: var(--text-base);
}

.btn__icon {
    width: 1.1em;
    height: 1.1em;
    transition: transform var(--transition);
}

.btn:hover .btn__icon--arrow {
    transform: translateX(3px);
}

/* ----------------------------------------------------------------------------
   6. Cards & surfaces
   -------------------------------------------------------------------------- */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--violet-200);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--violet-50);
    border: 1px solid var(--violet-100);
    color: var(--violet-700);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--violet-50);
    border: 1px solid var(--violet-100);
    color: var(--violet-600);
    flex-shrink: 0;
}

.icon-badge svg {
    width: 1.5rem;
    height: 1.5rem;
}

.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Live "pulse" dot — shared signal primitive (hero, best-practices, etc.) */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue-600);
    box-shadow: 0 0 0 0 rgba(74, 134, 232, 0.5);
    animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 134, 232, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(74, 134, 232, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 134, 232, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pulse-dot { animation: none; }
}

/* ----------------------------------------------------------------------------
   7. Section headings block
   -------------------------------------------------------------------------- */
.section-head {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-10);
}

.section-head .eyebrow::before {
    display: none;
}

.section-head--start {
    text-align: left;
    align-items: flex-start;
    margin-inline: 0;
}

/* ----------------------------------------------------------------------------
   8. Motion — scroll reveal
   -------------------------------------------------------------------------- */
/* Only hide pre-reveal when JS is present (set by the flag in App.razor head),
   so content stays fully visible if scripting is unavailable. */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   9. Accessibility utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--ink-800);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.skip-link:focus {
    top: 1rem;
    color: #fff;
}

/* ----------------------------------------------------------------------------
   9b. Contact form
   These target elements rendered by Blazor's EditForm / InputText child
   components, which receive NO CSS-isolation scope attribute — so the styles
   must live here (global), not in ContactForm.razor.css.
   -------------------------------------------------------------------------- */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.35rem;
}

/* Honeypot: kept in the DOM (not display:none, which naive bots skip) but pushed
   off-screen and out of the tab order so real users never see or reach it. */
.contact-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.field label {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink-700);
}

.field__opt {
    font-weight: 400;
    color: var(--text-faint);
}

/* Filled inputs that lift to white on focus with a soft blue ring — clean,
   premium, and clearly interactive. */
.input {
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 1.05rem;
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--ink-800);
    background: var(--bg-subtle);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition),
        background-color var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.input:hover {
    border-color: var(--border-strong);
}

.input::placeholder {
    color: var(--slate-400);
}

.input:focus {
    outline: none;
    background: #fff;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 4px var(--blue-100);
}

.input--area {
    resize: vertical;
    min-height: 7rem;
    line-height: 1.55;
}

/* Blazor adds .invalid / .modified.valid to inputs */
.input.invalid {
    border-color: #e5645b;
    background: #fdf3f2;
}

.input.invalid:focus {
    border-color: #d0342c;
    box-shadow: 0 0 0 4px rgba(208, 52, 44, 0.14);
}

.contact-form .validation-message {
    font-size: var(--text-xs);
    color: #d0342c;
}

.contact-form__submit {
    margin-top: 0.25rem;
    width: 100%;
}

.contact-form__submit:disabled {
    opacity: 0.7;
    cursor: progress;
    transform: none;
}

.contact-form__error {
    padding: 0.75rem 1rem;
    background: #fdecea;
    border: 1px solid #f5c6c2;
    border-radius: var(--radius-md);
    color: #b3261e;
    font-size: var(--text-sm);
}

.contact-form__fineprint {
    font-size: var(--text-xs);
    color: var(--text-faint);
    text-align: center;
}

.contact-form__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2rem 1.5rem;
}

.contact-form__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--grad-accent);
    color: #fff;
    box-shadow: var(--shadow-glow);
}

.contact-form__success h3 {
    font-size: var(--text-xl);
}

.contact-form__success p {
    color: var(--text-muted);
    max-width: 24rem;
}


/* ----------------------------------------------------------------------------
   10. Framework — Blazor error UI + form validation (kept from template)
   -------------------------------------------------------------------------- */
.validation-message {
    color: #d0342c;
    font-size: var(--text-sm);
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius-md);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    color-scheme: light only;
    background: #fff;
    border-top: 3px solid var(--violet-600);
    box-shadow: var(--shadow-lg);
    display: none;
    left: 0;
    padding: 0.8rem 1.4rem;
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 1000;
    color: var(--ink-700);
    font-size: var(--text-sm);
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: 0.75rem;
    }

    #blazor-error-ui .reload {
        color: var(--violet-600);
        font-weight: 600;
    }