/* GS Remap homepage: an Apple IIgs desktop in a browser. */

@font-face {
    font-family: "Shaston";
    src: url("fonts/Shaston640.ttf") format("truetype");
    font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --ink: #000;
    --paper: #fff;
    --desk-a: #7777ff;
    --desk-b: #bbbbff;
    --dim: #888;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 56px;
    min-height: 100%;
    /* Same blue behind the page, so nothing dark shows when scrolling past either end. */
    background: repeating-linear-gradient(90deg, var(--desk-a) 0 2px, var(--desk-b) 2px 4px);
}

body {
    font-family: "Shaston", "Geneva", "Verdana", sans-serif;
    font-size: 24px;
    line-height: 1.25;
    color: var(--ink);
    /* The IIgs desktop blue is two colours in alternate columns of 640 mode pixels. */
    background: repeating-linear-gradient(90deg, var(--desk-a) 0 2px, var(--desk-b) 2px 4px);
    -webkit-font-smoothing: none;
    font-smooth: never;
    padding: 64px 16px 40px;
}

a { color: inherit; }

/* Menu bar */
.menubar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
}
.menubar a {
    display: flex;
    align-items: center;
    padding: 4px 14px;
    text-decoration: none;
    white-space: nowrap;
}
.menubar a:hover, .menubar a:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.menubar img { width: 24px; height: 24px; image-rendering: pixelated; display: block; }

/* Desktop layout */
.desktop {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
    align-items: start;
}

/* Windows */
.window {
    grid-column: span 12;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    min-width: 0;
}
.window > h1, .window > h2 {
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    padding: 3px 10px 1px;
    border-bottom: 2px solid var(--ink);
}
.window.active > h1, .window.active > h2 { background: var(--ink); color: var(--paper); }
.window .body { padding: 14px 18px 18px; }
.window .body > * + * { margin-top: 12px; }
.half { grid-column: span 6; }
.third { grid-column: span 4; }
.two-thirds { grid-column: span 8; }

.hero { display: flex; gap: 22px; align-items: center; }
.hero img { width: 160px; height: 160px; flex: none; image-rendering: pixelated; }
.hero .name { font-size: 48px; line-height: 1; }
.lead { font-size: 26px; }

/* IIgs push buttons */
.buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button {
    display: inline-block;
    padding: 3px 22px 1px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    text-decoration: none;
    white-space: nowrap;
}
.button.default { border-width: 5px; }
.button:hover, .button:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.button.dim { color: var(--dim); border-color: var(--dim); border-style: dashed; cursor: default; }
.button.dim:hover { background: var(--paper); color: var(--dim); }

/* Lists with one inverse-video row, like the Load formats window */
.list { list-style: none; border: 2px solid var(--ink); }
.list li { padding: 1px 8px 0; }
.list li.selected { background: var(--ink); color: var(--paper); }
.plain { list-style: none; }
.plain li { padding-left: 1.1em; text-indent: -1.1em; }
.plain li::before { content: "\25B6\00a0"; font-size: 0.6em; vertical-align: middle; }

.shot { display: block; width: 100%; height: auto; border: 2px solid var(--ink); image-rendering: pixelated; }
.caption { margin-top: 6px; }

.radio { display: flex; gap: 8px; align-items: baseline; }
.radio::before {
    content: "";
    flex: none;
    width: 14px; height: 14px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    align-self: center;
}
.radio.on::before { background: radial-gradient(circle, var(--ink) 0 38%, var(--paper) 42%); }

.small { font-size: 20px; }
.dimmed { color: var(--dim); }

footer.window .body { text-align: center; }
footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
/* Cross-links to the other apps (kept in sync with /index.html by the Check cross-links workflow) */
footer .links.apps { gap: 4px 16px; font-size: 0.9em; }

@media (max-width: 860px) {
    body { font-size: 22px; padding-top: 96px; }
    .half, .third, .two-thirds { grid-column: span 12; }
    .hero { flex-direction: column; text-align: center; }
    .hero .name { font-size: 40px; }
    .buttons { justify-content: center; }
    html { scroll-padding-top: 100px; }
}