/*
    sithOS - Main stylesheet
    ========================

    This file controls how the site looks.

    Beginner guide:
    - Search for ":root" to find the main site colors.
    - Search for section comments like "WINDOW / PANEL STYLES" to jump around.
    - Most things are safe to edit if you move slowly and test often.
*/

/* =========================
   GLOBAL STYLES / SITE COLORS
   ========================= */

/*
    These variables are reusable colors.
    Think of them as named paint buckets for the whole site.

    If you want to change the overall look, these are the easiest values to edit.
    JavaScript also changes some of these when a theme button is clicked.
*/
:root {
    --bg-main: #10070d;
    --bg-secondary: #1c1018;
    --bg-panel: #2b222a;
    --bg-panel-light: #3a3037;
    --bg-page-top: #14070d;
    --bg-page-mid: #120911;
    --bg-page-bottom: #090609;
    --bg-page-glow: rgba(160, 28, 53, 0.18);
    --bg-header: #4d0f18;
    --bg-header-light: #7a2532;
    --border-dark: #14090d;
    --border-light: #9d7d87;
    --text-main: #f2e8ec;
    --text-soft: #d2bcc6;
    --accent-main: #d31f3f;
    --accent-alt: #8f3bc4;
    --accent-glow: rgba(211, 31, 63, 0.35);
    --link-color: #ff9aac;
    --desktop-grid: rgba(255, 255, 255, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.45);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    color: var(--text-main);
    background-color: var(--bg-page-bottom);
    background:
        radial-gradient(circle at top, var(--bg-page-glow), transparent 30%),
        linear-gradient(180deg, var(--bg-page-top) 0%, var(--bg-page-mid) 45%, var(--bg-page-bottom) 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/*
    This full-page overlay makes the theme background more visible.
    It uses theme colors, so switching presets changes the whole page mood.
*/
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 20%, var(--accent-glow), transparent 25%),
        radial-gradient(circle at 85% 15%, var(--bg-page-glow), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 35%);
}

a {
    color: var(--link-color);
}

a:hover,
a:focus {
    color: #ffffff;
}

button {
    font: inherit;
}

code {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
}

.small-label {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* =========================
   LAYOUT
   ========================= */

.site-shell {
    width: min(1200px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1rem 0 2rem;
}

.desktop-header-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background:
        linear-gradient(90deg, transparent 0, transparent 96%, var(--desktop-grid) 96%, var(--desktop-grid) 100%),
        linear-gradient(var(--desktop-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--desktop-grid) 1px, transparent 1px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.03));
    background-size: 100% 100%, 18px 18px, 18px 18px, 100% 100%;
}

.desktop-header {
    position: relative;
    overflow: visible;
    z-index: 20;
}

.shortcut-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
    position: relative;
    z-index: 1;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.feature-panel {
    grid-column: span 12;
}

.portal-grid > .window-panel:nth-child(2),
.portal-grid > .window-panel:nth-child(3) {
    grid-column: span 6;
}

.portal-grid > .window-panel:nth-child(n + 4) {
    grid-column: span 6;
}

/* =========================
   WINDOW / PANEL STYLES
   ========================= */

/*
    This section creates the fake Windows 98 style boxes.
    The border colors help create the old-school "raised panel" look.
*/
.window-panel {
    background: var(--bg-panel);
    border-top: 2px solid var(--border-light);
    border-left: 2px solid var(--border-light);
    border-right: 2px solid var(--border-dark);
    border-bottom: 2px solid var(--border-dark);
    box-shadow: 5px 5px 0 var(--shadow-color);
    overflow: hidden;
}

.window-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0.55rem;
    background: linear-gradient(90deg, var(--bg-header), var(--bg-header-light));
    border-bottom: 2px solid var(--border-dark);
}

