/* =========================================================
   CODEWORD — ONLINE COMPILER
   Navy blue + orange theme
   Matches the current onecompiler.html structure
   ========================================================= */

:root {
    --cw-compiler-navy: #101b33;
    --cw-compiler-blue: #2457d6;
    --cw-compiler-orange: #ff7a1a;
    --cw-compiler-text: #17233d;
    --cw-compiler-muted: #64748b;
    --cw-compiler-border: #dce4f0;
    --cw-compiler-page: #f3f6fb;
    --cw-compiler-panel: #ffffff;
    --cw-compiler-editor: #101827;
    --cw-compiler-shadow: 0 8px 24px rgba(16, 27, 51, 0.09);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    color: var(--cw-compiler-text);
    background: var(--cw-compiler-page);
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}

/* =========================================================
   MAIN WEBSITE HEADER
   Preserve the shared header.html and header.css design
   ========================================================= */

#header {
    position: relative;
    z-index: 1000;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
}

/* Prevent compiler styles from changing the shared navbar */
#header header,
#header nav {
    box-sizing: border-box;
}

/* =========================================================
   COMPILER TOOLBAR
   Your HTML uses a plain <header> after the hidden H1.
   Do not style the shared website header globally.
   ========================================================= */

body > header {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;

    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 16px clamp(14px, 3vw, 32px);

    color: #ffffff;
    background: linear-gradient(
        115deg,
        var(--cw-compiler-navy),
        #1b3767
    );

    border-bottom: 3px solid var(--cw-compiler-orange);
    box-shadow: 0 6px 18px rgba(16, 27, 51, 0.15);
}

/* Toolbar dropdowns */

body > header select {
    flex: 0 1 auto;
    min-width: 135px;
    max-width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 32px 0 12px;

    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
    outline: none;
}

body > header select:focus {
    border-color: var(--cw-compiler-orange);
    box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
}

body > header select option {
    color: #17233d;
    background: #ffffff;
}

/* Toolbar buttons */

body > header button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex: 0 0 auto;
    min-height: 42px;
    margin: 0;
    padding: 10px 15px;

    color: #ffffff;
    background: var(--cw-compiler-blue);
    border: 1px solid transparent;
    border-radius: 8px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;

    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

body > header button:hover {
    color: #ffffff;
    background: #356be8;
    transform: translateY(-1px);
}

body > header button:focus-visible {
    outline: 3px solid rgba(255, 122, 26, 0.65);
    outline-offset: 3px;
}

/* Run button */
body > header button[onclick="runCode()"] {
    color: #ffffff;
    background: #16834a;
}

body > header button[onclick="runCode()"]:hover {
    background: #116b3c;
}

/* Save button */
body > header button[onclick="saveCode()"] {
    background: #2858d8;
}

/* Download button */
body > header button[onclick="downloadCode()"] {
    background: #475569;
}

/* Clear button */
body > header button[onclick="clearConsole()"] {
    background: #b83b32;
}

/* =========================================================
   MAIN COMPILER WORKSPACE
   Matches <div class="main">
   ========================================================= */

.main {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    align-items: stretch;
    gap: 20px;

    width: 100%;
    min-height: 540px;
    margin: 0;
    padding: 22px clamp(12px, 2vw, 26px) 30px;
    margin-bottom:10%;
}

/* =========================================================
   MONACO EDITOR
   Keep #editor ID intact for compiler.js
   ========================================================= */

#editor {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 620px;
    min-height: 350px;

    overflow: hidden;
    background: var(--cw-compiler-editor);
    border: 1px solid #26354d;
    border-radius: 12px;
    box-shadow: var(--cw-compiler-shadow);
}

/* Monaco fills the editor container */
#editor .monaco-editor,
#editor .monaco-editor .overflow-guard {
    border-radius: 11px;
}

/* =========================================================
   CONSOLE AND PREVIEW SIDE PANEL
   Matches <div class="side">
   ========================================================= */

.side {
    display: flex;
    flex-direction: column;
    gap: 12px;

    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 18px;

    background: var(--cw-compiler-panel);
    border: 1px solid var(--cw-compiler-border);
    border-radius: 12px;
    box-shadow: var(--cw-compiler-shadow);
}

.side h4 {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0;
    padding: 0 0 13px;

    color: var(--cw-compiler-navy);
    border-bottom: 1px solid var(--cw-compiler-border);

    font-size: 16px;
    font-weight: 750;
    line-height: 1.5;
}

