body {
    padding: var(--global-space);
    overflow-x: hidden; /* Prevent horizontal scrolling on entire page */
    max-width: 100vw;
    box-sizing: border-box;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

main {
    position: relative;
}

.window {
    position: absolute;
    width: calc(var(--global-space) * 80);
    background-color: white;
    z-index: 1;
}

header {
    display: flex;
    align-items: center;
    cursor: move;
}

header > .title {
    flex: 1;
    text-align: center;
    cursor: move;
}

header > .close {
    padding: 0 var(--global-space);
    cursor:
        url("./img/cross.png") 8 8,
        pointer;
}

.window.active header {
    background-color: var(--primary-color);
}

.window.active {
    border-color: var(--primary-color);
}

.window.active {
    border-color: var(--primary-color);
}

.submenu {
    display: none;
}

/* Projects dropdown menu styling */
.projects-menu-item {
    position: relative;
}

.projects-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    background-color: var(--background-color);
    border: 1px solid var(--primary-color);
    padding: var(--global-space);
    min-width: 150px;
    z-index: 10;
    pointer-events: auto;
}

/* Support for touch */
.projects-menu-item:hover .projects-submenu,
.projects-menu-item:focus .projects-submenu,
.projects-menu-item:active .projects-submenu,
.projects-menu-item:focus-within .projects-submenu {
    display: block;
}

.projects-submenu ul {
    display: block;
    list-style: none;
    place-items: center start !important;
    padding: 0;
    margin: 0;
}

.projects-submenu li {
    display: block;
    margin: 0;
    padding: calc(var(--global-space) / 2) 0;
}

.projects-submenu a {
    display: block;
    text-decoration: none;
    color: var(--font-color);
}

.projects-submenu a:hover {
    color: var(--primary-color);
}

/* Terminal styling - background element */
.terminal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    opacity: 0.8;
    pointer-events: auto;
    overflow: hidden; /* Prevent horizontal scrolling */
}

.terminal .xterm {
    padding: var(--global-space);
    max-width: 100%;
    box-sizing: border-box;
}

.terminal .xterm-viewport {
    overflow-y: hidden !important;
    overflow-x: hidden !important; /* Explicitly prevent horizontal scrolling */
}

.terminal .xterm-screen {
    overflow-x: hidden !important;
}

/* Ensure windows can still be interacted with */
.window {
    pointer-events: auto;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(2px);
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
    /* Increase base font size for better readability on mobile */
    html {
        font-size: 18px;
    }

    body {
        padding: calc(var(--global-space) / 2);
        font-size: 1rem;
    }

    /* Make navigation more mobile-friendly */
    .terminal-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .terminal-menu ul {
        flex-wrap: wrap;
        gap: calc(var(--global-space) / 2);
        justify-content: flex-start;
    }

    .terminal-menu li {
        margin: 0;
        flex: 0 0 auto;
    }

    .terminal-menu li a.menu-item {
        text-decoration: underline;
        text-decoration-thickness: 5px;
    }

    /* Mobile window layout - stack vertically */
    main {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--global-space);
        position: relative;
        min-height: 100vh;
    }

    .window {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        order: -1; /* Newest windows first */
        min-height: auto;
        font-size: 1rem;
    }

    /* Increase touch target sizes */
    .window header {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        position: relative;
        padding: var(--global-space);
        text-align: center;
    }

    .window header > .close {
        position: absolute;
        right: 0;
        top: 0;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--global-space);
        margin: 0;
    }

    /* Adjust terminal for mobile */
    .terminal {
        height: 40vh !important;
        order: 1;
        margin-top: var(--global-space);
        width: 100vw;
        left: 0;
        overflow-x: hidden !important;
    }

    .terminal .xterm {
        padding: calc(var(--global-space) / 2);
        font-size: 12px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden !important;
    }

    /* Projects submenu adjustments for mobile */
    .projects-submenu {
        position: absolute;
        display: none;
        top: 100%;
        left: 0;
        margin-top: 0;
        width: auto;
        min-width: 150px;
        box-sizing: border-box;
        z-index: 100;
    }

    /* Submenu styling handled by main rule above */

    /* Improve touch targets for mobile submenu */
    .projects-menu-item {
        position: relative;
    }

    .projects-menu-item > a {
        display: block;
        padding: calc(var(--global-space) / 2);
        touch-action: manipulation;
    }

    /* Better spacing for mobile content */
    .window section,
    .window div {
        line-height: 1.6;
    }

    /* Ensure text is readable */
    .window * {
        font-size: inherit;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    html {
        font-size: 16px;
    }

    .window {
        width: calc(var(--global-space) * 60) !important;
        max-width: 90vw;
    }
}

/* Ensure minimum zoom level on very small screens */
@media (max-width: 480px) {
    html {
        font-size: 20px;
    }

    .terminal .xterm {
        font-size: 16px;
    }
}