.window-title {
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.window-buttons {
    display: flex;
    gap: 0.25rem;
}

.window-buttons span {
    width: 14px;
    height: 14px;
    background: #c7c7c7;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #4d4d4d;
    border-bottom: 1px solid #4d4d4d;
}

.panel-content {
    padding: 1rem;
}

.brand-panel h1,
.panel-content h2,
.panel-content h3 {
    margin-top: 0;
}

.brand-panel {
    padding: 0.25rem;
}

.tagline {
    max-width: 42rem;
}

.status-line {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.18);
    border: 1px dashed var(--accent-main);
}

.status-text {
    color: #ffffff;
}

.callout-box,
.placeholder-frame,
.media-placeholder,
.log-entry {
    margin-top: 1rem;
    padding: 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

.fake-screen {
    margin-bottom: 0.75rem;
    padding: 1rem;
    min-height: 90px;
    display: grid;
    place-items: center;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(211, 31, 63, 0.18), rgba(12, 12, 12, 0.55)),
        #050505;
    border: 1px solid var(--accent-main);
    color: #ffd5dd;
    font-family: "Courier New", monospace;
}

.site-footer {
    margin-top: 1rem;
}

/* =========================
   NAV / DROPDOWN STYLES
   ========================= */

.main-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
    background: rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 25;
}

.nav-link,
.dropdown-toggle,
.theme-button {
    display: inline-block;
    padding: 0.55rem 0.85rem;
    color: var(--text-main);
    text-decoration: none;
    background: var(--bg-panel-light);
    border-top: 2px solid #d4c4cb;
    border-left: 2px solid #d4c4cb;
    border-right: 2px solid #22151c;
    border-bottom: 2px solid #22151c;
    cursor: pointer;
}

.nav-link:hover,
.nav-link:focus,
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.theme-button:hover,
.theme-button:focus {
    background: var(--accent-main);
    color: #ffffff;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 220px;
    display: none;
    z-index: 50;
    background: var(--bg-panel);
    border-top: 2px solid var(--border-light);
    border-left: 2px solid var(--border-light);
    border-right: 2px solid var(--border-dark);
    border-bottom: 2px solid var(--border-dark);
    box-shadow: 5px 5px 0 var(--shadow-color);
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 0.65rem 0.85rem;
    text-decoration: none;
    color: var(--text-main);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--accent-alt);
    color: #ffffff;
}

/* =========================
   THEME SETTINGS STYLES
   ========================= */

.theme-panel {
    padding: 0.25rem;
}

.theme-panel h2 {
    margin-top: 0;
}

.theme-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0.75rem;
}

.theme-note,
.panel-help {
    color: var(--text-soft);
    font-size: 0.92rem;
}

.theme-button.active-theme {
    background: var(--accent-alt);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* =========================
   EXTRA SMALL COMPONENTS
   ========================= */

.shortcut-card {
    width: 110px;
    min-height: 88px;
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    text-align: center;
    background: rgba(24, 16, 23, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.shortcut-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(180deg, var(--bg-header-light), var(--bg-header));
    border: 1px solid var(--border-light);
    font-family: "Courier New", monospace;
}

.link-list,
.plain-list {
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
}

.log-list {
    display: grid;
    gap: 0.75rem;
}

/* =========================
   RESPONSIVE STYLES
   ========================= */

/*
    These rules help the site behave better on smaller screens like phones.
    You can edit them later if you want a different mobile layout.
*/
@media (max-width: 900px) {
    .desktop-header-content {
        grid-template-columns: 1fr;
    }

    .portal-grid > .window-panel:nth-child(2),
    .portal-grid > .window-panel:nth-child(3),
    .portal-grid > .window-panel:nth-child(n + 4) {
        grid-column: span 12;
    }
}

@media (max-width: 640px) {
    .site-shell {
        width: min(100% - 1rem, 100%);
    }

    .main-navigation {
        flex-direction: column;
        align-items: stretch;
    }

    .dropdown-menu {
        position: static;
        margin-top: 0.4rem;
        min-width: 100%;
    }

    .shortcut-card {
        width: calc(50% - 0.4rem);
    }
}