/* style.css - Windows XP Desktop Style */

/* Import Barlow Bold and Regular (ensure files are in assets/fonts/) */
@font-face {
    font-family: 'Barlow';
    src: url('assets/fonts/Barlow-Regular.woff2') format('woff2'); /* Adjust path if necessary */
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('assets/fonts/Barlow-Bold.woff2') format('woff2'); /* Adjust path if necessary */
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}

/* Windows XP Color Palette (Luna Blue Theme) */
:root {
    --xp-desktop-bg: url('assets/windows-xp-bliss.jpg'); /* Iconic Bliss background */
    --xp-taskbar-blue-dark: #245194;
    --xp-taskbar-blue-light: #2D61AE;
    --xp-start-green-dark: #245829;
    --xp-start-green-light: #3A943F;
    --xp-window-border-dark: #0A246A; /* Dark blue outer border */
    --xp-window-border-light: #C3D2EE; /* Light blue inner border */
    --xp-window-bg: #ECE9D8; /* Off-white window content background */
    --xp-active-titlebar-dark: #0A246A;
    --xp-active-titlebar-light: #A6CAF0;
    --xp-inactive-titlebar-dark: #7A8AA5;
    --xp-inactive-titlebar-light: #D0DCE7;
    --xp-text-dark: #333;
    --xp-text-light: #E0E0E0;
    --xp-shadow: rgba(0,0,0,0.4);
    --xp-button-bevel-light: #E0E0E0;
    --xp-button-bevel-dark: #808080;
    --xp-icon-text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; /* For iconic XP text outline */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Barlow', sans-serif;
    /* Use the iconic Windows XP background for the body */
    background-image: var(--xp-desktop-bg);
    background-size: cover; /* Cover the entire viewport */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--xp-text-dark); /* Default text color for windows */
    overflow: hidden; /* Desktop is fixed, content within windows may scroll */
}

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

.site-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    position: relative; /* For absolute positioning of content and taskbar */
}

/* --- CONTENT AREA (The Desktop itself) --- */
.content-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 48px; /* Leave space for the taskbar */
    display: flex; /* For managing icon positions indirectly if not absolute */
    /* Removed previous background-color and backdrop-filter from here */
}

/* --- DESKTOP ICONS --- */
.desktop-icon {
    position: absolute; /* Position icons explicitly */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    width: 80px; /* Standard icon area width */
    height: 80px; /* Standard icon area height */
    padding-top: 5px; /* Space for the icon */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: background-color 0.1s, border 0.1s;
    outline: none; /* Remove default focus outline */
    z-index: 5; /* Below windows */
}

.desktop-icon:hover {
    background-color: rgba(0, 102, 204, 0.2); /* Light blue hover background */
    border: 1px solid rgba(0, 102, 204, 0.4);
}

/* Dotted border on active/focused */
.desktop-icon.active-icon, /* When clicked/opened its window */
.desktop-icon.controller-focus, /* Gamepad focus */
.desktop-icon:focus-visible { /* Keyboard focus */
    background-color: rgba(0, 102, 204, 0.4);
    outline: 1px dotted var(--xp-text-light); /* Dotted white border */
    outline-offset: -2px; /* Pull border inside padding */
}

.desktop-icon img {
    width: 48px; /* Standard XP icon size */
    height: 48px;
    margin-bottom: 3px;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5)); /* Subtle shadow */
}

.desktop-icon span {
    font-size: 0.85em;
    color: white; /* White text for icons */
    text-shadow: var(--xp-icon-text-shadow); /* Black outline for icon text */
    word-break: break-word; /* Allow long names to wrap */
    line-height: 1.2;
}

/* Icon Positioning (Adjust as needed for your screen size and taste) */
/* Organized in two columns */
#desktop-icon-socials { top: 20px; left: 20px; }
#desktop-icon-music { top: 100px; left: 20px; }
#desktop-icon-about { top: 180px; left: 20px; }
#desktop-icon-game { top: 20px; left: 100px; } /* Second column */
#desktop-icon-settings { top: 100px; left: 100px; }
#desktop-icon-recyclebin { top: 180px; left: 100px; }


