/*
    HARD COPY - Windows 98 Style
    Rosa bakgrund, optimerat flode

    Kalla: jdan/98.css
    https://github.com/jdan/98.css

    Ikoner: Windows 98 Icon Viewer av Alex Meub
    https://win98icons.alexmeub.com/
*/

/* =========================================
   GRUNDLAGGANDE VARIABLER
   ========================================= */
:root {
    --rosa-bg: #e8b4b8;
    --rosa-darker: #d4a0a4;
    --rosa-lighter: #f5d5d8;
    --window-gray: #c0c0c0;
    --window-border-light: #dfdfdf;
    --window-border-dark: #808080;
    --title-blue-start: #000080;
    --title-blue-end: #1084d0;
    --text-color: #000000;
    --link-color: #0000ff;
    --accent-blue: #000080;
}

/* =========================================
   GRUNDLAGGANDE SIDA
   ========================================= */
@page {
    size: A4 portrait;
    margin: 12mm 10mm;
    background: var(--rosa-bg);
    @bottom-center {
        content: counter(page);
        font-family: "Segoe UI", Tahoma, sans-serif;
        font-size: 10px;
        color: var(--accent-blue);
    }
}

* {
    box-sizing: border-box;
}

html {
    font-size: 11px;
}

body {
    background: var(--rosa-bg);
    font-family: "Segoe UI", "MS Sans Serif", Tahoma, sans-serif;
    font-size: 11px;
    line-height: 1.6;
    padding: 0;
    margin: 0;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   FONSTER - HUVUDCONTAINER
   ========================================= */
.window {
    background: var(--window-gray);
    border: 3px outset var(--window-border-light);
    margin: 0 0 8px 0;
    padding: 3px;
    page-break-inside: auto;
    max-width: 100%;
    width: 100%;
}

.window.new-page {
    page-break-before: always;
}

/* Sektioner på ny sida måste vara minst halvsida */
.window.new-page .window-body {
    min-height: 120mm;
}

.window.page-one {
    page-break-before: avoid;
    page-break-after: always;
    min-height: 250mm;
}

/* =========================================
   TITLE BAR
   ========================================= */
.title-bar {
    background: linear-gradient(90deg, var(--title-blue-start), var(--title-blue-end));
    color: white;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    white-space: nowrap;
}

.title-bar-text {
    font-weight: bold;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.title-bar-text img {
    width: 16px;
    height: 16px;
    border: none;
    margin: 0;
}

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

.title-bar-controls button {
    width: 16px;
    height: 14px;
    min-width: 16px;
    padding: 0;
    font-size: 9px;
    font-weight: bold;
    background: var(--window-gray);
    border: 2px outset var(--window-border-light);
    cursor: pointer;
}

/* =========================================
   MENYRAD
   ========================================= */
.menu-bar {
    background: var(--window-gray);
    border-bottom: 1px solid var(--window-border-dark);
    padding: 3px 0;
    font-size: 11px;
    display: flex;
    gap: 0;
}

.menu-item {
    padding: 2px 10px;
    cursor: pointer;
}

.menu-item:hover {
    background: var(--accent-blue);
    color: white;
}

.menu-item u {
    text-decoration: underline;
}

/* =========================================
   INNEHALLSAREA - WINDOW BODY
   ========================================= */
.window-body {
    background: white;
    border: 2px inset var(--window-border-dark);
    padding: 24px 28px;
    margin: 3px;
    min-height: 100px;
}

/* =========================================
   TYPOGRAFI - RUBRIKER
   ========================================= */
h1 {
    color: var(--accent-blue);
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 16px 0;
    padding: 0;
    text-align: center;
    page-break-after: avoid;
    letter-spacing: 1px;
}

h2 {
    background: linear-gradient(90deg, var(--title-blue-start), var(--title-blue-end));
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 16px;
    margin: 32px 0 18px 0;
    page-break-after: avoid;
    letter-spacing: 0.5px;
}

h3 {
    color: var(--accent-blue);
    font-size: 13px;
    font-weight: bold;
    margin: 24px 0 12px 0;
    padding: 0 0 6px 0;
    border-bottom: 1px solid #e0e0e0;
    page-break-after: avoid;
    break-after: avoid;
}

h4 {
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: bold;
    margin: 18px 0 10px 0;
    padding: 0;
    page-break-after: avoid;
    break-after: avoid;
}

/* Förhindra ensamma rubriker längst ner på sida */
h3 + p, h3 + figure, h3 + .info-box-blue,
h4 + p, h4 + figure, h4 + .info-box-blue {
    page-break-before: avoid;
    break-before: avoid;
}

/* =========================================
   TYPOGRAFI - BRODTEXT
   ========================================= */
p {
    margin: 0 0 12px 0;
    font-size: 11px;
    line-height: 1.75;
    text-align: justify;
    hyphens: auto;
    orphans: 3;
    widows: 3;
}

p:last-child {
    margin-bottom: 0;
}

/* Bra avstand efter rubriker */
h3 + p,
h4 + p {
    margin-top: 0;
}

/* =========================================
   SIDA 1 - OMSLAG
   ========================================= */
.page-one .window-body {
    text-align: center;
    padding: 30px 40px;
}

.page-one h1,
.hard-copy-title {
    font-size: 32px;
    margin: 20px 0 12px 0;
    letter-spacing: 2px;
    font-weight: bold;
}

.page-one .subtitle {
    font-style: italic;
    font-size: 14px;
    color: #444;
    margin: 12px 0;
    text-align: center;
}

.page-one .author {
    font-size: 12px;
    color: #333;
    margin: 16px 0 8px 0;
    font-weight: 500;
    text-align: center;
}

.page-one .date {
    font-size: 11px;
    color: #555;
    margin: 4px 0 20px 0;
    text-align: center;
}

.page-one .hero-image {
    margin: 24px 0;
}

.page-one .hero-image img {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    border: 2px inset var(--window-border-dark);
}

.page-one .hero-image figcaption {
    font-size: 10px;
    color: #555;
    margin-top: 10px;
    font-style: italic;
}

/* =========================================
   LISTOR
   ========================================= */
ul, ol {
    padding-left: 28px;
    margin: 12px 0;
}

li {
    margin: 8px 0;
    font-size: 11px;
    line-height: 1.65;
}

li p {
    margin: 0;
}

/* Innehallsforteckning */
.window-body > ul:first-child {
    list-style: none;
    padding-left: 0;
}

.window-body > ul:first-child ul {
    list-style: none;
    padding-left: 20px;
}

.window-body > ul:first-child li {
    margin: 6px 0;
}

.window-body > ul:first-child a {
    text-decoration: none;
    color: var(--text-color);
}

.window-body > ul:first-child a:hover {
    text-decoration: underline;
    color: var(--accent-blue);
}

/* =========================================
   BILDER OCH FIGURER
   ========================================= */
figure {
    margin: 20px 0;
    padding: 0;
    text-align: center;
    page-break-inside: avoid;
}

figure img {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    border: 2px inset var(--window-border-dark);
    display: block;
    margin: 0 auto;
}

figcaption {
    font-size: 10px;
    color: #555;
    margin-top: 8px;
    font-style: italic;
    line-height: 1.4;
}

img {
    max-width: 100%;
    height: auto;
    border: 2px inset var(--window-border-dark);
}

/* =========================================
   KOD OCH TERMINAL
   ========================================= */
pre {
    background: #000000;
    color: #00ff00;
    font-family: "Ubuntu Mono", "Consolas", "Courier New", monospace;
    font-size: 9px;
    line-height: 1.4;
    padding: 14px 16px;
    margin: 16px 0;
    border: 2px solid #00ff00;
    white-space: pre-wrap;
    word-wrap: break-word;
    page-break-inside: avoid;
    overflow-x: auto;
}

pre::before {
    content: "C:\\HARDCOPY>";
    color: #888888;
    display: block;
    margin-bottom: 8px;
}

pre code {
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    border: none;
}

pre.ascii-art {
    font-size: 7px;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

pre.ascii-art::before {
    display: none;
}

code {
    background: #e8e8e8;
    border: 1px inset var(--window-border-dark);
    padding: 2px 5px;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 10px;
}

/* =========================================
   TABELLER
   ========================================= */
table {
    border-collapse: collapse;
    width: 100%;
    background: white;
    border: 2px inset var(--window-border-dark);
    margin: 16px 0;
    font-size: 10px;
}

th {
    background: var(--accent-blue);
    color: white;
    padding: 8px 12px;
    text-align: left;
    font-weight: bold;
}

td {
    padding: 8px 12px;
    border: 1px solid #c0c0c0;
}

tr:nth-child(even) td {
    background: #f5f5f5;
}

/* =========================================
   INFO-RUTOR
   ========================================= */
.info-box-blue {
    background: #f8f9fa;
    border: 1px solid #c0c0c0;
    border-left: 4px solid var(--accent-blue);
    padding: 14px 18px 14px 44px;
    margin: 18px 0;
    position: relative;
    page-break-inside: avoid;
}

.info-box-blue::before {
    content: "i";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--accent-blue);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-box-blue p {
    margin: 0;
    font-style: italic;
    color: #333;
    text-align: left;
}

blockquote {
    background: #fffde7;
    border: 2px outset var(--window-border-light);
    border-left: 4px solid #ffc107;
    padding: 14px 18px 14px 40px;
    margin: 18px 0;
    position: relative;
}

blockquote::before {
    content: "!";
    position: absolute;
    left: 10px;
    top: 14px;
    width: 20px;
    height: 20px;
    background: #ffc107;
    color: white;
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
}

blockquote p {
    margin: 0;
    text-align: left;
}

/* =========================================
   LANKAR
   ========================================= */
a {
    color: var(--link-color);
    text-decoration: underline;
}

a:hover {
    color: #ff0000;
}

/* =========================================
   BETONING
   ========================================= */
em {
    font-style: italic;
}

strong {
    font-weight: bold;
    color: var(--accent-blue);
}

sup {
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 9px;
}

/* =========================================
   HORISONTELL LINJE
   ========================================= */
hr {
    border: none;
    border-top: 1px solid #a0a0a0;
    border-bottom: 1px solid #ffffff;
    margin: 24px 0;
}

/* =========================================
   FOTNOTER
   ========================================= */
aside.footnotes,
section.footnotes {
    background: var(--window-gray);
    border: 2px outset var(--window-border-light);
    padding: 12px;
    margin: 30px -20px 0 -20px;
    font-size: 9px;
}

aside.footnotes::before,
section.footnotes::before {
    content: "Fotnoter";
    display: block;
    background: linear-gradient(90deg, var(--title-blue-start), var(--title-blue-end));
    color: white;
    padding: 4px 8px;
    margin: -12px -12px 12px -12px;
    font-weight: bold;
    font-size: 11px;
}

aside.footnotes ol,
section.footnotes ol {
    background: white;
    border: 2px inset var(--window-border-dark);
    padding: 12px 12px 12px 32px;
    margin: 0;
}

aside.footnotes li,
section.footnotes li {
    margin: 6px 0;
    line-height: 1.5;
}

/* =========================================
   TACK-TEXT
   ========================================= */
.thanks {
    font-size: 10px;
    color: #666;
    font-style: italic;
    margin-top: 20px;
    text-align: center;
}

/* =========================================
   STATUSBAR (for skarm)
   ========================================= */
.status-bar {
    background: var(--window-gray);
    border-top: 1px solid var(--window-border-dark);
    padding: 3px 6px;
    font-size: 10px;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
}

.status-bar-field {
    border: 1px inset var(--window-border-dark);
    padding: 2px 6px;
    background: var(--window-gray);
}

/* =========================================
   DESKTOP-IKONER (for skarm)
   ========================================= */
.desktop-icons {
    position: fixed;
    right: 20px;
    top: 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.desktop-icon {
    text-align: center;
    width: 70px;
}

.desktop-icon img {
    width: 32px;
    height: 32px;
    border: none;
    margin: 0 auto 6px;
}

.desktop-icon span {
    font-size: 10px;
    color: white;
    text-shadow: 1px 1px 2px black;
}

/* =========================================
   TASKBAR (for skarm)
   ========================================= */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: var(--window-gray);
    border-top: 2px outset var(--window-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
}

.taskbar .start-btn {
    background: var(--window-gray);
    border: 2px outset var(--window-border-light);
    padding: 3px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    font-size: 11px;
}

.taskbar .start-btn img {
    width: 16px;
    height: 16px;
    border: none;
}

.taskbar .clock {
    background: var(--window-gray);
    border: 1px inset var(--window-border-dark);
    padding: 3px 10px;
    font-size: 11px;
}

/* =========================================
   PRINT-SPECIFIKT
   ========================================= */
@media print {
    @page {
        margin: 12mm 10mm;
        background: var(--rosa-bg);
    }

    body {
        background: var(--rosa-bg);
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }

    .window {
        box-shadow: none;
    }

    .title-bar {
        background: linear-gradient(90deg, var(--title-blue-start), var(--title-blue-end));
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }

    h2 {
        background: linear-gradient(90deg, var(--title-blue-start), var(--title-blue-end));
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }

    pre {
        background: #000000;
        color: #00ff00;
        border: 2px solid #00ff00;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }

    th {
        background: var(--accent-blue);
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }

    .info-box-blue::before {
        background: var(--accent-blue);
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }

    /* Dolj skarm-element */
    .desktop-icons,
    .taskbar {
        display: none;
    }

    /* Undvik deadspace */
    .window-body {
        orphans: 4;
        widows: 4;
    }

    p {
        orphans: 3;
        widows: 3;
    }

    figure {
        page-break-inside: avoid;
    }

    h3, h4 {
        page-break-after: avoid;
    }

    pre {
        page-break-inside: avoid;
    }

    table {
        page-break-inside: avoid;
    }

    a {
        color: var(--link-color);
        text-decoration: underline;
    }
}