.side h4::before {
    content: "";
    display: inline-block;
    flex: 0 0 4px;
    width: 4px;
    height: 21px;
    background: var(--cw-compiler-orange);
    border-radius: 4px;
}

/* Console */

#console {
    display: block;
    width: 100%;
    min-width: 0;
    height: 210px;
    min-height: 130px;
    margin: 0;
    padding: 14px;

    color: #dce7f7;
    background: #111d32;
    border: 1px solid #293954;
    border-radius: 9px;

    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.7;

    resize: vertical;
    outline: none;
    overflow: auto;
}

#console:focus {
    border-color: var(--cw-compiler-blue);
    box-shadow: 0 0 0 3px rgba(36, 87, 214, 0.12);
}

/* Output preview */

#preview {
    display: block;
    width: 100%;
    min-width: 0;
    height: 270px;
    min-height: 180px;

    background: #ffffff;
    border: 1px solid var(--cw-compiler-border);
    border-radius: 9px;
}

/* =========================================================
   LEGACY CLASS COMPATIBILITY
   Keeps these styles available if older compiler markup
   still uses the original class names.
   ========================================================= */

.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--cw-compiler-navy);
    border-bottom: 3px solid var(--cw-compiler-orange);
}

.topbar select,
.topbar button {
    min-height: 40px;
    padding: 9px 13px;
    color: #ffffff;
    background: var(--cw-compiler-blue);
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.online-compiler-container {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    width: 100%;
    padding: 18px;
}

.editor {
    flex: 3 1 400px;
    min-width: 280px;
    height: 400px;
    min-height: 260px;
    overflow: hidden;
    background: var(--cw-compiler-editor);
    border-radius: 9px;
}

.sidepanel {
    flex: 2 1 280px;
    min-width: 260px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--cw-compiler-border);
    border-radius: 10px;
}

.sidepanel h3 {
    margin: 0 0 10px;
    color: var(--cw-compiler-navy);
    font-size: 16px;
    font-weight: 750;
}

#output {
    height: 200px;
    padding: 12px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #dce7f7;
    background: #111d32;
    border: 1px solid #293954;
    border-radius: 8px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
}

textarea#inputCode {
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 10px;
    color: var(--cw-compiler-text);
    background: #ffffff;
    border: 1px solid var(--cw-compiler-border);
    border-radius: 8px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    resize: vertical;
}

/* =========================================================
   HERO SECTION
   Avoid applying excessive top padding to the compiler.
   ========================================================= */

section.online-compiler-section {
    position: relative;
    padding: 70px 20px 35px;
    text-align: center;
    background-color: var(--cw-compiler-navy);
    background-image:
        linear-gradient(
            120deg,
            rgba(16, 27, 51, 0.94),
            rgba(27, 55, 103, 0.85)
        ),
        url("../images/compiler.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {
    .main {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        gap: 16px;
        padding: 16px;
    }

    #editor {
        height: 480px;
        min-height: 320px;
    }

    .side {
        min-height: 0;
    }

    #console {
        height: 180px;
    }

    #preview {
        height: 240px;
    }

    body > header {
        gap: 9px;
        padding: 13px 16px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
    body > header {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 9px;
        padding: 12px;
    }

    body > header select,
    body > header button {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 42px;
        padding: 9px 8px;
        font-size: 12px;
    }

    .main {
        gap: 13px;
        padding: 12px;
    }

    #editor {
        height: 360px;
        min-height: 280px;
        border-radius: 9px;
    }

    .side {
        gap: 11px;
        padding: 13px;
        border-radius: 10px;
    }

    .side h4 {
        font-size: 15px;
    }

    #console {
        height: 160px;
        min-height: 120px;
        padding: 11px;
        font-size: 12px;
    }

    #preview {
        height: 220px;
        min-height: 160px;
    }

    section.online-compiler-section {
        padding: 45px 14px 25px;
    }

    .online-compiler-container {
        gap: 12px;
        padding: 10px;
    }

    .editor {
        flex-basis: 100%;
        min-width: 0;
        height: 300px;
    }

    .sidepanel {
        flex-basis: 100%;
        min-width: 0;
        padding: 13px;
    }

    #output {
        height: 150px;
    }
}

/* Keyboard accessibility and reduced motion */

button:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(255, 122, 26, 0.55);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

.online-compiler p{
  color: white;
}