/* --- PAGE CONTENT (The Windows) --- */
.page-content {
    display: none; /* Hidden by default, JS makes one visible */
    position: absolute; /* Positioned on the desktop */
    min-width: 400px;
    max-width: 800px;
    height: auto; /* Let content dictate height */
    max-height: calc(100% - 100px); /* Max height to avoid overlapping taskbar/too large */
    background-color: var(--xp-window-bg); /* Window content background */
    border: 1px solid var(--xp-window-border-dark); /* Outer border */
    border-radius: 8px; /* XP window rounded corners */
    box-shadow: 2px 2px 10px var(--xp-shadow); /* Drop shadow for depth */
    overflow: hidden; /* Content within window is managed by window-content-area */
    flex-direction: column; /* Stack title bar and content area */
    resize: both; /* Enable resizing by dragging corners/edges */
    min-height: 150px; /* Minimum size for resizing */
    z-index: 10; /* Base Z-index for windows */
}

.page-content.visible {
    display: flex;
    /* Initial center position. Dragging will override. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.page-content.active-window {
    z-index: 20; /* Bring active window to front */
}

/* Window Title Bar */
.window-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px 2px 10px; /* Adjust padding for XP feel */
    height: 30px; /* Standard XP title bar height */
    /* Active title bar gradient */
    background: linear-gradient(to right, var(--xp-active-titlebar-dark), var(--xp-active-titlebar-light));
    color: white;
    font-weight: bold;
    border-top-left-radius: 6px; /* Match outer window border */
    border-top-right-radius: 66px; /* Typo corrected from previous version, should be 6px */
    /* Inner top border/shadow */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2);
    cursor: grab; /* Indicates draggable */
}

.window-title-bar.inactive { /* For windows that are not active */
    background: linear-gradient(to right, var(--xp-inactive-titlebar-dark), var(--xp-inactive-titlebar-light));
    color: #EEE;
    cursor: grab;
}

.window-title {
    flex-grow: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9em;
}

.window-controls {
    display: flex;
    gap: 2px;
}

.control-button {
    width: 20px;
    height: 20px;
    background-color: #ECE9D8;
    border: 1px solid #7F7F7F;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    font-weight: bold;
    cursor: pointer;
    color: var(--xp-text-dark);
    text-shadow: none; /* No text shadow for controls */
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2), inset 1px 1px 1px rgba(255,255,255,0.5); /* Beveled effect */
    transition: background-color 0.1s ease, box-shadow 0.1s ease;
}
.control-button:hover {
    background-color: #E0E0E0;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3), inset 1px 1px 2px rgba(255,255,255,0.7);
}
.close-button {
    background-color: #E63946; /* Red for close button */
    color: white;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2), inset 1px 1px 1px rgba(255,255,255,0.5);
}
.close-button:hover {
    background-color: #C02936;
}

/* Content area within the window */
.window-content-area {
    flex-grow: 1;
    padding: 15px 20px; /* Padding for content inside the window */
    overflow-y: auto; /* Enable scrolling for content within the window */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    align-items: center; /* Horizontally center content */
    text-align: center;
    /* Inner light border on content area */
    border-top: 1px solid var(--xp-window-border-light);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); /* Inner highlight */
}

/* Specific content styles for home/socials/about pages */
#home .main-text, #socials p, #about p { /* Apply to all general paragraphs */
    font-size: 1.1em; /* Adjust for window size */
    color: var(--xp-text-dark);
    letter-spacing: normal;
    line-height: 1.4;
    padding: 0; /* Remove horizontal padding from HTML */
    max-width: 100%;
    margin-bottom: 1em;
}

#socials h1, #about h1, #home h1 { /* Apply to all general headers */
    font-size: 1.8em; /* Adjust for window size */
    margin-bottom: 15px;
    color: var(--xp-text-dark);
}
.social-links-page {
    gap: 12px;
}
.social-link-item {
    font-size: 1.1em; /* Adjust for window size */
    color: var(--xp-text-dark);
    border: 1px solid #AAA;
    background-color: #E0E0E0; /* Button-like background */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.5); /* Beveled */
    min-width: 200px;
    justify-content: flex-start; /* Align text to left */
    padding-left: 20px;
}
.social-link-item:hover,
.social-link-item.controller-focus {
    color: var(--xp-text-dark);
    border-color: orange;
    background-color: #F0F0F0;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.7);
}


