/* General Styling */

body { margin: 0; font-family: 'Inter', Arial, sans-serif; transition: background 0.3s, color 0.3s; }

.dark { background: #121212; color: #f3f4f6; }

.light { background: #f9fafb; color: #1f2937; }



/* --- HEADER (Desktop Default) --- */

.header { 

    display: flex; 

    justify-content: space-between; 

    align-items: center; 

    padding: 1rem 2rem; 

    font-size: 1.5rem; 

    font-weight: bold; 

    background: #059669; 

    color: white; 

    box-shadow: 0 2px 6px rgba(0,0,0,0.15); 

}



/* Navigation Links Container (Default: Desktop) */

.nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #047857;
    padding: 10px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.nav-links.active {
    display: flex;
}

/* Anchor styling (replaces button styling) */
.nav-links a {
    width: 100%;
    text-align: left;
    padding: 10px 20px;
    margin: 0;
    border-radius: 0;
    font-size: 1rem;
    text-decoration: none;
    background: none;
    color: #ffffff;  /* ✅ White text for green background */
    cursor: pointer;
    transition: background 0.2s;
}

.nav-links a:hover {
    background: rgba(255,255,255,0.1);
}



/* Hamburger Icon (Default: Hidden on Desktop) */

#menuToggle {

    display: none;

}



.header button { 

    background: transparent; 

    border: none; 

    color: white; 

    font-size: 1rem; 

    cursor: pointer; 

    padding: 0.3rem 0.6rem; 

    border-radius: 6px; 

    transition: 0.2s; 

}

.header button:hover { background: rgba(255,255,255,0.2); }



/* Content sections */

.content {

    max-width: 900px;

    margin: 1.5rem auto;

    padding: 1rem 2rem;

    line-height: 1.6;

    text-align: left;

}

.content h2 { color: #059669; margin-bottom: 0.8rem; border-bottom: 2px solid #059669; padding-bottom: 5px;}

.content h3 { margin-top: 1.5rem; color: #047857; }

.content p, .content ul, .content ol { margin-bottom: 1rem; }

.content pre { background: #f3f4f6; padding: 0.8rem; border-radius: 6px; overflow-x: auto; font-family: monospace; }

.dark .content pre { background: #1e1e1e; color: #f3f4f6; }



/* Ad Container */

.ad-container { text-align: center; margin: 1rem 0; }



/* Container (Default: Horizontal for Desktop) */

.container { 

    display: flex; 

    gap: 1.5rem; 

    padding: 1.5rem; 

    flex-wrap: wrap; 

}



/* Card panels */

.editor-container { flex: 1; display: flex; flex-direction: column; background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; min-width: 300px; }

.dark .editor-container { background: #1e1e1e; }



/* FIX 1: Explicit height and flex alignment for consistent headers */

.editor-header { 

    background: #047857; 

    color: white; 

    padding: 0.6rem 1rem; 

    font-weight: 600; 

    display: flex; 

    align-items: center; 

    justify-content: space-between; 

    height: 44px; 

    box-sizing: border-box; 

}

.editor-header button { margin-left: 0.5rem; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0 0.6rem; }



/* Increased height to 750px */

.CodeMirror { height: 750px; border-top: 1px solid #ccc; font-size: 14px; }



/* FIX 2 & 3: Consistency for gutters/line numbers */

.CodeMirror-wrap .CodeMirror-gutters {

    min-width: 45px !important; 

    padding-right: 5px;

    box-sizing: content-box;

}

.CodeMirror, .CodeMirror-scroll {

    height: 100%;

}

.CodeMirror-scroll {

    padding-bottom: 0 !important; 

}



/* Buttons */

.buttons { margin: 1.5rem; text-align: center; }

button.action { padding: 0.7rem 1.4rem; border: none; border-radius: 8px; background: #059669; color: white; cursor: pointer; font-weight: 600; font-size: 15px; transition: 0.2s; }

button.action:hover { background: #047857; }



/* Copy button */

.copy-btn { background: #f3f4f6; color: #059669; border: 1px solid #059669; padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 13px; cursor: pointer; transition: 0.2s; }

.copy-btn:hover { background: #059669; color: white; }



/* Toast notifications (Positioned Left) */

.toast {

    position: fixed;

    top: 20px;

    left: 20px;

    min-width: 400px;

    max-width: 1000px;

    padding: 1rem;

    border-radius: 8px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0.5rem;

    font-weight: 500;

    box-shadow: 0 2px 12px rgba(0,0,0,0.2);

    color: white;

    opacity: 0;

    transform: translateY(-20px);

    transition: opacity 0.3s, transform 0.3s;

    z-index: 9999;

    white-space: pre-wrap;

    word-break: break-word;

}

.toast > span { flex-grow: 1; }

.toast.show { opacity: 1; transform: translateY(0); }

.toast.success {

    background: #059669;

    color: white;

}



.toast.error {

    background: #ffffff;

    color: #dc2626;

    border: 2px solid #dc2626;

    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);

}



/* Remove ugly outline */

.CodeMirror-focused { outline: none !important; }



/* 🎨 FIXED SYNTAX COLORING PALETTE FOR LIGHT MODE (Default) */

.CodeMirror { color: #111; } 

.CodeMirror .cm-string { color: #9333ea; } /* Deep Violet for Strings */

.CodeMirror .cm-number { color: #b45309; } /* Burnt Orange/Brown for Numbers */

.CodeMirror .cm-atom { color: #d97706; } /* Gold/Yellow-Orange for true, false, null */

.CodeMirror .cm-bracket { color: #111; } /* Brackets */





/* 🎨 FIXED SYNTAX COLORING PALETTE FOR DARK MODE (Explicitly override all colors) */

.dark .CodeMirror { 

    background-color: #1e1e1e !important; /* Match editor background */

    color: #f3f4f6 !important; /* Main text color */

}

.dark .CodeMirror .cm-string { color: #d8b4fe !important; } /* Lighter Violet for Dark Mode Strings */

.dark .CodeMirror .cm-number { color: #f97316 !important; } /* Bright Orange for Dark Mode Numbers */

.dark .CodeMirror .cm-atom { color: #fbbf24 !important; } /* Bright Yellow/Gold for Dark Mode Atoms */

.dark .CodeMirror .cm-bracket { color: #a1a1aa !important; } /* Light Gray for Brackets */

.dark .CodeMirror-gutters { background-color: #1e1e1e !important; } /* Match gutter background */

.dark .CodeMirror-linenumber { color: #6b7280 !important; } /* Line number color */





/* --- RESPONSIVENESS (Mobile Styles) --- */

@media (min-width: 769px) {
    #menuToggle {
        display: none; /* hide hamburger */
    }

    .nav-links {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap; /* prevent wrapping */
        gap: 20px;         /* space between items */
        background: transparent;
        padding: 0;
        box-shadow: none;
        width: auto;
        align-items: center;
    }

    .nav-links a {
    /* auto width, don’t stretch */
        padding: 0;          /* remove extra padding if needed */
        color: #ffffff;
        text-decoration: none;
        white-space: nowrap; /* prevent wrapping of text */
    }

    .nav-links a:hover {
        text-decoration: underline;
        background: none;
    }
}

@media (max-width: 768px) {

    

    /* Adjust padding for smaller screens */

    .header {

        padding: 0.8rem 1rem;

        flex-wrap: wrap; /* Allows nav to drop below title */

    }

    

    .header span {

        font-size: 1.25rem; /* Slightly smaller title on mobile */

    }



    /* Show the hamburger icon on mobile */

    #menuToggle {

        display: block; 

        background: none;

        border: none;

        color: white;

        font-size: 1.8rem; /* Larger touch target */

        cursor: pointer;

        padding: 0.1rem 0.5rem;

        transition: 0.2s;

    }

    #menuToggle:hover {

        background: rgba(255,255,255,0.2);

    }



    /* Hide the navigation links by default on mobile */




    /* Editor Layout: Stack vertically */

    .container {

        flex-direction: column;

        padding: 1rem;

    }



    /* Ensure editor takes full available width */

    .editor-container {

        width: 100%;

        margin-bottom: 1rem;

    }

    

    /* Adjust content padding for better fit */

    .content {

        padding: 1rem 1rem;

    }



    /* Reduce CodeMirror height on mobile to prevent excessive scrolling */

    .CodeMirror {

        height: 450px; 

    }

}