/* Amiga Workbench 1.3 - Ultimate Retro Theme 
   Doreen Obendorf Portfolio - Amiga 2000 Project
*/

:root {
    --amiga-blue: #0055aa;   /* Das klassische WB 1.3 Blau */
    --amiga-grey: #aaaaaa;   /* System-Grau */
    --amiga-white: #ffffff;  /* Reines Weiß */
    --amiga-black: #000000;  /* Reines Schwarz */
    --amiga-orange: #ff8800; /* Akzentfarbe für Links/Highlights */
}

/* 1. Globaler Screen-Setup */
body, html {
    margin: 0;
    padding: 0;
    background-color: var(--amiga-blue); /* Der gesamte Screen ist Blau */
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    /* Pixel-Rendering für scharfe Schriften */
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    image-rendering: pixelated;
}

/* 2. Schriftart Einbindung */
@font-face {
    font-family: 'Topaz';
    src: url('/projects/amiga/css/ttf/Topaz_a1200_v1.0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.amiga-theme {
    font-family: 'Topaz', 'Courier New', Courier, monospace;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 3. Die Screen-Bar (Weiße Leiste ganz oben) */
.workbench-screen-bar {
    background-color: var(--amiga-white);
    color: var(--amiga-blue);
    display: flex;
    justify-content: space-between;
    padding: 2px 12px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 2px solid var(--amiga-black);
    width: 100%;
    box-sizing: border-box;
    z-index: 100;
}

/* 4. Das Fenster-Layout (Zentriert) */
.amiga-window {
    background-color: var(--amiga-grey);
    border: 2px solid var(--amiga-black);
    /* Amiga 3D-Rahmen: Oben/Links Weiß, Unten/Rechts Schwarz */
    box-shadow: 
        2px 2px 0px var(--amiga-white) inset, 
        -2px -2px 0px var(--amiga-black) inset;
    
    width: 95%;
    max-width: 850px;
    margin: auto; /* Zentriert das Fenster vertikal und horizontal */
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}

/* 5. Die Titelbar (Blau mit weißem Text) */
.amiga-titlebar {
    background-color: var(--amiga-blue);
    color: var(--amiga-white);
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    border-bottom: 2px solid var(--amiga-black);
    box-sizing: border-box;
}

.window-title {
    font-size: 16px;
    font-weight: bold;
    flex-grow: 1;
    text-align: center;
}

/* 6. Gadgets (Schaltflächen) */
.gadget-close, .gadget-depth {
    width: 26px;
    height: 16px;
    background-color: var(--amiga-white);
    border: 2px solid var(--amiga-black);
    position: relative;
}

/* Kleiner blauer Balken im Schließen-Knopf */
.gadget-close::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 4px;
    background: var(--amiga-blue);
    top: 4px;
    left: 7px;
}

/* Zwei überlappende Rahmen für das Tiefen-Gadget */
.gadget-depth::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 6px;
    border: 1px solid var(--amiga-blue);
    top: 2px;
    left: 4px;
    box-shadow: 3px 2px 0px var(--amiga-white), 3px 2px 0px 1px var(--amiga-blue);
}

/* 7. Der Inhaltsbereich */
.amiga-content {
    padding: 25px;
    color: var(--amiga-black);
    line-height: 1.4;
    text-align: left;
    overflow-y: auto;
}

/* Überschriften & Text */
.amiga-content h1, .amiga-content h2 {
    color: var(--amiga-blue);
    margin-top: 0;
    text-transform: uppercase;
    border-bottom: 2px solid var(--amiga-blue);
    padding-bottom: 5px;
}

.amiga-content p {
    margin-bottom: 1.5em;
}

/* Code-Blöcke (Terminal Style) */
.amiga-content pre {
    background-color: var(--amiga-black) !important;
    color: var(--amiga-orange) !important;
    padding: 15px;
    border: 2px solid var(--amiga-white);
    box-shadow: 4px 4px 0px var(--amiga-black);
    font-family: 'Topaz', monospace;
    overflow-x: auto;
    font-size: 14px;
}

/* Checkboxen / Gadgets in Listen */
.amiga-content ul {
    list-style: none; /* Wir bauen die Bullets selbst für den Retro-Look */
    padding-left: 5px;
    margin: 15px 0;
}

.amiga-content li {
    display: flex;
    align-items: flex-start; /* Falls der Text mehrzeilig ist */
    margin-bottom: 8px;
    position: relative;
    padding-left: 25px; /* Platz für den Bullet/Gadget */
}
.amiga-content ul:not(.contains-task-list) li::before {
    content: "■"; /* Amiga-typisches Quadrat */
    position: absolute;
    left: 0;
    color: var(--amiga-blue);
    font-size: 14px;
}

/* Spezielles Handling für Eleventy/Markdown Checkboxen */
.amiga-content li.task-list-item {
    padding-left: 0; /* Reset für Checkboxen */
}

.amiga-content input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    min-width: 18px;
    height: 18px;
    background-color: var(--amiga-grey);
    border: 2px solid var(--amiga-black);
    box-shadow: 1px 1px 0px var(--amiga-white) inset;
    margin-right: 10px;
    margin-top: 2px;
    position: relative;
    cursor: pointer;
}

.amiga-content input[type="checkbox"]:checked::after {
    content: "X";
    position: absolute;
    top: -3px;
    left: 2px;
    color: var(--amiga-blue);
    font-weight: bold;
    font-size: 16px;
}

/* Links */
.amiga-content a {
    color: var(--amiga-blue);
    text-decoration: underline;
}

.amiga-content a:hover {
    background-color: var(--amiga-blue);
    color: var(--amiga-white);
}