/**
 * DevWharf Base Styles v5.0
 * CSS Variables, Typography, Core Styles
 * New design: clean, modern, varied typography
 */

/* === CSS Custom Properties === */
:root {
    /* Core backgrounds */
    --dw-bg-primary: #08080c;
    --dw-bg-secondary: #0c0c14;
    --dw-bg-tertiary: #12121e;
    --dw-bg-surface: rgba(12, 12, 20, 0.9);

    /* Text colors */
    --dw-text-primary: #f0f0f0;
    --dw-text-secondary: #a0a0b0;
    --dw-text-muted: #606070;

    /* Accent colors */
    --dw-accent-indigo: #6366f1;
    --dw-accent-violet: #8b5cf6;
    --dw-accent-cyan: #06b6d4;
    --dw-accent-rose: #f43f5e;
    --dw-accent-amber: #f59e0b;
    --dw-accent-emerald: #10b981;
    --dw-accent-blue: #3b82f6;

    /* Borders and shadows */
    --dw-border: rgba(99, 102, 241, 0.15);
    --dw-border-active: rgba(99, 102, 241, 0.4);
    --dw-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    --dw-shadow-glow: 0 0 40px rgba(99, 102, 241, 0.12);

    /* Typography — distinctive fonts */
    --dw-font-display: 'Sansita', 'Arial Black', sans-serif;
    --dw-font-body: 'Spinnaker', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --dw-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ===================================================================
       LEGACY GITS-OS Variables — required by window.css, taskbar.css,
       effects.css, comments.css (terminal UI on blog/my-sites pages)
       =================================================================== */
    --gits-bg-primary: #08080c;
    --gits-bg-secondary: #0c0c14;
    --gits-bg-tertiary: #12121e;
    --gits-bg-window: rgba(12, 12, 20, 0.95);
    --gits-bg-titlebar: linear-gradient(180deg, #1a1a2e 0%, #10101c 100%);
    --gits-text-primary: #f0f0f0;
    --gits-text-secondary: #a0a0b0;
    --gits-text-muted: #606070;
    --gits-accent-primary: #6366f1;
    --gits-accent-secondary: #8b5cf6;
    --gits-accent-cyan: #06b6d4;
    --gits-accent-glow: rgba(99, 102, 241, 0.4);
    --gits-neon-red: #f43f5e;
    --gits-neon-orange: #f59e0b;
    --gits-neon-blue: #3b82f6;
    --gits-neon-purple: #8b5cf6;
    --gits-border: rgba(99, 102, 241, 0.15);
    --gits-border-active: rgba(99, 102, 241, 0.4);
    --gits-shadow: 0 0 20px rgba(99, 102, 241, 0.1);
    --gits-shadow-strong: 0 0 40px rgba(99, 102, 241, 0.2);
    --gits-window-border: 1px solid rgba(99, 102, 241, 0.2);
    --gits-window-radius: 8px;
    --gits-titlebar-height: 32px;
    --gits-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --gits-font-system: 'Spinnaker', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Section backgrounds */
    --dw-section-hero: #08080c;
    --dw-section-services: #0a0f1a;
    --dw-section-vision: #0d0a1a;
    --dw-section-methodology: #0a1018;
    --dw-section-tech: #100a18;
    --dw-section-faq: #0c1018;
    --dw-section-cta: #12081a;
    --dw-section-contact: #08100c;

    /* Spacing */
    --dw-section-gap: clamp(80px, 15vh, 160px);
    --dw-content-width: min(94vw, 1800px);
}

/* === Box-Sizing Reset === */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--dw-bg-primary) !important;
    scroll-timeline: --page-scroll block;
}

