/* Commodore 64 theme for Siders C64 group website */

:root {
    /* Commodore 64 color palette */
    --bs-primary: #0000AA;        /* C64 Blue */
    --bs-primary-rgb: 0, 0, 170;
    --bs-primary-dark: #000088;   /* Darker C64 Blue */
    --bs-secondary: #CC44CC;      /* C64 Purple */
    --bs-success: #00CC55;        /* C64 Green */
    --bs-info: #AAFFEE;           /* C64 Cyan */
    --bs-warning: #EEEE77;        /* C64 Yellow */
    --bs-danger: #880000;         /* C64 Red */
    --bs-light: #BBBBBB;          /* C64 Light Gray */
    --bs-dark: #333333;           /* C64 Dark Gray */
    --bs-link-color: #0088FF;     /* C64 Light Blue */
    --bs-link-hover-color: #0000AA;
    
    /* Additional C64 colors for custom use */
    --c64-orange: #DD8855;
    --c64-brown: #664400;
    --c64-pink: #FFAADD;
    --c64-black: #000000;
    --c64-white: #FFFFFF;
    
    /* Fonts (keeping current as requested) */
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-font-monospace: 'Source Code Pro', 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

/* C64-themed navbar */
.navbar-brand h1 {
    font-weight: 600;
    color: var(--c64-white);
}

.navbar-light.bg-light {
    background-color: var(--bs-primary) !important;
    border-bottom: 2px solid var(--c64-white);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--c64-white) !important;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--bs-link-color) !important;
    text-decoration: underline;
}

.navbar-light .navbar-toggler {
    border-color: var(--c64-white);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* C64-themed cards */
.card {
    border: 2px solid var(--bs-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: var(--c64-white);
}

.card-header {
    background-color: var(--bs-primary);
    color: var(--c64-white);
    border-bottom: 2px solid var(--bs-primary-dark);
    font-weight: 600;
}

.card-body {
    background-color: var(--c64-white);
}

/* C64-themed buttons */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary-dark);
}

.btn-primary:hover {
    background-color: var(--bs-primary-dark);
    border-color: var(--bs-primary);
}

.btn-success {
    background-color: var(--bs-success);
    border-color: #009944;
}

.btn-info {
    background-color: var(--bs-info);
    border-color: #88DDCC;
    color: var(--bs-dark);
}

.btn-warning {
    background-color: var(--bs-warning);
    border-color: #DDDD55;
    color: var(--bs-dark);
}

.btn-danger {
    background-color: var(--bs-danger);
    border-color: #660000;
}

/* Post content styling */
.post-content h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.post-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.post-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.post-content ul,
.post-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.post-content li {
    margin-bottom: 0.5rem;
}

.post-content pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.post-content code {
    background-color: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.875em;
}

/* C64-themed footer */
footer.border-top {
    border-top: 2px solid var(--bs-primary) !important;
    background-color: var(--bs-dark);
    color: var(--c64-white);
}

footer a {
    color: var(--bs-link-color) !important;
}

footer a:hover {
    color: var(--c64-white) !important;
    text-decoration: underline;
}

/* C64-themed links */
a {
    color: var(--bs-link-color);
}

a:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

/* C64-themed form elements */
.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 170, 0.25);
}

.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 170, 0.25);
}