/* --- TASKBAR --- */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px; /* Standard XP taskbar height */
    background: linear-gradient(to right, var(--xp-taskbar-blue-dark), var(--xp-taskbar-blue-light));
    border-top: 1px solid #101010; /* Dark top border */
    box-shadow: 0 -2px 5px var(--xp-shadow); /* Shadow above taskbar */
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 5px; /* Padding for elements within taskbar */
}

/* Start Button */
.start-button {
    height: 38px; /* Adjust height to fit taskbar */
    padding: 0 10px 0 5px; /* Adjusted padding */
    margin-right: 5px;
    background: linear-gradient(to bottom, var(--xp-start-green-light) 5%, var(--xp-start-green-dark) 95%);
    border: 1px solid #003C74; /* Dark blue border */
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Shadow for text */
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3); /* Bevel effect */
    transition: all 0.1s ease;
    outline: none; /* Remove default outline */
}
.start-button:hover {
    background: linear-gradient(to bottom, #4CA051 5%, #2F6934 95%); /* Slightly brighter green */
    box-shadow: 1px 1px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
}
.start-button:active,
.start-button.playing { /* 'playing' state for music */
    background: linear-gradient(to bottom, #2F6934 5%, #4CA051 95%); /* Inverted gradient for pressed look */
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5); /* Pressed shadow */
    transform: translateY(1px); /* Slight press effect */
}
.start-button.controller-focus {
    color: orange !important;
    border-color: orange;
    transform: scale(1.02);
}
.windows-logo {
    height: 28px; /* Size the logo */
    width: auto;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5)); /* Subtle shadow for logo */
}


/* Task Buttons (Open Window Representations on Taskbar) */
.task-buttons {
    display: flex;
    flex-grow: 1; /* Allow task buttons to fill space */
    height: 100%;
    align-items: center;
    overflow-x: auto; /* Allow scrolling if too many buttons */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
}
.task-buttons::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}


.task-button {
    height: 38px; /* Button height */
    padding: 0 12px;
    margin: 0 2px; /* Small margin between buttons */
    background-color: var(--xp-taskbar-blue-light); /* Default button background */
    border: 1px solid #003C74; /* Dark blue border */
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.1s ease;
    white-space: nowrap; /* Prevent text wrapping */
    flex-shrink: 0; /* Prevent shrinking too much */
    outline: none;
}

.task-button:hover {
    background-color: #387BCB; /* Lighter blue on hover */
    box-shadow: 1px 1px 5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
}

.task-button.active {
    /* Pressed/active state for current page button */
    background-color: #F8F7F4; /* Light background for active window icon */
    color: var(--xp-text-dark); /* Dark text for active button */
    text-shadow: none;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5);
    border-color: #7F7F7F; /* Gray border for active button */
}
.task-button.controller-focus {
    color: orange !important;
    border-color: orange;
    transform: scale(1.02);
}


/* System Tray */
.system-tray {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: linear-gradient(to left, #2C61AD, #245194); /* Subtle gradient for tray area */
    height: 100%;
    border-left: 1px solid #101010; /* Divider from task buttons */
    color: white;
    font-size: 0.8em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    flex-shrink: 0; /* Don't shrink */
    min-width: 150px; /* Give it some space */
    justify-content: flex-end; /* Align contents to the right */
}

.controller-layout-image {
    max-height: 30px; /* Smaller icon in system tray */
    width: auto;
    opacity: 1;
    transition: opacity 1s ease-out 0.5s;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5)); /* Shadow for XP icon feel */
}
.controller-layout-image.fade-out {
    opacity: 0;
    pointer-events: none;
}
.system-clock {
    font-size: 0.9em;
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    padding: 0 5px; /* Padding inside the tray area */
}
.copyright-text {
    font-size: 0.8em; /* Slightly smaller copyright in system tray */
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-left: 5px; /* Small separation from clock */
}