/* ── Scroll Progress Bar ────────────────────────────────────── */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10001;
    transform-origin: left;
    background: linear-gradient(90deg,
        var(--dw-accent-indigo, #6366f1),
        var(--dw-accent-violet, #8b5cf6),
        var(--dw-accent-cyan, #06b6d4),
        var(--dw-accent-rose, #f43f5e));
    animation: dw-scroll-progress linear both;
    animation-timeline: --page-scroll;
    pointer-events: none;
}

@keyframes dw-scroll-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ── View Transitions API ───────────────────────────────────── */
::view-transition-old(root) {
    animation: dw-vt-out 0.25s ease-in both;
}

::view-transition-new(root) {
    animation: dw-vt-in 0.35s ease-out both;
}

@keyframes dw-vt-out {
    from { opacity: 1; filter: blur(0); }
    to   { opacity: 0; filter: blur(4px); }
}

@keyframes dw-vt-in {
    from { opacity: 0; filter: blur(4px); }
    to   { opacity: 1; filter: blur(0); }
}

body {
    background: transparent !important;
    color: var(--dw-text-primary);
    font-family: var(--dw-font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Main content stacking */
.wp-site-blocks {
    position: relative;
    z-index: 1;
}

/* CRITICAL: Ensure header is NEVER hidden by gitsFadeIn or other animations */
.dw-header,
header.dw-header,
.wp-site-blocks > header,
.wp-site-blocks > .wp-block-template-part:first-child {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

/* Remove WP wrapper spacing */
html, body, .wp-site-blocks, .wp-site-blocks > * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.wp-site-blocks > header:first-child,
.wp-site-blocks > .wp-block-template-part:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

:where(body) {
    margin: 0 !important;
    padding: 0 !important;
}

.is-root-container, .wp-site-blocks {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

main.wp-block-group {
    margin-top: 0 !important;
}

.wp-site-blocks > :first-child {
    margin-block-start: 0 !important;
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--dw-font-display);
    color: var(--dw-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }

p, li {
    font-family: var(--dw-font-body);
    color: var(--dw-text-secondary);
    line-height: 1.85;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Post content */
.wp-block-post-content p {
    font-family: var(--dw-font-body);
    color: var(--dw-text-secondary);
    line-height: 1.9;
    margin-bottom: 1.5em;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.wp-block-post-content h2 {
    color: var(--dw-text-primary);
    margin-top: 2em;
    margin-bottom: 1em;
}

.wp-block-post-content strong {
    color: var(--dw-text-primary);
}

.wp-block-post-content code {
    background: rgba(99, 102, 241, 0.08);
    color: var(--dw-accent-cyan);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--dw-font-mono);
    font-size: 0.9em;
}

/* Links */
a {
    color: var(--dw-accent-cyan);
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover {
    color: var(--dw-accent-indigo);
}

/* Lists */
.wp-block-post-content ul, .wp-block-post-content ol {
    padding-left: 20px;
}

.wp-block-post-content li {
    color: var(--dw-text-secondary);
    margin-bottom: 8px;
}

.wp-block-post-content li::marker {
    color: var(--dw-accent-indigo);
}

/* Separator */
.wp-block-separator, hr {
    border-color: var(--dw-border) !important;
    opacity: 1 !important;
}

/* Images */
.wp-block-image img {
    border-radius: 8px;
    border: 1px solid var(--dw-border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-image img:hover {
    border-color: var(--dw-border-active);
    box-shadow: var(--dw-shadow-glow);
}

/* Tables */
table, .wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.95rem;
}

table th, .wp-block-table th {
    background: var(--dw-bg-tertiary) !important;
    color: var(--dw-text-primary) !important;
    border: 1px solid var(--dw-border) !important;
    padding: 12px 16px !important;
    text-align: left;
    font-weight: 600;
    font-family: var(--dw-font-display);
}

table td, .wp-block-table td {
    background: rgba(12, 12, 20, 0.5) !important;
    color: var(--dw-text-secondary) !important;
    border: 1px solid var(--dw-border) !important;
    padding: 12px 16px !important;
}

table tr:hover td {
    background: rgba(99, 102, 241, 0.04) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--dw-bg-secondary); }
::-webkit-scrollbar-thumb {
    background: var(--dw-bg-tertiary);
    border-radius: 4px;
    border: 1px solid var(--dw-border);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.3);
}

/* Selection */
::selection {
    background: rgba(99, 102, 241, 0.3);
    color: #fff;
}

/* === Material Symbols Outlined — global vertical alignment fix ===
   Material Symbols font renders with extra descender space that makes
   glyphs sit visually lower than adjacent text. Pull up by 5px so
   icons are flush with heading/body text on all pages. The landing
   page link icons (.dw-link-icon) override this with their own top. */
.material-symbols-outlined {
    vertical-align: middle !important;
    position: relative;
    top: -5px;
    line-height: 1;
}