/* C64-themed alerts */
.alert-primary {
    background-color: rgba(0, 0, 170, 0.1);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.alert-success {
    background-color: rgba(0, 204, 85, 0.1);
    border-color: var(--bs-success);
    color: #006633;
}

.alert-info {
    background-color: rgba(170, 255, 238, 0.2);
    border-color: var(--bs-info);
    color: #006666;
}

.alert-warning {
    background-color: rgba(238, 238, 119, 0.2);
    border-color: var(--bs-warning);
    color: #666600;
}

.alert-danger {
    background-color: rgba(136, 0, 0, 0.1);
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

/* Members area sidebar */
.bg-light {
    background-color: var(--bs-light) !important;
}

/* Subtle C64 scanline effect for header */
.navbar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    pointer-events: none;
}

/* C64-themed CodeMirror editor on c65gm page */
.CodeMirror {
    height: auto;
    min-height: 400px;
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    color: var(--c64-black);
    background: var(--c64-white);
}

.CodeMirror-gutters {
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e5;
}

.CodeMirror-linenumber {
    color: #999;
}

.CodeMirror-focused .CodeMirror-selected {
    background: rgba(0, 0, 170, 0.15);
}

.CodeMirror-selected {
    background: rgba(0, 0, 170, 0.08);
}

.CodeMirror-cursor {
    border-left: 2px solid var(--bs-primary);
}

.cm-s-c64gm .cm-comment {
    color: #666666;
    font-style: italic;
}

.cm-s-c64gm .cm-string {
    color: var(--bs-success);
}

.cm-s-c64gm .cm-number {
    color: var(--bs-secondary);
}

.cm-s-c64gm .cm-keyword {
    color: var(--bs-primary);
    font-weight: 600;
}

.cm-s-c64gm .cm-builtin {
    color: var(--c64-brown);
}

.cm-s-c64gm .cm-meta {
    color: var(--c64-orange);
    font-weight: 600;
}

.cm-s-c64gm .cm-attribute {
    color: #0066AA;
}

.cm-s-c64gm .cm-atom {
    color: var(--bs-secondary);
}

.CodeMirror-activeline-background {
    background: rgba(0, 0, 170, 0.04);
}

/* C65GM syntax highlighting for blog post code blocks */
pre.language-c65gm {
    background-color: #1e1e2e;
    border: 1px solid #2d2d44;
    border-radius: 6px;
    padding: 1rem;
    padding-top: 0.75rem;
    overflow-x: auto;
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    line-height: 1.6;
    position: relative;
    color: #cdd6f4;
    margin: 1.25rem 0;
}

pre.language-c65gm code {
    background: none;
    padding: 0;
    color: inherit;
    display: block;
}

pre.language-c65gm code .cm-keyword { color: #89b4fa; font-weight: bold; }
pre.language-c65gm code .cm-builtin { color: #cba6f7; }
pre.language-c65gm code .cm-number { color: #a6e3a1; }
pre.language-c65gm code .cm-comment { color: #6c7086; font-style: italic; }
pre.language-c65gm code .cm-string { color: #f9e2af; }
pre.language-c65gm code .cm-meta { color: #fab387; font-weight: bold; }
pre.language-c65gm code .cm-operator { color: #f38ba8; }
pre.language-c65gm code .cm-bracket { color: #94e2d5; }
pre.language-c65gm code .cm-variable { color: #cdd6f4; }
pre.language-c65gm code .cm-attribute { color: #74c7ec; }
pre.language-c65gm code .cm-atom { color: #cba6f7; }

/* Buttons for code blocks (copy + run) */
.code-copy-btn,
.code-run-btn {
    position: absolute;
    top: 0.4rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-family: var(--bs-font-sans-serif);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    line-height: 1.4;
}

.code-copy-btn {
    right: 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    color: #a6adc8;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.code-run-btn {
    right: 4rem;
    background: rgba(166, 227, 161, 0.08);
    color: #a6e3a1;
    border: 1px solid rgba(166, 227, 161, 0.25);
}

pre.language-c65gm:hover .code-copy-btn,
pre.language-c65gm:hover .code-run-btn {
    opacity: 1;
}

.code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #cdd6f4;
}

.code-run-btn:hover {
    background: rgba(166, 227, 161, 0.2);
    color: #a6e3a1;
}

.code-run-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Quill editor overrides for C64 theme */
.ql-toolbar {
    border: 1px solid var(--bs-primary) !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0;
}

.ql-container {
    border: 1px solid var(--bs-primary) !important;
    border-radius: 0 0 4px 4px;
}

.ql-editor {
    font-family: var(--bs-font-sans-serif);
}

.ql-editor pre.ql-syntax {
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 1rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
}

/* Post content general styling */
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .jumbotron {
        padding: 2rem 1rem !important;
    }
    
    .display-6 {
        font-size: 1.75rem;
    }
    
    .navbar-brand h1 {
        font-size: 1.1rem;
    }
}