/* --- RESPONSIVE ADJUSTMENTS --- */

/* Medium screens (Tablets and large phones) */
@media (max-width: 768px) {
    .content-area {
        padding: 15px;
    }
    .desktop-icon {
        width: 70px;
        height: 70px;
    }
    .desktop-icon img {
        width: 40px;
        height: 40px;
    }
    .desktop-icon span {
        font-size: 0.8em;
    }
    /* Adjust icon positions for smaller screens if needed */
    #desktop-icon-socials { top: 10px; left: 10px; }
    #desktop-icon-music { top: 80px; left: 10px; }
    #desktop-icon-about { top: 150px; left: 10px; }
    #desktop-icon-game { top: 10px; left: 80px; }
    #desktop-icon-settings { top: 80px; left: 80px; }
    #desktop-icon-recyclebin { top: 150px; left: 80px; }

    .page-content {
        min-width: 90%;
        max-width: 95%;
        max-height: calc(100% - 70px);
    }
    .window-title-bar {
        height: 28px;
    }
    .control-button {
        width: 18px;
        height: 18px;
        font-size: 0.75em;
    }
    #home .main-text, #socials p, #about p {
        font-size: 1em;
    }
    #socials h1, #about h1, #home h1 {
        font-size: 1.6em;
    }
    .social-link-item {
        font-size: 1em;
        min-width: 180px;
        padding-left: 15px;
    }

    .taskbar {
        height: 44px;
        padding: 0 2px;
    }
    .start-button {
        height: 34px;
        padding: 0 8px 0 4px;
        font-size: 1.1em;
    }
    .windows-logo {
        height: 24px;
    }
    .task-button {
        height: 34px;
        padding: 0 8px;
        font-size: 1em;
        margin: 0 1px;
    }
    .system-tray {
        gap: 5px;
        padding: 0 5px;
        min-width: 120px;
    }
    .controller-layout-image {
        max-height: 25px;
    }
    .system-clock, .copyright-text {
        font-size: 0.8em;
    }
}

/* Small screens (Mobile phones) */
@media (max-width: 480px) {
    .content-area {
        padding: 10px;
    }
    .desktop-icon {
        width: 60px;
        height: 60px;
    }
    .desktop-icon img {
        width: 32px;
        height: 32px;
    }
    .desktop-icon span {
        font-size: 0.7em;
    }
    #desktop-icon-socials { top: 20px; left: 20px; }
    #desktop-icon-music { top: 100px; left: 20px; }
    #desktop-icon-about { top: 180px; left: 20px; }
    #desktop-icon-game { top: 260px; left: 20px; }
    #desktop-icon-settings { top: 20px; left: 100px; }
    #desktop-icon-recyclebin { top: 100px; left: 100px; }


    .page-content {
        min-width: 95%;
        border-radius: 6px;
        max-height: calc(100% - 60px); /* Adjust max height for smaller taskbar */
    }
    .window-title-bar {
        height: 26px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .control-button {
        width: 16px;
        height: 16px;
        font-size: 0.7em;
    }
    #home .main-text, #socials p, #about p {
        font-size: 0.9em;
    }
    #socials h1, #about h1, #home h1 {
        font-size: 1.4em;
    }
    .social-link-item {
        font-size: 0.9em;
        padding: 6px 10px;
        min-width: unset;
        width: 90%;
        gap: 6px;
    }

    .taskbar {
        height: 40px;
    }
    .start-button {
        height: 30px;
        padding: 0 6px 0 3px;
        font-size: 1em;
    }
    .windows-logo {
        height: 20px;
    }
    .task-button {
        height: 30px;
        padding: 0 6px;
        font-size: 0.9em;
    }
    .system-tray {
        gap: 3px;
        padding: 0 3px;
        min-width: 80px; /* Even smaller min-width */
    }
    .controller-layout-image {
        max-height: 20px;
    }
    .system-clock, .copyright-text {
        font-size: 0.7em;
    }
}