/* GridBuilding Documentation - Main CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Tailwind CSS - via CDN */
@import url('https://cdn.tailwindcss.com?plugins=forms,container-queries,typography');

/* Dark Code Block Theming - Applied directly */
.gb-content code {
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    background-color: rgba(30, 41, 59, 0.8);
    padding: 0.2em 0.4em;
    border-radius: 0.25em;
    color: #ffffff;
    border: 1px solid rgba(51, 65, 85, 0.6);
}

.gb-content pre,
.gb-content .highlight {
    background-color: #0d1117;
    padding: 1.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border: 1px solid #30363d;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    color: #ffffff;
}

.gb-content pre code {
    background-color: transparent;
    padding: 0;
    color: #ffffff;
    font-size: 0.9rem;
    border: none;
}

/* Override Hugo's chroma syntax highlighting */
.chroma pre {
    background: #0d1117 !important;
    padding: 1.25rem !important;
    margin: 0 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

.chroma code {
    background: transparent !important;
    color: #ffffff !important;
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* Force dark theme for all code blocks */
body pre[style],
main pre[style],
article pre[style],
.prose pre[style],
div.prose pre[style],
body .highlight pre[style] {
    background: #0d1117 !important;
    color: #ffffff !important;
    border-color: #30363d !important;
}

body .highlight,
main .highlight,
article .highlight,
.prose .highlight {
    background: #0d1117 !important;
    border: 1px solid #30363d;
    border-radius: 8px;
    margin: 1.5rem 0;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body .highlight pre,
main .highlight pre,
article .highlight pre,
.prose .highlight pre {
    background: transparent !important;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 1.25rem;
    color: #ffffff !important;
}

/* Inline code styling */
:not(pre) > code {
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    background: rgba(13, 17, 23, 0.9);
    color: #ffffff;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    border: 1px solid #30363d;
}

body {
    font-family: 'Inter', sans-serif;
}

/* Custom scrollbar for code blocks */
pre::-webkit-scrollbar {
    height: 8px;
}

pre::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* VS Code-style Code Block Styling */
.prose pre,
article pre,
div pre,
main pre {
    background: #0d1117 !important;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 1.25rem !important;
    margin: 1.5rem 0;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.prose code,
article code,
div code,
main code {
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    background: rgba(13, 17, 23, 0.9);
    color: #ffffff;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    border: 1px solid #30363d;
}

.prose pre code,
article pre code,
div pre code,
main pre code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: inherit !important;
}

/* Inline code styling */
:not(pre) > code {
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    background: rgba(13, 17, 23, 0.9);
    color: #ffffff;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    border: 1px solid #30363d;
}

/* Override Hugo's chroma syntax highlighting */
.chroma pre {
    background: #0d1117 !important;
    padding: 1.25rem !important;
    margin: 0 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

.chroma code {
    background: transparent !important;
    color: #ffffff !important;
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* Force dark theme for all code blocks */
body pre[style],
main pre[style],
article pre[style],
.prose pre[style],
div.prose pre[style],
body .highlight pre[style] {
    background: #0d1117 !important;
    color: #ffffff !important;
    border-color: #30363d !important;
}

body pre[style] code,
main pre[style] code,
article pre[style] code,
.prose pre[style] code,
div.prose pre[style] code,
body .highlight pre[style] code {
    background: transparent !important;
    color: inherit !important;
}

/* Highlight wrapper styling */
body .highlight,
main .highlight,
article .highlight,
.prose .highlight {
    background: #0d1117 !important;
    border: 1px solid #30363d;
    border-radius: 8px;
    margin: 1.5rem 0;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body .highlight pre,
main .highlight pre,
article .highlight pre,
.prose .highlight pre {
    background: transparent !important;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 1.25rem;
    color: #ffffff !important;
}

body .highlight table,
main .highlight table,
article .highlight table,
.prose .highlight table {
    background: transparent !important;
    border: none;
    margin: 0;
    border-radius: 0;
}

body .highlight td,
main .highlight td,
article .highlight td,
.prose .highlight td {
    background: transparent !important;
    border: none;
    padding: 0;
}

body .highlight td pre,
main .highlight td pre,
article .highlight td pre,
.prose .highlight td pre {
    background: transparent !important;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 1.25rem;
    color: #ffffff !important;
}

/* Godot-style syntax highlighting colors */
.prose .chroma .k,
article .chroma .k,
div .chroma .k,
main .chroma .k { color: #ff79c6; font-weight: normal; } /* Keywords - pink */
.prose .chroma .s,
article .chroma .s,
div .chroma .s,
main .chroma .s { color: #f1fa8c; } /* Strings - yellow */
.prose .chroma .mi,
article .chroma .mi,
div .chroma .mi,
main .chroma .mi { color: #bd93f9; } /* Numbers - purple */
.prose .chroma .c,
article .chroma .c,
div .chroma .c,
main .chroma .c { color: #6272a4; font-style: italic; } /* Comments - blue-gray */
.prose .chroma .nf,
article .chroma .nf,
div .chroma .nf,
main .chroma .nf { color: #50fa7b; font-weight: normal; } /* Functions - green */
.prose .chroma .o,
article .chroma .o,
div .chroma .o,
main .chroma .o { color: #ff79c6; } /* Operators - pink */
.prose .chroma .p,
article .chroma .p,
div .chroma .p,
main .chroma .p { color: #f8f8f2; } /* Punctuation - light white */

/* Additional syntax colors */
.prose .chroma .nb,
article .chroma .nb,
div .chroma .nb,
main .chroma .nb { color: #8be9fd; } /* Built-ins - cyan */
.prose .chroma .kc,
article .chroma .kc,
div .chroma .kc,
main .chroma .kc { color: #ff79c6; } /* Constants - pink */
.prose .chroma .kt,
article .chroma .kt,
div .chroma .kt,
main .chroma .kt { color: #8be9fd; } /* Types - cyan */
.prose .chroma .nc,
article .chroma .nc,
div .chroma .nc,
main .chroma .nc { color: #8be9fd; } /* Class names - cyan */

/* Dark theme specific adjustments */
.dark .prose code,
.dark article code,
.dark div code,
.dark main code,
.dark :not(pre) > code {
    background: rgba(13, 17, 23, 0.95);
    color: #ffffff;
    border-color: #30363d;
}

/* Remove any fancy animations or gradients */
.prose pre::before,
article pre::before,
div pre::before,
main pre::before {
    display: none;
}
.text-\[#ff7b72\] { color: #ff7b72; } /* keyword */
.text-\[#79c0ff\] { color: #79c0ff; } /* number */
.text-\[#d2a8ff\] { color: #d2a8ff; } /* function */
.text-\[#a5d6ff\] { color: #a5d6ff; } /* string */
.text-\[#8b949e\] { color: #8b949e; } /* comment */

/* Search bar styling */
.search-container {
    position: relative;
}

.search-gradient {
    position: absolute;
    inset: -0.25rem;
    background: linear-gradient(to right, #135bec, #9333ea);
    border-radius: 0.5rem;
    filter: blur(8px);
    opacity: 0.25;
    transition: opacity 1s, duration 200ms;
}

.search-container:hover .search-gradient {
    opacity: 0.5;
    transition-duration: 200ms;
}

/* Feature cards */
.feature-card {
    transition: all 0.2s ease;
}

.feature-card:hover {
    border-color: rgba(19, 91, 236, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Essential links */
.essential-link {
    transition: all 0.2s ease;
}

.essential-link:hover {
    border-color: #135bec;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Navigation */
.nav-link {
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #135bec;
}

/* Button styles */
.btn-primary {
    background: #135bec;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.25);
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-secondary {
    background: #e2e8f0;
    color: #1e293b;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.dark .btn-secondary {
    background: #282e39;
    color: white;
}

.btn-secondary:hover {
    background: #cbd5e1;
}

.dark .btn-secondary:hover {
    background: #3b4354;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .code-block {
        margin: 0 -1rem;
        border-radius: 0;
    }
}

/* STRONGEST OVERRIDES - Force dark theme for all inline styles */
body div pre[style*="background-color"],
main div pre[style*="background-color"],
article div pre[style*="background-color"],
.prose div pre[style*="background-color"],
.highlight div[style*="background-color"] {
    background: #0d1117 !important;
    color: #ffffff !important;
}

/* Override table cells inside highlight */
.highlight td pre[style],
.highlight td div[style] {
    background: #0d1117 !important;
    color: #ffffff !important;
}

/* Ultimate override for any pre with inline styles */
pre[style*="background-color: #fff"],
pre[style*="background-color:#fff"],
pre[style*="background-color: white"],
pre[style*="background-color:white"] {
    background: #0d1117 !important;
    color: #ffffff !important;
}

/* Fix only the darkest syntax colors that are hard to read */
span[style*="color: #1f2328"],
span[style*="color:#1f2328"] {
    color: #40e0d0 !important;
}

span[style*="color: #24292f"],
span[style*="color:#24292f"] {
    color: #40e0d0 !important;
}

span[style*="color: #1e1e1e"],
span[style*="color:#1e1e1e"] {
    color: #40e0d0 !important;
}

/* Brighten specific syntax elements with turquoise and green theme */
.chroma .nf, .chroma .nc { color: #40e0d0 !important; } /* Functions/Classes - light turquoise */
.chroma .k, .chroma .kd { color: #90ee90 !important; } /* Keywords - light green */
.chroma .s, .chroma .sa { color: #afeeee !important; } /* Strings - pale turquoise */
.chroma .mi, .chroma .mh { color: #98fb98 !important; } /* Numbers - pale green */
.chroma .c, .chroma .c1 { color: #8b949e !important; } /* Comments - gray */